/* =========================================================================
   SMACKCAST SHARED THEME  -  every page after the product page (28 Aug 2026)
   -------------------------------------------------------------------------
   David: "use the background and color scheme from the smackcast page. All
   Smackcast related and subsequent pages all need this same color scheme."
   This reverses the "scope: this page only" note that used to live on
   smackcast_product.html - that note was about David judging the look live
   before it went anywhere else; it has now gone everywhere else on purpose.

   Ported from smackcast_product.html's FINAL cascade layer ("SMACKCAST GOES
   BLACK", Andy, 27 Aug 2026) - not from the page's three earlier, since-
   overridden passes (the light "Gridiron Steel" plate, the light "appended
   last" pass). Reading the page's own CSS history top to bottom is
   misleading; these are the values that actually paint the live page,
   confirmed against computed styles on production, not inferred from
   comments.

   Link this AFTER smackagram.css and BEFORE any page-local <style> block in
   <head>, so a page's own rules still win on source order where they need
   to. Each page must also load Anton + Oswald from Google Fonts itself
   (smackcast_product.html's <link> tag is the reference) - this file only
   assumes they're available, it doesn't fetch them, since a shared
   stylesheet can't add font <link> tags to the page that includes it.

   NOT included here: smackcast_product.html's own hero/ticker/pricing-card
   markup and the gridiron-plate-*.webp outer body texture (that one is
   scoped to .sc-body/.sc-hero specifically and is that page's own layout,
   not the shared palette). What every Smackcast page gets from this file
   is the black playbook ground, the red/ink/warm tokens, and matching
   type. Page-specific components (cards, inputs, buttons) are restyled in
   each page's own <style> block using these tokens, the same way
   smackcast_connect.html now does it.
   ========================================================================= */

