/* public/partials/site-nav.css — SHARED top-nav styling for ALL surfaces (storefront +
   builder/admin/workflow). SELF-CONTAINED (its own F2 values, scoped to .f2-header) so it
   renders identically even on pages with a different palette (admin.css = USMC/Inter).

   Layout model: a flat BAR (non-tucked items) + a hamburger PANEL (tucked items, plus bar
   items that fold in as the viewport narrows). The toggle is ALWAYS shown (the panel always
   holds at least Contact). Interaction is inline-attribute driven from site-nav.js; visibility
   of the panel is the `hidden` attribute; the width-collapse is the media-query ladder below. */

/* Always reserve the classic-scrollbar gutter so the centered header (and page) don't jump
   sideways when moving between a page that scrolls (tall) and one that doesn't (short, e.g. an
   empty workflow queue). Loaded on all four surfaces, so the reserve is consistent everywhere. */
html { scrollbar-gutter: stable; }
.f2-header {
  --nav-navy: #032268;
  --nav-navy-2: #041a4d;      /* deeper navy for the panel surface */
  --nav-gold: #EEC011;
  --nav-white: #FFFFFF;
  --nav-maxw: 1200px;
  --nav-gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --nav-pill: 300px;
  --nav-fh: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --nav-fb: 'Epilogue', system-ui, -apple-system, sans-serif;
  /* .f2-header establishes the nav's stacking context, so the dropdown panel (z-index 60 below)
     can never paint above anything that outranks THIS element at the root. Admin's sticky
     .content-header is z-index 50 and later in the DOM, so at z-index:50 it tied and covered our
     open panel (the storefront has no such element, which is why only admin was affected). 150
     clears every surface's in-page sticky sub-header (admin .content-header 50, .cov-header 40,
     workflow .wf-header 10) while staying BELOW slide-out/overlay layers that should cover the nav:
     admin .detail-panel 200, toasts 5000, lightbox/password-overlay 10000-11000, the cart drawer
     1001+, and the account wall (max-int). */
  position: sticky; top: 0; z-index: 150;
  background: var(--nav-navy);
}
.f2-header *, .f2-header *::before, .f2-header *::after { box-sizing: border-box; }
.f2-header .f2-shell { max-width: var(--nav-maxw); margin-inline: auto; padding-inline: var(--nav-gutter); }
/* nowrap: items no longer wrap to a second line — they fold into the hamburger instead. */
.f2-header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 74px; flex-wrap: nowrap; }
.f2-brand { display: flex; align-items: center; margin-right: auto; text-decoration: none; white-space: nowrap; }
.f2-brand .wordmark {
  font-family: var(--nav-fh); font-weight: 600; letter-spacing: .04em;
  color: var(--nav-white); font-size: 1.5rem; text-transform: uppercase;
}
.f2-nav { display: flex; align-items: center; gap: 2rem; flex-wrap: nowrap; }
.f2-nav a {
  color: var(--nav-white); font-family: var(--nav-fb); font-size: 1.05rem; font-weight: 400;
  padding: .35rem 0; text-decoration: none; cursor: pointer; transition: color .16s ease;
  white-space: nowrap;
}
.f2-nav a:hover, .f2-nav a[aria-current="page"] { color: var(--nav-gold); }
/* Operator pills (Assets/Orders) — SHOW_OPERATOR_LINKS-gated in site-nav.js. Distinct gold pill
   so they read as internal tools, not storefront items. Removed everywhere at go-live via the flag.
   (Assets/Orders are alwaysTucked now, so this pill styling applies inside the panel — see below.) */
.f2-nav a.f2-nav-op {
  padding: .3rem .85rem; border: 1px solid var(--nav-gold); border-radius: var(--nav-pill);
  color: var(--nav-gold); font-size: .82rem; font-weight: 600; letter-spacing: .02em; line-height: 1;
}
.f2-nav a.f2-nav-op:hover { background: var(--nav-gold); color: var(--nav-navy); }

/* ── Hamburger toggle ─────────────────────────────────────────────────────────────────────── */
.f2-nav-menu { position: relative; display: flex; align-items: center; }
.f2-nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; margin-left: .25rem;
  background: transparent; border: 1px solid rgba(255,255,255,.28); border-radius: 10px;
  color: var(--nav-white); cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.f2-nav-toggle:hover { color: var(--nav-gold); border-color: var(--nav-gold); }
.f2-nav-toggle:focus-visible { outline: 2px solid var(--nav-gold); outline-offset: 2px; }
.f2-nav-toggle .f2-nav-ico { width: 24px; height: 24px; display: block; }
/* Bars when closed, X when open — crossfade off aria-expanded. */
.f2-nav-toggle .f2-nav-ico-close { display: none; }
.f2-nav-toggle[aria-expanded="true"] .f2-nav-ico-open { display: none; }
.f2-nav-toggle[aria-expanded="true"] .f2-nav-ico-close { display: block; }
.f2-nav-toggle[aria-expanded="true"] { color: var(--nav-gold); border-color: var(--nav-gold); }

