/* Matches NEW_UI/amaplayer-design-system: palette, typography and spacing.
   Legacy token names remain compatible with the existing page templates. */
@font-face { font-family: Outfit; src: url('../fonts/Outfit_500Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Outfit; src: url('../fonts/Outfit_700Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: Outfit; src: url('../fonts/Outfit_900Black.ttf') format('truetype'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/DMSans_400Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/DMSans_500Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/DMSans_600SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/DMSans_700Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
/* Variable-weight WOFF2 builds of the same fonts (Google Fonts, OFL), Latin
   subset: one ~35KB file per family instead of a ~55KB TTF per weight.
   Declared after the TTFs so they win for Latin text; anything outside the
   range (e.g. ₹) still falls back to the full TTFs above. */
@font-face { font-family: Outfit; src: url('../fonts/Outfit-latin-var.woff2') format('woff2'); font-weight: 500 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/DMSans-latin-var.woff2') format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    color-scheme: light;
    --app-chrome: #97F3FF;
    --app-glass-from: #0BB9AB;
    --app-glass-to: #44B8E9;
    --app-orange: #FF6B35;
    --app-border: #B5E4EA;
    --color-bg-dark: #FFFFFF;
    --color-bg-darker: #EAFBFE;
    --color-surface: #FFFFFF;
    --color-surface-hover: #ECF7F8;
    --color-primary: #015391;
    --color-primary-rgb: 1, 83, 145;
    --color-primary-glow: rgba(1, 83, 145, .12);
    --color-secondary: #087F8C;
    --color-secondary-glow: rgba(11, 185, 171, .12);
    --color-text-main: #0A0E17;
    --color-text-muted: #52616B;
    /* The old white token was used as foreground throughout the site. */
    --color-white: #0A0E17;
    --gradient-hero: linear-gradient(160deg, #FFFFFF 15%, #EAFBFE 65%, #97F3FF);
    --gradient-glass: linear-gradient(120deg, rgba(11,185,171,.12), rgba(68,184,233,.18));
    --font-heading: Outfit, sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
}

body { background: var(--color-bg-dark); }
h1, h2, h3, h4 { text-wrap: balance; }
h1 { text-transform: none; letter-spacing: -.04em; font-weight: 700; }
h2 { letter-spacing: -.025em; }
button, input, select, textarea { font-family: var(--font-body); }
a, button { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; }
::selection { background: var(--app-chrome); color: var(--color-text-main); }

.main-header, .main-header.header-scrolled {
    background: rgba(151,243,255,.96);
    border-bottom: 1px solid var(--app-border);
    box-shadow: 0 4px 20px rgba(23,50,58,.06);
}
.logo-text { color: #F25F00; letter-spacing: -.04em; }
.logo-highlight { color: #0BA038; text-shadow: none; }
.logo-img { box-shadow: none; }
.nav-item, .nav-more-btn { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.nav-item.active:not(.nav-cta), .nav-more-btn.active { color: var(--color-primary); }
.nav-more-menu { background: #FFFFFF; border: 1px solid var(--app-border); box-shadow: 0 12px 32px rgba(23,50,58,.12); }
.nav-more-menu .nav-item:hover { background: var(--color-bg-darker); }
.mobile-menu-btn { color: var(--color-text-main); background: rgba(255,255,255,.7); border-color: var(--app-border); }

.hero-wrapper { min-height: min(820px, 92dvh); padding: calc(var(--header-height) + 64px) 0 64px; }
.hero-wrapper > div[style*="background: url"] { opacity: .13 !important; }
.hero-wrapper > div[style*="linear-gradient"] { background: linear-gradient(100deg, rgba(255,255,255,.94) 10%, rgba(234,251,254,.82) 65%, rgba(151,243,255,.62)) !important; }
.hero-content { width: 90%; padding: 0 1rem; }
.hero-content h1 { max-width: 1000px; font-size: clamp(2.6rem, 5.2vw, 4.6rem); line-height: 1.08; }
.hero-highlight { color: var(--color-primary); }
.hero-highlight::after { height: 6px; background: var(--app-orange); opacity: .65; transform: none; border-radius: 8px; }
.hero-content p { line-height: 1.7; }

.glass-card, .champion-card, .wc-video-card, .event-card, .story-card,
.feature-card, .milestone-content, .olympic-stat {
    background: var(--color-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 24px rgba(23,50,58,.04);
}
.glass-card:hover, .champion-card:hover, .event-card:hover { border-color: var(--app-glass-from); }
.feature-icon { color: var(--color-primary); }
.btn { border-radius: 12px; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 700; }
.btn-primary, .btn-live-score { color: #FFFFFF; background: var(--color-primary); box-shadow: 0 4px 12px rgba(1,83,145,.14); }
.btn-primary:hover, .btn-live-score:hover { color: #FFFFFF; background: #01448C; box-shadow: 0 6px 18px rgba(1,83,145,.2); transform: translateY(-2px); }
.btn-outline { color: var(--color-primary); border: 1px solid var(--color-primary); background: #FFFFFF; }
.btn-outline:hover { color: #FFFFFF; background: var(--color-primary); }
.btn:active, .store-badge:active { transform: translateY(1px); }
.store-badge, .store-badge-sm { border-radius: 12px; box-shadow: none; }
.store-badge:not(.store-badge-apple), .store-badge-sm:not(.store-badge-apple) { background: var(--color-primary); border-color: var(--color-primary); color: #FFFFFF; }
.store-badge:not(.store-badge-apple):hover, .store-badge-sm:not(.store-badge-apple):hover { background: #01448C; color: #FFFFFF; }
.store-badge:not(.store-badge-apple) .store-badge-sub { color: #FFFFFF; opacity: .85; }
.store-badge-apple { background: #FFFFFF; color: var(--color-text-main); border: 1px solid var(--app-border); }
.store-badge-apple:hover { background: var(--color-bg-darker); color: var(--color-text-main); }
.store-badge-sm::before { display: none; }
.store-badge-sub { letter-spacing: .04em; }

.form-input, select, textarea { background: #FFFFFF; color: var(--color-text-main); border-color: var(--app-border); border-radius: 12px; }
.form-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-glow); }
.form-input::placeholder { color: #52616B; }
.main-footer { background: var(--color-bg-darker); border-top: 1px solid var(--app-border); }
.main-footer ul, .main-footer p { opacity: 1 !important; }
.main-footer a:hover { color: var(--color-primary); }
.champion-card-body h3, .wc-video-title { color: var(--color-text-main); }
.champion-card-body .champion-event, .wc-video-meta { color: var(--color-text-muted); }
.champion-card-overlay { background: linear-gradient(to top, rgba(234,251,254,.6), transparent); }
.olympic-overlay { background: linear-gradient(180deg, rgba(234,251,254,.95), rgba(255,255,255,.92)); }
.olympic-gold, .olympic-subtitle em, .olympic-badge, .olympic-stat-number, .olympic-quote cite, .milestone-final .milestone-content i { color: #8A5100; text-shadow: none; }
.olympic-quote { background: #FFF6EB; border-color: var(--app-orange); }
.close-event-modal, .fake-play-btn { color: #FFFFFF; }
.event-video-modal { overscroll-behavior: contain; }

body .wc-banner { background: var(--gradient-glass); border-color: var(--app-border); }
body .wc-banner-title { color: var(--color-text-main); text-transform: none; }
body .wc-banner-sub, body .wc-banner-by, body .wc-bn-card-top { color: var(--color-text-muted); }
body .wc-pill-gold, body .wc-bn-status { color: #8A5100; }
body .wc-gold { background: none; -webkit-text-fill-color: currentColor; color: var(--color-primary); }
body .wc-banner-emblem { background: #FFFFFF; box-shadow: none; border-color: var(--app-border); }
body .wc-banner-cta { background: var(--color-primary); color: #FFFFFF; border-radius: 12px; box-shadow: none; }
body .wc-bn-card { background: #FFFFFF; border-color: var(--app-border); }
body .wc-bn-card:hover { background: #ECF7F8; border-color: var(--app-glass-from); }
body .wc-page-wrapper { background: var(--gradient-hero); font-family: var(--font-body); }
body .wc-title { text-shadow: none; text-transform: none; letter-spacing: -.025em; }
body .wc-card, body .wc-tabs, body .wc-modal-content { background: #FFFFFF; border-color: var(--app-border); box-shadow: 0 6px 24px rgba(23,50,58,.06); }
body .wc-tab-btn.active { background: var(--color-primary); color: #FFFFFF; box-shadow: none; }
body .wc-card:hover { background: #ECF7F8; }
body .wc-modal { overscroll-behavior: contain; }
body .wc-champion-hero { background: #FFF9EF; box-shadow: none; }
body .wc-champion-name { background: none; -webkit-text-fill-color: currentColor; color: #8A5100; }
body .wc-champion-tagline, body .wc-final-header { color: #8A5100; }
body .wc-final-score-card { background: #FFFFFF; }
body .champion-final-match { background: #FFF9EF !important; box-shadow: none !important; }
body .wc-modal-close { color: var(--color-text-main); background: #EAFBFE; }
.blog-container { border-color: var(--app-border) !important; box-shadow: 0 8px 30px rgba(23,50,58,.06) !important; }
body .faq-item { border-color: var(--app-border); }

/* Keep score semantics and team colours; only theme their surrounding chrome. */
body .ls-filter-btn, body .lm-tab { background: #ECF7F8; border-color: var(--app-border); }
body .ls-filter-btn.active, body .lm-tab.active { background: var(--color-primary); color: #FFFFFF; }
.ls-match-card, .lm-scorecard { background: #FFFFFF; border-color: var(--app-border); }
.ls-hero, .lm-hero { background: var(--gradient-hero); }
body .ls-card, body .lm-tt-hero { background: #FFFFFF; border-color: var(--app-border); box-shadow: 0 6px 24px rgba(23,50,58,.06); }
body .ls-card:hover { box-shadow: 0 8px 28px rgba(23,50,58,.1); border-color: var(--app-glass-from); }
body .ls-team-row.winning .ls-main-score, body .ls-team-row.winning .ls-team-logo, body .ls-match-result { color: #08783F; text-shadow: none; }
body .lm-champion-badge { color: #4A3B00; }
/* Presentation overrides for markup emitted by the unchanged score renderer. */
body .lm-col-header { color: var(--color-text-main) !important; }
body .lm-table-header { background: #EAFBFE !important; }
body .lm-hero-sport-badge { color: #FFFFFF !important; background: var(--color-primary) !important; }
body .lm-fow-section { background: #ECF7F8 !important; }
body .close-video-modal, body .fake-play-btn { color: #FFFFFF; }
body .pitch-name { color: #FFFFFF; }
body .ls-skeleton-card { background: #EAFBFE; border-color: var(--app-border); }
body .ls-skeleton-line { background: #B5E4EA; }
.ls-search-container { padding-top: 24px; }

/* Standalone Markdown articles use the shared layout without a hero wrapper. */
body > .main-header ~ :is(h1, h2, h3, p, ul, ol) {
    max-width: 800px;
    width: calc(100% - 48px);
    margin-inline: auto;
}
body > .main-header + h1 { margin-top: calc(var(--header-height) + 48px); font-size: clamp(2rem, 4vw, 3.25rem); }
body > .main-header ~ h2 { margin-top: 40px; }
body > .main-header ~ :is(ul, ol) { padding-left: 24px; margin-bottom: 24px; }
body > .main-header ~ ul { list-style: disc; }
body > .main-header ~ :is(p, ul, ol) { line-height: 1.8; }
body > .main-header ~ p a { color: var(--color-primary); text-decoration: underline; }
body .note-box p { color: #805600; }
body[data-accent="green"] :is(.quote-block, .highlight-box h3) { color: #08783F; }

@media (max-width: 1100px) {
    .nav-links { background: #EAFBFE; border-color: var(--app-border); }
}
@media (max-width: 600px) {
    .hero-wrapper { min-height: auto; padding-top: calc(var(--header-height) + 48px); padding-bottom: 48px; }
    .hero-content { width: 100%; padding-inline: 24px; }
    .hero-content h1 { font-size: clamp(2.4rem, 10vw, 3.2rem); }
    .hero-content > div > div { min-width: 0 !important; }
    .section-py { padding: 56px 0; }
    .section-py-lg { padding: 72px 0; }
    .glass-card { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .reveal-on-scroll { opacity: 1; transform: none; }
}