/* ============================================================
   BOMBERS THEME LAYER
   Midnight (default, defined in style.css :root)
   Bomber Blue (alternate, below)
   ============================================================ */

/* ---- Bomber Blue: retuned token set, not a black→blue swap ---- */
[data-theme="blue"] {
  /* deep navy ground — still near-black in value, unmistakably blue in hue */
  --bg-primary:   #050f24;
  --bg-secondary: #08183a;
  --bg-deep:      #030a1a;
  --bg-card:      #0c2149;
  --bg-surface:   #123063;

  --bomber-blue:        #2E86FF;
  --bomber-blue-bright: #57A0FF;
  --bomber-blue-glow:   rgba(70,150,255,0.55);

  --off-white: #e6eefc;
  --muted:     #8FAAD6;

  --border:      rgba(140,185,255,0.16);
  --border-blue: rgba(70,150,255,0.45);

  --nav-gradient-top: linear-gradient(to bottom, rgba(4,13,32,0.97) 0%, rgba(4,13,32,0) 100%);
  --bg-nav-scrolled:  rgba(5,17,42,0.96);
  --bg-mobile-menu:   #050f24;   /* solid: drawers are opaque in both themes */

  --accent:     #6FB3FF;
  --accent-mid: #2E86FF;

  /* cards lift off the ground rather than sinking below it */
  --ev-card-bg:     #0a1c40;
  --ev-card-border: rgba(120,175,255,0.30);
  --ev-card-hover:  rgba(111,179,255,0.75);

  --btw-card-bg:      #0a1b3d;
  --btw-card-border:  rgba(100,160,255,0.48);
  --btw-strip-bg:     linear-gradient(180deg, rgba(16,42,90,0.72) 0%, rgba(8,22,52,0.72) 100%);
  --btw-strip-border: rgba(100,160,255,0.38);

  /* black selectively, where the footer needs to anchor the page */
  --footer-bg: #020713;
}

/* ---- theme transition (quick, and only on colour) ---- */
body,
#nav, .mobile-menu,
.section-events, .section-btw, .section-challenge, .section-exposure,
.section-nation, .section-about, .site-footer,
.ev-card, .btw-hero, .btw-side-card, .btw-strip {
  transition: background-color 0.28s ease, background 0.28s ease,
              border-color 0.28s ease, color 0.28s ease;
}

/* ============================================================
   BOMBER BLUE — component tuning beyond the raw tokens
   ============================================================ */

/* Hero: lift the scrim off the photo so the players stay natural,
   and let the blue ground do the tinting instead of an overlay. */
[data-theme="blue"] .hero-bg {
  background:
    linear-gradient(to right, var(--bg-primary) 28%, rgba(5,15,36,0.90) 42%, rgba(5,15,36,0.28) 58%, transparent 76%),
    linear-gradient(to bottom, rgba(5,15,36,0.78) 0%, transparent 16%, transparent 80%, var(--bg-primary) 100%),
    url('../public/images/hero/players.png') right center / auto 104% no-repeat,
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(70,150,255,0.24) 0%, transparent 70%),
    var(--bg-primary);
}
[data-theme="blue"] .hero-glow-1 { background: rgba(60,140,255,0.30); }
[data-theme="blue"] .hero-glow-2 { background: rgba(60,140,255,0.20); }

