/* ============================================================================
   site-nav.css — THE site header's ONLY stylesheet (Adam 2026-09-24: "that menu needs to hold the
   same shape and not jump around from page to page").
   The markup is static HTML stamped into every page by _archive/tools/sync_site_nav.py from
   profiles/site-nav.json; site-nav.js only adds behaviour. So the bar paints complete, in its final
   shape, on the first frame of every page. Rules that keep it that way:
     * the header is sized HERE, never by the page: .nav-in has its own max-width/padding (it is not
       the page's .wrap, whose width differs page to page);
     * nothing page-specific goes inside the bar (page tools sit below it, e.g. app.css .ctlbar);
     * every slot that fills late (the account button) has a fixed size reserved here;
     * pages must not restyle .nav / .nav-in / .nav-links / header.nav (sync_site_nav.py --check fails),
       and must not put overflow:hidden on html/body (it silently breaks position:sticky; use clip).
   Linked in every page <head> right after fpt-brand.css, as a normal (render-blocking) stylesheet.
   Selectors are scoped to header.nav because admin.html uses .nav for its sidebar.
   Theme hooks: override the --fptnav-* colour variables on body (pitch.css does) — never the geometry.
   ============================================================================ */
:root{
  --fptnav-h:62px;            /* bar height (the header is this + its 1px bottom border) */
  --fptnav-max:1180px;        /* bar content width, the same on every page */
  --fptnav-pad:20px;
  --fptnav-gap:18px;
  --fptnav-logo-h:34px;
  --fptnav-acct:38px;         /* reserved account-button slot (fpt-user.js fills it) */
  --fptnav-z:60;              /* EVERY overlay / modal / full-screen gate must sit ABOVE this (use ≥100,
                                 the app.css .fpt-modal tier), or the sticky bar shows through it —
                                 brackets.css .ov at 50 did (fix5 2026-09-24) */
  --fptnav-bg:rgba(25,23,26,.92);
  --fptnav-blur:8px;
  --fptnav-line:#2c2a2e;
  --fptnav-ink:#cdd4dc;
  --fptnav-ink-hi:#fff;
  --fptnav-hover:#ffffff14;
  --fptnav-panel:#15131a;
  --fptnav-offset:calc(var(--fptnav-h) + 1px);   /* use for sticky sub-bars / scroll-margin-top */
  --fptnav-font:'Poppins','FPT Nav Fallback',-apple-system,'Segoe UI',sans-serif;
}
/* First-visit font steadiness: until Poppins arrives (fpt-brand.css loads it with display=swap) the
   links render in a fallback. The row is right-aligned, so a narrower fallback used to slide the whole
   row ~43px when Poppins swapped in. This metric-matched Arial Bold (size-adjust measured on the
   actual labels: Poppins 700 = 555.4px vs Arial Bold 512.6px → 108.34%) keeps every link within ~3px.
   Systems without Arial simply skip it. */
@font-face{font-family:"FPT Nav Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:700;size-adjust:108.34%;
  unicode-range:U+0000-00FF}   /* Latin only: the CTA arrow keeps its usual glyph, so the settled bar is unchanged */
/* a classic (always-visible) scrollbar that appears once data renders would otherwise nudge every
   centred container ~7px sideways; reserve its gutter up front */
html{scrollbar-gutter:stable}

/* --fptnav-zoom: a page that zooms <body> (commentator.html's console scale) sets it to the inverse,
   so the header keeps its exact standard size instead of overflowing */
header.nav{position:sticky;top:0;z-index:var(--fptnav-z);background:var(--fptnav-bg);zoom:var(--fptnav-zoom,1);
  -webkit-backdrop-filter:blur(var(--fptnav-blur));backdrop-filter:blur(var(--fptnav-blur));
  border-bottom:1px solid var(--fptnav-line)}
header.nav,header.nav *{box-sizing:border-box}
header.nav>.nav-in{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--fptnav-gap);height:var(--fptnav-h);
  max-width:var(--fptnav-max);margin:0 auto;padding:0 var(--fptnav-pad)}
header.nav .nav-logo{flex:0 0 auto;display:block;line-height:0}
header.nav .nav-logo img{display:block;height:var(--fptnav-logo-h);width:auto;max-width:none}

/* ---- desktop link row ---- */
header.nav .nav-links{display:flex;align-items:center;flex-wrap:nowrap;gap:5px;margin-left:auto;min-width:0}
header.nav .nav-links>a,header.nav .fptnav-dtrigger{font:700 13.5px/1 var(--fptnav-font);
  color:var(--fptnav-ink);text-decoration:none;padding:8px 11px;border-radius:999px;white-space:nowrap;
  transition:color .15s,background .15s}
