/*
  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.

  2026-07-25: re-skinned with tokens.css's ported space/shadow/motion/
  z-index scale (Phase 2 of the web3.1 design-system merge). Structure,
  markup, and nav.js are untouched - this file only changes *values*,
  never introduces a bare web3.1 class name. Fine-tuned bespoke rem
  values (icon hit targets, small offset nudges) are left as literals
  rather than force-fit onto the spacing scale where no exact match
  exists - only genuinely exact matches were tokenized, to avoid a
  visual drift nobody asked for.
*/

.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: var(--z-header);
  background: var(--color-navy-deep);
  border-bottom: none;
  transition: background var(--m-normal) var(--ease-human), box-shadow var(--m-normal) var(--ease-human);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) clamp(var(--s-4), 4vw, var(--s-6));
  max-width: 90rem;
  margin: 0 auto;
  transition: padding var(--m-fast) var(--ease-human);
}

/*
  Scroll-linked header states (nav.js toggles these on [data-site-header]
  as .scrollY crosses three thresholds; "flush" = no modifier class = the
  baseline rules above, unchanged). Adapted from the source design chat's
  "transparent -> glass -> solid -> compact" concept: a literal transparent
  state assumed a dark hero image behind it (web3.1's original mockup had
  one); this site's real hero is plain light canvas, so a transparent
  header with light nav text would be illegible there. The header's
  navy-deep/light-text chrome stays constant (already contrast-verified)
  and only its presentation - opacity/blur/shadow/size - varies instead.
*/
.site-header--glass {
  background: var(--color-navy-deep-glass);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
}

.site-header--solid,
.site-header--compact {
  background: var(--color-navy-deep);
  box-shadow: var(--shadow-2);
}

.site-header--compact .site-header__bar {
  padding-top: var(--s-2);
  padding-bottom: var(--s-2);
}
.site-header--compact .site-header__logo img {
  height: clamp(1.9rem, 1.7rem + 0.8vw, 2.4rem);
}

/*
  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: var(--r-xs);
}

.site-header__logo img {
  height: clamp(2.5rem, 2.2rem + 1.2vw, 3.25rem);
  transition: height var(--m-fast) var(--ease-human);
  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: var(--r-xs);
}

.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 var(--m-fast) var(--ease-precision), opacity var(--m-fast) var(--ease-precision);
}
.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 var(--s-2);
}

.site-nav__panel-head {
  display: flex;
  padding: var(--s-2) var(--s-2) var(--s-4);
}

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

/* off-canvas nav panel (mobile default) */
.site-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--z-nav-panel);
  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 var(--m-normal) var(--ease-human);
  order: 4;
}
.site-nav.is-open {
  transform: translateX(0);
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0 var(--s-2) var(--s-5);
}
.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 var(--s-3);
  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 var(--m-fast) var(--ease-precision);
}
.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 var(--m-normal) var(--ease-human);
  padding-left: var(--s-3);
  border-left: 2px solid var(--color-tissue-line);
  margin-left: var(--s-3);
}
.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: var(--s-1);
  margin-left: var(--s-2);
  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: var(--s-1);
    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: var(--s-2);
    border: 1px solid var(--color-tissue-line);
    background: var(--color-field-white);
    box-shadow: var(--shadow-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--m-fast) var(--ease-human), transform var(--m-fast) var(--ease-human), visibility var(--m-fast);
  }

  .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;
  }

  /* Wider grid treatment for branches with 5+ direct children (currently
     just "Information", 7 items) - a compact single-column dropdown reads
     as sparse for 3-item branches (Doctor/Activities) but cramped for 7,
     so this scales the panel by actual content rather than uniformly.
     :has() keeps it content-count-based rather than tied to a fragile
     branch-order assumption (nth-child on the branch itself would break
     silently if NavData's order ever changes) - degrades gracefully to
     the existing single-column layout in any browser without :has()
     support, which is exactly what the 3-item branches want anyway. The
     child-count selector is scoped with a direct-child combinator so it
     counts only the branch's own immediate items, not items nested one
     level deeper inside a depth-2 sub-submenu (Patient Information and
     Partner Clinics both have one). */
  .site-nav__panel--depth-1:has(> .site-nav__list--depth-1 > .site-nav__item:nth-child(5)) {
    min-width: 34rem;
  }
  .site-nav__panel--depth-1:has(> .site-nav__list--depth-1 > .site-nav__item:nth-child(5)) > .site-nav__list--depth-1 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--s-5);
  }

  /* 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: var(--s-2);
    border: 1px solid var(--color-tissue-line);
    background: var(--color-field-white);
    box-shadow: var(--shadow-2);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-4px);
    transition: opacity var(--m-fast) var(--ease-human), transform var(--m-fast) var(--ease-human), visibility var(--m-fast);
  }
  .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;
  }
}