/*
 * ══════════════════════════════════════════════════════════════════════
 *  FIFA WORLD CUP 2026 — BRAZIL LIGHT THEME  🇧🇷
 *  Verde · Amarelo · Azul  |  June–July 2026
 *  Drop this AFTER style.min.css and light-theme.css to apply the theme.
 *  <link rel="stylesheet" href="src/fifa2026-theme.css">
 * ══════════════════════════════════════════════════════════════════════
 */

/* ── 1. BRAZIL COLOR TOKENS ─────────────────────────────────────────── */
:root {
  --br-green:        #009C3B;
  --br-green-bright: #00b847;
  --br-green-deep:   #006b28;
  --br-yellow:       #FCD116;
  --br-yellow-light: #ffe44d;
  --br-yellow-dark:  #c9a800;
  --br-blue:         #002776;
  --br-blue-mid:     #003da5;

  /* map onto site tokens */
  --red:        var(--br-green);
  --red-hot:    var(--br-green-bright);
  --red-deep:   var(--br-green-deep);
  --red-ember:  rgba(0,156,59,0.08);
  --gold:       var(--br-yellow-dark);
  --gold-bright: var(--br-yellow);
  --black:      #ffffff;
  --s:          #f4fdf6;
  --s2:         #eaf7ee;
  --s3:         #dff2e5;
  --border:     rgba(0,156,59,0.18);
  --text:       #0f2618;
  --dim:        #2d5c3a;
  --muted:      #5a8c68;
  --glow:       0 0 24px rgba(0,156,59,0.3), 0 0 60px rgba(252,209,22,0.2);
  --glow-sm:    0 0 10px rgba(0,156,59,0.25);
}

/* ── 2. GLOBAL BASE ── */
html, body {
  background: #ffffff !important;
  color: var(--text) !important;
}

/* Faint green pitch stripes */
body::after {
  background: repeating-linear-gradient(
    180deg,
    transparent         0px,
    transparent         48px,
    rgba(0,156,59,0.03) 48px,
    rgba(0,156,59,0.03) 96px
  ) !important;
}

/* ── 3. SCROLLBAR ── */
::-webkit-scrollbar-track { background: #f0f9f3 !important; }
::-webkit-scrollbar-thumb { background: var(--br-green) !important; }

/* ── 4. NAV ── */
nav {
  background: rgba(255,255,255,0.97) !important;
  border-bottom: 2px solid var(--br-green) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,156,59,0.1) !important;
}
.nav-main {
  border-bottom: 1px solid rgba(0,156,59,0.12) !important;
}
.nav-main::after {
  background: linear-gradient(90deg, transparent, var(--br-green), var(--br-yellow), var(--br-green), transparent) !important;
}

