/* App-owned header layout overrides. Loaded AFTER lslr-site.css (see
   app/layout.tsx), which is vendored verbatim from lonestarlockerroom.com
   and must not be hand-edited — everything this app changes about the nav
   lives here instead.

   HARD RULE: the logo and the full "Lone Star Locker Room" wordmark are
   always fully visible at every viewport width. Never truncate (no
   ellipsis, no overflow:hidden), never shrink, never clip. Only other
   things give way. Where the wordmark is allowed to change at all
   (<= 351px) it re-flows onto two lines with both words intact.

   ONE ROW, ALWAYS. The account corner is a single fixed 32px icon (no
   role label, email or Sign out text in the bar), so nothing in the
   header varies in width with who is logged in.

   Measured natural widths (px), fonts loaded:
     mark 40.7 + gap 12 + wordmark 227.2 = 279.9 (brand-lockup)
     hamburger toggle 32, account icon 32, cart icon 22
     six nav links 504.6, Shop CTA 71.2, gaps 24
     The cart icon is in EVERY layout's header (SiteHeader renders
     CartLink), so every row includes it. Single row, right side:
       marketing/parent/coach  504.6 + 24 + 71.2 + 24 + 22 + 24 + 32 = 701.8
       store/admin/book (no Shop) 504.6 + 24 + 22 + 24 + 32          = 606.6
     widest single row = 64 padding + 279.9 brand + 24 + 701.8
       = 1069.7, + 15 scrollbar = 1084.7  ->  switch at 1105 (~20px slack).
       Measured in a real browser (marketing): actions 701.8 wide, brand-to-
       actions gap exactly 24.4 at a 1085 viewport; below that the bar keeps
       its width and the right padding shrinks (7.4px left at 1060, bar at
       the viewport edge near 1053) — which is why the old 1060 switch,
       correct before the cart was everywhere, no longer held.
     hamburger row 1 (every layout now, was store-only): 279.9 + 8 gap +
       cart 22 + 12 + icon 32 + 12 + toggle 32 = 397.9, + 64 padding = 461.9
       -> icons leave the bar below 480 (measured gap 26.2 at 480, ~18px
       slack).
     hamburger row 1 with nothing extra: 279.9 + 8 + 32 toggle = 320
       => fits from 352px (16px padding) / 384px (32px padding).

   Tiers:
     >= 1105px  single row: brand | links, Shop CTA?, cart, account icon.
     <= 1104px  hamburger. Links and Shop CTA live in the dropdown panel.
     <= 479px   the account icon (and cart) also move into the panel.
     <= 383px   side padding 32 -> 16 (32px padding no longer fits).
     <= 351px   wordmark wraps to two lines ("LONE STAR" / "LOCKER ROOM"),
                nothing hidden. */

:root { --nav-pad: 32px; }
@media (max-width: 383px) { :root { --nav-pad: 16px; } }

/* ---- The row ---- */
.nav-inner {
  gap: 8px;
  padding: 18px var(--nav-pad);
}
.brand-lockup { flex-shrink: 0; }
.wordmark { white-space: nowrap; }
.nav-actions { display: flex; align-items: center; gap: 24px; }
.nav-actions > * { flex-shrink: 0; }
.nav-bar-extra { display: flex; align-items: center; color: var(--steel-light); }
.nav-bar-extra a:hover { color: var(--white); }

/* ---- Account dropdown (signed in). Hover bridge, as AdminNavMenu had it:
   the flyout is flush at top:100% with padding-top as the visual gap, so
   the hoverable box is continuous from trigger to card. Hover only where
   hover exists; click/tap sets data-open everywhere. ---- */
