/*
  programs.css: the one stylesheet for the public program pages (site/programs.html and
  site/programs/*.html, generated by `npm run build:program-pages`). HAND-WRITTEN, not generated.

  The color tokens, fonts, brand bar, buttons, gold band and footer are copied from site/players.html
  so these pages look like the rest of the marketing site. If a token changes there (or in
  web/src/styles/tokens.css), change it here too. One shared file instead of inline <style>: dozens
  of pages share it, so a visitor's browser downloads it once.
*/
:root{
  --bg:#F7F7F4; --surface:#FFFFFF; --surface-2:#F1F1EC; --line:#E4E4DE;
  --ink:#212427; --ink-2:#444444; --ink-3:#7C7F78;
  --gold:#FFB606; --gold-ink:#3A2900;
  --navy:#082645; --plum:#442E66;
  --btn-bg:#212427; --btn-ink:#FFFFFF;
  --good:#2F8F5B; --good-ink:#0F3D25; --good-bg:#E3F2E9;
  --warn:#C99A00; --warn-ink:#4A3900; --warn-bg:#FBF0CC;
  --crit:#B03052; --crit-ink:#4A0F1F; --crit-bg:#F7E1E7;
  --neutral-bg:#ECECE6; --neutral-ink:#5B5D57;
  --prog-bg:#E1E9F2; --prog-ink:#082645;
  --shadow: 0 1px 2px rgba(30,28,20,.06), 0 8px 24px rgba(30,28,20,.05);
  --radius: 8px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121212; --surface:#1C1D1B; --surface-2:#232420; --line:#34362F;
    --ink:#F2F1EA; --ink-2:#C3C4BC; --ink-3:#84867E;
    --gold:#FFC533; --gold-ink:#2B1F00;
    --navy:#7FADD9; --plum:#B49CDE;
    --btn-bg:#FFC533; --btn-ink:#2B1F00;
    --good:#3FA873; --good-ink:#DCF5E7; --good-bg:#123422;
    --warn:#A97F1D; --warn-ink:#F7E9C8; --warn-bg:#392C0C;
    --crit:#D9587A; --crit-ink:#FBE1E8; --crit-bg:#3A1420;
    --neutral-bg:#26271F; --neutral-ink:#B7B9B0;
    --prog-bg:#15283D; --prog-ink:#CFE2F5;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#121212; --surface:#1C1D1B; --surface-2:#232420; --line:#34362F;
  --ink:#F2F1EA; --ink-2:#C3C4BC; --ink-3:#84867E;
  --gold:#FFC533; --gold-ink:#2B1F00;
  --navy:#7FADD9; --plum:#B49CDE;
  --btn-bg:#FFC533; --btn-ink:#2B1F00;
  --good:#3FA873; --good-ink:#DCF5E7; --good-bg:#123422;
  --warn:#A97F1D; --warn-ink:#F7E9C8; --warn-bg:#392C0C;
  --crit:#D9587A; --crit-ink:#FBE1E8; --crit-bg:#3A1420;
  --neutral-bg:#26271F; --neutral-ink:#B7B9B0;
  --prog-bg:#15283D; --prog-ink:#CFE2F5;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
}

