/* ═══════════════════════════════════════════════════════════
   VIVA LA COPA — LIGHT THEME OVERRIDE + TYPOGRAPHY REFINEMENT
   Imports after style.css, overrides the dark palette
   ═══════════════════════════════════════════════════════════ */

/* ── New light palette ── */
:root {
  --night:    #f8f6f1;   /* warm off-white background */
  --deep:     #f0ede6;   /* very light warm grey sections */
  --card:     #ffffff;   /* pure white cards */
  --card2:    #faf8f4;   /* barely-there cream */
  --surface:  #f0ede6;   /* hover state */
  --line:     rgba(60,45,20,.09);
  --line2:    rgba(60,45,20,.16);

  --ink:      #1a1208;   /* near-black warm ink */
  --ink2:     #5a4e38;   /* mid warm brown */
  --ink3:     #82725a;   /* muted taupe — darkened for readable contrast on white cards */

  /* Always-dark text for use on gold/emerald/teal buttons & badges.
     Unlike --night (which flips light/dark per theme), this stays
     dark in both themes so gold buttons stay readable everywhere. */
  --on-gold:  #1a1208;

  --gold:     #b8892a;   /* slightly deeper gold reads better on light */
  --gold2:    #d4a843;
  --emerald:  #1a9c68;
  --teal:     #0d8a84;
  --red:      #c73535;
  --blue:     #1f66e5;

  --shadow-sm: 0 2px 8px rgba(60,45,20,.08);
  --shadow-md: 0 6px 24px rgba(60,45,20,.10);
  --shadow-lg: 0 16px 48px rgba(60,45,20,.13);
}

/* ── Body ── */
body {
  background: var(--night);
  color: var(--ink);
}

/* Remove dark noise overlay — not needed on light */
body::before { display: none; }

/* Scrollbar */
::-webkit-scrollbar-track { background: var(--deep); }
::-webkit-scrollbar-thumb { background: var(--ink3); }

/* ── Typography refinement — reduce weight, improve elegance ── */
/* Headings: from 800 → 600, tighter tracking, better leading */
.hero h1 {
  font-size: clamp(42px, 5.2vw, 72px);
  font-weight: 600;        /* was 800 — much more refined */
  line-height: 1.3;
  letter-spacing: -.025em;
}
.sec-h {
  font-weight: 600;
  font-size: clamp(26px, 3.8vw, 42px);
  letter-spacing: -.02em;
}
.page-title {
  font-weight: 600;
  font-size: clamp(32px, 4.5vw, 56px);
  letter-spacing: -.02em;
}
.pred-h  { font-weight: 600; }
.plan-name { font-weight: 500; }
.plan-price { font-weight: 500; }
.brand-name { font-weight: 500; }
.group-head { font-weight: 500; }
.city-name  { font-weight: 500; }

/* Body text slightly larger and warmer */
body { font-size: 16px; line-height: 1.68; }
.hero-sub { font-size: 17px; color: var(--ink2); }
.sec-p    { color: var(--ink2); }