.logo-box {
  background: var(--br-yellow) !important;
  color: #0f2618 !important;
  clip-path: polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%) !important;
}
.logo-text      { color: #0f2618 !important; }
.logo-text span { color: var(--br-green) !important; }

.nav-links a       { color: #2d5c3a !important; }
.nav-links a:hover { color: var(--br-green) !important; }

.nav-cta {
  background: linear-gradient(135deg, var(--br-green), var(--br-green-deep)) !important;
  color: #fff !important;
}
.nav-cta:hover {
  background: var(--br-green-bright) !important;
  box-shadow: var(--glow-sm) !important;
}

/* Isolate feed-track layout so slide animation never causes reflow outside */
.feed-track {
  contain: layout !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Live-feed bar — solid green, white text */
.live-feed {
  background: linear-gradient(90deg, var(--br-green-deep), var(--br-green)) !important;
  border-top: 1px solid rgba(0,107,40,0.3) !important;
}
.live-feed::after {
  background: linear-gradient(270deg, var(--br-green), transparent) !important;
}
.feed-text {
  color: rgba(255,255,255,0.95) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}
.feed-text strong {
  color: var(--br-yellow) !important;
  font-weight: 800 !important;
}
.feed-text em { color: var(--br-yellow-light) !important; }

.live-feed-label {
  background: var(--br-yellow) !important;
  box-shadow: 6px 0 20px -2px rgba(0,0,0,.2) !important;
}
.live-feed-label span { color: #0f2618 !important; }
.live-feed-label-dot {
  background: var(--br-green-deep) !important;
  box-shadow: 0 0 6px var(--br-green-deep) !important;
}

.cs-nav-btn {
  color: rgba(255,255,255,0.9) !important;
  border-color: rgba(255,255,255,0.3) !important;
}
.cs-nav-btn:hover {
  background: rgba(255,255,255,0.15) !important;
  color: var(--br-yellow) !important;
}

/* ── 5. FOUNDER BAR ── */
.founder-bar {
  background: var(--br-yellow) !important;
  border-bottom: 2px solid var(--br-green) !important;
}
.founder-bar-item { color: #0f2618 !important; font-weight: 600 !important; }
.founder-bar-sep  { background: rgba(0,0,0,0.2) !important; }

/* ── 6. HERO ── */
#hero { background: #f4fdf6 !important; }

/* Isolate hero columns so scramble animation inside hero-left
   never causes hero-right (showcase grid) or anything else to reflow */
.hero-left {
  contain: layout !important;
}
.hero-right {
  contain: layout !important;
}
/* Keep hero-inner grid columns stable during scramble */
.hero-inner {
  align-items: start !important;
}

.hero-bg {
  background:
    radial-gradient(ellipse 70% 60% at 60% 30%, rgba(0,156,59,0.1) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 10% 85%, rgba(252,209,22,0.12) 0%, transparent 52%),
    #f4fdf6 !important;
}
.hero-grid {
  background-image:
    linear-gradient(rgba(0,156,59,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,156,59,0.06) 1px, transparent 1px) !important;
  background-size: 64px 64px !important;
}
.hero-vignette {
  background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, #f4fdf6 100%) !important;
}

.hero-tag {
  background: rgba(0,156,59,0.1)    !important;
  border-color: rgba(0,156,59,0.35) !important;
}
.hero-tag span { color: var(--br-green) !important; }
.tag-dot {
  background: var(--br-green) !important;
  box-shadow: 0 0 8px var(--br-green) !important;
}

.hero-title .acc, #hs-acc {
  color: var(--br-green) !important;
  text-shadow: none !important;
}
.hero-title .sub-gold { color: var(--br-yellow-dark) !important; }
.hero-sub             { color: #2d5c3a !important; }
.hero-sub strong      { color: #0f2618 !important; }

.btn-red {
  background: linear-gradient(135deg, var(--br-green), var(--br-green-deep)) !important;
  border-color: rgba(0,156,59,0.3) !important;
  color: #fff !important;
}
.btn-red::before {
  background: linear-gradient(135deg, var(--br-green-bright), var(--br-green)) !important;
}
.btn-red:hover { box-shadow: var(--glow) !important; }

.btn-ghost {
  border-color: rgba(0,156,59,0.25) !important;
  color: #2d5c3a !important;
}
.btn-ghost:hover {
  border-color: var(--br-green) !important;
  color: var(--br-green) !important;
  background: rgba(0,156,59,0.05) !important;
}

/* ── 7. TRUST STATS ── */
#trust { border-top: 1px solid rgba(0,156,59,0.15) !important; }
.tcell {
  background: #ffffff !important;
  border-color: rgba(0,156,59,0.15) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
.tcell:hover {
  border-color: var(--br-green) !important;
  box-shadow: 0 4px 24px rgba(0,156,59,0.15) !important;
}
.t-num   { color: var(--br-green) !important; }
.t-title { color: #0f2618 !important; }
.t-desc  { color: #2d5c3a !important; }

/* ── 8. SECTION HEADINGS ── */
.sk {
  color: var(--br-green) !important;
  letter-spacing: .3em !important;
}
.sk::before, .sk::after {
  background: linear-gradient(90deg, transparent, var(--br-green)) !important;
}
.st { color: #0f2618 !important; }

/* ── 9. EVENTS ── */
#eventos { background: #f0f9f3 !important; }
.ev-sc-card {
  background: #ffffff !important;
  border-color: rgba(0,156,59,0.15) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07) !important;
}
.ev-sc-card:hover,
.ev-sc-card[data-pos="center"] {
  border-color: var(--br-green) !important;
  box-shadow: 0 8px 32px rgba(0,156,59,0.18) !important;
}
.ev-sc-name   { color: #0f2618 !important; }
.ev-sc-detail { color: #2d5c3a !important; }

.b-nav {
  background: #ffffff !important;
  border-color: rgba(0,156,59,0.2) !important;
  color: var(--br-green) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
}
.b-nav:hover {
  background: var(--br-green) !important;
  border-color: var(--br-green) !important;
  color: #fff !important;
}

/* ── 10. PLATFORMS ── */
#platforms { background: #eaf7ee !important; }
.showcase {
  background: #ffffff !important;
  border-color: rgba(0,156,59,0.2) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07) !important;
}
.showcase::before {
  background: linear-gradient(
    90deg,
    var(--br-green),
    var(--br-yellow),
    var(--br-blue-mid),
    var(--br-yellow),
    var(--br-green)
  ) !important;
}
.sc-label        { color: #5a8c68 !important; }
.sc-label::after { background: rgba(0,156,59,0.15) !important; }

.chip {
  background: #f4fdf6 !important;
  border-color: rgba(0,156,59,0.1) !important;
}
.chip:hover {
  border-color: var(--br-green) !important;
  box-shadow: 0 4px 16px rgba(0,156,59,0.15) !important;
  background: #eaf7ee !important;
}
.big-n       { color: var(--br-green) !important; }
.big-n-label { color: #5a8c68 !important; }

.online-badge {
  background: rgba(0,156,59,0.08)   !important;
  border-color: rgba(0,156,59,0.25) !important;
  color: var(--br-green)            !important;
}
.online-badge .tag-dot {
  background: var(--br-green) !important;
  box-shadow: 0 0 6px var(--br-green) !important;
}

/* ── 11. ECOSYSTEM / CARDS ── */
#ecosystem, #beneficios { background: #f4fdf6 !important; }
.card, .benefit-card, .eco-card {
  background: #ffffff !important;
  border-color: rgba(0,156,59,0.15) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
.card:hover, .benefit-card:hover, .eco-card:hover {
  border-color: var(--br-green) !important;
  box-shadow: 0 6px 28px rgba(0,156,59,0.14) !important;
}

/* ── 12. GATE MODAL ── */
.gate {
  background: rgba(244,253,246,0.94) !important;
  backdrop-filter: blur(12px) !important;
}
.gate-box {
  background: #ffffff !important;
  border: 1px solid rgba(0,156,59,0.2) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 24px 64px rgba(0,156,59,0.12) !important;
}
.gate-hero-overlay {
  background: linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0.5) 60%, transparent 100%) !important;
}
.gate-badge {
  background: var(--br-green) !important;
  color: #fff !important;
  border: 1px solid rgba(252,209,22,0.4) !important;
}
.gate-badge-dot {
  background: var(--br-yellow) !important;
  box-shadow: 0 0 6px var(--br-yellow) !important;
}
.gate-platform-row .gate-pop { color: var(--br-green) !important; }
.gate-platform-row .gate-cra { color: var(--br-blue)  !important; }
.gate-launch-date             { color: #5a8c68         !important; }
.gate-launch-desc             { color: #2d5c3a         !important; }

.gate-reg-btn {
  background: linear-gradient(135deg, var(--br-green), var(--br-green-deep)) !important;
  color: #fff !important;
  border: 1px solid rgba(0,107,40,0.25) !important;
}
.gate-reg-btn:hover {
  background: linear-gradient(135deg, var(--br-green-bright), var(--br-green)) !important;
  box-shadow: 0 0 20px rgba(0,156,59,0.35) !important;
}
.gate-divider {
  background: linear-gradient(90deg, transparent, rgba(0,156,59,0.2), transparent) !important;
}
.gate-mentor        { color: #2d5c3a !important; }
.gate-mentor strong { color: var(--br-green) !important; }

.gate-close {
  background: #f4fdf6 !important;
  border-color: rgba(0,156,59,0.2) !important;
  color: #5a8c68 !important;
}
.gate-close:hover {
  border-color: var(--br-green) !important;
  color: var(--br-green) !important;
}
.gate-close-cd { color: var(--br-green) !important; }

/* ── 13. FOOTER ── */
footer, .footer {
  background: #eaf7ee !important;
  border-top: 2px solid var(--br-green) !important;
}
.footer a       { color: #2d5c3a !important; }
.footer a:hover { color: var(--br-green) !important; }

/* ── 14. BRAZIL CORNER BADGE ── */
body::before {
  content: '🇧🇷 BRASIL · FIFA 2026';
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1100;
  background: linear-gradient(135deg, var(--br-yellow), #e6be00);
  color: #0f2618;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .22em;
  padding: .3rem .85rem .3rem .7rem;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 8px 100%);
  border-bottom: 2px solid var(--br-green);
  pointer-events: none;
  text-transform: uppercase;
}

/* ── 15. FIVE STARS — Brazil's 5 titles ── */
.hero-inner::before {
  content: '★  ★  ★  ★  ★';
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--br-yellow-dark);
  font-size: .85rem;
  letter-spacing: .7em;
  opacity: .7;
  pointer-events: none;
  white-space: nowrap;
}

/* ── 16. SCROLL INDICATOR ── */
.scroll-ind-l { background: var(--br-green) !important; }
.scroll-ind-t { color: #5a8c68 !important; }

/* ── 17. POPUPS ── */
.ev-popup, .popup-overlay {
  background: rgba(244,253,246,0.96) !important;
}
.ev-popup-box, .popup-box {
  background: #ffffff !important;
  border: 1px solid rgba(0,156,59,0.2) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.15) !important;
}

/* ── 18. FEED DOT ── */
.feed-dot.green {
  background: var(--br-yellow) !important;
  box-shadow: 0 0 6px var(--br-yellow) !important;
}

/* ── 19. MISC ── */
hr, .divider { border-color: rgba(0,156,59,0.15) !important; }
.badge, .tag, .pill {
  background: rgba(0,156,59,0.1)    !important;
  color: var(--br-green)            !important;
  border-color: rgba(0,156,59,0.25) !important;
}
::selection {
  background: rgba(0,156,59,0.2);
  color: #0f2618;
}

/* ── 20. RESPONSIVE ── */
@media (max-width: 480px) {
  body::before { display: none; }
}