/*
  themes/cricket-india.css — India cricket theme (e.g. IND vs WI ODI/T20I
  series), for any event whose `theme.theme_id` is "cricket-india" (Issue
  #30: scalable sports event themes). Designed mobile-first: every value
  below is chosen to read correctly at 360-390px before desktop.

  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 BCCI/team/board logo, trademark or copyrighted artwork is referenced —
  palette + generic "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
     warm, neutral off-white "paper" for the light sections (confirmed/
     timeline/faq) — distinct from football-ru's cooler white, so the two
     sports themes don't read as reskins of each other. */
  --event-bg:#071b3f;
  --event-surface:#faf7f2;
  --event-timeline-surface:#f0ece3;
  --event-faq-surface:#ffffff;

  /* Saffron accent (CTA background, badges, logo mark, scoreboard hue).
     --event-accent-foreground is deliberately NOT set here: it falls back
     to --event-bg (event-base.css's own `var(--event-accent-foreground,
     var(--event-bg))` chain), and this theme's deep navy already clears
     4.5:1 AA against the saffron accent (measured ~7.5: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:#ff8f1c;
  /* No separate operational hue for this theme — one saffron accent keeps
     the scoreboard palette simple, same shape as themes/default.css's own
     choice. Unlike football-ru, --event-status-accent (saffron) already
     clears 4.5:1 AA as TEXT directly on --event-bg (measured ~7.5:1), so
     --event-status-foreground/--event-vote-active-foreground need no
     override here — both fall back through the accent chain unchanged. */
  --event-status-accent:#ff8f1c;
  /* --event-accent (#ff8f1c) is only ~2.1:1 against the light
     --event-surface (#faf7f2) — well below 4.5:1 AA — so accent-colored
     text placed directly on a LIGHT surface (.facts article>span, .feed
     time, .feed article a) needs a darker, text-safe variant instead
     (measured ~6.4:1 on --event-surface): a deeper, same-hue-family
     burnt-saffron, not an unrelated color. */
  --event-light-surface-accent:#8a4a0c;
  --event-text:#f7f5f0;
  --event-muted:#7a7f88;
  --event-line:#ddd6ca;
  --event-font-display:"Arial Narrow","Helvetica Neue Condensed",Arial,sans-serif;
  --event-font-body:Arial,Helvetica,sans-serif;
  /* Scoreboard-style two-tone hero backdrop (no photo). */
  --event-hero-bg:linear-gradient(160deg,var(--event-bg) 0%,#123063 55%,var(--event-bg) 100%);
}

/* Decorative, CSS-only "scoreboard grid" texture — no image, no
   copyrighted board/team artwork. 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(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 64px),
    linear-gradient(200deg,rgba(255,143,28,.16),transparent 55%);
  opacity:.55;
}

/* ODI/T20I scoreboard 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;border-radius:4px}
.scheduleCard time{display:inline-block;background:var(--event-bg);color:var(--event-accent);padding:2px 8px;border-radius:4px;letter-spacing:.06em}

/* Mobile-first hero compaction (Issue #30, section 7 — explicitly called
   out for this theme). Scoped entirely to this theme's own stylesheet —
   only a cricket-india 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 much smaller) content instead of always
   filling the viewport, so "IND — WI" / status / CTA / schedule all read
   within the first one-and-a-bit screens at 360-390px, not 1-2 full
   screens of hero text before the schedule ever appears. */
@media(max-width:560px){
  .hero{min-height:auto}
  .heroContent{margin:0 20px 56px}
  .heroTitle{font-size:32px;line-height:.95}
  .intro{font-size:15px;margin:12px 0}
  .statusCard{padding:14px 16px;margin:14px 0}
  .statusHead b{font-size:16px}
  .statusCard>p{font-size:13px}
  /* 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). Called
   out explicitly in Issue #30 for this theme's mobile-first CTA. */
.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: keep bat/ball/stumps on the right and preserve
   the dark left half for the mobile-first hero copy. */
.heroMedia{object-position:66% center}
@media(max-width:560px){.heroMedia{object-position:72% center}}