/* ── Header — light glassmorphism ── */
.site-header {
  background: rgba(248,246,241,.88);
  border-bottom: 1px solid var(--line2);
  backdrop-filter: blur(20px) saturate(1.3);
}
.main-nav a { color: var(--ink2); }
.main-nav a:hover, .main-nav a.on {
  color: var(--ink);
  background: var(--surface);
}
.lang-sw a { color: var(--ink3); }
.lang-sw a:hover { color: var(--ink); background: var(--surface); }
.lang-sw a.on { color: #fff; background: var(--gold); }
.hamburger span { background: var(--ink2); }

/* ── Hero ── */
.hero-wrap {
  background: linear-gradient(160deg, #1a3a28 0%, #0d2519 50%, #1a2835 100%);
  /* keep dark for contrast — light hero would lose impact */
}
.hero-wrap .hero-sub { color: rgba(255,255,255,.72); }
.hero-wrap h1        { color: #ffffff; }
.hero-wrap .hero-badge span { color: #e8c96a; }

/* Page headers stay dark for contrast */
.page-head {
  background: linear-gradient(160deg, #1a3a28 0%, #0d2519 60%, #1a2835 100%);
  color: #fff;
}
.page-head .page-eyebrow { color: #e8c96a; }
.page-head .page-title   { color: #ffffff; }
.page-head .page-sub     { color: rgba(255,255,255,.72); }

/* ── Cards — clean white with warm shadow ── */
.match-card, .group-card, .city-card, .feat-card, .plan-card, .quiz-shell {
  background: var(--card);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.match-card:hover, .city-card:hover {
  border-color: rgba(184,137,42,.35);
  box-shadow: var(--shadow-lg);
}
.feat-card:hover {
  border-color: rgba(184,137,42,.3);
  box-shadow: var(--shadow-lg);
}

/* Match table */
.match-table-wrap { background: var(--card); border-color: var(--line); }
.match-table thead tr { background: var(--deep); border-color: var(--line2); }
.match-table thead th { color: var(--ink3); }
.match-table tbody tr:hover { background: var(--surface); }
.match-table td { color: var(--ink); }
.venue-cell { color: var(--ink2); }

/* Group cards */
.group-head { background: var(--deep); border-color: var(--line); color: var(--ink); }
.group-team-row:hover { background: var(--surface); }
.gtr-name { color: var(--ink); }
.gtr-stat, .gtr-rank { color: var(--ink3); }
.gtr-pts { color: var(--gold); }

/* Leaderboard */
.lb-table-wrap { background: var(--card); border-color: var(--line); }
.lb-table thead tr { background: var(--deep); }
.lb-table thead th { color: var(--ink3); }
.lb-table tbody tr:hover { background: var(--surface); }
.lb-username { color: var(--ink); }
.lb-team { color: var(--ink3); }

/* City cards */
.city-name    { color: var(--ink); }
.city-country { color: var(--ink3); }
.city-matches { color: var(--emerald); }
.city-tag     { background: var(--deep); color: var(--ink2); border-color: var(--line); }
.city-tag.final { background: rgba(184,137,42,.1); color: var(--gold); border-color: rgba(184,137,42,.25); }

/* Feature cards */
.feat-card { background: var(--card); }
.feat-card h3 { color: var(--ink); }
.feat-card p  { color: var(--ink2); }
.feat-icon    { background: var(--deep); border-color: var(--line2); }

/* Quiz */
.quiz-opt {
  background: var(--deep);
  border-color: var(--line);
  color: var(--ink);
}
.quiz-opt:hover {
  border-color: var(--gold);
  background: rgba(184,137,42,.07);
  color: var(--gold);
}
.quiz-score-txt { color: var(--ink2); }

/* Predictor */
.predictor-wrap {
  background: linear-gradient(145deg, #1a3a28, #0d2519);
  border-color: rgba(184,137,42,.25);
}
.pred-form input, .pred-form select {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  color: #fff;
}

/* Premium plans */
.plan-card { background: var(--card); border-color: var(--line); }
.plan-card.popular {
  border-color: var(--gold);
  background: linear-gradient(160deg, #fffdf7, var(--card));
  box-shadow: 0 0 0 1px rgba(184,137,42,.15), var(--shadow-lg);
}
.plan-desc { color: var(--ink2); border-color: var(--line); }
.plan-feature { color: var(--ink2); }
.plan-feature.dim { color: var(--ink3); }

/* Sections */
.section-alt  { background: var(--deep); }
.section-alt2 { background: var(--surface); }

/* Divider */
.divider { background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .2; }

/* Eyebrow labels */
.sec-eyebrow, .page-eyebrow, .pred-eyebrow { color: var(--gold); }

/* Buttons */
.btn-ghost {
  border-color: var(--line2);
  color: var(--ink2);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--ink);
  background: rgba(184,137,42,.06);
}
.btn-sm {
  border-color: var(--line2);
  color: var(--ink2);
}
.btn-sm:hover { border-color: var(--gold); color: var(--gold); }
.btn-outline  {
  border-color: var(--line2);
  color: var(--ink2);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

/* Stat pills in hero (inside dark section — keep light) */
.hstat {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
}
.hstat-lbl { color: rgba(255,255,255,.55); }

/* Footer */
.site-footer { background: #1a1208; border-color: rgba(255,255,255,.08); }
.footer-desc { color: rgba(255,255,255,.45); }
.footer-col h4 { color: var(--gold2); }
.footer-col a  { color: rgba(255,255,255,.45); }
.footer-col a:hover { color: rgba(255,255,255,.9); }
.footer-note   { color: rgba(255,255,255,.35); }
.footer-langs a { color: rgba(255,255,255,.35); }
.footer-langs a:hover { color: var(--gold2); }
.footer-bottom { border-color: rgba(255,255,255,.08); }

/* Ticker in light mode */
.ticker {
  background: var(--card);
  border-bottom: 1px solid var(--line2);
}
.ticker-item { color: var(--ink); }
.ticker-item:hover { background: var(--deep); }
.ti-match-teams { color: var(--ink); }
.ti-match-meta  { color: var(--ink3); }
.ti-time        { color: var(--gold); }
.ti-countdown   { color: var(--teal); }
.ticker-header  { background: var(--deep); border-color: var(--line2); }
.ticker-header span { color: var(--gold); }
.ticker-header-dot  { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.ticker::after      { color: var(--ink3); }

/* Plan outline buttons */
.btn-plan-outline { border-color: var(--line2); color: var(--ink2); }
.btn-plan-outline:hover { border-color: var(--gold); color: var(--gold); }

/* Bottom nav */
.pwa-bottom-nav {
  background: rgba(248,246,241,.96);
  border-color: var(--line2);
}
.pwa-nav-item { color: var(--ink3); }
.pwa-nav-item:hover, .pwa-nav-item.on { color: var(--gold); }

/* RTL light mode adjustments */
html[dir='rtl'] body { font-family: var(--sans); }

/* ═══════════════════════════════════════════════════════════
   WORD CYCLER — Animated headline word
   Vertical clip-reveal with golden underline sweep
   ═══════════════════════════════════════════════════════════ */

.word-cycler {
  position: relative;
  display: inline-block;
  font-style: italic;
  color: var(--gold2);
  /* Reserve enough width so the line never jumps */
  min-width: 3ch;
  vertical-align: baseline;
}

/* The sliding track — clips to one word height at a time */
.word-track {
  display: inline-flex;
  flex-direction: column;
  overflow: hidden;
  /* Height = exactly one line of the h1 */
  height: 1.3em;
  vertical-align: top;
  position: relative;
}

/* Each word sits in the column */
.word-slide {
  display: block;
  line-height: 1.3;
  font-style: italic;
  color: var(--gold2);
  /* Start hidden above the viewport of the track */
  transform: translateY(-100%);
  opacity: 0;
  transition: none;
  white-space: nowrap;
  position: absolute;
  top: 0; left: 0;
}

/* The active word */
.word-slide.active {
  transform: translateY(0);
  opacity: 1;
}

/* Entering from below */
.word-slide.enter {
  animation: word-enter 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Exiting upward */
.word-slide.exit {
  animation: word-exit 0.55s cubic-bezier(0.55, 0, 0.45, 1) forwards;
}

@keyframes word-enter {
  0%   { transform: translateY(110%); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0);    opacity: 1; }
}

@keyframes word-exit {
  0%   { transform: translateY(0);     opacity: 1; }
  40%  { opacity: 1; }
  100% { transform: translateY(-110%); opacity: 0; }
}

/* Golden underline that sweeps in after each word lands */
.word-underline {
  position: absolute;
  bottom: -4px;
  left: 0;
  height: 2.5px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold2), transparent);
  border-radius: 2px;
  transition: none;
  pointer-events: none;
}

.word-underline.sweep {
  animation: underline-sweep 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

.word-underline.retract {
  animation: underline-retract 0.35s ease-in forwards;
}

@keyframes underline-sweep {
  from { width: 0%;   opacity: 1; }
  to   { width: 100%; opacity: 1; }
}

@keyframes underline-retract {
  from { width: 100%; opacity: 1; }
  to   { width: 0%;   opacity: 0; }
}

/* Subtle gold glow on the active word */
.word-slide.active {
  text-shadow:
    0 0 40px rgba(232,201,106, 0.35),
    0 0 80px rgba(232,201,106, 0.15);
}

/* Make the cycler the right size — inherits h1 font */
.hero h1 .word-cycler,
.hero h1 .word-track,
.hero h1 .word-slide {
  font-family: var(--serif);
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* ═══════════════════════════════════════════════════════════
   DARK THEME — activated by [data-theme="dark"]
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --night:    #080d0e;
  --deep:     #0d1517;
  --card:     #111a1c;
  --card2:    #162022;
  --surface:  #1c2b2e;
  --line:     rgba(255,255,255,.07);
  --line2:    rgba(255,255,255,.12);
  --ink:      #eef4f0;
  --ink2:     #8fa89c;
  --ink3:     #7a9690; /* lightened from #4d6660 — was too low contrast on dark cards */
  --gold:     #c9a84c;
  --gold2:    #e8c96a;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
  --shadow-md: 0 6px 24px rgba(0,0,0,.4);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.5);
}
[data-theme="dark"] body { background: var(--night); color: var(--ink); }
[data-theme="dark"] body::before { display: block; }
[data-theme="dark"] .site-header { background: rgba(8,13,14,.88); border-color: var(--line); }
[data-theme="dark"] .main-nav a  { color: var(--ink2); }
[data-theme="dark"] .main-nav a:hover, [data-theme="dark"] .main-nav a.on { color: var(--ink); background: var(--surface); }
[data-theme="dark"] .lang-sw a   { color: var(--ink3); }
[data-theme="dark"] .brand-name  { background: none; -webkit-text-fill-color: var(--ink); }
[data-theme="dark"] .page-head   { background: linear-gradient(160deg, #1a3a28 0%, #0d2519 60%, #1a2835 100%); }
[data-theme="dark"] .match-card, [data-theme="dark"] .group-card,
[data-theme="dark"] .city-card,  [data-theme="dark"] .feat-card,
[data-theme="dark"] .plan-card,  [data-theme="dark"] .quiz-shell { background: var(--card); border-color: var(--line); box-shadow: none; }
[data-theme="dark"] .match-table-wrap, [data-theme="dark"] .lb-table-wrap { background: var(--card); border-color: var(--line); }
[data-theme="dark"] .match-table thead tr, [data-theme="dark"] .lb-table thead tr { background: var(--surface); }
[data-theme="dark"] .match-table thead th, [data-theme="dark"] .lb-table thead th { color: var(--ink3); }
[data-theme="dark"] .match-table tbody tr:hover, [data-theme="dark"] .lb-table tbody tr:hover { background: var(--surface); }
[data-theme="dark"] .team-name-txt, [data-theme="dark"] .gtr-name, [data-theme="dark"] .city-name, [data-theme="dark"] .lb-username { color: var(--ink); }
[data-theme="dark"] .venue-cell, [data-theme="dark"] .gtr-stat, [data-theme="dark"] .city-country, [data-theme="dark"] .lb-team { color: var(--ink3); }
[data-theme="dark"] .section-alt  { background: var(--deep); }
[data-theme="dark"] .section-alt2 { background: var(--card); }
[data-theme="dark"] .quiz-opt     { background: var(--surface); border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .quiz-score-txt { color: var(--ink2); }
[data-theme="dark"] .blog-filter-bar { background: var(--card); border-color: var(--line); }
[data-theme="dark"] .blog-filter-btn { color: var(--ink2); }
[data-theme="dark"] .sidebar-widget  { background: var(--card); border-color: var(--line); }
[data-theme="dark"] .widget-title    { color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .blog-search     { background: var(--surface); border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .cat-item        { color: var(--ink2); }
[data-theme="dark"] .cat-item:hover, [data-theme="dark"] .cat-item.active { background: var(--surface); color: var(--gold); }
[data-theme="dark"] .article-card    { background: var(--card); border-color: var(--line); }
[data-theme="dark"] .art-title       { color: var(--ink); }
[data-theme="dark"] .art-excerpt     { color: var(--ink2); }
[data-theme="dark"] .trending-title  { color: var(--ink); }
[data-theme="dark"] .plan-card       { background: var(--card); }
[data-theme="dark"] .btn-ghost, [data-theme="dark"] .btn-sm, [data-theme="dark"] .btn-outline { border-color: var(--line2); color: var(--ink2); }
[data-theme="dark"] .feat-icon       { background: var(--surface); border-color: var(--line2); }
[data-theme="dark"] .feat-card h3    { color: var(--ink); }
[data-theme="dark"] .feat-card p     { color: var(--ink2); }
[data-theme="dark"] .hstat           { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
[data-theme="dark"] .ad-strip        { background: var(--deep); }
[data-theme="dark"] .ad-card         { background: var(--card); border-color: var(--line); }
[data-theme="dark"] .ad-card-title   { color: var(--ink); }
[data-theme="dark"] .ad-card-sub     { color: var(--ink2); }
[data-theme="dark"] .ticker          { background: var(--night); border-color: var(--line2); }
[data-theme="dark"] .ticker-item     { color: var(--ink); }
[data-theme="dark"] .ticker-header   { background: var(--surface); }
[data-theme="dark"] .pwa-bottom-nav  { background: rgba(8,13,14,.96); border-color: var(--line2); }
[data-theme="dark"] .city-tag        { background: var(--surface); color: var(--ink2); border-color: var(--line); }
[data-theme="dark"] .blog-skeleton   { background: var(--card); border-color: var(--line); }