/* ===================================================================
   MASTHEAD — Unigrid-inspired identifier band. Borrows the *structural*
   logic NPS's own masthead uses (a solid, full-width, sticky bar with
   inverted text, wordmark + nav-adjacent controls in one row) — not
   NPS's specific visual elements. No arrowhead, no literal black fill
   (this one is Field Guide's own graphite --color-ink), no display
   typeface standing in for Rawlinson.

   Two variants, chosen via ComponentLoader.mountMasthead()'s spec.variant:

   — "design-system": tag text + light/dark toggle, wordmark links to
     design-system.html. For these reference pages only. Also mounts
     the hamburger menu (below) — a real button, not the profile icon
     (a "Profile menu" concept doesn't fit reference/dev pages) — so
     the icon-group and the toggle DO coexist on this variant.
   — "primary": no tag, no toggle, wordmark links to index.html (the
     real site root) — plus the profile icon and the hamburger menu
     (both real buttons) in the toggle's old position.

   Because "design-system" now mounts .masthead-icon-group (hamburger
   only) alongside .theme-toggle, the two right-side clusters are no
   longer mutually exclusive per variant the way they used to be — but
   both still carry margin-left:auto safely, since a second
   margin-left:auto sibling is a no-op once the first has already
   consumed the free space.

   Width is a separate, orthogonal axis from variant — spec.width:
   'constrained' (default) or 'full', stamped as data-masthead-width on
   the root. Search for that attribute below for the one rule it
   changes. Currently only ever passed as 'full' by search.html's own
   primary-variant mount call (and, on the near horizon per the
   Reference doc, the not-yet-built search-results page) — every
   design-system-variant reference page stays constrained by simply
   never passing it.

   Portable: pulls only from tokens.css, no dependency on field-guide.css
   or any page chrome.

   The single source of truth: all four real reference pages
   (design-system.html, colors.html, spacing.html, component-sandbox.html) mount
   this component via ComponentLoader.mountMasthead() instead of shipping
   hand-copied masthead markup. field-guide.css's former duplicate copy
   of these rules is gone — the same de-duplication tag-source.css went
   through earlier.

   The bar is full-bleed; .masthead-inner re-applies the same 760px/
   space-6 constraint the reference pages use for their own content, so
   the bar's content lines up with the page below on those pages. A
   consumer with a different content width only needs to override that
   one rule. Wordmark/tag/divider/icons are colored from --color-surface,
   not a hardcoded light value — since --color-surface is light in light
   mode and dark in dark mode (the same inversion --color-ink itself
   undergoes), the bar's text correctly re-inverts in both themes with
   no separate dark-mode override needed.
   =================================================================== */

.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-ink);
}

/* Design-system-variant sticky fix — makes .masthead's own
   position:sticky (above) actually take effect on design-system-variant
   pages, where it silently never had before. Root cause (Reference doc,
   Section 39, diagnosed and fixed once already for search.html's own
   stacked mode): a sticky element's "stuck" range is bounded by its own
   PARENT's box, and every consumer's real mount point — #masthead-mount,
   a bare div, by convention across all six pages — shrink-wraps to
   exactly .masthead's own height with no spare room. So .masthead's
   sticky range is zero: the parent's box has already fully scrolled
   past before the child could ever visibly stick, no matter how much
   page remains below. Fix: make the MOUNT POINT itself sticky instead
   (not .masthead a second time) — its own parent (<body>, real page
   height) has spare room to stick within, and since .masthead fills
   100% of this box either way, it visually sticks along with it.

   Scoped to the design-system variant only, via :has() plus the variant
   data attribute renderMasthead() now stamps on every masthead root
   (components.js) — deliberately NOT a blanket #masthead-mount rule,
   since that ID is used by primary-variant pages too (search.html,
   results.html), and making THOSE sticky here would silently do the
   primary variant's own still-queued, deliberately-unstarted sticky-
   masthead work (Reference doc, Phase 5 queue) as an unplanned side
   effect of this fix, not a real fix to it. */
#masthead-mount:has(> .masthead[data-masthead-variant="design-system"]) {
  position: sticky;
  top: 0;
  z-index: 10;
}

.masthead-inner {
  display: flex;
  align-items: center;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-6);
}

/* data-masthead-width="full" (ComponentLoader.mountMasthead()'s own
   spec.width option — see components.js) — a display mode of the
   *same* component, not a third variant: content, behavior, and markup
   are identical to the constrained default; only these two rules
   change. Overriding just max-width/margin (rather than writing a
   second .masthead-inner-full block) is deliberately the whole diff —
   the left/right padding stays var(--space-6) unchanged, because
   that's already the exact edge offset search.html's own map frame
   uses everywhere else (the icon stack, the filter card's left/bottom
   position, the attribution control's override margin — all
   var(--space-6), see search.css). The full-width masthead's wordmark/
   icons therefore land on precisely the same edge every other floating
   element on that page already aligns to, for free, without
   introducing a second edge-spacing value to keep in sync. */