*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Inter', system-ui, sans-serif; font-size:16px; line-height:1.55; }
.wrap{ max-width:1180px; margin:0 auto; padding-inline:20px; }
a{ color:inherit; }
img,svg{ max-width:100%; }
a:focus-visible,button:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.brandbar a:focus-visible,.footer a:focus-visible{ outline-color:#fff; }

.display{ font-family:'Poppins', system-ui, sans-serif; font-weight:700; letter-spacing:-.01em; text-wrap:balance; }

/* ---- Brand bar ---- */
.brandbar{ background:#000000; position:sticky; top:env(safe-area-inset-top,0px); z-index:40; }
.brandbar-inner{ max-width:1180px; margin:0 auto; padding:8px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand-mark{ display:flex; align-items:center; gap:10px; flex:none; min-height:44px; text-decoration:none; }
.brand-word{ font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; line-height:1.1; letter-spacing:.02em; color:var(--gold); text-transform:uppercase; }
.brand-word span{ display:block; color:#FFFFFF; font-size:10.5px; font-weight:600; letter-spacing:.14em; }
@media (max-width:480px){
  .brandbar-inner{ gap:10px; padding-inline:14px; }
  .brand-word{ font-size:14px; }
  .brand-word span{ font-size:9px; }
}

/* ---- Buttons ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; font-weight:700; font-size:15px; padding:15px 28px; min-height:44px; border-radius:6px; text-decoration:none; border:none; cursor:pointer; white-space:nowrap; }
.btn-gold{ background:var(--gold); color:var(--gold-ink); }

/* ---- Sections ---- */
section{ padding-block:64px; }
@media (max-width:700px){ section{ padding-block:44px; } }
.h1{ font-size:44px; line-height:1.08; margin:0; }
.h2{ font-size:30px; line-height:1.15; margin:0 0 28px; }
@media (max-width:700px){ .h1{ font-size:32px; } .h2{ font-size:25px; margin-bottom:22px; } }
.lede{ font-size:17px; color:var(--ink-2); margin:14px 0 0; max-width:56ch; }

/* ---- Gold band ---- */
.goldband{ background:var(--gold); color:var(--gold-ink); text-align:center; padding-block:44px; }
.goldband-line{ font-size:30px; line-height:1.15; margin:0; }
.goldband-small{ font-size:15px; font-weight:500; margin:10px 0 0; }
@media (max-width:700px){ .goldband-line{ font-size:25px; } }

/* ---- Footer ---- */
.footer{ background:#000; color:rgba(255,255,255,.55); padding-block:26px; font-size:12px; }
.footer-row{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; }
.footer a{ color:rgba(255,255,255,.55); text-decoration:none; }
.footer a:hover{ color:#fff; }
.footer-links{ display:flex; gap:0 18px; flex-wrap:wrap; }
.footer-links a,.footer-contact a{ display:inline-flex; align-items:center; min-height:44px; }
.disclaimer{ max-width:1180px; margin:0 auto; padding:18px 20px; font-size:11px; color:var(--ink-2); line-height:1.6; }

/* ---- Program pages: additions ---- */
.topnav{ display:flex; align-items:center; gap:14px; }
.topnav-link{ display:inline-flex; align-items:center; min-height:44px; color:rgba(255,255,255,.85); font-size:14px; font-weight:600; text-decoration:none; }
.topnav-link:hover{ color:#FFFFFF; }
.btn-sm{ padding:10px 16px; font-size:14px; }
.btn-dark{ background:#000; color:#fff; margin-top:18px; }
.h3{ font-family:'Poppins',sans-serif; font-weight:600; font-size:16px; margin:0 0 12px; }
.muted{ color:var(--ink-2); margin:0; }
.note{ font-size:14px; color:var(--ink-2); margin:16px 0; }
.source{ font-size:13px; color:var(--ink-3); margin:14px 0 0; }
.source a,.muted a,.place-label a,.links a,.morelinks a,.seeall,.crumbs a,.camp-name a{ color:var(--navy); font-weight:600; }

.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:20px 0 0; padding:0; font-size:13px; color:var(--ink-3); }
.crumbs li+li::before{ content:"/"; margin-right:6px; color:var(--ink-3); }
.crumbs a{ text-decoration:none; }
.pagehead{ padding-block:24px 28px; }
.eyebrow{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--plum); margin:0 0 8px; }

.layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; padding-bottom:56px; }
@media (max-width:900px){ .layout{ grid-template-columns:minmax(0,1fr); } }
.maincol,.sidecol{ display:grid; gap:20px; min-width:0; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:22px; padding-block:22px; }
.card .h2{ font-size:22px; margin-bottom:16px; }
@media (max-width:700px){ .card{ padding:18px; } .card .h2{ font-size:20px; } }
/* A button inside a card wraps, so a long program name ("Email the Mississippi Gulf Coast staff") never widens the page on a phone. */
.card .btn{ white-space:normal; text-align:center; }

.coaches{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.coaches li{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.coaches li:last-child{ border-bottom:none; padding-bottom:0; }
.coach-name{ font-weight:700; }
.coach-title{ color:var(--ink-2); font-size:14px; }

.split{ display:flex; height:14px; border-radius:99px; overflow:hidden; background:var(--surface-2); }
.split-in{ background:var(--navy); }
.split-out{ background:var(--gold); }
.stats{ display:flex; flex-wrap:wrap; gap:12px 28px; margin:16px 0 20px; }
.stat{ display:flex; flex-direction:column; }
.stat-num{ font-family:'Poppins',sans-serif; font-weight:700; font-size:26px; line-height:1.1; }
.stat-label{ font-size:13px; color:var(--ink-2); }
.cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
@media (max-width:560px){ .cols{ grid-template-columns:minmax(0,1fr); } }
.places{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.places li{ display:grid; grid-template-columns:minmax(0,1fr) 72px 28px; align-items:center; gap:10px; font-size:14px; }
.place-bar{ height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.place-bar span{ display:block; height:100%; background:var(--navy); }
.place-count{ text-align:right; font-weight:700; }

.camps{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.camps li{ display:grid; gap:2px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.camps li:last-child{ border-bottom:none; padding-bottom:0; }
.camp-date{ font-size:13px; font-weight:700; color:var(--plum); }
.camp-name{ font-weight:600; }
.camp-meta{ font-size:14px; color:var(--ink-2); }

.radar-note{ background:var(--prog-bg); color:var(--prog-ink); border-radius:8px; padding:12px 14px; margin:0 0 14px; }
.advice{ margin:0; padding-left:20px; display:grid; gap:8px; color:var(--ink-2); }
.faq{ margin:0; display:grid; gap:4px; }
.faq dt{ font-weight:700; margin-top:10px; }
.faq dt:first-child{ margin-top:0; }
.faq dd{ margin:0; color:var(--ink-2); }

.facts{ margin:0; display:grid; grid-template-columns:minmax(0, 9rem) minmax(0, 1fr); gap:8px 14px; font-size:14px; }
.facts dt{ color:var(--ink-3); font-weight:600; overflow-wrap:anywhere; }
.facts dd{ margin:0; font-weight:600; overflow-wrap:anywhere; }
.links,.morelinks{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:4px; font-size:14px; }
.links a,.morelinks a{ display:inline-flex; align-items:center; min-height:36px; }
.morelinks{ margin-top:0; }
.tag{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; background:var(--neutral-bg); color:var(--neutral-ink); margin-left:6px; }
.seeall{ display:inline-flex; align-items:center; min-height:44px; font-size:14px; }

.hubgroup{ padding-block:8px 28px; }
.hubgroup .h2{ font-size:22px; margin-bottom:14px; }
.hubgroup .h2 a{ text-decoration:none; }
.programcards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.programcard{ display:grid; gap:4px; height:100%; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:16px 18px; text-decoration:none; }
.programcard:hover{ border-color:var(--gold); }
.programcard-name{ font-family:'Poppins',sans-serif; font-weight:600; font-size:17px; }
.programcard-meta{ font-size:13px; color:var(--ink-2); }
.programcard-extra{ font-size:13px; font-weight:600; color:var(--navy); }
main.wrap{ padding-bottom:32px; }
@media (max-width:420px){ .topnav-link{ display:none; } .btn-sm{ padding:9px 12px; } }

/* Roster by position (2026-11-03): a small table that fits a 375px phone. Existing tokens only. */
.postable{ width:100%; border-collapse:collapse; font-size:14px; }
.postable th,.postable td{ padding:8px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.postable thead th{ font-size:13px; font-weight:600; color:var(--ink-3); }
.postable thead th + th,.postable td{ text-align:right; padding-left:12px; width:5.5rem; }
.postable tbody th{ font-weight:600; overflow-wrap:anywhere; }
.postable td{ font-weight:700; font-variant-numeric:tabular-nums; }
.postable-split{ display:block; font-size:13px; font-weight:400; color:var(--ink-2); }

/* Coverage note on /programs and the hubs (2026-11-03): space above the sign-up button. Existing tokens only. */
.coverage-cta{ margin-top:18px; }
.pagehead .note + .btn-sm{ margin-top:2px; }

/* /programs map and state filter (multi-state, 2026-11-03). Existing tokens only; readable in light and dark. */
.mapblock{ margin:4px 0 22px; }
.usmap{ display:block; width:100%; height:auto; max-width:760px; margin-inline:auto; }
.map-state{ fill:var(--neutral-bg); stroke:var(--surface); stroke-width:1; }
.map-state.is-soon{ fill:var(--prog-bg); }
.map-state.is-live{ fill:var(--navy); cursor:pointer; }
.map-state.is-live:hover,.map-state.is-live:focus,.map-state.is-live:focus-visible{ outline:none; stroke:var(--gold); stroke-width:3; }
.map-state.is-active{ fill:var(--gold); }
.maplegend{ list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; margin:10px 0 0; padding:0; font-size:13px; color:var(--ink-2); }
.swatch{ display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.swatch-live{ background:var(--navy); }
.swatch-soon{ background:var(--prog-bg); border:1px solid var(--line); }
/* PHONES: no map (Merrell, 2026-11-03). The select and the cards are the whole experience. */
@media (max-width:760px){ .mapblock{ display:none; } }
.statepick{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0 0 8px; }
.statepick label{ font-weight:600; }
.statepick select{ font:inherit; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); max-width:100%; }
.btn-outline{ background:transparent; color:var(--ink); border:1px solid var(--line); }
#states-heading:focus{ outline:none; }
#states-heading:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }