/*
  Nav component. Mobile-first: base rules are the off-canvas accordion
  menu; the desktop dropdown/flyout behavior lives entirely inside the
  1024px breakpoint below.

  Breakpoint is 1024px, gated on (hover: hover) and (pointer: fine) as
  well as width - a touch laptop above 1024px still gets the mobile
  tap-to-open pattern rather than a hover state it can't cleanly trigger
  (flagged as a deliberate addition beyond PAGE.md's literal breakpoint
  ask when this was signed off).

  Desktop panels open on :hover/:focus-within with no JS at all (that's
  the no-JS baseline); nav.js layers a JS-held .is-open class on top for
  the mouseleave delay, Escape handling, and aria-expanded sync. Mobile
  accordion state is JS-only (max-height starts at 0) since an off-canvas
  hamburger menu has no meaningful no-JS state to fall back to.
*/

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-navy-deep);
  border-bottom: none;
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem clamp(1rem, 4vw, 2rem);
  max-width: 90rem;
  margin: 0 auto;
}

/*
  Light plate behind the logo: logo-icon.svg (like logo-01.svg before it)
  is kept in its original, unmodified red/navy/gray (see memory: a logo
  recolor was proposed once and rejected on sight) - its navy (#0f436d)
  and gray (#333) elements measure under 1.5:1 contrast against the new
  --color-navy-deep header background, i.e. would nearly vanish without
  this. The plate solves it without touching the logo file at all.
*/
.site-header__logo {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
  background: var(--color-field-white);
  padding: 0.4rem;
  border-radius: 2px;
}

.site-header__logo img {
  height: clamp(2.5rem, 2.2rem + 1.2vw, 3.25rem);
  width: auto;
  display: block;
}

/* hamburger - mobile trigger, hidden at desktop breakpoint */
.nav-hamburger {
  order: 3;
  margin-left: auto;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  border-radius: 2px;
}

.nav-hamburger__bars,
.nav-hamburger__bars::before,
.nav-hamburger__bars::after {
  position: absolute;
  left: 50%;
  width: 1.5rem;
  height: 2px;
  background: var(--color-field-white);
  transform: translateX(-50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-hamburger__bars { top: 50%; margin-top: -1px; }
.nav-hamburger__bars::before { content: ''; top: -0.45rem; }
.nav-hamburger__bars::after { content: ''; top: 0.45rem; }

.nav-hamburger[aria-expanded='true'] .nav-hamburger__bars {
  background: transparent;
}
.nav-hamburger[aria-expanded='true'] .nav-hamburger__bars::before {
  top: 0;
  transform: translateX(-50%) rotate(45deg);
}
.nav-hamburger[aria-expanded='true'] .nav-hamburger__bars::after {
  top: 0;
  transform: translateX(-50%) rotate(-45deg);
}

.nav-hamburger--close {
  display: block;
  margin-left: auto;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-bone-ink);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.site-nav__panel-head {
  display: flex;
  padding: 0.5rem 0.5rem 1rem;
}

/* scrim / backdrop behind the mobile off-canvas panel */
.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 26, 33, 0.45);
  z-index: 90;
}
.nav-scrim[hidden] {
  display: none;
}

/* off-canvas nav panel (mobile default) */
.site-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 95;
  width: min(85vw, 22rem);
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  background: var(--color-field-white);
  box-shadow: -8px 0 24px rgba(20, 26, 33, 0.18);
  transform: translateX(100%);
  transition: transform 0.28s ease;
  order: 4;
}
.site-nav.is-open {
  transform: translateX(0);
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0 0.5rem 1.5rem;
}
.site-nav__list--depth-0 { padding-top: 0; }

.site-nav__row {
  display: flex;
  align-items: stretch;
}

.site-nav__link {
  flex: 1 1 auto;
  display: block;
  padding: 0.85rem 0.75rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--color-bone-ink);
  text-decoration: none;
}
.site-nav__list--depth-0 > .site-nav__item > .site-nav__row > .site-nav__link {
  font-weight: 600;
}
.site-nav__link:hover {
  color: var(--color-navy-mid);
}

.site-nav__toggle {
  flex: 0 0 auto;
  width: 2.75rem;
  border: none;
  background: transparent;
  color: var(--color-soft-tissue);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-nav__chevron {
  width: 0.7rem;
  height: 0.55rem;
  transition: transform 0.2s ease;
}
.site-nav__item.is-open > .site-nav__row > .site-nav__toggle .site-nav__chevron {
  transform: rotate(180deg);
}

/* mobile accordion: collapsed via max-height, JS-driven only */
.site-nav__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-tissue-line);
  margin-left: 0.75rem;
}
.site-nav__item.is-open > .site-nav__panel {
  max-height: 60rem; /* generous cap; real content is far shorter */
}

.locale-toggle {
  order: 2;
  display: flex;
  gap: 0.25rem;
  margin-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
}
.locale-toggle button {
  border: 1px solid var(--color-tissue-line);
  background: var(--color-field-white);
  color: var(--color-soft-tissue);
  padding: 0.3rem 0.55rem;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.locale-toggle button[aria-pressed='true'] {
  background: var(--color-navy-mid);
  border-color: var(--color-navy-mid);
  color: var(--color-field-white);
}

@media (prefers-reduced-motion: reduce) {
  .site-nav,
  .site-nav__panel,
  .nav-hamburger__bars,
  .nav-hamburger__bars::before,
  .nav-hamburger__bars::after,
  .site-nav__chevron {
    transition-duration: 0.001ms !important;
  }
}

/* ----------------------------------------------------------------
   Desktop: hover-capable pointer at >=1024px only. Below this, or on
   a touch device even at wide viewports, the mobile rules above stand.
   ---------------------------------------------------------------- */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .nav-hamburger,
  .site-nav__panel-head,
  .nav-scrim {
    display: none;
  }

  .site-header__bar {
    flex-wrap: nowrap;
  }

  .site-nav {
    position: static;
    z-index: auto;
    width: auto;
    height: auto;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    transform: none;
    transition: none;
    order: 2;
    flex: 1 1 auto;
  }

  .site-nav__list--depth-0 {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0;
  }

  .site-nav__list--depth-0 > .site-nav__item {
    position: relative;
  }

  .site-nav__list--depth-0 > .site-nav__item > .site-nav__row {
    align-items: center;
  }

  /* depth-0 links/toggle sit directly on the navy header bar at desktop
     (site-nav becomes position:static/transparent here - see below), so
     they need light text; depth-1/2 stay in their own field-white
     dropdown panels and keep the base (dark) colors untouched. Scoped
     with direct-child combinators (> ), not a plain descendant selector -
     depth-1/2 <ul>s are nested inside the depth-0 <ul> in the DOM (each
     .site-nav__panel sits inside a depth-0 <li>), so a bare
     ".site-nav__list--depth-0 .site-nav__link" would also match every
     nested dropdown link and paint them the same near-white as the top
     bar, making them invisible on their own white dropdown background -
     exactly what happened here once before this fix. */
  .site-nav__list--depth-0 > .site-nav__item > .site-nav__row > .site-nav__link {
    padding: 0.6rem 0.6rem;
    white-space: nowrap;
    color: rgba(243, 245, 246, 0.85);
  }
  .site-nav__list--depth-0 > .site-nav__item > .site-nav__row > .site-nav__link:hover {
    color: var(--color-field-white);
  }

  .site-nav__list--depth-0 > .site-nav__item > .site-nav__row > .site-nav__toggle {
    width: 1.25rem;
    padding-right: 0.25rem;
    color: rgba(243, 245, 246, 0.7);
  }

  /* primary dropdown (depth 1) - opens below the top-level item */
  .site-nav__panel--depth-1 {
    position: absolute;
    top: 100%;
    left: 0;
    max-height: none;
    overflow: visible;
    min-width: 16rem;
    margin: 0;
    padding: 0.5rem;
    border: 1px solid var(--color-tissue-line);
    background: var(--color-field-white);
    box-shadow: 0 12px 28px rgba(20, 26, 33, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  }

  .site-nav__item:hover > .site-nav__panel--depth-1,
  .site-nav__item:focus-within > .site-nav__panel--depth-1,
  .site-nav__item.is-open > .site-nav__panel--depth-1 {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .site-nav__panel--depth-1 .site-nav__list--depth-1 {
    display: block;
    padding: 0;
  }
  .site-nav__panel--depth-1 .site-nav__item {
    position: relative;
  }
  .site-nav__panel--depth-1 .site-nav__link {
    padding: 0.55rem 0.6rem;
    white-space: nowrap;
  }

  /* secondary flyout (depth 2) - opens to the right of its depth-1 parent,
     flips to the left via .site-nav__panel--flip when nav.js detects the
     default position would clip the viewport edge */
  .site-nav__panel--depth-2 {
    position: absolute;
    top: -0.5rem;
    left: 100%;
    max-height: none;
    overflow: visible;
    min-width: 15rem;
    margin: 0 0 0 0.35rem;
    padding: 0.5rem;
    border: 1px solid var(--color-tissue-line);
    background: var(--color-field-white);
    box-shadow: 0 12px 28px rgba(20, 26, 33, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  }
  .site-nav__panel--depth-2.site-nav__panel--flip {
    left: auto;
    right: 100%;
    margin: 0 0.35rem 0 0;
    transform: translateX(4px);
  }

  .site-nav__list--depth-1 > .site-nav__item:hover > .site-nav__panel--depth-2,
  .site-nav__list--depth-1 > .site-nav__item:focus-within > .site-nav__panel--depth-2,
  .site-nav__list--depth-1 > .site-nav__item.is-open > .site-nav__panel--depth-2 {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  .locale-toggle {
    order: 3;
  }
}