.masthead[data-masthead-width="full"] .masthead-inner {
  max-width: none;
  margin: 0;
}

.masthead-wordmark {
  font-family: var(--font-ui);
  font-size: 1.1rem;
  font-weight: var(--w-semibold);
  color: var(--color-surface);
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
}

.masthead-wordmark:hover,
.masthead-wordmark:focus-visible {
  opacity: 0.85;
}

.masthead-divider {
  width: var(--border-width-hairline);
  align-self: stretch;
  background: var(--color-surface);
  opacity: 0.35;
  margin: 0 var(--space-4);
}

.masthead-tag {
  font-family: var(--font-ui);
  font-size: var(--ui-overline-size);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-surface);
  opacity: 0.7;
  white-space: nowrap;
}

/* ---- Theme toggle — "design-system" variant only ---- */

.theme-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-hairline) solid var(--color-hairline);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink-secondary);
  font-family: var(--font-ui);
  font-size: var(--ui-caption-size);
  font-weight: var(--w-medium);
  cursor: pointer;
  line-height: 1;
}

.theme-toggle:hover {
  /* Not --color-brand: brand aliases to --color-ink, and this toggle
     sits directly on the --color-ink masthead — an ink border would be
     literally invisible against the bar behind it in dark mode (both
     resolve to the same near-white). ink-secondary stays genuinely
     distinct from ink in both themes. */
  border-color: var(--color-ink-secondary);
  color: var(--color-ink);
}

.theme-toggle-icon {
  font-size: 0.95em;
}

/* ---- Reserved icons — hamburger (both variants), profile ("primary"
   variant only) ----
   Menu (hamburger) is a real, site-wide nav trigger
   (ComponentLoader.mountMenuHamburger(), components.js) — mounted on
   both variants, since site-wide nav (About Field Guide/Terms/
   Community resources/Contact us/Design System) fits the reference
   pages too, unlike a "Profile menu" concept. Real <button> chrome now
   (see .masthead-icon-hamburger below), not the old
   <span aria-hidden> placeholder.

   Profile ("primary" variant only) is also a real <button>, opening a
   dropdown from search.js/results.js's own initMenuProfile().

   Both icons share the --color-surface/opacity:0.7 "present, secondary
   against the ink bar" baseline below at rest — each one's own rule
   re-enables full opacity/pointer-events on top of that shared
   baseline (rather than the base .masthead-icon-btn rule changing for
   both). */

.masthead-icon-group {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Design-system variant only — real bug, found live and fixed here
   (Phase 5 batch 10, post-Phase-5 straggler), not a re-derivation of
   the file's own original reasoning above ("both still carry
   margin-left:auto safely, since a second margin-left:auto sibling is
   a no-op once the first has already consumed the free space"), which
   turned out to be wrong. Flexbox distributes a row's positive free
   space EQUALLY across every auto margin on that axis, not greedily to
   the first one — with both .theme-toggle and .masthead-icon-group
   independently carrying margin-left:auto, the masthead's own real free
   space was split between the two, landing the toggle roughly halfway
   across the bar with a real, visible ~200px gap on both sides
   (confirmed live via getBoundingClientRect() before writing this fix)
   instead of sitting flush beside the hamburger icon the way the
   primary variant's profile button already does. Scoped via the same
   [data-masthead-variant="design-system"] attribute the sticky-mount-
   point fix above already keys off (components.js's renderMasthead()):
   resets this element's own margin-left from auto to a fixed
   var(--space-4) — matching the gap this same rule already uses
   between the profile/hamburger icons themselves, so the toggle reads
   as one more item in that same evenly-spaced cluster, not a special
   case. .theme-toggle's own margin-left:auto is left completely
   unchanged — it's still the one thing pushing the whole
   toggle+icon-group pair to the bar's right edge as a unit; only the
   second, redundant auto margin is removed. The primary variant is
   unaffected: .theme-toggle doesn't exist there (removed by
   renderMasthead()), so .masthead-icon-group's own base margin-left:auto
   above is still exactly what pushes it to the right on its own. */
.masthead[data-masthead-variant="design-system"] .masthead-icon-group {
  margin-left: var(--space-4);
}

.masthead-icon-btn {
  box-sizing: border-box;
  position: relative;
  width: var(--space-5);
  height: var(--space-5);
  color: var(--color-surface);
  opacity: 0.7;
  pointer-events: none;
}

/* Hamburger — solid bars via box-shadow, not three separate elements or
   a border-based stack (same "solid fill, no stroke tricks" preference
   as tag-source's shapes: one real bar plus two shadow-drawn copies is
   fewer moving parts than three positioned elements). */
.masthead-icon-hamburger::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--space-4);
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

/* Now a real <button> (see file header) — reset the browser's own
   button chrome and re-enable the pointer-events/opacity
   .masthead-icon-btn's shared baseline turns off for both reserved
   icons by default, the exact same treatment .masthead-icon-profile
   below already uses. */