/* Events: the card photo scrims are near-black — warm them to navy */
[data-theme="blue"] .ev-media::after {
  background: linear-gradient(to right, rgba(6,18,42,0.90) 0%, rgba(6,18,42,0.70) 34%, rgba(6,18,42,0.30) 62%, rgba(6,18,42,0.06) 100%);
}
[data-theme="blue"] .ev-media-02::after {
  background: linear-gradient(to right, rgba(6,18,42,0.94) 0%, rgba(6,18,42,0.80) 38%, rgba(6,18,42,0.46) 68%, rgba(6,18,42,0.18) 100%);
}
[data-theme="blue"] .ev-media,
[data-theme="blue"] .ev-media::before { background-color: var(--ev-card-bg); }
[data-theme="blue"] .ev-tag {
  background: rgba(70,150,255,0.20);
  border-left-color: var(--accent);
  color: #AFD0FF;
}
[data-theme="blue"] .ev-btn-ghost { border-color: rgba(140,190,255,0.55); }
[data-theme="blue"] .ev-btn-ghost:hover,
[data-theme="blue"] .ev-btn-outline:hover { background: rgba(70,150,255,0.22); }
[data-theme="blue"] .ev-btn-solid {
  background: linear-gradient(180deg, #3D8FFF 0%, #1F63D4 100%);
  border-color: #3D8FFF;
}
[data-theme="blue"] .ev-btn-solid:hover { background: #57A0FF; border-color: #57A0FF; }
[data-theme="blue"] .ev-meta-rule { background: rgba(180,210,255,0.30); }
[data-theme="blue"] .why-item { border-left-color: rgba(160,200,255,0.16); }
[data-theme="blue"] .why-body p,
[data-theme="blue"] .btw-strip-item p { color: #A9BEDE; }

/* Built to Win: photos untouched, only the surrounding scrims shift */
[data-theme="blue"] .section-btw::before {
  background: radial-gradient(ellipse 54% 46% at 56% 42%, rgba(70,150,255,0.22) 0%, transparent 72%);
}
[data-theme="blue"] .btw-hero::before {
  background: linear-gradient(to bottom, rgba(5,16,38,0.90) 0%, rgba(5,16,38,0.58) 32%, rgba(5,16,38,0.18) 70%, transparent 100%);
}
[data-theme="blue"] .btw-hero::after,
[data-theme="blue"] .btw-side-card::after {
  background: linear-gradient(to top, rgba(5,16,38,0.94) 0%, rgba(5,16,38,0.56) 42%, transparent 100%);
}
[data-theme="blue"] .btw-hero,
[data-theme="blue"] .btw-side-card {
  box-shadow: 0 0 38px rgba(70,150,255,0.22), inset 0 0 60px rgba(2,8,22,0.45);
}
[data-theme="blue"] .btw-point { border-left-color: rgba(160,200,255,0.20); }
[data-theme="blue"] .btw-strip-item { border-left-color: rgba(160,200,255,0.18); }
[data-theme="blue"] .btw-legacy { border-top-color: rgba(160,200,255,0.16); }
[data-theme="blue"] .btw-headline {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 46%, #C4DAFB 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* $1K Challenge: chamfered card interior lifts to navy */
[data-theme="blue"] .chal-event-inner {
  background: linear-gradient(100deg, #08172f 0%, #0a1d3c 46%, #0c2247 100%);
}
[data-theme="blue"] .chal-event {
  background: linear-gradient(105deg, #57A0FF 0%, #2E86FF 42%, rgba(46,134,255,0.40) 78%, rgba(46,134,255,0.18) 100%);
}
[data-theme="blue"] .chal-headline {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 42%, #D2E2FA 100%);
  -webkit-background-clip: text; background-clip: text;
}
[data-theme="blue"] .chal-headline em { -webkit-text-fill-color: #6FB3FF; color: #6FB3FF; }
[data-theme="blue"] .chal-sub { color: #C3D4EC; }
[data-theme="blue"] .chal-cta {
  border-color: #2E86FF;
  color: #8FC3FF;
  background: linear-gradient(180deg, rgba(20,48,100,0.65) 0%, rgba(12,30,64,0.65) 100%);
}
[data-theme="blue"] .chal-cta:hover { background: rgba(70,150,255,0.30); border-color: #6FB3FF; }

/* Exposure */
[data-theme="blue"] .exposure-bg-img {
  background:
    linear-gradient(to bottom, var(--bg-secondary) 0%, transparent 12%, transparent 88%, var(--bg-secondary) 100%),
    url('../public/images/sections/bombers_section_10.png') left center / cover no-repeat;
}
[data-theme="blue"] .exposure-overlay {
  background: linear-gradient(to top, rgba(8,24,58,0.92) 0%, transparent 60%);
}

/* Bomber Nation: tiles keep their photographic treatment, ground shifts */
[data-theme="blue"] .nation-tile { background: var(--bg-card); }
[data-theme="blue"] .tile-img { filter: brightness(0.82) saturate(1.02); }
[data-theme="blue"] .nation-tile:hover .tile-img { filter: brightness(0.96) saturate(1.08); }
[data-theme="blue"] .nation-tile::after {
  background: linear-gradient(to top, rgba(5,15,36,0.82) 0%, rgba(5,15,36,0.35) 50%, transparent 100%);
}

/* About + the Mississippi map's surrounding effects */
/* the map's neon outline only reads against a dark pocket — keep the ambient
   wash here close to Midnight's, or the state flattens into the background */
[data-theme="blue"] .about-bridge {
  background:
    radial-gradient(ellipse 44% 46% at 50% 50%, rgba(70,150,255,0.18) 0%, rgba(70,150,255,0.07) 46%, transparent 74%),
    radial-gradient(ellipse 22% 38% at 27% 54%, rgba(90,165,255,0.13) 0%, transparent 72%),
    linear-gradient(to right, transparent 18%, rgba(70,150,255,0.06) 42%, rgba(70,150,255,0.04) 58%, transparent 82%);
}
[data-theme="blue"] .ms-map-container::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 46% at 50% 48%, rgba(2,8,22,0.85) 0%, rgba(2,8,22,0.45) 48%, transparent 76%);
}
[data-theme="blue"] .ms-map-aura {
  background: radial-gradient(ellipse 52% 46% at 50% 48%, rgba(110,180,255,0.30) 0%, rgba(46,134,255,0.13) 42%, transparent 72%);
}
[data-theme="blue"] .ms-map-base { filter: drop-shadow(0 0 30px rgba(90,165,255,0.58)); }
[data-theme="blue"] .ms-pin { box-shadow: 0 0 12px 2px rgba(140,195,255,0.95); }
[data-theme="blue"] .about-overlay {
  background: linear-gradient(to top, rgba(5,15,36,0.58) 0%, transparent 46%);
}
[data-theme="blue"] .about-stat { border-left-color: rgba(160,200,255,0.20); }
[data-theme="blue"] .about-cta { border-color: rgba(70,150,255,0.85); color: #9CCAFF; }
[data-theme="blue"] .about-cta:hover { background: rgba(70,150,255,0.22); border-color: #6FB3FF; }
[data-theme="blue"] .coach { filter: brightness(0.78) saturate(0.82) contrast(1.06); }
[data-theme="blue"] .about-team-photo img { filter: brightness(0.88) saturate(0.92) contrast(1.02); }

/* Register */
[data-theme="blue"] .register-bg {
  background:
    linear-gradient(to bottom, rgba(5,15,36,0.24) 0%, rgba(5,15,36,0.38) 20%, rgba(5,15,36,0.82) 40%, var(--bg-primary) 62%, var(--bg-primary) 100%),
    url('../public/images/register/celebration.png') center top / 114% auto no-repeat,
    var(--bg-primary);
}
[data-theme="blue"] .register-glow-1 { background: radial-gradient(circle, rgba(70,150,255,0.38) 0%, transparent 70%); }
[data-theme="blue"] .register-glow-2 { background: radial-gradient(circle, rgba(70,150,255,0.26) 0%, transparent 70%); }
[data-theme="blue"] .register-grain  { background: rgba(5,15,36,0.08); }
[data-theme="blue"] .register-label  { color: #AFD3FF; }
[data-theme="blue"] .register-events { border-top-color: rgba(160,200,255,0.22); }
[data-theme="blue"] .reg-divider     { background: rgba(160,200,255,0.22); }

/* Buttons: outline/ghost need a blue-aware ground */
[data-theme="blue"] .btn-outline:hover { background: var(--white); color: #06152F; }
[data-theme="blue"] .btn-white { color: #06152F; }
[data-theme="blue"] .btn-gold  { color: #06152F; }
[data-theme="blue"] .btn-ghost {
  background: rgba(140,190,255,0.10);
  border-color: var(--border);
}
[data-theme="blue"] .btn-ghost:hover { background: rgba(140,190,255,0.18); }

/* Mobile-only surfaces from the mobile pass */
[data-theme="blue"] .hero-stats .stat-item { background: var(--bg-primary); }
[data-theme="blue"] .coach-a::before {
  background: linear-gradient(to top, rgba(5,15,36,0.84) 0%, rgba(5,15,36,0.30) 40%, transparent 70%);
}
[data-theme="blue"] .coach-b::before {
  background: linear-gradient(to top, rgba(5,15,36,0.80) 0%, rgba(5,15,36,0.25) 40%, transparent 70%);
}
[data-theme="blue"] .coach-b::after { color: #9CCAFF; }
[data-theme="blue"] .sticky-register {
  background: rgba(5,15,36,0.9);
  border-top-color: rgba(255,255,255,0.14);
}

/* ============================================================
   BOMBER BLUE — responsive parity
   The [data-theme] rules above outrank the plain-class rules inside
   style.css's media queries, so every themed background that has a
   mobile variant must restate that variant here.
   ============================================================ */
@media (max-width: 768px) {
  [data-theme="blue"] .hero-bg {
    background:
      linear-gradient(to bottom, rgba(5,15,36,0.84) 0%, rgba(5,15,36,0.70) 38%, rgba(5,15,36,0.88) 72%, var(--bg-primary) 96%),
      url('../public/images/hero/players.png') 46% top / cover no-repeat,
      var(--bg-primary);
  }
  [data-theme="blue"] .register-bg {
    background:
      linear-gradient(to bottom, rgba(5,15,36,0.30) 0%, rgba(5,15,36,0.46) 16%, rgba(5,15,36,0.86) 32%, var(--bg-primary) 52%, var(--bg-primary) 100%),
      url('../public/images/register/celebration.png') center top / auto 30% no-repeat,
      var(--bg-primary);
  }
  [data-theme="blue"] .about-overlay {
    background: linear-gradient(to top, rgba(5,15,36,0.97) 0%, rgba(5,15,36,0.88) 38%, rgba(5,15,36,0.55) 62%, transparent 84%);
  }
}

@media (max-width: 640px) {
  [data-theme="blue"] .hero-bg {
    background:
      linear-gradient(to bottom, rgba(5,15,36,0.58) 0%, rgba(5,15,36,0.38) 30%, rgba(5,15,36,0.7) 62%, var(--bg-deep) 94%),
      url('../public/images/hero/players.png') 46% top / cover no-repeat,
      var(--bg-primary);
  }
  /* the mobile About drops its scrim entirely — text sits on flat ground */
  [data-theme="blue"] .about-overlay { background: none; }
  [data-theme="blue"] .ms-map-container::before { display: none; }
}

/* ============================================================
   THEME TOGGLE CONTROL
   ============================================================ */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 34px;
  padding: 0 0.7rem 0 0.5rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-cond);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--off-white);
  transition: border-color 0.25s, background 0.25s, color 0.25s;
  justify-self: end;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--border-blue);
  color: var(--white);
  background: rgba(70,150,255,0.10);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* the swatch: a filled disc that reads as the mode you'll get */
.theme-toggle-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 34% 32%, #2E86FF 0%, #123063 55%, #040910 100%);
  box-shadow: 0 0 0 1px rgba(140,190,255,0.35), 0 0 10px rgba(46,134,255,0.45);
  transition: background 0.28s ease, box-shadow 0.28s ease;
}
[data-theme="blue"] .theme-toggle-dot {
  background: radial-gradient(circle at 34% 32%, #9CCAFF 0%, #2E86FF 52%, #0a2150 100%);
  box-shadow: 0 0 0 1px rgba(180,215,255,0.55), 0 0 14px rgba(110,180,255,0.75);
}

/* label names the CURRENT mode: Bombers Blue (default) / White */
.theme-toggle-label::after { content: 'BOMBERS BLUE'; }
[data-theme="white"] .theme-toggle-label::after { content: 'WHITE'; }
[data-theme="white"] .theme-toggle-dot {
  background: radial-gradient(circle at 34% 32%, #ffffff 0%, #e9eef6 60%, #b9c6da 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.6), 0 0 10px rgba(255,255,255,0.35);
}

.nav-theme-toggle { grid-column: 4; }

/* nav grid gains a column for the toggle */
.nav-inner { grid-template-columns: auto 1fr auto auto auto; }
.nav-cta    { grid-column: 3; }
.hamburger  { grid-column: 5; }

/* in-menu toggle for mobile */
.mobile-menu .theme-toggle {
  height: 44px;
  padding: 0 1.2rem 0 0.9rem;
  font-size: 0.78rem;
  gap: 0.65rem;
  margin-top: 0.5rem;
}
.menu-theme-item { display: none; }

@media (max-width: 1100px) {
  /* nav collapses here — keep the toggle visible next to the burger */
  .theme-toggle-label { display: none; }
  .nav-theme-toggle { padding: 0; width: 34px; justify-content: center; }
}
@media (max-width: 640px) {
  .nav-theme-toggle { display: none; }
  .menu-theme-item  { display: block; }
  .mobile-menu .theme-toggle-label { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  body, #nav, .mobile-menu,
  .section-events, .section-btw, .section-challenge, .section-exposure,
  .section-nation, .section-about, .site-footer,
  .ev-card, .btw-hero, .btw-side-card, .btw-strip,
  .theme-toggle, .theme-toggle-dot {
    transition: none !important;
  }
}

/* ============================================================
   THEME CHOICE — labelled two-option control (2026-10-21)
   "Bombers Blue | White"; the selected option is filled + ticked.
   Replaces the single toggle pill in the headers and menus.
   ============================================================ */
.theme-seg {
  display: inline-flex; flex-shrink: 0; padding: 3px; gap: 3px;
  border: 1px solid rgba(140,185,255,0.35); border-radius: 999px;
  background: rgba(255,255,255,0.04);
}
.theme-seg button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: #ffffff; white-space: nowrap;
}
.theme-seg button[aria-pressed="true"] { background: #1F6FE0; color: #ffffff; }
.theme-seg .ts-check { width: 12px; height: 10px; display: none; }
.theme-seg button[aria-pressed="true"] .ts-check { display: inline-block; }
.theme-seg button:focus-visible { outline: 2px solid #9CCAFF; outline-offset: 2px; }
.nav-theme-seg { grid-column: 4; justify-self: end; }
.nav-theme-seg button { min-height: 34px; padding: 0 12px; font-size: 13px; }
@media (max-width: 1100px) { .nav-theme-seg { display: none; } }

/* ============================================================
   BUTTON CONTRAST (2026-10-21): blue buttons with white normal-size
   labels use #1F6FE0 (4.76:1 with white) / hover #1A63D6 (5.5:1).
   Bright #2E86FF / #428AFF stay for accents and large type only.
   ============================================================ */
.btn-blue, [data-theme] .btn-blue { background: #1F6FE0; border-color: #1F6FE0; color: #ffffff; }
.btn-blue:hover, [data-theme] .btn-blue:hover { background: #1A63D6; border-color: #1A63D6; color: #ffffff; }
.ev-btn-solid { background: #1F6FE0; border-color: #1F6FE0; color: #ffffff; }
.ev-btn-solid:hover { background: #1A63D6; border-color: #1A63D6; }