/**
 * Intellepedia Mega Nav — accessible, responsive header navigation
 * Twenty Sixteen Child v2
 *
 * Layers: tokens → header shell → desktop nav + panels → search → mobile drawer → a11y/motion
 * Brand accent darkened to #b8430d (>=4.5:1 on white) to meet WCAG 2.1 AA for text.
 */

/* ============================================================
   1. Tokens
   ============================================================ */
.ip-header {
  --ip-ink:        #1a1a1a;   /* primary text / UI */
  --ip-ink-soft:   #4a4a4a;   /* secondary text */
  --ip-accent:     #b8430d;   /* AA-compliant brand orange (text/links) */
  --ip-accent-lg:  #d35400;   /* original orange — large/non-text use only */
  --ip-line:       #e4e4e4;   /* hairlines */
  --ip-line-soft:  #f0f0f0;
  --ip-bg:         #ffffff;
  --ip-bg-alt:     #fafafa;
  --ip-panel-sh:   0 12px 28px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --ip-bar-h:      72px;
  --ip-bar-h-sm:   56px;      /* condensed on scroll */
  --ip-radius:     10px;
  --ip-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ip-ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   2. Header shell (sticky + condense)
   ============================================================ */
.ip-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--ip-bg);
  border-bottom: 1px solid var(--ip-line);
  font-family: var(--ip-font);
  -webkit-font-smoothing: antialiased;
}
.ip-header.is-scrolled {
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  border-bottom-color: transparent;
}

.ip-header__bar {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: var(--ip-bar-h);
  transition: height .25s var(--ip-ease);
}
.ip-header.is-scrolled .ip-header__bar { height: var(--ip-bar-h-sm); }

/* Brand */
.ip-header__brand { display: flex; flex-direction: column; justify-content: center; line-height: 1.1; flex: 0 0 auto; }
.ip-logo {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ip-ink);
  text-decoration: none;
  transition: font-size .25s var(--ip-ease);
}
.ip-header.is-scrolled .ip-logo { font-size: 21px; }
.ip-logo:hover, .ip-logo:focus-visible { color: var(--ip-accent); }
.ip-logo__tag {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ip-ink-soft); margin-top: 2px;
}
.ip-header.is-scrolled .ip-logo__tag { display: none; }

/* ============================================================
   3. Desktop nav + dropdown panels
   ============================================================ */
.ip-nav { flex: 1 1 auto; }
.ip-nav__list {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin: 0; padding: 0;
  list-style: none;
}
.ip-nav__item { position: relative; display: flex; }

/* top-level toggle (button = real, focusable, announces state) */
.ip-nav__top {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--ip-bar-h);
  padding: 0 14px;
  font: 600 15px/1 var(--ip-font);
  color: var(--ip-ink);
  background: none; border: 0; cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s, height .25s var(--ip-ease);
}
.ip-header.is-scrolled .ip-nav__top { height: var(--ip-bar-h-sm); }
.ip-nav__top:hover { color: var(--ip-accent); }
.ip-nav__item.is-open > .ip-nav__top { color: var(--ip-accent); border-bottom-color: var(--ip-accent); }
.ip-nav__chev { width: 12px; height: 12px; transition: transform .2s var(--ip-ease); }
.ip-nav__item.is-open > .ip-nav__top .ip-nav__chev { transform: rotate(180deg); }

/* panel (hidden via visibility => removed from tab order, animatable) */
.ip-panel {
  position: absolute;
  top: 100%; left: 0;
  min-width: 480px;
  background: var(--ip-bg);
  border: 1px solid var(--ip-line);
  border-radius: var(--ip-radius);
  box-shadow: var(--ip-panel-sh);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s var(--ip-ease), transform .18s var(--ip-ease), visibility 0s linear .18s;
  z-index: 1001;
}
.ip-nav__item.is-open > .ip-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .18s var(--ip-ease), transform .18s var(--ip-ease), visibility 0s;
}
.ip-panel__inner { display: grid; grid-template-columns: minmax(210px, 1fr) 1px 220px; gap: 0; padding: 18px; }

.ip-panel__links { padding-right: 18px; }
.ip-panel__all {
  display: inline-block; font-weight: 700; font-size: 14px; color: var(--ip-accent);
  text-decoration: none; margin-bottom: 10px;
}
.ip-panel__all:hover, .ip-panel__all:focus-visible { text-decoration: underline; }
.ip-panel__heading {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ip-ink-soft); margin: 0 0 8px;
}
.ip-panel__subs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ip-panel__subs a {
  display: block; padding: 7px 10px; border-radius: 6px;
  font-size: 14px; color: var(--ip-ink); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .12s, color .12s;
}
.ip-panel__subs a:hover, .ip-panel__subs a:focus-visible { background: var(--ip-bg-alt); color: var(--ip-accent); }