/* ── Backdrop (outside/click-away close) ──────────────────────────────────────────────────── */
.f2-nav-backdrop { position: fixed; inset: 0; z-index: 40; background: transparent; border: 0; }
.f2-nav-backdrop[hidden] { display: none; }

/* ── Dropdown panel (tucked + collapsed items) ────────────────────────────────────────────── */
.f2-nav-panel {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 60;
  min-width: 240px; max-width: min(88vw, 340px);
  display: flex; flex-direction: column;
  padding: .5rem; border-radius: 12px;
  background: var(--nav-navy-2);
  border: 1px solid rgba(238,192,17,.30);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}
.f2-nav-panel[hidden] { display: none; }
.f2-nav-panel a {
  display: block; color: var(--nav-white); font-family: var(--nav-fb);
  font-size: 1rem; font-weight: 400; letter-spacing: .01em; line-height: 1.2;
  padding: .7rem .85rem; border-radius: 8px; text-decoration: none; cursor: pointer;
  white-space: nowrap; transition: background .14s ease, color .14s ease;
}
.f2-nav-panel a:hover, .f2-nav-panel a:focus-visible { background: rgba(255,255,255,.08); color: var(--nav-gold); }
.f2-nav-panel a:focus-visible { outline: 2px solid var(--nav-gold); outline-offset: -2px; }
.f2-nav-panel a[aria-current="page"] { color: var(--nav-gold); }
/* Collapsible twins live in the panel but stay hidden until their fold breakpoint (below). */
.f2-nav-panel a[data-col] { display: none; }
/* Operator tools (Assets/Orders): reset the bar's pill treatment to a panel row, set apart with a
   gold divider + a small gold dot so they still read as internal tools inside the list. */
.f2-nav-panel a.f2-nav-op {
  border: 0; border-radius: 8px; padding: .7rem .85rem;
  color: var(--nav-gold); font-size: 1rem; font-weight: 600; letter-spacing: .01em; line-height: 1.2;
}
.f2-nav-panel a.f2-nav-op:hover, .f2-nav-panel a.f2-nav-op:focus-visible { background: rgba(238,192,17,.14); color: var(--nav-gold); }
/* Divider above the first operator row (first .f2-nav-op that follows a non-operator row). */
.f2-nav-panel a:not(.f2-nav-op) + a.f2-nav-op {
  margin-top: .4rem; padding-top: .95rem; border-top: 1px solid rgba(238,192,17,.28);
}

/* ── Width-collapse ladder ────────────────────────────────────────────────────────────────────
   Fold order is by collapsePriority: rank 1 = highest priority folds FIRST, rank N = lowest
   (Cart, then Shadowbox) kept in the bar LONGEST. renderNav stamps data-col="rank" on each bar
   item and its panel twin. At each max-width step below we hide the bar copy and reveal the panel
   twin. Cascading (each narrower step keeps the wider hides in force). Extra ranks are harmless
   no-ops if the item set shrinks. Current bar order by fold: 1 About · 2 Hall · 3 How · 4 Shop ·
   5 Shadowbox · 6 Cart. */
@media (max-width: 1040px) { .f2-nav a[data-col="1"] { display: none; } .f2-nav-panel a[data-col="1"] { display: block; } }
@media (max-width: 948px)  { .f2-nav a[data-col="2"] { display: none; } .f2-nav-panel a[data-col="2"] { display: block; } }
@media (max-width: 856px)  { .f2-nav a[data-col="3"] { display: none; } .f2-nav-panel a[data-col="3"] { display: block; } }
@media (max-width: 764px)  { .f2-nav a[data-col="4"] { display: none; } .f2-nav-panel a[data-col="4"] { display: block; } }
@media (max-width: 664px)  { .f2-nav a[data-col="5"] { display: none; } .f2-nav-panel a[data-col="5"] { display: block; } }
@media (max-width: 560px)  { .f2-nav a[data-col="6"] { display: none; } .f2-nav-panel a[data-col="6"] { display: block; } }
@media (max-width: 480px)  { .f2-nav a[data-col="7"] { display: none; } .f2-nav-panel a[data-col="7"] { display: block; } }
@media (max-width: 400px)  { .f2-nav a[data-col="8"] { display: none; } .f2-nav-panel a[data-col="8"] { display: block; } }
/* When the bar empties out, drop its gap so the brand/hamburger spacing stays clean. */
@media (max-width: 560px)  { .f2-header-inner { gap: 1rem; } }