/*
  themes/ufc.css — combat-sports theme, for any event whose `theme.theme_id`
  is "ufc" (visual improvement pass, following the same scalable-theme
  pattern football-ru/cricket-india already established for Issue #30).

  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 UFC/promotion logo, octagon trademark, kit/glove branding, or any
  photo of a real fighter is referenced — this is a deliberate choice, not
  an oversight: a real fighter photo is both copyrighted (someone else's
  photograph) and a right-of-publicity concern (a real, named person's
  likeness), neither of which this project can clear without an explicit,
  approved license. Exactly like football-ru/cricket-india before it, this
  theme is palette + a generic "fight night" motif built entirely 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{
  /* Near-black hero/dark-section background, matching the tone of the
     other two sports themes' own dark sections (header/hero/statusCenter/
     vote/footer) — a warm, off-white "paper" for the light sections
     (confirmed/timeline/faq), distinct from both football-ru's cooler
     white and cricket-india's warmer off-white. */
  --event-bg:#0c0a0a;
  --event-surface:#f6f3f1;
  --event-timeline-surface:#ece7e4;
  --event-faq-surface:#ffffff;

  /* Signal red accent (CTA background, badges, logo mark, scoreboard
     hue) — this is the SAME #d71920 value data/events/ufc-334-gane-
     hokit-2026.json's own (previously inert) theme.vars already named,
     now actually wired up through a real theme instead of a dead,
     never-read custom property. */
  --event-accent:#d71920;
  --event-accent-foreground:#ffffff;
  /* No separate operational hue for this theme (unlike Kanye's red/acid
     split) — a single accent keeps the fight-night palette simple, same
     shape as themes/default.css's/cricket-india's own choice. */
  --event-status-accent:#d71920;
  /* --event-status-accent (#d71920) is only ~2.6:1 against --event-bg
     (#0c0a0a) — 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 ~5.9:1 against --event-bg). Decorative uses of
     --event-status-accent itself (status dot, status-card border, badge
     backgrounds) are unaffected and stay the deeper signal red. */
  --event-status-foreground:#ff5a63;
  /* 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))`). This
     theme has no poll-enabled event today, but the token is defined for
     consistency/future-proofing, matching every other theme's own
     contract. */
  --event-vote-active-foreground:#ff5a63;
  /* --event-accent (#d71920) is only ~2.9:1 against the light
     --event-surface (#f6f3f1)/--event-timeline-surface (#ece7e4) — 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 ~6.1:1 on
     --event-surface): a deeper, same-hue-family red, not an unrelated
     color. */
  --event-light-surface-accent:#9c0f16;
  --event-text:#f5f3f0;
  --event-muted:#6c6a68;
  --event-line:#ded9d5;
  --event-font-display:"Arial Narrow","Helvetica Neue Condensed","Roboto Condensed",Impact,Arial,sans-serif;
  --event-font-body:Arial,Helvetica,sans-serif;
  /* Fight-night hero backdrop (no photo): a soft red spotlight glow from
     the upper-left (evoking arena lighting over a canvas) layered over
     the same dark-to-lighter-to-dark 3-stop diagonal band football-ru/
     cricket-india both use for their own photo-free hero, tinted red
     instead of navy so the three sports themes read as siblings, never
     reskins of each other. */
  --event-hero-bg:radial-gradient(120% 90% at 15% 0%,rgba(215,25,32,.22),transparent 60%),linear-gradient(160deg,var(--event-bg) 0%,#230a0c 55%,var(--event-bg) 100%);
}

/* Decorative, CSS-only "cage fence" texture — two crossing diagonal
   hairline grids (never an actual octagon outline or any promotion
   trademark) plus a faint red wash. 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(45deg,rgba(255,255,255,.045) 0 2px,transparent 2px 28px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.045) 0 2px,transparent 2px 28px),
    linear-gradient(200deg,rgba(215,25,32,.16),transparent 55%);
  opacity:.55;
}

/* Matchday schedule card accent (Issue #30 pattern, reused here) —
   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, same pattern as football-ru/cricket-india:
   scoped entirely to this theme's own stylesheet — only a ufc page ever
   loads this file, so this never touches event-base.css's generic mobile
   sizing that default/Kanye still use unchanged. */
