/* aiftbl.com day/night theme.
   Default (no data-theme attribute) = NIGHT — the original navy palette baked
   into every page's inline styles. data-theme="light" re-maps the shared CSS
   custom properties and patches the few spots that hardcode dark colors.
   Loaded AFTER each page's inline <style> so these overrides win. */

:root[data-theme="light"] {
  --navy:  #EEF2F9;
  --navy2: #FFFFFF;
  --navy3: #FFFFFF;
  --navy4: #F1F4FB;
  --navy5: #DDE5F3;
  --cyan:  #0083B8;
  --gold:  #B2730A;
  --red:   #D32F4D;
  --green: #0B9468;
  --purple:#6E4FC4;
  --white: #101729;   /* "ink" — most text uses var(--white) */
  --gray:  #5E6880;
  --gray-l:#414C66;
  --border: rgba(16, 35, 76, 0.16);
  --border2: rgba(16, 35, 76, 0.34);
}

/* Header/backdrop hardcodes a dark rgba in every page's inline CSS. */
:root[data-theme="light"] header {
  background: rgba(238, 242, 249, 0.92);
}
:root[data-theme="light"] .logo img {
  box-shadow: 0 0 14px rgba(0, 131, 184, 0.35);
}

/* Text that sits on top of imagery / dark overlays must stay white. */
:root[data-theme="light"] .poster-title { color: #FFFFFF; }
:root[data-theme="light"] .duration { color: #FFFFFF; }
:root[data-theme="light"] .play svg { fill: #0A0E1A; }

/* Branded dark bands keep the night palette inside, in both themes:
   re-scope the custom properties for everything within them. */
:root[data-theme="light"] .live-strip-inner,
:root[data-theme="light"] .ai-engine,
:root[data-theme="light"] .league-inner,
:root[data-theme="light"] .cta-band {
  --navy:  #0A0E1A;
  --navy2: #12182B;
  --navy3: #1A2240;
  --navy4: #243157;
  --navy5: #2F3E70;
  --cyan:  #00D4FF;
  --gold:  #F5A623;
  --red:   #E94560;
  --green: #10B981;
  --purple:#A78BFA;
  --white: #FFFFFF;
  --gray:  #8892A4;
  --gray-l:#B8C2D4;
  --border: rgba(0, 212, 255, 0.18);
  --border2: rgba(0, 212, 255, 0.35);
}

/* Match-poster edge fade on the predictions cards blends into the card. */
:root[data-theme="light"] .mc-poster::after {
  background: linear-gradient(90deg, rgba(255,255,255,0) 55%, rgba(255,255,255,0.55) 100%);
}

/* ------------------------------------------------------------------ */
/* Shared nav consistency — this sheet loads on every page after the   */
/* inline styles, so the header behaves identically site-wide.         */
/* ------------------------------------------------------------------ */
.nav a { white-space: nowrap; }
.nav a[aria-current="page"] {
  color: var(--cyan);
  background: rgba(0, 212, 255, 0.08);
  border-color: var(--border);
  text-decoration: none;
}
/* 8 links need a little less air before the nav collapses at 860px. */
@media (max-width: 1180px) {
  .nav a { padding: 8px 9px; letter-spacing: 1.5px; font-size: 12px; }
}

/* ------------------------------------------------------------------ */
/* Theme toggle button (markup injected into every page header).       */
/* ------------------------------------------------------------------ */
.theme-toggle {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--gray-l);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.theme-toggle:hover {
  color: var(--cyan);
  border-color: var(--border2);
  background: rgba(0, 212, 255, 0.08);
  transform: translateY(-1px);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}
/* Night shows the sun (click to brighten); day shows the moon. */
.theme-toggle .ico-moon { display: none; }
:root[data-theme="light"] .theme-toggle .ico-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ico-moon { display: block; }

/* ------------------------------------------------------------------ */
/* Mobile nav — hamburger + slide-down drawer. Every page's inline CSS  */
/* hides .nav at <=860px with no replacement; this sheet (loaded after)  */
/* re-shows it as a toggled drawer and styles the hamburger button       */
/* (markup injected by theme.js). Theme-aware via the shared vars.        */
/* ------------------------------------------------------------------ */
.nav-toggle { display: none; }
@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; width: 40px; height: 40px; flex: none; padding: 0; cursor: pointer;
    border: 1px solid var(--border); border-radius: 10px; background: transparent; margin-left: 4px;
    transition: border-color .2s, background .2s;
  }
  .nav-toggle:hover { border-color: var(--border2); background: rgba(0,212,255,0.08); }
  .nav-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
  .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--gray-l);
    border-radius: 2px; transition: transform .22s ease, opacity .2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  header .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: flex !important; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 4px; padding: 10px 16px 16px;
    background: var(--navy2); border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 40px rgba(0,0,0,0.45);
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: max-height .28s ease, opacity .2s ease, visibility .2s ease;
  }
  header .nav.open { max-height: 84vh; overflow-y: auto; opacity: 1; visibility: visible; }
  header .nav a { padding: 13px 14px; font-size: 15px; letter-spacing: 1.5px; border-radius: 10px;
    white-space: normal; text-align: left; }
}