.masthead-icon-hamburger {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

.masthead-icon-hamburger:hover,
.masthead-icon-hamburger[aria-expanded="true"] {
  opacity: 0.85;
}

.masthead-icon-hamburger:focus-visible {
  outline: var(--border-width-active) solid var(--color-surface);
  outline-offset: 2px;
}

/* Profile — a ring (border-radius:50%, ordinary border, no cutout
   trick needed here) containing a head circle and a shoulders arc, both
   solid fills clipped to the ring by this element's own overflow:hidden.
   Literal px sizes below (not spacing tokens): sub-glyph proportions
   inside a fixed 20px (--space-5) icon box, same "deliberate literal"
   category as tag-source's diamond radius. */
.masthead-icon-profile {
  border-radius: 50%;
  border: var(--border-width-hairline) solid currentColor;
  overflow: hidden;
  /* Now a real <button> (see file header) — reset the browser's own
     button chrome (background/padding/font) rather than fight it, and
     re-enable the pointer-events/opacity .masthead-icon-btn's shared
     baseline turns off for both reserved icons by default. */
  background: none;
  padding: 0;
  font: inherit;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

.masthead-icon-profile:hover,
.masthead-icon-profile[aria-expanded="true"] {
  opacity: 0.85;
}

.masthead-icon-profile:focus-visible {
  outline: var(--border-width-active) solid var(--color-surface);
  outline-offset: 2px;
}

.masthead-icon-profile::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}

.masthead-icon-profile::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 15px;
  height: 9px;
  border-radius: 8px 8px 0 0;
  background: currentColor;
  transform: translateX(-50%);
}

/* ---- Hamburger menu — dropdown mounted by
   ComponentLoader.mountMenuHamburger() (components.js) ----
   Styled and positioned identically to search.js/results.js's own
   .menu-profile (search.css) — same real conventions, not an
   approximation: appended as a child of .masthead itself (already
   position:sticky, which establishes a containing block for an
   absolutely-positioned descendant the same as position:relative
   would), so top:100% gives "flush beneath the masthead" for free.
   Horizontal right-alignment is set inline by mountMenuHamburger()'s
   own positionMenu(), read live from the hamburger button's own
   getBoundingClientRect() at open time — not calc()'d from spacing
   tokens, for the same "can't silently drift out of sync" reason
   search.js's own comment gives for the profile menu. Right-aligned to
   THIS trigger's own position — independent of wherever the profile
   button (if present) happens to sit; the two menus never share an
   offset.

   This one lives here, in masthead.css, rather than page-scoped CSS
   like .menu-profile — the hamburger menu has six real consumers from
   the start (search.html, results.html, and all four reference pages),
   past NAMING.md's own "duplicate at a 2nd consumer, extract at a 3rd"
   threshold that kept the profile menu itself page-scoped at only two.

   Shape/scale, background, and shadow-clipping formula are copied
   verbatim from .menu-profile (search.css) — same --radius-card/
   --color-ink/--color-surface tokens, same card-filter box-shadow
   value, same squared-top/rounded-bottom corner treatment with the
   shadow clipped at the top edge so it can't bleed onto the masthead
   bar this dropdown sits flush against. See search.css's own .menu-profile
   comment for the full reasoning behind each of these values. */
.menu-hamburger {
  position: absolute;
  top: 100%;
  /* right is set inline by mountMenuHamburger()'s own positionMenu() */
  z-index: 20;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 200px;
  padding: var(--space-2);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: var(--color-ink);
  box-shadow: 0 var(--space-1) var(--space-2) color-mix(in srgb, var(--color-faint) 35%, transparent);
  clip-path: inset(0 -100vw -100vw -100vw);
}

.menu-hamburger[hidden] {
  display: none;
}

/* Five nav rows — four inert, one (.menu-hamburger-item on the
   Design System <a>) fully functional. All five share this one class:
   the inertness is purely "no click handler", not a different visual
   treatment, so a real link and four inert <button>s can look
   identical, matching .menu-profile-item's own "styled and focusable
   but no handler" convention (search.css). */
.menu-hamburger-item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-tag);
  background: none;
  color: var(--color-surface);
  font-family: var(--font-ui);
  font-size: var(--ui-body-sm-size);
  font-weight: var(--w-medium);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu-hamburger-item:hover,
.menu-hamburger-item:focus-visible {
  background: color-mix(in srgb, var(--color-surface) 15%, transparent);
}

.menu-hamburger-item:focus-visible {
  outline: var(--border-width-active) solid var(--color-surface);
  outline-offset: -2px;
}

.menu-hamburger-divider {
  height: var(--border-width-hairline);
  margin: var(--space-1) 0;
  background: var(--color-surface);
  opacity: 0.35;
}

/* ---- Narrow viewport ---- */

@media (max-width: 600px) {
  .masthead-tag,
  .masthead-divider {
    display: none;
  }
  .theme-toggle-label {
    display: none;
  }
}