/* FightChoice brand fonts + wordmark CSS for the static (Blade) SEO pages (ufc_gnn-rrzs).
   Standalone mirror of the @font-face + wordmark rules in src/assets/main.css — the SPA
   bundles those with hashed filenames Blade can't reference, so this file + /fonts/* are
   served at stable public paths and <link>ed from every seo/*.blade.php. Keep in sync with
   main.css. Also carries the static navbar styles (ufc_gnn-flsd). */

/* ── Theme tokens (ufc_gnn-a00u) ──────────────────────────────────────────────
   The static SEO pages used to hardcode either a light look (fighter/landing/404)
   or a dark look (bout/events/fighters), so they ignored the user's saved theme and
   the fighter page opened light while the dark-default app was dark. These custom
   properties give every static page ONE token set that flips on `html.dark` (added
   before first paint by seo/_theme-head.blade.php). Dark is the DEFAULT — it mirrors
   the SPA — and `:root` (no .dark) is the opt-in light palette. Blade <style> blocks
   consume these via var(); brand.css defines them, so source order doesn't matter. */
:root {
  color-scheme: light;
  --fc-bg: #f8fafc;
  --fc-text: #0f172a;
  --fc-heading: #0f172a;
  --fc-text-muted: #64748b;
  --fc-text-subtle: #94a3b8;
  --fc-card-bg: #ffffff;
  --fc-card-border: #e2e8f0;
  --fc-card-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  --fc-chip-bg: #f1f5f9;
  --fc-divider: #e2e8f0;
  --fc-accent: #7c3aed;
  --fc-accent-strong: #7c3aed;
  --fc-accent-hover: #6d28d9;
  --fc-cta-shadow: 0 6px 16px rgba(124, 58, 237, .25);
  --fc-win: #059669;
  --fc-loss: #dc2626;
  --fc-hover-bg: rgba(124, 58, 237, .06);
  /* Nav bar is pinned DARK in both themes to mirror the SPA TopNav (its bg-gray-900 /
     border-gray-800 have no light variant), so the static→SPA header handoff is seamless
     even in light mode (ufc_gnn-hu7j). gray-900 / gray-800 / gray-50 / gray-300. */
  --fc-nav-bg: #111827;
  --fc-nav-border: #1f2937;
  --fc-nav-logo: #f9fafb;
  --fc-nav-link: #d1d5db;
  --fc-blue: #2563eb;
  /* AI-pick winner tiers + accents */
  --fc-emerald-bg: rgba(16, 185, 129, .12);
  --fc-emerald-border: #6ee7b7;
  --fc-emerald-fg: #047857;
  --fc-amber-bg: rgba(245, 158, 11, .14);
  --fc-amber-border: #fcd34d;
  --fc-amber-fg: #b45309;
  --fc-gray-bg: #f8fafc;
  --fc-gray-border: #e2e8f0;
  --fc-consensus-bg: rgba(99, 102, 241, .08);
  --fc-consensus-border: #c7d2fe;
  --fc-consensus-fg: #4f46e5;
}
html.dark {
  color-scheme: dark;
  --fc-bg: #030712;
  --fc-text: #e5e7eb;
  --fc-heading: #f9fafb;
  --fc-text-muted: #9ca3af;
  --fc-text-subtle: #64748b;
  --fc-card-bg: rgba(17, 24, 39, .6);
  --fc-card-border: #1f2937;
  --fc-card-shadow: none;
  --fc-chip-bg: rgba(31, 41, 55, .6);
  --fc-divider: #1f2937;
  --fc-accent: #a78bfa;
  --fc-accent-strong: #7c3aed;
  --fc-accent-hover: #8b5cf6;
  --fc-cta-shadow: 0 6px 16px rgba(124, 58, 237, .35);
  --fc-win: #34d399;
  --fc-loss: #f87171;
  --fc-hover-bg: rgba(31, 41, 55, .5);
  /* Same pinned-dark nav palette as :root (ufc_gnn-hu7j) — the nav never lightens. */
  --fc-nav-bg: #111827;
  --fc-nav-border: #1f2937;
  --fc-nav-logo: #f9fafb;
  --fc-nav-link: #d1d5db;
  --fc-blue: #60a5fa;
  --fc-emerald-bg: rgba(16, 185, 129, .15);
  --fc-emerald-border: #065f46;
  --fc-emerald-fg: #34d399;
  --fc-amber-bg: rgba(245, 158, 11, .15);
  --fc-amber-border: #92400e;
  --fc-amber-fg: #fbbf24;
  --fc-gray-bg: rgba(17, 24, 39, .6);
  --fc-gray-border: #1f2937;
  --fc-consensus-bg: rgba(99, 102, 241, .12);
  --fc-consensus-border: #3730a3;
  --fc-consensus-fg: #a5b4fc;
}