body[class^="page-smackcast-"]{
  --sc-red:#E10600;
  --sc-red-deep:#B90400;
  --sc-page:#070707;
  --sc-warm:#121212;
  --sc-ink:#F5F2EC;
  --sc-mid:#A9A6A0;
  --sc-cool:#C9C6C0;
  /* THE RULE IS RED (Andy, 6 Sep 2026: "each box section on the page, I
     would like to have a red border instead of a light gray border all
     around" - carried from /smackcast to every SmackCast page). This
     token was rgba(255,255,255,.18) while the comment below it already
     said these boxes should get "a red edge, same rule as the product
     page", so the intent was right and only the value was wrong. It
     drives .card, .league-option and every input/select on all twelve
     page-smackcast-* templates. Nav chrome keeps the neutral hairline -
     that is --sc-rule-soft. */
  --sc-rule:rgba(225,6,0,.5);
  --sc-rule-soft:rgba(255,255,255,.18);

  background-color:var(--sc-page);
  background-image:url("/static/img/home/smackcast-playbook-bg-dark.webp?v=20260827k");
  background-position:top center;
  background-size:100% auto;
  background-repeat:repeat-y;
  color:var(--sc-ink);
}
html:has(body[class^="page-smackcast-"]){background-color:#070707 !important;}
body[class^="page-smackcast-"]::before,
body[class^="page-smackcast-"]::after{display:none !important;}

body[class^="page-smackcast-"] h1,
body[class^="page-smackcast-"] h2{
  font-family:'Anton', Impact, "Arial Narrow", sans-serif;
  color:var(--sc-ink);
}
body[class^="page-smackcast-"] .btn,
body[class^="page-smackcast-"] button:not(.nav-toggle):not(.nav-group-btn){
  font-family:'Oswald', Impact, sans-serif;
}
/* LABELS AND HINTS ARE READING TEXT, NOT DISPLAY TEXT (David, 8 Sep 2026:
   "the text is all way too heavy. Can't read it at all"). The rule above
   used to put every <label> on every SmackCast page in Oswald - a
   condensed poster face - at 12-14px and weight 600-700, and the hint
   text inside those labels inherited it. Condensed + bold + small is
   unreadable. Labels are Inter now (the body face), medium weight, with
   normal tracking; the small helper copy under them is regular weight.
   Oswald stays on buttons and Anton on h1/h2, where size carries it. */
body[class^="page-smackcast-"] label,
body[class^="page-smackcast-"] legend{
  font-family:'Inter', system-ui, sans-serif;
  letter-spacing:0;
}
body[class^="page-smackcast-"] label{font-weight:600;}
body[class^="page-smackcast-"] label .hint,
body[class^="page-smackcast-"] .hint,
body[class^="page-smackcast-"] .fs-note,
body[class^="page-smackcast-"] .sens-desc,
body[class^="page-smackcast-"] small{
  font-family:'Inter', system-ui, sans-serif;
  font-weight:400; letter-spacing:0; text-transform:none;
}
body[class^="page-smackcast-"] a{color:var(--sc-red);}
/* SMALL TEXT HAS A FLOOR (David, 8 Sep 2026, desktop especially). The
   library and leagues pages set every action button in 10px bold
   monospace capitals with wide tracking, and the meta line under each
   league ("espn · NFL · 2026") at 10px. On a desktop monitor that is
   illegible. Buttons: Inter, 13px, semibold, modest tracking, still
   uppercase. Kickers and meta: 12px minimum. Body-ish copy that pages
   set at 12-13px: 14px. Page-level rules keep their own colours and
   layout; only size/face/weight are restated here. */
body[class^="page-smackcast-"] .league-btn,
body[class^="page-smackcast-"] .recap-btn,
body[class^="page-smackcast-"] .btn,
body[class^="page-smackcast-"] button:not(.nav-toggle):not(.nav-group-btn):not(.sens-opt){
  font-family:'Inter', system-ui, sans-serif !important;
  font-size:13px !important; font-weight:600 !important;
  letter-spacing:.04em !important;
}
body[class^="page-smackcast-"] .league-meta,
body[class^="page-smackcast-"] .recap-status,
body[class^="page-smackcast-"] .hd .strip,
body[class^="page-smackcast-"] p.label,
body[class^="page-smackcast-"] legend,
body[class^="page-smackcast-"] .window .cut,
body[class^="page-smackcast-"] .past h2{
  font-size:12px !important; font-weight:500 !important; letter-spacing:.12em !important;
}
body[class^="page-smackcast-"] .waiting-note,
body[class^="page-smackcast-"] .league-latest,
body[class^="page-smackcast-"] .teams-note,
body[class^="page-smackcast-"] .teams-loading,
body[class^="page-smackcast-"] .fs-note,
body[class^="page-smackcast-"] .hint,
body[class^="page-smackcast-"] .window .sub,
body[class^="page-smackcast-"] .past .note,
body[class^="page-smackcast-"] .cast-second,
body[class^="page-smackcast-"] .teams-msg,
body[class^="page-smackcast-"] .team-label small{
  font-size:14px !important; line-height:1.55 !important;
}

/* ...but not an <a> that IS a button. The rule above is (0,1,2) and beats
   any plain .btn-flare/.sx-btn/.league-btn-primary class rule (0,1,0), so
   every red-filled anchor button on these pages was rendering RED TEXT ON
   A RED FILL - invisible. Caught 6 Sep 2026 on /smackcast/leagues, where
   the empty state's only call to action ("Set up Smackcast") measured
   color rgb(225,6,0) on background rgb(225,6,0). Restated at (0,2,2).
   NB .sx-btn is deliberately BLACK on /smackcast/success (David, 31 Aug
   2026) and is NOT listed here - it declares its colour at (0,2,1) on its
   own page and must keep winning. */
html body[class^="page-smackcast-"] a.btn-flare,
html body[class^="page-smackcast-"] a.league-btn-primary{color:#fff;}

/* every stray "black box" component still gets a red edge, same rule as
   the product page - a plain hairline reads as broken against true black. */
body[class^="page-smackcast-"] .card,
body[class^="page-smackcast-"] .league-option{
  background:var(--sc-warm) !important;
  border-color:var(--sc-rule) !important;
  color:var(--sc-ink) !important;
}
body[class^="page-smackcast-"] input[type=text],
body[class^="page-smackcast-"] input[type=tel],
body[class^="page-smackcast-"] input[type=email],
body[class^="page-smackcast-"] input[type=number],
body[class^="page-smackcast-"] select{
  background:var(--sc-page) !important;
  border-color:var(--sc-rule) !important;
  color:var(--sc-ink) !important;
}
body[class^="page-smackcast-"] input::placeholder{color:var(--sc-mid);}

/* the shared white footer would read as the page ending early - same fix
   smackcast_product.html already applies to itself. */
html body[class^="page-smackcast-"] footer{
  background:#070707;
  border-top:2px solid var(--sc-red);
  --footer-link:#C3CAD3;
}
html body[class^="page-smackcast-"] footer > span{color:#6f6b65;}

/* DARK HEADER (David + Andy, 29 Aug 2026) - the shared nav was still
   rendering its default light cream bar on every one of these pages,
   caught live on did_you_get_smacked.html after the funnel otherwise
   went dark. smackagram.css's "ONE NAV, ONE TICKER" block (26 Aug 2026)
   sets nav colors sitewide with !important, so beating it here needs
   !important too - specificity alone isn't enough against an !important
   rule. smackcast_product.html carries its own copy of this same block
   rather than linking this file (it already has a complete, separately
   tested dark theme; safer not to risk this file's generic a{}/.card{}/
   input{} rules cascading into 2000+ lines of its own markup this file
   was never checked against) - if this block changes, update both. */
html body[class^="page-smackcast-"] nav{
  background:#070707 !important; border-bottom-color:var(--sc-red) !important;
}
html body[class^="page-smackcast-"] nav .brand{color:var(--sc-ink) !important;}
html body[class^="page-smackcast-"] nav .brand span{color:var(--sc-red) !important;}
html body[class^="page-smackcast-"] nav .nav-links > a,
html body[class^="page-smackcast-"] nav .nav-group-btn,
html body[class^="page-smackcast-"] nav .auth-links a{color:var(--sc-ink) !important;}
html body[class^="page-smackcast-"] nav .nav-links > a:hover,
html body[class^="page-smackcast-"] nav .nav-group-btn:hover,
html body[class^="page-smackcast-"] nav .auth-links a:hover{color:var(--sc-red) !important;}
html body[class^="page-smackcast-"] nav .auth-links a[href="/register"]{
  background:var(--sc-red) !important; color:#fff !important;
}
html body[class^="page-smackcast-"] nav .nav-menu{
  background:var(--sc-warm) !important; border-color:var(--sc-rule-soft) !important;
}
html body[class^="page-smackcast-"] nav .nav-menu a{color:var(--sc-ink) !important;}
html body[class^="page-smackcast-"] nav .nav-menu a:hover{color:var(--sc-red) !important;}
html body[class^="page-smackcast-"] .nav-toggle span{background:var(--sc-ink) !important;}
html body[class^="page-smackcast-"] .nav-drawer{background:var(--sc-page);}
html body[class^="page-smackcast-"] .nav-drawer-close{color:var(--sc-ink);}
html body[class^="page-smackcast-"] .nav-drawer a{color:var(--sc-ink); border-bottom-color:rgba(255,255,255,.12);}
html body[class^="page-smackcast-"] .nav-drawer-auth{border-top-color:rgba(255,255,255,.18);}
