/* ============================================================================
   sc-site-header.css — THE site header for the four product pages
   ============================================================================
   Oct 10 2026 (lane L4b). Extracted from the homepage (index.html, formerly its
   inline <style>: .top-nav-features/.top-nav-pricing at :1505-1528, .top-nav /
   .mobile-nav at :1866-2002) so Coach (/), Referee (/referee), Platform
   (/platform) and the Athlete Hub (/hub) wear ONE header. Markup comes from
   js/sc-site-header.js (one config table); this file is its only stylesheet.

   Laws (scripts/test-landing-referee-platform.js enforces them):
   - hex/rgba ONLY inside the custom-property declarations in :root below; the
     values are the homepage's own, byte for byte, so the homepage header
     renders identically (pixel-compared at 1440 / 1100 / 390).
   - self-sufficient: it does not lean on any page's :root (--primary etc.), so
     a product page that loads it gets the same header the homepage has.
   ============================================================================ */

:root {
    --sch-font-display: 'Saira Condensed', 'Rajdhani', system-ui, sans-serif;
    --sch-text-primary: #ffffff;
    --sch-text-secondary: #9ca3af;
    --sch-border-subtle: rgba(255, 255, 255, 0.08);
    --sch-hover: rgba(255, 255, 255, 0.04);
    --sch-bar: rgba(10, 13, 20, 0.75);
    --sch-sheet: rgba(10, 13, 20, 0.97);
    --sch-ink-volt: #0a0d14;
    /* THE PAGE ACCENT (shared with css/sc-yardline-rail.css): coach green by
       default; /referee, /platform, /hub set volt. RGB triplets so the
       homepage's computed colours are unchanged. */
    --sc-page-accent-rgb: 34, 197, 94;
    --sc-page-accent-deep-rgb: 22, 163, 74;
    --sc-page-accent-ink: #000;
    /* product hues: hover hints on the switcher only (the homepage's) */
    --sch-referee: #f59e0b;
    --sch-platform: #a855f7;
    --sch-hub: #3b82f6;
}

.top-nav-left, .top-nav-right {
    display: flex; align-items: center; gap: 16px;
}
/* Derived from the accent WHERE it is set (css/sc-accent.css): a var() inside
   a custom property freezes on the element that declares it. */
:root, [data-accent] {
    --sch-accent: rgb(var(--sc-page-accent-rgb));
    --sch-accent-deep: rgb(var(--sc-page-accent-deep-rgb));
    --sch-accent-tint: rgba(var(--sc-page-accent-rgb), 0.12);
    --sch-accent-glow: rgba(var(--sc-page-accent-rgb), 0.3);
    --sch-accent-glow-strong: rgba(var(--sc-page-accent-rgb), 0.45);
}
/* A light page (the Team Hub): the same header, in day colours. */
[data-canvas="light"] {
    --sch-text-primary: #0a0d14;
    --sch-text-secondary: #4b5563;
    --sch-border-subtle: rgba(10, 13, 20, 0.12);
    --sch-hover: rgba(10, 13, 20, 0.05);
    --sch-bar: rgba(255, 255, 255, 0.88);
    --sch-sheet: rgba(255, 255, 255, 0.98);
}
.top-nav-features, .top-nav-pricing {
    font-family: var(--sch-font-display);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sch-text-secondary);
    background: transparent;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease, background 0.2s ease;
}
.top-nav-features:hover, .top-nav-pricing:hover,
.top-nav-features.open {
    color: var(--sch-text-primary);
    background: var(--sch-hover);
}
.top-nav-features svg { transition: transform 0.25s ease; }
.top-nav-features.open svg { transform: rotate(180deg); }
/* Pricing is a <button> on the homepage (it opens the pricing sheet there) and
   a link everywhere else; the link must not pick up an underline. */
a.top-nav-pricing { text-decoration: none; }

.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 36px;
    background: var(--sch-bar);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--sch-border-subtle);
    opacity: 0;
    transition: opacity 0.5s ease;
}
.top-nav.ready { opacity: 1; }
.top-nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.top-nav-logo img {
    height: 32px;
    width: auto;
    display: block;
}
.top-nav-products {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--sch-hover);
    border: 1px solid var(--sch-border-subtle);
    border-radius: 999px;
    padding: 4px;
}
.top-nav-product {
    font-family: var(--sch-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sch-text-secondary);
    padding: 8px 18px;
    border-radius: 999px;
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
}
.top-nav-product:hover { color: var(--sch-text-primary); background: var(--sch-hover); }
.top-nav-product.referee:hover  { color: var(--sch-referee); }
.top-nav-product.platform:hover { color: var(--sch-platform); }
.top-nav-product.parent:hover   { color: var(--sch-hub); }
/* The page you are on wears the PAGE accent (coach green on /, volt elsewhere) */
.top-nav-product.active,
.top-nav-product.active:hover { color: var(--sch-accent); background: var(--sch-accent-tint); }
.top-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    background: linear-gradient(135deg, var(--sch-accent), var(--sch-accent-deep));
    color: var(--sc-page-accent-ink);
    font-family: var(--sch-font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.12s, box-shadow 0.2s;
    box-shadow: 0 6px 20px var(--sch-accent-glow);
}
.top-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px var(--sch-accent-glow-strong); }
.top-nav-hamburger {
    display: none;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--sch-border-subtle);
    border-radius: 8px;
    cursor: pointer;
    position: relative;
}
.top-nav-hamburger span {
    position: absolute;
    left: 9px;
    width: 18px;
    height: 1.5px;
    background: var(--sch-text-primary);
    transition: transform 0.2s, opacity 0.2s;
}
.top-nav-hamburger span:nth-child(1) { top: 12px; }
.top-nav-hamburger span:nth-child(2) { top: 17.5px; }
.top-nav-hamburger span:nth-child(3) { top: 23px; }
@media (max-width: 1100px) {
    .top-nav { padding: 12px 20px; }
    .top-nav-products { display: none; }
    .top-nav-cta { display: none; }
    .top-nav-hamburger { display: block; }
}
/* Mobile menu sheet */
.mobile-nav {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--sch-sheet);
    z-index: 99996;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px; /* no backdrop-filter: a full-screen blurred scrim drops taps on iPad. Aug 11 2026 sweep. Do not re-add. */}
.mobile-nav.open { opacity: 1; pointer-events: auto; }
.mobile-nav a {
    font-family: var(--sch-font-display);
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--sch-text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}
.mobile-nav a:hover { color: var(--sch-text-primary); }
/* The product you are on, in the sheet: its own colour plus a bottom edge. */
.mobile-nav a[aria-current="page"] { color: var(--sch-accent); box-shadow: inset 0 -2px 0 currentColor; }
.mobile-nav .close {
    position: absolute;
    top: 24px; right: 24px;
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid var(--sch-border-subtle);
    border-radius: 8px;
    color: var(--sch-text-primary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
/* Launch App inside the sheet (was .hl-mobile-cta in css/home-launch.css). */
.sch-mobile-cta {
    background: var(--sch-accent);
    color: var(--sch-ink-volt);
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 14px;
    letter-spacing: 2px;
}
/* ≥44px targets: the hamburger and the sheet's close key draw at 36px (the
   homepage's look) but take taps over 44px — an invisible 4px apron. */
.top-nav-hamburger::before,
.mobile-nav .close::before { content: ''; position: absolute; inset: -4px; }