/* ── Shared site nav ─────────────────────────────────────────────────────────
   The home-page top nav as a drop-in for any page: menu + Regulations/Standings/
   Entry-List dropdowns + cross-site series switcher + theme toggle + a full
   hamburger drawer ≤1200px. Pairs with sitenav.js (wires behaviour + fills the
   dropdowns/switcher from content).

   Markup contract (see team.html):
     <nav class="site-nav"> …
        <ul class="nav-links" id="navLinks"> … #dd-reg / #dd-standings / #dd-entry …
        <div class="site-switcher" id="siteSwitcher"> …
        <button id="themeToggle" class="theme-toggle">
        <button class="nav-burger" id="navBurger"> …
     </nav>
     <div class="nav-scrim" id="navScrim"></div>

   Sticky (not fixed) so page content below is never hidden. Uses the theme
   tokens from theme.css. Class names match the home page's nav so it reads as
   one system. ────────────────────────────────────────────────────────────── */

nav.site-nav{
  position:sticky; top:0; width:100%; z-index:999;
  display:flex; align-items:center; justify-content:flex-end; gap:24px;
  padding:0 40px; height:64px;
  background:var(--nav-bg); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-nav .nav-logo{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto}
.site-nav .nav-logo img{height:40px; display:block}
.site-nav .nav-links{display:flex; gap:36px; list-style:none; margin:0; padding:0}
/* Never let nav items wrap — they shrink/compact instead. */
.site-nav .nav-links a, .site-nav .nav-dd>.nav-dd-btn, .site-nav .site-switcher-btn{white-space:nowrap}
.site-nav .nav-links a{color:var(--silver); text-decoration:none; font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; transition:color .2s}
.site-nav .nav-links a:hover{color:var(--red)}
/* Theme toggle in the nav: icon only (no text label). */
.site-nav .theme-toggle .tt-label{display:none}

/* Dropdowns (Regulations / Standings / Entry Lists) */
.site-nav .nav-dd{position:relative}
.site-nav .nav-dd>.nav-dd-btn{
  background:none; border:0; cursor:pointer;
  color:var(--silver); font-family:var(--font-body,var(--fb)); font-size:13px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; transition:color .2s;
  display:inline-flex; align-items:center; gap:6px; padding:0;
}
.site-nav .nav-dd>.nav-dd-btn .caret{font-size:8px}
.site-nav .nav-dd:hover>.nav-dd-btn, .site-nav .nav-dd.open>.nav-dd-btn{color:var(--red)}
.site-nav .nav-dd-menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  min-width:220px; background:var(--dark); border:1px solid var(--line); padding:6px;
  z-index:60; display:none; flex-direction:column;
}
.site-nav .nav-dd:hover .nav-dd-menu, .site-nav .nav-dd.open .nav-dd-menu{display:flex}
.site-nav .nav-dd-menu::before{content:''; position:absolute; bottom:100%; left:0; right:0; height:14px}
.site-nav .nav-dd-menu a{
  color:var(--silver); font-family:var(--font-display,var(--fd)); font-size:12px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:10px 14px;
  border-left:2px solid transparent; transition:background .15s, border-color .15s, color .15s;
}
.site-nav .nav-dd-menu a:hover{background:rgba(228,49,56,.08); border-left-color:var(--red); color:var(--white)}
.site-nav .nav-dd.empty{display:none}
/* One series → render the dropdown as a plain link (no one-item menu). */
.site-nav .nav-dd.solo>.nav-dd-btn{display:none}
.site-nav .nav-dd.solo .nav-dd-menu, .site-nav .nav-dd.solo:hover .nav-dd-menu{display:none}

/* Hamburger — hidden on desktop, shown ≤1200px */
.site-nav .nav-burger{
  display:none; flex:none; flex-direction:column; gap:4px;
  background:none; border:1px solid var(--line); padding:8px 9px; cursor:pointer; transition:border-color .2s;
}
.site-nav .nav-burger:hover, .site-nav .nav-burger[aria-expanded="true"]{border-color:var(--red)}
.site-nav .nav-burger span{display:block; width:18px; height:2px; background:var(--silver); transition:transform .25s, opacity .2s, background .2s}
.site-nav .nav-burger[aria-expanded="true"] span{background:var(--red)}
.site-nav .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-nav .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.site-nav .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Scrim behind the open drawer (starts below the 64px bar) */
.nav-scrim{position:fixed; inset:64px 0 0; background:rgba(0,0,0,.5); z-index:998; opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s}
body.nav-open .nav-scrim{opacity:1; visibility:visible}

