/* ShowPrompt — shared theme layer
   Loaded after each page's inline <style>, so these rules win.
   Centralises the refined hero glow, per-page accent, and small polish.
   Per-page accent is set with a tiny inline <style>:root{--accent:#…} on the page. */

:root { --accent: #FF9A00; }

/* Primary buttons: brighter orange needs dark text for proper contrast */
.btn-primary { color: #0B1120 !important; }

/* Brand: larger wordmark, and let the TV logo mark stand on its own
   (drop the old square container box around it). */
.nav-wordmark { font-size: 22px !important; }
.nav-logo-icon {
  background: none !important; border: none !important;
  width: auto !important; height: auto !important;
}
.nav-logo-icon svg { width: 40px !important; height: 40px !important; }
.nav-logo { gap: 12px !important; }

/* ── Refined hero glow ──────────────────────────────────────────────
   A soft, masked "spotlight" instead of a heavy blob, tinted to the
   page's --accent. Applies to every hero variant used across the site. */
.hero, .hiw-hero, .uc-hero, .page-hero { position: relative; overflow: hidden; }

.hero::before, .hiw-hero::before, .uc-hero::before, .page-hero::before {
  content: ''; position: absolute; top: -170px; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 660px; pointer-events: none; z-index: 0;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--accent) 24%, transparent) 0%, transparent 70%) center top / 600px 440px no-repeat,
    radial-gradient(closest-side, color-mix(in srgb, var(--accent) 11%, transparent) 0%, transparent 72%) center top / 980px 600px no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 86%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 86%);
}

/* Keep hero content above the glow */
.hero > *, .hiw-hero > *, .uc-hero > *, .page-hero > *,
.uc-hero-inner, .page-hero-inner { position: relative; z-index: 1; }

/* Centre every hero so the title sits inside the glow — the glow then reads
   as light coming off the title itself. */
.uc-hero-inner {
  grid-template-columns: 1fr !important;
  text-align: center; justify-items: center; gap: 32px !important;
}
.uc-hero-inner h1, .uc-hero-inner p, .uc-hero-inner .hero-sub { margin-left: auto; margin-right: auto; }
.uc-hero-actions { justify-content: center !important; }
.uc-mockup { max-width: 780px; }
.page-hero-inner { text-align: center; }

/* The title emits a soft accent glow (sells the illusion) */
.hero h1, .hiw-hero h1, .uc-hero h1, .page-hero h1 {
  text-shadow: 0 0 55px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Hero eyebrow label adopts the page accent (titles/buttons keep brand orange) */
.hero .label, .hiw-hero .label, .uc-hero .label, .page-hero .label,
.hero .label-badge, .uc-hero-label {
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important;
}

/* Fallback for browsers without color-mix: a sensible orange-tinted glow */
@supports not (background: color-mix(in srgb, red, blue)) {
  .hero::before, .hiw-hero::before, .uc-hero::before, .page-hero::before {
    background:
      radial-gradient(closest-side, rgba(255,154,0,0.22) 0%, transparent 70%) center top / 600px 440px no-repeat,
      radial-gradient(closest-side, rgba(255,154,0,0.10) 0%, transparent 72%) center top / 980px 600px no-repeat;
  }
}