/* Event/section header display face: Dream MMA, patched + subset woff2 (ufc_gnn-g26z).
   The source TTF only carried an uppercase 'D' glyph; the patch script
   (fe_service/scripts/patch-dream-mma.py) cmap-remaps A-Z (except D) onto the lowercase
   outlines. Real 0-9 glyphs, so no digit unicode-range hack (ufc_gnn-da2u). */
@font-face {
  font-family: 'Dream MMA';
  src: url('/fonts/DreamMMA.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Chomsky (SIL OFL). Blackletter face for the ENTIRE "FightChoice" wordmark
   (subset to those letters). */
@font-face {
  font-family: 'Chomsky';
  src: url('/fonts/Chomsky-wordmark.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* Standard heading face (ufc_gnn-z94o): Bebas Neue (SIL OFL, Dharma Type). Condensed,
   effectively all-caps display sans applied to every unclassed h1-h6 (see the bare-tag
   rule below). Single weight (Regular) — heavier heading weights are faux-bolded. */
@font-face {
  font-family: 'Bebas Neue';
  src: url('/fonts/BebasNeue-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Bare h1-h6 (specificity 0,0,1): a font-family CLASS like .font-event-header (0,1,0) or the
   .fc-frak wordmark out-ranks this, so classed headers keep their own face. Per-page inline
   <style> blocks set heading font-SIZE/margin only (never font-family), so this rule wins the
   family on every plain static heading. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Bebas Neue', 'Impact', 'Arial Narrow', sans-serif;
}

/* Screen-reader-only: real text present for crawlers + assistive tech but clipped from view. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Brand wordmark: "FightChoice" is real text in the Chomsky blackletter webfont. The ".APP"
   suffix is a static SVG outline (.wordmark-tld). Real "FightChoice.app" lives in an .sr-only sibling. */
.fc-wordmark {
  white-space: nowrap;
}

.fc-frak {
  /* The whole "FightChoice" wordmark in Chomsky blackletter (one font, incl. the F).
     font-weight:400 is REQUIRED (Chomsky is single-weight; heavier weights faux-bold). */
  font-family: 'Chomsky', serif;
  font-weight: 400;
  font-size: 2em;
  line-height: 1;
}

/* ".APP" TLD suffix: a static SVG outline of Dekatron SemiBold Italic, baseline-aligned. */
.wordmark-tld {
  display: inline-block;
  height: 0.48em;
  width: auto;
  vertical-align: baseline;
  margin-left: 0.18em;
}

/* "Choice" sits tight against "Fight" — no manual gap. */
.wordmark-choice {
  margin-left: 0;
}

/* Event/section header face (ufc_gnn-jpdt): Dream MMA.
   Used for page titles (event / matchup / section titles) — NOT body copy. Real digits. */
.font-event-header {
  font-family: 'Dream MMA', 'Impact', 'Arial Narrow', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Static navbar (ufc_gnn-flsd; chrome match ufc_gnn-hu7j): visually MIRRORS the SPA TopNav
   (fe_service/src/components/TopNav.vue) so clicking a static link into the SPA shows no header
   jump. Full-width sticky bar — h-16 (64px), px-6 (24px), gray-900 bg + gray-800 bottom border —
   Wordmark on the left (mr-auto), then gray-300 14px/500 link pills with a gray-800 hover fill,
   white hover text, and a brand-400 active state. Same font stack as the SPA. */
.fc-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 0 24px;
  background: var(--fc-nav-bg);
  border-bottom: 1px solid var(--fc-nav-border);
}
.fc-nav .fc-nav-logo {
  color: var(--fc-nav-logo);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: auto;        /* push the menu to the right, mirroring TopNav's mr-auto Wordmark */
  font-size: 1.125rem;       /* text-lg, so .fc-frak (2em) renders at 36px like the SPA <Wordmark/> */
}
.fc-nav .fc-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;                  /* gap-1 */
}
.fc-nav .fc-nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;          /* SPA .touch-target */
  padding: 0 12px;           /* px-3 */
  border-radius: 8px;        /* rounded-lg */
  color: var(--fc-nav-link);
  text-decoration: none;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* match SPA Tailwind default font-sans */
  font-size: 14px;           /* text-sm */
  font-weight: 500;          /* font-medium */
  line-height: 1;
  white-space: nowrap;
  transition: background-color .15s, color .15s;   /* transition-colors */
}
.fc-nav .fc-nav-links a:hover {
  background: #1f2937;       /* hover:bg-gray-800 */
  color: #ffffff;            /* hover:text-white */
}
.fc-nav .fc-nav-links a.is-active {
  background: #1f2937;       /* bg-gray-800 */
  color: #a78bfa;            /* text-brand-400 active highlight */
}
/* Lock glyph on the auth-gated items (Full Reports / Wallets), mirroring TopNav's guest lock. */
.fc-nav .fc-nav-lock {
  height: 12px;              /* h-3 */
  width: 12px;               /* w-3 */
  flex-shrink: 0;
  color: #6b7280;            /* text-gray-500 */
}

/* ── Shared static-page panels + AI-pick winner styling (ufc_gnn-fy09) ──
   Mirrors the SPA's EventBoutView panel chrome (rounded-2xl / gray-800 border /
   gray-900-60 fill / uppercase gray-400 header) and PredictionReport.vue's tiered
   winner banner (emerald when confident, amber, else neutral) so the static bout /
   events / fighter pages can all share ONE look. Theme-aware via the --fc-* tokens
   above (ufc_gnn-a00u): dark by default, light when the user opted into 'light'. */

/* Panel chrome — matches EventBoutView's `rounded-2xl border border-gray-800
   bg-gray-900/60 p-5`. */
.fc-panel {
  background: var(--fc-card-bg);
  border: 1px solid var(--fc-card-border);
  border-radius: 16px;                 /* rounded-2xl */
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--fc-card-shadow);
}
/* Panel header — standardized to MATCH the static fighter profile's .card h2 (ufc_gnn-vrxg):
   Bebas Neue (inherited from the bare h1-h6 rule; do NOT set font-family here), the enlarged
   24px size established on the profile by ufc_gnn-ulmi, same transform/letter-spacing/color/
   margin. Keeps every .fc-panel header uniform across the bout page + any other static page
   using .fc-panel. (The .fc-panel--consensus color accent below is a deliberate exception.) */
.fc-panel > h2,
.fc-panel-title {
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--fc-heading);
  margin: 0 0 14px;
}

/* AI-pick winner banner — mirrors PredictionReport.vue's tiered treatment:
   conf >= 65 → emerald, >= 55 → amber, else neutral. Emerald is the confident/GREEN
   highlight of the predicted winner (the primary ask of ufc_gnn-fy09). */
.fc-winner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid;
  border-radius: 12px;                 /* rounded-xl */
  padding: 12px 16px;
}
.fc-winner-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 2px;
}
.fc-winner-name { font-size: 18px; font-weight: 700; color: var(--fc-heading); }
.fc-winner-right { text-align: right; }
.fc-winner-conf { font-size: 26px; font-weight: 900; line-height: 1; }
.fc-winner-conf-label { font-size: 12px; color: var(--fc-text-muted); margin-top: 2px; }

