/* ---------------------------------------------------------------------------
   site-mode.css — styling for the runtime nav (assets/js/nav.js): the
   "Draft Tools" dropdown used in in-season mode, and the local-preview
   banner shown when a visitor's browser override differs from the
   committed SITE_MODE. Matches the existing header/nav tokens in style.css
   rather than introducing new ones.
--------------------------------------------------------------------------- */

/* ---- Draft Tools dropdown (desktop: floating panel, click to open) ---- */
.nav-drop{position:relative}
.nav-drop-toggle{
  display:inline-flex;align-items:center;gap:5px;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;letter-spacing:.06em;font-size:14px;text-transform:uppercase;
  color:var(--mute);background:transparent;border:none;
  padding:9px 14px;border-radius:8px;border-bottom:2px solid transparent;
  cursor:pointer;
  transition:color .15s, background .15s, border-color .15s;
}
.nav-drop-toggle svg{width:13px;height:13px;transition:transform .15s}
.nav-drop-toggle:hover{color:var(--white);background:var(--raised)}
.nav-drop.active .nav-drop-toggle{color:var(--white);border-color:var(--lime-line)}
.nav-drop.open .nav-drop-toggle svg{transform:rotate(180deg)}

.nav-drop-menu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:190px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:10px;
  padding:6px;display:flex;flex-direction:column;gap:1px;
  box-shadow:0 12px 28px var(--shadow);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .12s, transform .12s;
  z-index:70;
}
.nav-drop.open .nav-drop-menu{opacity:1;transform:translateY(0);pointer-events:auto}
.nav-drop-menu a{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.04em;
  font-size:13.5px;text-transform:uppercase;color:var(--mute);
  padding:9px 10px;border-radius:7px;
}
.nav-drop-menu a:hover{color:var(--white);background:var(--raised)}
.nav-drop-menu a.active{color:var(--white)}
.nav-drop-menu a .tag-beta{margin-left:6px;transform:translateY(-1px)}

/* Must stay in lockstep with the .main-nav breakpoint in style.css — if this
   fires at a different width there is a band where the nav is a full-screen
   mobile panel but the dropdown still renders as a floating desktop menu. */
@media (max-width:880px){
  /* Inside the full-screen mobile nav panel, the dropdown becomes a plain
     flat sub-list rather than a floating menu — there's no room to float,
     and touch users expect a tap-to-expand accordion, not a hover panel. */
  .nav-drop-toggle{width:100%;justify-content:center;padding:13px;border-left:2px solid transparent;border-bottom:none}
  .nav-drop.active .nav-drop-toggle{border-left-color:var(--lime-line);border-color:transparent}
  .nav-drop-menu{
    position:static;box-shadow:none;border:none;background:transparent;
    opacity:1;transform:none;pointer-events:auto;
    max-height:0;overflow:hidden;padding:0 0 0 14px;
    transition:max-height .18s ease;
  }
  .nav-drop.open .nav-drop-menu{max-height:400px;padding:2px 0 6px 14px}
  .nav-drop-menu a{text-align:center;padding:11px}
}

/* ---- Local preview banner (assets/js/nav.js only inserts this when a
   ?mode= override differs from the committed SITE_MODE) ---- */
.mode-preview-banner{
  background:var(--lime);color:var(--on-lime);
}
.mode-preview-banner .wrap{
  max-width:var(--max);margin:0 auto;padding:9px 20px;
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  text-align:center;
}
.mpb-text{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.02em;
  font-size:13px;
}
.mpb-text strong{font-weight:900}
.mpb-exit{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;letter-spacing:.08em;
  font-size:12px;text-transform:uppercase;color:var(--on-lime);
  border-bottom:2px solid var(--on-lime);flex:0 0 auto;
}