/* Cross-site series switcher */
.site-nav .site-switcher{position:relative}
.site-nav .site-switcher-btn{
  background:transparent; color:var(--silver); border:1px solid var(--line);
  font-family:var(--font-display,var(--fd)); font-weight:700; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  padding:7px 14px; display:inline-flex; align-items:center; gap:8px; transition:border-color .2s, color .2s;
}
.site-nav .site-switcher-btn:hover, .site-nav .site-switcher.open .site-switcher-btn{color:var(--white); border-color:var(--red)}
.site-nav .site-switcher-btn .caret{font-size:9px}
.site-switcher-menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:260px;
  background:var(--dark); border:1px solid var(--line); padding:6px; z-index:50;
  display:none; flex-direction:column;
}
.site-switcher.open .site-switcher-menu{display:flex}
.site-switcher-menu a{display:flex; flex-direction:column; gap:2px; padding:10px 12px; text-decoration:none; border-left:2px solid transparent; transition:background .15s, border-color .15s}
.site-switcher-menu a:hover{background:rgba(228,49,56,.08); border-left-color:var(--red)}
.site-switcher-menu a.current{border-left-color:var(--red); background:rgba(228,49,56,.08)}
.ssm-name{color:var(--white); font-family:var(--font-display,var(--fd)); font-weight:700; font-size:13px; letter-spacing:.06em}
.ssm-tag{color:var(--muted); font-size:11px}

/* Laptops: compact so nothing wraps before the drawer takes over. */
@media(max-width:1400px){
  nav.site-nav{padding:0 24px; gap:16px}
  .site-nav .nav-links{gap:22px}
  .site-nav .nav-links a, .site-nav .nav-dd>.nav-dd-btn{font-size:12px; letter-spacing:.06em}
  .site-nav .site-switcher-btn{font-size:11px; letter-spacing:.06em; padding:7px 10px}
}
@media(max-width:1280px){
  .site-nav .nav-links{gap:14px}
  .site-nav .nav-links a, .site-nav .nav-dd>.nav-dd-btn{font-size:11px; letter-spacing:.03em}
}
/* ≤1200px → the full menu collapses to the hamburger drawer. */
@media(max-width:1200px){
  nav.site-nav{padding:0 20px}
  .site-switcher-menu{position:fixed; top:64px; left:12px; right:12px; width:auto; min-width:0; max-height:calc(100vh - 76px); overflow-y:auto}
  .site-nav .nav-burger{display:inline-flex}
  body.nav-open{overflow:hidden}
  .site-nav .nav-links{
    position:fixed; top:64px; left:0; right:0;
    flex-direction:column; gap:0; padding:0 0 8px;
    max-height:calc(100vh - 64px); overflow-y:auto;
    background:var(--dark); border-bottom:1px solid var(--line);
    transform:translateY(-12px); opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .25s ease, opacity .2s ease, visibility .25s;
  }
  body.nav-open .site-nav .nav-links{transform:none; opacity:1; visibility:visible; pointer-events:auto}
  .site-nav .nav-links>li{border-bottom:1px solid var(--line)}
  .site-nav .nav-links>li:last-child{border-bottom:0}
  .site-nav .nav-links a, .site-nav .nav-dd>.nav-dd-btn{display:flex; align-items:center; width:100%; padding:15px 22px; font-size:13px; letter-spacing:.1em}
  .site-nav .nav-dd>.nav-dd-btn{justify-content:space-between}
  .site-nav .nav-dd>.nav-dd-btn .caret{transition:transform .2s}
  .site-nav .nav-dd.open>.nav-dd-btn .caret{transform:rotate(180deg)}
  .site-nav .nav-dd-menu, .site-nav .nav-dd:hover .nav-dd-menu{
    position:static; transform:none; display:none; min-width:0;
    border:0; border-top:1px solid var(--line); background:rgba(0,0,0,.16); padding:4px 0;
  }
  .site-nav .nav-dd.open .nav-dd-menu{display:flex}
  .site-nav .nav-dd-menu::before{content:none}
  .site-nav .nav-dd-menu a{padding:13px 22px 13px 34px; border-left:0}
}
@media(max-width:600px){
  nav.site-nav{padding:0 12px; gap:8px}
  .site-nav .nav-logo img{height:30px}
  .site-nav .site-switcher-btn{font-size:10px; letter-spacing:.02em; padding:6px 8px; gap:5px}
}
@media(max-width:400px){
  nav.site-nav{gap:5px; padding:0 8px}
  .site-nav .nav-logo img{height:24px}
  .site-nav .site-switcher-btn{max-width:70px; padding:6px 6px; letter-spacing:0; gap:4px}
  .site-nav .site-switcher-btn>span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}