/* In the Tri · game-night theme for /high-school-football (redesign 2026.09.28).
   Loaded only on that page, after site.css and growth.css, and scoped to
   body.football so nothing else on the site changes. The nav, logo and
   footer keep their layout; only the colours go to night.
   Generic stadium imagery only: no school names, colours, mascots or logos,
   because this page covers every school in the coverage area. The warm
   notes are the stadium lights and the scoreboard bulbs, not a team. */
body.football{
  --night:#0A111E; --night-2:#0F1929; --night-3:#152238; --edge:#25354E;
  --chalk:#F3EEDF; --chalk-soft:#B9C3D3; --lamp:#FFF6DA;
  --amber:#FFB53D; --amber-soft:#FFD27A; --turf:#276340; --pylon:#E1722E;
  --block:'Graduate','Lilita One',Georgia,serif;
  background:var(--night) radial-gradient(ellipse 80% 520px at 50% 0, #13213A 0%, rgba(19,33,58,0) 100%) no-repeat;
  color:var(--chalk);
}
body.football a{ color:var(--amber-soft); }

/* nav and footer */
.football .nav{ background:#070C16; border-bottom:1px solid #1E2B41; }
.football .brand span{ color:var(--chalk); }
.football .brand span::after{ color:#8995A8; }
.football .nav-links a{ color:var(--chalk-soft); }
/* growth.css paints every .btn-orange green; on game night the guide buttons go to scoreboard amber. */
.football .nav-links .btn-orange, .football .signup .btn-orange{ background:var(--amber); border-color:var(--amber); color:#1A1206; }
.football .nav-links .btn-orange:hover, .football .signup .btn-orange:hover{ background:var(--amber-soft); filter:none; }
.football .footer{ background:#070C16; border-top:1px solid #1E2B41; color:var(--chalk-soft); }
.football .footer-links a{ color:var(--chalk); }
.football .footer-links a:hover{ color:var(--amber-soft); }
.football .footer-contact a{ color:var(--chalk); }
.football .footer-legal{ border-top-color:#1E2B41; }
.football .partners-row{ background:#070C16; border-top:1px solid #1E2B41; }
.football .partners-names a, .football .partners-names span{ color:var(--amber-soft); }
.football .partners-how{ color:var(--chalk-soft); }
.football a:focus-visible, .football button:focus-visible{ outline-color:var(--amber); }

/* ---- hero: game night from the home stands ------------------------------ */
.fb-hero{ position:relative; overflow:hidden; isolation:isolate; margin:26px 0 12px; min-height:540px;
  border:1px solid #22324B; border-radius:12px; box-shadow:0 28px 60px -28px rgba(0,0,0,.85);
  background:
    radial-gradient(1.2px 1.2px at 4% 4.5%, rgba(255,255,255,.8) 60%, transparent 62%),
    radial-gradient(1px 1px at 17% 3%, rgba(255,255,255,.55) 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 30% 5.5%, rgba(255,255,255,.7) 60%, transparent 62%),
    radial-gradient(1px 1px at 44% 3%, rgba(255,255,255,.45) 60%, transparent 62%),
    radial-gradient(1px 1px at 52% 40%, rgba(255,255,255,.4) 60%, transparent 62%),
    radial-gradient(1.1px 1.1px at 53% 62%, rgba(255,255,255,.45) 60%, transparent 62%),
    radial-gradient(ellipse 62% 70% at 94% 6%, rgba(255,236,190,.20) 0%, rgba(255,236,190,0) 70%),
    radial-gradient(ellipse 70% 40% at 60% 100%, rgba(120,200,150,.16) 0%, rgba(120,200,150,0) 70%),
    linear-gradient(180deg, #08101D 0%, #0D182A 50%, #172A42 100%); }
.fb-hero svg{ position:absolute; display:block; }
.fb-ridge{ left:0; bottom:176px; width:100%; height:112px; }
.fb-board{ right:150px; top:70px; width:318px; height:auto; overflow:visible;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.55)); }
.fb-board .colon{ animation:fb-blink 2s steps(1) infinite; }
@keyframes fb-blink{ 50%{ opacity:.18; } }
.fb-tower{ right:-50px; top:6px; width:220px; height:400px; overflow:visible; }
.fb-tower .bug{ transform-box:fill-box; transform-origin:center; animation:fb-bug-a 3.4s ease-in-out infinite; }
.fb-tower .bug1{ animation-duration:4.4s; animation-direction:reverse; }
.fb-tower .bug2{ animation-name:fb-bug-b; animation-duration:2.9s; }
.fb-tower .bug3{ animation-name:fb-bug-b; animation-duration:3.8s; animation-direction:reverse; }
@keyframes fb-bug-a{ 0%,100%{ translate:0 0; } 25%{ translate:6px -5px; } 50%{ translate:-3px -9px; } 75%{ translate:-7px 2px; } }
@keyframes fb-bug-b{ 0%,100%{ translate:0 0; } 33%{ translate:-7px 5px; } 66%{ translate:5px 8px; } }
.fb-stands{ left:0; bottom:147px; width:100%; height:62px; }
.fb-field{ left:0; bottom:0; width:100%; height:150px; }

.fb-copy{ position:relative; z-index:2; max-width:610px; padding:50px 40px 186px 56px; }
.fb-copy .nw{ white-space:nowrap; }
.football .kicker{ color:var(--amber); letter-spacing:.22em; }
.football .kicker::before{ content:""; display:inline-block; width:28px; height:2px; margin:0 12px 0 0;
  vertical-align:middle; background:var(--amber); }
.fb-copy h1{ margin:16px 0 18px; font-weight:400; line-height:1; }
.fb-block{ display:block; font-family:var(--block); font-size:62px; line-height:.98; letter-spacing:.01em;
  text-transform:uppercase; color:var(--chalk);
  text-shadow:3px 3px 0 #0A111E, 5px 5px 0 var(--amber); }
.fb-script{ display:block; margin:10px 0 0 4px; font-family:var(--script); font-size:40px; line-height:1.1;
  color:var(--amber-soft); transform:rotate(-3deg); transform-origin:left center;
  text-shadow:2px 2px 0 #0A111E; }
.fb-copy p{ margin:0; max-width:500px; font-size:16.5px; line-height:1.6; color:var(--chalk-soft); }
.fb-copy .actions{ margin-top:24px; }
.football .actions button.btn{ background:var(--amber); border-color:var(--amber); color:#1A1206; font-weight:700; }
.football .actions button.btn:hover{ background:var(--amber-soft); filter:none; }

/* ---- schedule ------------------------------------------------------------ */
.fb-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 28px;
  margin:18px 0 8px; padding:14px 18px; background:var(--night-2); border:1px solid var(--edge); border-radius:8px; }
.fb-bar p{ margin:0; max-width:470px; font-size:14.5px; line-height:1.55; color:var(--chalk-soft); }
.fb-bar b{ font-size:16px; color:var(--amber); }
.fb-jump{ display:flex; flex-wrap:wrap; gap:6px; }
.fb-jump a{ display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:6px 12px;
  background:var(--night-3); border:1px solid var(--edge); border-radius:4px;
  font:600 13.5px/1 Inter,Arial,sans-serif; color:var(--chalk); text-decoration:none; }
.fb-jump a span{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); }
.fb-jump a:hover{ border-color:var(--amber); }

.fb-night{ margin:34px 0 0; scroll-margin-top:96px; }
.fb-day{ display:flex; align-items:center; gap:12px; margin:0 0 14px; }
.fb-day h2{ margin:0; font-family:var(--block); font-weight:400; font-size:25px; line-height:1.1;
  text-transform:uppercase; color:var(--chalk); white-space:nowrap; }
.fb-tag{ padding:5px 8px 4px; border-radius:3px; background:var(--amber); color:#1A1206;
  font:800 10.5px/1 Inter,Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
/* a sideline with its yard ticks */
.fb-rule{ flex:1; min-width:24px; height:9px;
  background:linear-gradient(#34465F,#34465F) left bottom/100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(243,238,223,.32) 0 1px, transparent 1px 11px) left bottom/100% 7px no-repeat; }
.fb-count{ font:700 11.5px/1 Inter,Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase;
  color:var(--chalk-soft); white-space:nowrap; }

.fb-games{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.fb-game{ position:relative; display:flex; flex-direction:column; gap:7px; padding:15px 18px 14px 20px;
  background:linear-gradient(180deg, var(--night-3) 0%, var(--night-2) 100%);
  border:1px solid var(--edge); border-radius:6px; transition:border-color .15s, transform .15s; }
.fb-game::before{ content:""; position:absolute; left:-1px; top:14px; bottom:14px; width:3px;
  border-radius:0 2px 2px 0; background:var(--turf); transition:background-color .15s; }
.fb-game:hover{ border-color:var(--amber); transform:translateY(-2px); }
.fb-game:hover::before{ background:var(--amber); }
.fb-game:focus-within{ outline:3px solid var(--amber); outline-offset:2px; }
.fb-meta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; }
.fb-kick{ font:800 13.5px/1 Inter,Arial,sans-serif; letter-spacing:.05em; color:var(--amber);
  font-variant-numeric:tabular-nums; }
.fb-ok{ font:700 10px/1 Inter,Arial,sans-serif; letter-spacing:.09em; color:#8FD0A8; }
.fb-game .ev-partner{ font-size:10px; padding:3px 7px; }
.fb-game h3{ margin:2px 0 0; font-family:var(--block); font-weight:400; font-size:19px; line-height:1.28;
  text-transform:uppercase; color:var(--chalk); }
.fb-game h3 a{ color:inherit; text-decoration:none; }
.fb-game h3 a:focus-visible{ outline:none; }
.fb-game h3 a::after{ content:""; position:absolute; inset:0; border-radius:6px; }
.fb-at{ padding:0 .12em; font-family:var(--script); font-size:.98em; text-transform:none; color:var(--amber-soft); }
.fb-where{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:13.5px; line-height:1.45; color:var(--chalk-soft); }
.fb-more{ flex:0 0 auto; font:600 13.5px/1 Inter,Arial,sans-serif; color:var(--amber); }
.fb-game:hover .fb-more{ text-decoration:underline; text-underline-offset:3px; }
.fb-price{ font:700 12.5px/1 Inter,Arial,sans-serif; color:var(--amber-soft); }
.football .ev-all{ color:var(--chalk-soft); }

/* related links and signup */
.football .page-head .footer-links a{ color:var(--chalk); }
.football .page-head .footer-links a:hover{ color:var(--amber-soft); }
.football .signup{ background:var(--night-2); border:1px solid var(--edge); box-shadow:none; }
.football .signup h2{ color:var(--chalk); }
.football .signup p{ color:var(--chalk-soft); }
.football .signup .signup-fine{ color:#8995A8; }

/* Under 960px there is no room beside the headline, so the scoreboard moves
   above it. The copy's top padding follows the board's real height: both
   widths are % of the hero, and the board is 360x214. */
@media (max-width:960px){
  .fb-board{ left:24px; right:auto; top:24px; width:min(300px, calc(100% - 120px)); }
  .fb-board .posts{ display:none; }
  .fb-tower{ right:-60px; top:-2px; width:196px; height:356px; }
  .fb-copy{ max-width:640px; padding:calc(min(300px, 100% - 120px) * .5944 + 58px) 32px 178px; }
  .fb-block{ font-size:52px; }
  .fb-ridge{ bottom:156px; height:96px; }
  .fb-stands{ bottom:128px; height:52px; }
  .fb-field{ height:130px; }
}
@media (max-width:820px){
  .fb-games{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .fb-hero{ min-height:0; margin-top:18px; }
  .fb-board{ left:16px; top:18px; width:min(290px, calc(100% - 108px)); }
  .fb-tower{ right:-56px; top:-4px; width:150px; height:273px; }
  .fb-copy{ max-width:none; padding:calc(min(290px, 100% - 108px) * .5944 + 40px) 20px 150px; }
  .fb-block{ font-size:40px; text-shadow:2px 2px 0 #0A111E, 4px 4px 0 var(--amber); }
  .fb-script{ font-size:31px; }
  .fb-copy p{ font-size:15.5px; }
  .fb-ridge{ bottom:128px; height:72px; }
  .fb-stands{ bottom:106px; height:42px; }
  .fb-field{ height:110px; }
  .fb-day h2{ font-size:20px; }
  .fb-bar{ padding:14px 16px; }
  .football .kicker{ font-size:11px; letter-spacing:.14em; }
  .football .kicker::before{ width:18px; margin-right:8px; }
}
@media (max-width:480px){
  .fb-more-w{ display:none; }
  .fb-more{ font-size:17px; }
}
@media (max-width:400px){
  .fb-block{ font-size:35px; }
}
@media (prefers-reduced-motion:reduce){
  .fb-tower .bug, .fb-board .colon{ animation:none; }
  .fb-game, .fb-game::before{ transition:none; }
  .fb-game:hover{ transform:none; }
}

/* 2026.10.05 phone pass: the "checked" tag was 10px. */
@media (max-width:720px){ .fb-ok{ font-size:11px; } }
/* 320px pass 2026.10.05: the day header (date, tag, rule, count) is one nowrap row and ran past the edge. */
@media (max-width:360px){ .fb-day{ flex-wrap:wrap; row-gap:4px; } .fb-rule{ display:none; } }
/* Email ask above the games (2026.10.12): site.css sets it in --ink, unreadable on the field. */
.football .list-ask{ color:var(--chalk-soft); }
.football main .list-ask a{ color:var(--amber); font-weight:700; }