.ip-panel__divider { background: var(--ip-line-soft); }

/* latest card */
.ip-panel__latest {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px; margin-left: 18px;
  background: var(--ip-bg-alt); border-radius: 8px;
  text-decoration: none; transition: background .12s;
}
.ip-panel__latest:hover, .ip-panel__latest:focus-visible { background: #f3f3f3; }
.ip-panel__latest-label {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ip-accent);
}
.ip-panel__latest-title { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ip-ink); }
.ip-panel__latest-date { font-size: 12px; color: var(--ip-ink-soft); }

/* mega panel (Topics) — balanced multi-column pack (no empty grid cells) */
.ip-panel--mega { left: auto; right: 0; min-width: 0; width: min(680px, 92vw); }
.ip-panel--mega .ip-panel__inner { display: block; padding: 20px 22px; }
.ip-mega-grid { column-count: 3; column-gap: 30px; }
.ip-mega-group { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin: 0 0 18px; display: inline-block; width: 100%; }
.ip-mega-group__title {
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ip-ink); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--ip-accent);
}
.ip-mega-group ul { list-style: none; margin: 0; padding: 0; }
.ip-mega-group li { margin: 0 0 3px; }
.ip-mega-group a {
  display: block; padding: 5px 6px; border-radius: 5px;
  font-size: 13.5px; color: var(--ip-ink); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ip-mega-group a:hover, .ip-mega-group a:focus-visible { background: var(--ip-bg-alt); color: var(--ip-accent); }
.ip-mega__foot {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ip-line);
}
.ip-mega__foot a { font-weight: 700; font-size: 14px; color: var(--ip-accent); text-decoration: none; }
.ip-mega__foot a:hover, .ip-mega__foot a:focus-visible { text-decoration: underline; }

/* ============================================================
   4. Search
   ============================================================ */