.fc-winner--emerald { background: var(--fc-emerald-bg); border-color: var(--fc-emerald-border); }
.fc-winner--emerald .fc-winner-label,
.fc-winner--emerald .fc-winner-conf { color: var(--fc-emerald-fg); }

.fc-winner--amber { background: var(--fc-amber-bg); border-color: var(--fc-amber-border); }
.fc-winner--amber .fc-winner-label,
.fc-winner--amber .fc-winner-conf { color: var(--fc-amber-fg); }

.fc-winner--gray { background: var(--fc-gray-bg); border-color: var(--fc-gray-border); }
.fc-winner--gray .fc-winner-label { color: var(--fc-text-muted); }
.fc-winner--gray .fc-winner-conf { color: var(--fc-text); }

/* Locked teaser pill — emerald, matches the SPA reasoning/bet "unlock" pills. */
.fc-pill {
  display: inline-block;
  white-space: nowrap;
  background: #059669;                 /* emerald-600 */
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
}
.fc-pill:hover { background: #10b981; } /* emerald-500 */

/* ── Signed-in progressive enhancement (ufc_gnn-x9hb) ──
   The static HTML always ships the GUEST view (crawlable + publicly cached, unchanged —
   the 'zero divergence' design, ufc_gnn-2v09). When the visitor is signed in, the
   before-paint stamp in seo/_theme-head.blade.php adds `.is-authed` to <html> (and
   /static-auth-enhance.js confirms via GET /api/me, clearing it on 401). These rules are a
   pure CSS toggle so there is no flash:
   1. hide guest-only affordances (the nav 'Sign In' link);
   2. restyle the bout teaser pills from an emerald 'unlock' teaser into a brand-accent
      'Run' action button (the JS swaps the text → 'Run' and href → /folders). */
.is-authed [data-guest-only] { display: none !important; }
.is-authed .fc-pill {
  background: var(--fc-accent-strong);   /* match the primary 'Run' action colour (.cta a) */
}
.is-authed .fc-pill:hover { background: var(--fc-accent); }

/* Web Consensus accent — indigo, mirrors PredictionReport.vue's consensus box. */
.fc-panel--consensus {
  background: var(--fc-consensus-bg);
  border-color: var(--fc-consensus-border);
}
.fc-panel--consensus > h2 { color: var(--fc-consensus-fg); }

/* ── Shared static fighter-roster cards (ufc_gnn-10if) ──
   Card chrome for the static /fighters index, matching the /events index card rows
   (bordered rounded card, gray-800 border/gray-900-60 fill, brand-accent hover, chevron)
   so the static bout / events / fighter pages all read as one system. Theme-aware via
   the --fc-* tokens (ufc_gnn-a00u). Responsive grid keeps the ~500-name roster compact. */
.fc-roster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 560px) {
  .fc-roster { grid-template-columns: 1fr 1fr; }
}
.fc-roster-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--fc-card-border);
  border-radius: 12px;                  /* rounded-xl */
  background: var(--fc-card-bg);
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--fc-card-shadow);
  transition: border-color .15s, background-color .15s;
}
.fc-roster-card:hover { border-color: var(--fc-accent); background: var(--fc-hover-bg); }
.fc-roster-main { min-width: 0; }
.fc-roster-name {
  font-weight: 600;
  color: var(--fc-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .15s;
}
.fc-roster-card:hover .fc-roster-name { color: var(--fc-accent); }
.fc-roster-nick { color: var(--fc-text-subtle); font-weight: 400; }
.fc-roster-meta {
  font-size: 12px;
  color: var(--fc-text-muted);
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.fc-roster-record {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--fc-text);
}
.fc-roster-wc { color: var(--fc-blue); }
.fc-roster-chev {
  height: 16px;
  width: 16px;
  color: var(--fc-text-subtle);
  flex-shrink: 0;
  transition: color .15s;
}
.fc-roster-card:hover .fc-roster-chev { color: var(--fc-text-muted); }

/* ── Shared static-page footer (ufc_gnn-e3au) ── mirrors the SPA footer (fe_service/src/App.vue):
   © {year} wordmark, Terms of Service, FAQ, Blog, Contact, and the disclaimer, laid out as one
   centered, wrapping row of small muted text. Sits on the same always-dark nav bar (var(--fc-nav-*))
   as seo/_navbar so the static top/bottom chrome is consistent in both themes; link colours match
   the SPA footer's gray-500 → gray-300 hover. Root-relative hrefs. */
.fc-footer {
  margin-top: 48px;
  padding: 16px 24px 24px;
  background: var(--fc-nav-bg);
  border-top: 1px solid var(--fc-nav-border);
}
.fc-footer .fc-footer-inner {
  max-width: 64rem;          /* max-w-5xl */
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 24px;             /* gap-x-6 gap-y-1 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 12px;           /* text-xs */
  line-height: 1.5;
  color: #6b7280;            /* text-gray-500 */
  text-align: center;
}
.fc-footer .fc-footer-inner a {
  color: #6b7280;            /* text-gray-500 */
  text-decoration: none;
  transition: color .15s;
}
.fc-footer .fc-footer-inner a:hover {
  color: #d1d5db;            /* hover:text-gray-300 */
  text-decoration: underline;
}
.fc-footer .fc-footer-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.fc-footer .fc-footer-copy .fc-wordmark { color: #f9fafb; }
.fc-footer .fc-footer-copy .fc-frak { font-size: 1.4em; }  /* scaled down from the nav's 2em for the small footer row */