/* =========================================================================
   Component — site header and top navigation
   -------------------------------------------------------------------------
   The markup is produced once, in assets/js/site.js. Each page carries a
   MINIMAL static fallback inside the mount point so a public page stays
   navigable without JavaScript; site.js replaces it with the interactive
   chrome (drawer, dropdown, theme toggle, active state).

   Two variants:
     .site-header              themed — light/dark like the rest of the page
     .site-header.on-brand     white-on-gradient, for the splash hero

   THE HEADER IS A SURFACE, NOT THE PAGE (DESIGN_TOKENS.md §9.7)
   -------------------------------------------------------------------------
   It carried `--doc-bg` — the SAME value as the page behind it — with a 1 px
   border as its only separation. That is a bar which exists because a border
   says so. `--doc-panel` is the surface ground, so the chrome now reads as a
   plane the page runs under, in both themes, and the hairline frames a
   difference rather than inventing one. The six ground tokens were never the
   gap; the shapes were.
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--doc-panel);
  border-bottom: 1px solid var(--doc-line);
}

.site-header.on-brand {
  position: relative;
  background: transparent;
  border-bottom: 0;
  color: var(--brand-on-dark);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  flex-wrap: wrap;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.site-brand img {
  height: 34px;
  width: auto;
}

/* --- The wordmark is not here any more ----------------------------------- *
 * The theme-aware pair and its print swap moved to `components/wordmark.css`
 * in U-732. The argument that put them here — "every page that has chrome
 * links nav.css, and a file of its own would be a fourth <link> on 31 pages
 * for two rules" — held only while every page carrying the mark also carried
 * chrome. The six auth pages carry the mark and no chrome, so the caller set
 * outgrew the file. What stays here is the SIZING of whatever the brand link
 * holds, which really is the header's business.                            */

.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: var(--nav-h);
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--doc-ink-soft);
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
}

.nav-link:hover {
  color: var(--doc-ink);
  background: var(--sd-surface-alt);
  text-decoration: none;
}

/* THE CURRENT PAGE IS MARKED BY A RAIL, NOT BY A PLATE (DESIGN_TOKENS.md §9.7).
   Two pixels of the brand colour under the label, and the label in it — the
   accent marks one item instead of filling one.
 *
 * An inset box-shadow is a LINE here, not elevation: D-8 forbids a shadow that
 * lifts something off the document, and reserves the drawn edge for exactly
 * this. It is a shadow rather than a border because a border would change the
 * link's box and shift every sibling by two pixels when the page changes.
 *
 * Measured against `--doc-panel`, the ground it now sits on: 5.86:1 in light
 * (#027261 on #FFFFFF) and 6.58:1 in dark (#3ECF9E on #313131). WCAG 1.4.11
 * asks 3:1 of a non-text indicator and 1.4.3 asks 4.5:1 of the 14.5 px label;
 * the same pair answers both. `aria-current="page"` carries the state for a
 * reader who sees no colour at all (audit rule E-4). */
.nav-link[aria-current="page"] {
  color: var(--sd-secondary);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--sd-secondary);
  border-radius: var(--radius) var(--radius) 0 0;
}

.nav-link svg {
  width: 15px;
  height: 15px;
}

.on-brand .nav-link {
  color: var(--brand-on-dark);
}

.on-brand .nav-link:hover {
  color: var(--brand-on-dark);
  background: color-mix(in srgb, var(--brand-on-dark) 16%, transparent);
}

/* The same rail on the one surface that stays dark in both themes, in the ink
   that surface uses. The translucent plate it replaces was the brand-hero
   version of the same habit: a filled area saying what a line says.
 *
 * IT HAS NO REACHABLE CALLER TODAY, and that is said here rather than left for
 * somebody to discover. `data-variant="brand"` is on `index.html` alone, and
 * `index.html` is not in `NAV` — so `isCurrent` never returns true inside an
 * `.on-brand` header. The rule predates this pass in the same unreachable state
 * (it set a colour and a plate) and it is kept rather than deleted, because
 * without it the next page to carry the brand header would inherit the themed
 * rule above and paint a teal rail on a teal gradient. A dead rule that is
 * named is cheaper than a live one that is wrong. */