.ip-search { flex: 0 0 auto; display: flex; align-items: center; position: relative; }
.ip-search__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: none; border: 0; cursor: pointer; color: var(--ip-ink);
  transition: background .12s, color .12s;
}
.ip-search__toggle:hover { background: var(--ip-bg-alt); color: var(--ip-accent); }
.ip-search__toggle svg { width: 20px; height: 20px; }
.ip-search__form {
  position: absolute; top: calc(100% + 8px); right: 0;
  display: flex; align-items: center; gap: 6px;
  background: var(--ip-bg); border: 1px solid var(--ip-line); border-radius: var(--ip-radius);
  box-shadow: var(--ip-panel-sh); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s var(--ip-ease), transform .18s var(--ip-ease), visibility 0s linear .18s;
  z-index: 1001;
}
.ip-search.is-open .ip-search__form {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .18s var(--ip-ease), transform .18s var(--ip-ease), visibility 0s;
}
.ip-search__input {
  width: 280px; max-width: 60vw; height: 40px; padding: 0 12px;
  font-size: 15px; color: var(--ip-ink);
  border: 1px solid var(--ip-line); border-radius: 8px; background: var(--ip-bg);
}
.ip-search__input:focus-visible { outline: 2px solid var(--ip-accent); outline-offset: 1px; border-color: var(--ip-accent); }
.ip-search__submit {
  height: 40px; padding: 0 14px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--ip-ink); color: #fff; font: 600 14px var(--ip-font);
}
.ip-search__submit:hover { background: #000; }

/* ============================================================
   5. Hamburger + mobile drawer
   ============================================================ */
.ip-nav-toggle { display: none; }
.ip-scrim { display: none; }

@media (max-width: 1023px) {
  .ip-header__bar { gap: 12px; }
  .ip-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    order: 3; width: 44px; height: 44px; margin-left: auto;
    background: none; border: 0; cursor: pointer; color: var(--ip-ink);
    position: relative; z-index: 1003; /* keep the X clickable above the drawer */
  }
  .ip-nav-toggle__box { position: relative; width: 24px; height: 16px; }
  .ip-nav-toggle__box span,
  .ip-nav-toggle__box::before,
  .ip-nav-toggle__box::after {
    content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px;
    transition: transform .22s var(--ip-ease), opacity .15s var(--ip-ease), top .22s var(--ip-ease);
  }
  .ip-nav-toggle__box span { top: 7px; }
  .ip-nav-toggle__box::before { top: 0; }
  .ip-nav-toggle__box::after  { top: 14px; }
  .ip-header.is-drawer-open .ip-nav-toggle__box span { opacity: 0; }
  .ip-header.is-drawer-open .ip-nav-toggle__box::before { top: 7px; transform: rotate(45deg); }
  .ip-header.is-drawer-open .ip-nav-toggle__box::after  { top: 7px; transform: rotate(-45deg); }

  .ip-search { order: 2; margin-left: auto; }
  .ip-search__form { right: -8px; }

  /* drawer */
  .ip-nav {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(86vw, 360px);
    background: var(--ip-bg);
    box-shadow: -8px 0 30px rgba(0,0,0,.18);
    transform: translateX(100%);
    visibility: hidden; /* keep closed drawer out of the screen-reader/tab order */
    transition: transform .28s var(--ip-ease), visibility 0s linear .28s;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 76px 0 32px;
    z-index: 1002;
  }
  .ip-header.is-drawer-open .ip-nav {
    transform: translateX(0);
    visibility: visible;
    transition: transform .28s var(--ip-ease), visibility 0s;
  }
  .ip-scrim {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.42);
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s linear .25s; z-index: 1001;
  }
  .ip-header.is-drawer-open .ip-scrim { opacity: 1; visibility: visible; transition: opacity .25s; }

  .ip-nav__list { flex-direction: column; gap: 0; align-items: stretch; }
  .ip-nav__item { flex-direction: column; }
  .ip-nav__top {
    height: auto; width: 100%; justify-content: space-between;
    padding: 16px 22px; font-size: 17px; border-bottom: 1px solid var(--ip-line-soft);
    border-left: 3px solid transparent;
  }
  .ip-nav__item.is-open > .ip-nav__top { border-bottom-color: transparent; border-left-color: var(--ip-accent); background: var(--ip-bg-alt); }

  /* panels become in-flow accordions */
  .ip-panel {
    position: static; min-width: 0; width: 100%;
    border: 0; border-radius: 0; box-shadow: none; background: var(--ip-bg-alt);
    transform: none; opacity: 1; visibility: hidden;
    max-height: 0; overflow: hidden;
    transition: max-height .28s var(--ip-ease), visibility 0s linear .28s;
  }
  .ip-nav__item.is-open > .ip-panel {
    visibility: visible; max-height: 1400px; transform: none;
    transition: max-height .35s var(--ip-ease), visibility 0s;
  }
  .ip-panel__inner { display: block; padding: 8px 22px 18px; }
  .ip-panel__latest { margin-left: 0; margin-top: 12px; }
  .ip-panel--mega { right: auto; min-width: 0; width: 100%; }
  .ip-mega-grid { column-count: 1; }
}

@media (min-width: 1024px) {
  /* ensure drawer-only scrim never blocks desktop */
  .ip-scrim { display: none !important; }
}

/* ============================================================
   6. Accessibility & motion
   ============================================================ */
.ip-header :focus-visible {
  outline: 2px solid var(--ip-accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.ip-header .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ip-header *, .ip-nav, .ip-panel, .ip-search__form { transition: none !important; }
}
@media (prefers-contrast: more) {
  .ip-header { --ip-accent: #8f3208; --ip-line: #999; }
  .ip-nav__top, .ip-panel__subs a { outline: 1px solid transparent; }
}

/* JS-off fallback: panels expand on hover/focus so content stays reachable */
.no-js .ip-panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; }

/* ============================================================
   Overrides — neutralise inherited parent-theme button styling
   (Twenty Sixteen gives buttons a blue #007acc hover background)
   ============================================================ */
.ip-header button { background: transparent; box-shadow: none; }
.ip-header .ip-nav__top,
.ip-header .ip-nav__top:hover,
.ip-header .ip-nav__top:focus,
.ip-header .ip-nav__top:active { background: transparent !important; box-shadow: none; }
.ip-header .ip-nav__top:hover { color: var(--ip-accent); }
.ip-header .ip-nav-toggle,
.ip-header .ip-nav-toggle:hover,
.ip-header .ip-nav-toggle:focus { background: transparent !important; }
.ip-header .ip-search__toggle:hover,
.ip-header .ip-search__toggle:focus { background: var(--ip-bg-alt) !important; color: var(--ip-accent); }
.ip-header .ip-search__submit { background: var(--ip-ink) !important; color: #fff !important; }
.ip-header .ip-search__submit:hover { background: #000 !important; }