/*
  themes/football-ru.css — RU football / national-team matchday theme, for
  any event whose `theme.theme_id` is "football-ru" (Issue #30: scalable
  sports event themes).

  Same contract as every other theme file (see event-base.css's own header
  comment for the full custom-property list): this file supplies ONLY
  custom-property values plus the two theme-owned decorative hooks
  (.hero background, .themeArtwork) — it never copies event-base.css's
  layout rules, and event-base.css itself is never edited or forked here.

  No official RFS/national-team identity, crest, kit pattern, player photo
  or copyrighted artwork is referenced — palette + generic "matchday
  scoreboard" motif only, built from plain CSS gradients. No external image
  is loaded and no @font-face/web-font is downloaded: --event-font-display
  is a condensed SYSTEM font stack (each name is tried only if already
  installed on the visitor's device; nothing here fetches a font file).
*/

:root{
  /* Deep navy dark sections (header/hero/statusCenter/vote/footer) and a
     near-white "paper" for the light sections (confirmed/timeline/faq) —
     a cooler, more restrained pairing than Kanye's black/grey, matching
     the "modern sports event page, not casino landing" brief. */
  --event-bg:#0b1a3a;
  --event-surface:#f7f8fa;
  --event-timeline-surface:#e7ebf2;
  --event-faq-surface:#ffffff;

  /* Sports red accent (CTA background, badges, logo mark). Chosen darker
     than a pure "signal" red specifically so var(--event-accent-foreground)
     below (white) clears 4.5:1 AA text-on-accent contrast (measured
     ~5.7:1) for .cta/.statusStamp/.statusCenter .label/aside a/.moreEvents/
     .mobileCta — see event-base.css's own header comment for that token's
     exact selector list. */
  --event-accent:#c81e2a;
  --event-accent-foreground:#ffffff;
  /* No separate operational hue for this theme (unlike Kanye's red/acid
     split) — a single accent keeps the matchday palette simpler, same
     shape as themes/default.css's own choice. */
  --event-status-accent:#c81e2a;
  /* --event-status-accent (#c81e2a) is only ~3:1 against --event-bg
     (#0b1a3a) — below 4.5:1 AA — so text that reads this hue directly on
     the dark background (.updated, .vote .label, .saved, .statusSummary
     >div:first-child dd) needs a lighter, text-safe variant instead
     (measured ~6.2:1 against --event-bg). Decorative uses of
     --event-status-accent itself (status dot, status-card border, badge
     backgrounds) are unaffected and stay the deeper red. */
  --event-status-foreground:#ff6b74;
  /* Same contrast problem, same fix, for the poll section's own
     .votePanel button.active state (event-base.css: `color:
     var(--event-vote-active-foreground, var(--event-accent))`). */
  --event-vote-active-foreground:#ff6b74;
  /* --event-accent (#c81e2a) is only ~3:1 against the light --event-surface
     (#f7f8fa)/--event-timeline-surface (#e7ebf2) — below 4.5:1 AA — so
     accent-colored text placed directly on one of those LIGHT surfaces
     (.facts article>span, .feed time, .feed article a) needs a darker,
     text-safe variant instead (measured ~7.4:1 on --event-surface). */
  --event-light-surface-accent:#a11324;
  --event-text:#f5f6fa;
  --event-muted:#6b7280;
  --event-line:#d7dbe3;
  --event-font-display:"Arial Narrow","Helvetica Neue Condensed","Roboto Condensed",Impact,Arial,sans-serif;
  --event-font-body:Arial,Helvetica,sans-serif;
  /* Matchday two-tone hero backdrop (no photo): a slightly lighter navy
     band through the middle reads as a "pitch under floodlights" gradient
     without any image asset. */
  --event-hero-bg:linear-gradient(160deg,var(--event-bg) 0%,#162c56 55%,var(--event-bg) 100%);
}

/* Decorative, CSS-only "scoreboard stripe" texture — no image, no
   copyrighted crest/kit pattern. aria-hidden + pointer-events:none are
   already guaranteed by event-base.css's own .themeArtwork rule (this
   file only ever supplies a background). */
.themeArtwork{
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 46px),
    linear-gradient(200deg,rgba(200,30,42,.14),transparent 55%);
  opacity:.6;
}

/* Matchday schedule card accent (Issue #30) — theme-only restyle of the
   shared .scheduleCard/.scheduleList contract event-base.css defines
   generically; never a second, forked markup. */
.scheduleCard{border-left-width:6px}
.scheduleCard time{display:inline-block;background:var(--event-bg);color:var(--event-text);padding:2px 8px;border-radius:4px}

/* Mobile-first hero compaction (Issue #30, section 7): scoped entirely to
   this theme's own stylesheet — only a football-ru page ever loads this
   file, so this never touches event-base.css's generic mobile sizing that
   every other theme (Kanye/default included) still uses unchanged.
   `.hero{min-height:auto}` lets the hero shrink to its own (now smaller)
   content instead of always filling the viewport, so the sports schedule
   section reads sooner on a real 360-390px device. */
@media(max-width:560px){
  .hero{min-height:auto}
  .heroContent{margin:0 20px 64px}
  .heroTitle{font-size:38px}
  .intro{font-size:16px;margin:16px 0}
  /* Footer safe-area reserve (correction pass, Issue #30): event-base.css's
     own generic `footer{padding:42px 20px 88px}` at this width already
     reserves 88px so the fixed .mobileCta (below) doesn't cover footer
     content — but that flat 88px assumes NO safe-area inset. On a device
     that also has one (e.g. a notched iPhone, home-indicator gesture
     area), .mobileCta's own `bottom` shifts up by that same amount, which
     can push its top edge past the flat 88px reserve. `calc(88px + env())`
     grows the reserve by exactly that inset — 0px, so no change, on any
     device without one. padding-bottom only: top/left/right stay
     event-base.css's own generic values, unchanged. */
  footer{padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px))}
}

/* Sticky mobile CTA: safe-area inset for notched iPhones, pure CSS,
   additive-only (env() falls back to 0px on any device without a safe
   area, so this is visually inert everywhere else and never changes
   event-base.css's own generic 12px position for any other theme). */
.mobileCta{bottom:calc(12px + env(safe-area-inset-bottom, 0px))}

/* Visible keyboard focus on every interactive control this theme's own
   dark accent already has good contrast against (WCAG focus-visible). */
a:focus-visible,button:focus-visible,details summary:focus-visible{
  outline:2px solid var(--event-accent);
  outline-offset:2px;
}


/* Event-specific hero media is a real <img> supplied by the render context.
   Keep the stadium weighted to the right so the left-side copy remains clear. */
.heroMedia{object-position:68% center}
@media(max-width:560px){.heroMedia{object-position:72% center}}