header.nav .nav-links>a:hover,header.nav .nav-links>a.on,
header.nav .fptnav-dtrigger:hover,header.nav .fptnav-dtrigger.on{color:var(--fptnav-ink-hi);background:var(--fptnav-hover)}
header.nav .nav-links>a.cta{background:var(--fpt-blue,#2191d2);color:#fff}
header.nav .nav-links>a.cta:hover{background:var(--fpt-blue,#2191d2);filter:brightness(1.08)}
header.nav a:focus-visible,header.nav button:focus-visible{outline:2px solid var(--fpt-yellow,#fce81e);outline-offset:2px}

/* ---- Training dropdown (hover / focus / tap; Esc closes — site-nav.js) ---- */
header.nav .fptnav-drop{position:relative;display:inline-flex}
header.nav .fptnav-dtrigger{display:inline-flex;align-items:center}
header.nav .fptnav-caret{width:9px;height:6px;margin-left:5px;opacity:.65;transition:transform .15s}
header.nav .fptnav-menu{position:absolute;top:100%;left:0;min-width:196px;background:var(--fptnav-panel);
  border:1px solid var(--fptnav-line);border-radius:11px;padding:6px;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(5px);
  transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s;   /* hide after the fade */
  z-index:70;box-shadow:0 14px 34px rgba(0,0,0,.45);margin-top:6px}
header.nav .fptnav-drop:hover .fptnav-menu,header.nav .fptnav-drop:focus-within .fptnav-menu,
header.nav .fptnav-drop.fptnav-dopen .fptnav-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}   /* show at once (focusable) */
header.nav .fptnav-drop:hover .fptnav-caret,header.nav .fptnav-drop:focus-within .fptnav-caret,
header.nav .fptnav-drop.fptnav-dopen .fptnav-caret{transform:rotate(180deg)}
header.nav .fptnav-drop.fptnav-shut .fptnav-menu{opacity:0;visibility:hidden;transform:translateY(5px)}  /* Esc */
header.nav .fptnav-drop.fptnav-shut .fptnav-caret{transform:none}
header.nav .fptnav-menu a{display:block;padding:9px 12px;border-radius:8px;white-space:nowrap;
  font:600 13.5px/1.2 var(--fptnav-font);color:var(--fptnav-ink);text-decoration:none}
header.nav .fptnav-menu a:hover,header.nav .fptnav-menu a:focus-visible{color:var(--fptnav-ink-hi);background:var(--fptnav-hover)}

/* ---- account slot: reserved at full size so nothing moves when fpt-user.js fills it ---- */
header.nav .fptnav-acct{flex:0 0 var(--fptnav-acct);width:var(--fptnav-acct);height:var(--fptnav-acct);margin-left:4px;
  position:relative;display:flex;align-items:center;justify-content:center}
header.nav .fptnav-acct>.fptu-nav{margin:0}

/* ---- burger (phones / tablets) ---- */
header.nav .fptnav-burger{display:none;background:none;border:0;cursor:pointer;padding:8px;border-radius:8px;
  color:var(--fptnav-ink);line-height:0}
header.nav .fptnav-burger:hover{background:var(--fptnav-hover);color:var(--fptnav-ink-hi)}

@media(max-width:1080px){
  header.nav .fptnav-burger{display:inline-flex;margin-left:auto}
  /* the panel hangs off the sticky header (sticky is already a containing block — no extra
     position:relative, which used to un-stick the bar on phones) */
  header.nav .nav-links{position:absolute;top:100%;right:0;left:0;flex-direction:column;align-items:stretch;gap:2px;
    flex-wrap:nowrap;background:var(--fptnav-panel);border-top:1px solid var(--fptnav-line);padding:8px 12px 12px;margin:0;
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;visibility:hidden;
    transition:max-height .22s ease,opacity .18s ease,visibility .22s;z-index:60}
  header.nav.fptnav-open .nav-links{max-height:82vh;overflow:auto;opacity:1;pointer-events:auto;visibility:visible}
  header.nav .nav-links a{display:block;width:100%;padding:12px 10px;font-size:15px;border-radius:8px}
  header.nav .nav-links>a.cta{margin-top:6px;text-align:center}
  header.nav .fptnav-drop{display:block;width:100%}
  header.nav .fptnav-menu{position:static;opacity:1;visibility:inherit;transform:none;margin:0;padding:0 0 4px 14px;
    border:0;box-shadow:none;background:transparent;min-width:0}
  header.nav .fptnav-drop.fptnav-shut .fptnav-menu{opacity:1;visibility:inherit;transform:none}
  header.nav .fptnav-menu a{padding:10px;font-size:14px;opacity:.9}
  header.nav .fptnav-caret{display:none}
}
@media (prefers-reduced-motion:reduce){header.nav,header.nav *{transition:none}}
@media print{header.nav{display:none}}