.on-brand .nav-link[aria-current="page"] {
  color: var(--brand-on-dark);
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--brand-on-dark);
}

/* --- Dropdown ------------------------------------------------------------ */

.nav-dropdown {
  position: relative;
}

.nav-dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  padding: 8px;
  background: var(--doc-panel);
  border: 1px solid var(--doc-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
}

.nav-dropdown.is-open .nav-dd-menu {
  display: flex;
}

.nav-dropdown.is-open .nav-dd-toggle svg {
  transform: rotate(180deg);
}

.nav-dd-menu a {
  padding: 9px 12px;
  border-radius: var(--radius);
  color: var(--doc-ink);
  font-size: 14px;
  font-weight: 500;
}

.nav-dd-menu a:hover {
  background: var(--sd-surface-alt);
  text-decoration: none;
}

/* --- Call to action and utilities ---------------------------------------- */

.nav-cta {
  margin-left: 8px;
}

.on-brand .nav-cta {
  background: var(--brand-mint);
  color: var(--brand-mint-ink);
}

.on-brand .nav-cta:hover {
  background: var(--brand-mint-hover);
  color: var(--brand-mint-ink);
}

.nav-utils {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}

.theme-toggle {
  width: var(--control-h);
  height: var(--control-h);
}

/* --- Mobile drawer ------------------------------------------------------- */

.nav-burger {
  display: none;
  margin-left: auto;
  width: var(--control-h);
  height: var(--control-h);
}

@media (max-width: 900px) {
  .nav-burger {
    display: inline-flex;
  }

  .nav-list {
    position: absolute;
    top: 100%;
    left: clamp(12px, 4vw, 24px);
    right: clamp(12px, 4vw, 24px);
    z-index: 45;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-left: 0;
    padding: 10px;
    background: var(--doc-panel);
    border: 1px solid var(--doc-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    display: none;
  }

  .nav-list.is-open {
    display: flex;
  }

  .nav-link,
  .on-brand .nav-link {
    color: var(--doc-ink);
    font-size: 15px;
  }

  /* The rail turns with the menu. Under a full-width row in a vertical drawer
     a bottom rail reads as a separator between two items rather than as a mark
     on one, so it moves to the leading edge — the same two pixels, the same
     token, the sidebar's orientation. */
  .nav-link[aria-current="page"] {
    box-shadow: inset 2px 0 0 var(--sd-secondary);
    border-radius: var(--radius);
  }

  .on-brand .nav-link:hover {
    color: var(--doc-ink);
    background: var(--sd-surface-alt);
  }

  /* In the drawer the link sits on `--doc-panel`, not on the gradient, so the
     rail would be the THEMED accent here and not `--brand-on-dark` — which
     would be a white line on a white panel. The narrow layout is the one where
     the brand variant stops being a brand surface.
     Unreachable today for the reason given above: no page with the brand header
     is in `NAV`. It is written for the same reason as its wide sibling. */
  .on-brand .nav-link[aria-current="page"] {
    color: var(--sd-secondary);
    background: transparent;
    box-shadow: inset 2px 0 0 var(--sd-secondary);
  }

  .nav-dropdown {
    position: static;
  }

  .nav-dd-menu {
    position: static;
    display: flex;
    min-width: 0;
    padding: 0 0 4px 12px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  /* The links below are always visible in the drawer, so a disclosure toggle
     for them would be a focusable no-op reporting aria-expanded="false" over
     content that is already on screen. Hide the control and keep the links —
     site.js gives the group its own role="group" + aria-label, so the name
     survives the toggle disappearing. */
  .nav-dd-toggle {
    display: none;
  }

  .nav-dd-menu {
    border-left: 1px solid var(--doc-line);
  }

  .nav-cta,
  .nav-utils {
    margin-left: 0;
    margin-top: 6px;
  }

  /* Without JavaScript the drawer never opens, so the static fallback nav
     must stay laid out inline rather than in a hidden panel. */
  .nav-list-static {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    margin-left: 0;
  }
}