.account-menu { position: relative; }
.account-menu-flyout {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 10;
  padding-top: 8px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.account-menu[data-open="true"] .account-menu-flyout { visibility: visible; opacity: 1; }
@media (hover: hover) {
  .account-menu:hover .account-menu-flyout { visibility: visible; opacity: 1; }
}

/* ---- Mobile panel ---- */
.nav-mobile-panel a { padding-left: var(--nav-pad); padding-right: var(--nav-pad); }
.nav-mobile-shop { padding: 16px var(--nav-pad); }
.nav-mobile-account { display: none; flex-direction: column; border-top: 1px solid var(--hairline); }
.nav-mobile-extra { padding: 16px var(--nav-pad) 0; color: var(--steel-light); display: flex; }
.nav-mobile-email {
  padding: 16px var(--nav-pad) 4px;
  font-size: 13px;
  color: var(--steel-light);
  overflow-wrap: anywhere;
}
.nav-mobile-heading {
  padding: 14px var(--nav-pad) 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel-light);
}
.nav-mobile-signout {
  text-align: left;
  padding: 16px var(--nav-pad);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

@media (min-width: 1105px) {
  .nav-inner { gap: 24px; }
  .nav-toggle { display: none; }
  .nav-mobile-panel,
  .nav-mobile-panel.is-open { display: none; }
}

@media (max-width: 1104px) {
  /* lslr-site.css only hides .nav-links at <= 760px. */
  .nav-links { display: none; }
  .nav-toggle { display: flex; flex-shrink: 0; }
  .nav-actions { gap: 12px; }
  .nav-actions .nav-shop-cta { display: none; }
}

@media (max-width: 479px) {
  .nav-account-bar,
  .nav-bar-extra { display: none; }
  .nav-mobile-account { display: flex; }
}

@media (max-width: 351px) {
  .wordmark { white-space: normal; }
  .wordmark span { display: block; }
  .brand-lockup { flex-shrink: 1; min-width: 0; }
}

/* =====================================================================
   MARKETING VARIANT — nav.nav-mk (SiteHeader variant="marketing")
   =====================================================================
   The redesigned header from design-reference/, worn by the six marketing
   pages only. Everything here is scoped under .nav-mk, so none of it can touch
   the default header the signed-in sections use. The behavior (hamburger,
   active link, cart count, account menu) is the same React code; only the skin
   and the breakpoint math differ.

   What the mockup specifies, and what is derived (it has no mobile layout, no
   sticky bar, no hover or focus states):
     from the mockup  navy bar; 38px mark; Zilla Slab 700 uppercase wordmark
                      (20px, 0.5px tracking) with the brand-red second half;
                      mono 12px/1px nav links, white when current and #C9D2E0
                      otherwise; the red SHOP button; white cart and account
                      icons in 44px targets; no red rule under the bar.
     derived          sticky; 20px wordmark below the row breakpoint; the
                      hamburger and its panel; a 2px white underline on the
                      current link (the mockup shows the current page by color
                      alone, which is not enough on its own); focus rings.

   Page padding steps 16 / 20 / 32 / 48px (<=400 / 401+ / 640+ / 1024+) and the
   inner column is 1180px of content, so the logo lines up with page copy
   (components/marketing/styles.ts uses the same steps). */
.nav-mk { --nav-pad: 16px; border-bottom: 0; }
@media (min-width: 401px)  { .nav-mk { --nav-pad: 20px; } }
@media (min-width: 640px)  { .nav-mk { --nav-pad: 32px; } }
@media (min-width: 1024px) { .nav-mk { --nav-pad: 48px; } }

.nav-mk .nav-inner {
  max-width: calc(1180px + 2 * var(--nav-pad));
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Wordmark: the vendored 18px below the row breakpoint (so the hamburger row's
   measured widths hold), the mockup's 20px / 0.5px in the full row. The second
   half stays the true brand red — it is the logotype. */
.nav-mk .wordmark { font-size: 18px; letter-spacing: 0.01em; }

/* Links */
.nav-mk .nav-links { gap: 28px; letter-spacing: 1px; font-size: 12px; font-weight: 500; }
.nav-mk .nav-links a { color: #C9D2E0; }
.nav-mk .nav-links a:hover,
.nav-mk .nav-links a.active { color: #fff; }
.nav-mk .nav-links a.active::after {
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: #fff;
  clip-path: none;
}

/* Cart: the glyph stays 22px (so the count badge keeps hugging it); a pseudo-
   element stretches the tap area to 44x44. */
.nav-mk .nav-bar-extra { color: #fff; }
.nav-mk .nav-bar-extra a { position: relative; }
.nav-mk .nav-bar-extra a::before { content: ""; position: absolute; inset: -11px; }

/* The cart row inside the hamburger panel: the vendored `.nav-mobile-panel a`
   rule gives every panel link 16px/32px padding and a bottom border, which
   pushed this icon 32px right of the other rows. Same 22px glyph / 44px tap
   area as in the bar. */
.nav-mk .nav-mobile-extra a { position: relative; padding: 0; border: 0; color: #fff; }
.nav-mk .nav-mobile-extra a::before { content: ""; position: absolute; inset: -11px; }

/* Account icon: white, 44px target (the glyph is centered in it). */
.nav-mk .nav-account-bar > a,
.nav-mk .nav-account-bar .account-menu > button {
  width: 44px;
  height: 44px;
  color: #fff;
}

/* Hamburger toggle: 44px target, bars stay 32px wide and flush with the padding
   edge (the extra 6px each side is negative margin on the right, padding inside). */
.nav-mk .nav-toggle { width: 44px; height: 44px; padding: 0 6px; margin-right: -6px; }

/* Panel */
.nav-mk .nav-mobile-panel {
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  /* The panel and the navy hero under it are the same color; a hairline and a
     soft shadow keep the panel's edge visible. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 24px rgba(0, 10, 40, 0.35);
}
.nav-mk .nav-mobile-panel a { color: #C9D2E0; border-bottom-color: rgba(255, 255, 255, 0.12); }
.nav-mk .nav-mobile-panel a.active { color: #fff; }
.nav-mk .nav-mobile-shop a { border-radius: 0; }
.nav-mk .nav-mobile-account { border-top-color: rgba(255, 255, 255, 0.12); }

/* Focus rings (white on the navy bar; the white dropdown card keeps its own). */
.nav-mk :is(.brand-lockup, .nav-links a, .nav-shop-cta, .nav-bar-extra a, .nav-toggle,
            .nav-account-bar > a, .nav-account-bar .account-menu > button,
            .nav-mobile-panel a, .nav-mobile-signout):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---- Breakpoints (measured in a real browser, fonts loaded) -------------
   Full row, widths in px:
     brand 311.4 (mark 40.7 + gap 12 + wordmark 258.7 at 20px / 0.5px)
     links 476.2 (six, gap 28)   Shop 71.2   cart 22   account 44
     actions = 476.2 + 28 + 71.2 + 28 + 22 + 12 + 28 + 44 = 709.4
     row = 2 x 48 padding + 311.4 + 24 gap + 709.4 = 1140.8
   plus up to 15px for a classic scrollbar = 1155.8, so the row starts at 1180
   (~24px slack; the app header's own switch is 1105 with a smaller wordmark and
   32px icon targets). From 1105 to 1179 the app rules would show the row, so
   they are turned back into the hamburger here; at 1104 and below the shared
   rules above already do that.
   Hamburger row: 2 x pad + brand 279.8 (18px wordmark) + 8 + toggle 38 (44 less
   its 6px negative margin) = 357.8 at 16px padding, so the one-line wordmark
   holds from 358px; below that it wraps to two lines, both words intact.
   480-1104: + cart 22 + 12 + account 44 + 12 = 455.8 at 20px padding. */
@media (min-width: 1180px) {
  .nav-mk .wordmark { font-size: 20px; letter-spacing: 0.5px; }
  .nav-mk .nav-actions { gap: 28px; }
  .nav-mk .nav-bar-extra { margin-right: 12px; }
}

@media (min-width: 1105px) and (max-width: 1179px) {
  .nav-mk .nav-links { display: none; }
  .nav-mk .nav-toggle { display: flex; }
  .nav-mk .nav-actions { gap: 12px; }
  .nav-mk .nav-actions .nav-shop-cta { display: none; }
  .nav-mk .nav-mobile-panel.is-open { display: flex; }
}

@media (max-width: 357px) {
  .nav-mk .wordmark { white-space: normal; }
  .nav-mk .wordmark span { display: block; }
  .nav-mk .brand-lockup { flex-shrink: 1; min-width: 0; }
}