@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{padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px))}
}

.mobileCta{bottom:calc(12px + env(safe-area-inset-bottom, 0px))}

/* Visible keyboard focus (WCAG 1.4.11 non-text contrast, >=3:1). Not
   --event-accent (PR #74 review, P2 #1): .cta/.marketActionCta/.mobileCta
   all paint `background:var(--event-accent)` (event-base.css) — an
   outline in that SAME color sits right against the button's own fill
   with no separation, and against the hero's own red-tinted gradient/
   glow (--event-hero-bg) measured well under 3:1 in the reviewed render.
   --event-status-foreground is the theme's own existing lighter-red
   token, already computed elsewhere in this file for exactly this
   "readable red on this dark palette" purpose — measured ~6.5:1 against
   --event-bg here, comfortably clear of both the button fill and the
   dark hero backdrop. This is the DARK-surface default: header/.hero/
   .statusCenter/.vote/footer (event-base.css's own `background:var(
   --event-bg)` sections) never match either of the light-surface
   selectors below, so they keep this rule unchanged. */
a:focus-visible,button:focus-visible,details summary:focus-visible{
  outline:2px solid var(--event-status-foreground);
  outline-offset:2px;
}

/* PR #74 review, follow-up P2 #2: --event-status-foreground itself only
   measures ~2.5-3:1 on this theme's LIGHT sections (event-base.css's own
   `body`/`.marketAction`/`.timeline`/`.faq`/`.facts`/`.feed`/
   `.sportsSchedule`/`.sources`, all painted with --event-surface/
   --event-timeline-surface/--event-faq-surface, or `body`'s own default
   --event-surface for the two sections that set no background of their
   own, not --event-bg) — below the same 3:1 minimum the rule above
   exists to satisfy. A single color cannot clear 3:1 against both this
   palette's darkest AND lightest surfaces at once (see the dark rule's
   own comment), so the light sections get their OWN, higher-specificity
   override instead: --event-light-surface-accent, this theme's existing
   token already computed for exactly "readable red on a light UFC
   surface" (facts/feed text) — measured >=6.8:1 against every light
   surface here. Only overrides outline-color; outline-width/style/offset
   still come from the dark rule above.

   PR #74 review, follow-up (round 3) P2 #1: .sportsSchedule (the
   clickable scheduleCard links) and .sources (source links) were missed
   in the first pass of this same override — both sit on the identical
   light body background as .facts/.feed, added here rather than as a
   second, separate mechanism. */
.marketAction a:focus-visible,.marketAction button:focus-visible,.marketAction details summary:focus-visible,
.timeline a:focus-visible,.timeline button:focus-visible,.timeline details summary:focus-visible,
.faq a:focus-visible,.faq button:focus-visible,.faq details summary:focus-visible,
.feed a:focus-visible,.feed button:focus-visible,.feed details summary:focus-visible,
.facts a:focus-visible,.facts button:focus-visible,.facts details summary:focus-visible,
.sportsSchedule a:focus-visible,.sportsSchedule button:focus-visible,.sportsSchedule details summary:focus-visible,
.sources a:focus-visible,.sources button:focus-visible,.sources details summary:focus-visible{
  outline-color:var(--event-light-surface-accent);
}

/* PR #74 review, follow-up P2 #3: .moreEvents (event-base.css) paints
   `background:var(--event-accent)` directly — the dark rule's own
   --event-status-foreground measures only ~1.7:1 against that red, well
   under 3:1 (a red-family outline on a red surface, the same "too close
   in hue/luminance to its own backdrop" failure the dark-surface fix
   above already closed for the button fill itself). --event-bg is this
   file's own existing "readable dark swatch on the red .moreEvents
   surface" token — event-base.css's `.moreEvents .label`/`.moreEvents>
   div:first-child>a` already use it the same way — measured >=3.8:1
   against --event-accent here. */
.moreEvents a:focus-visible,.moreEvents button:focus-visible,.moreEvents details summary:focus-visible{
  outline-color:var(--event-bg);
}