/*
  Global stylesheet — Paranormal Date
  Design system synced 2026-05-29 to the SPARK / Paranormal Date inspiration page
  (build-assets/0-the-brand/insipration-site/).

  Palette:    Purple primary, Cyan secondary, Amber host accent, Pink pop accent
              on a dark navy → cosmic-purple nebula background.
  Type:       Exo 2 (Eurostile proxy, display) · Sora (section H2s) · DM Sans (body)
  Buttons:    rounded-xl (12px) gradient fills with colored drop-shadow glows — NOT pills
  Cards:      rounded-2xl glassmorphism, blur(12px), faint white border, purple hover halo
  Chips:      pill, color-coded by role (show=purple, platform=cyan, host=amber)
*/

/* ===== 1) Reset and base ===== */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.15;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== 2) Design tokens — synced to inspiration ===== */
:root {
  /* Palette */
  --color-bg:               #0a0e1a;
  --color-bg-deep:          #020817;
  --color-bg-cosmic:        #12082a;
  --color-bg-cosmic-soft:   #0f0820;
  --color-bg-page-gradient: linear-gradient(180deg, #0a0e1a 0%, #12082a 50%, #0f0820 100%);

  --color-surface:          rgba(255,255,255,0.04);
  --color-surface-soft:     rgba(255,255,255,0.07);
  --color-border-soft:      rgba(255,255,255,0.08);
  --color-border-strong:    rgba(255,255,255,0.15);

  --color-text:             #f8fafc;
  --color-text-soft:        #cbd5e1;
  --color-text-muted:       #94a3b8;
  --color-text-dim:         #64748b;

  /* Primary — purple ("the show") */
  --color-primary:          #a855f7;
  --color-primary-deep:     #7c3aed;
  --color-primary-bright:   #c084fc;
  --color-primary-soft:     #e879f9;

  /* Secondary — cyan ("the platform") */
  --color-secondary:        #06b6d4;
  --color-secondary-bright: #22d3ee;
  --color-secondary-deep:   #0891b2;

  /* Amber — host accent ("George Noory") */
  --color-amber:            #fbbf24;
  --color-amber-deep:       #f59e0b;

  /* Pink — pop accent (used sparingly, e.g. heart icons, "DATE" wordmark) */
  --color-pink:             #ec4899;
  --color-pink-soft:        #f472b6;

  --color-focus:            #a855f7;

  /* Glows */
  --glow-purple:            rgba(168,85,247,0.5);
  --glow-purple-soft:       rgba(168,85,247,0.25);
  --glow-cyan:              rgba(34,211,238,0.5);
  --glow-cyan-soft:         rgba(34,211,238,0.25);
  --glow-amber:             rgba(251,191,36,0.4);
  --glow-amber-soft:        rgba(251,191,36,0.2);
  --glow-pink:              rgba(236,72,153,0.5);

  /* Typography */
  --font-display: "Exo 2", "Eurostile Extended", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Sora", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "DM Sans", ui-sans-serif, system-ui, sans-serif;

  /* Spacing */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;

  /* Radii — inspiration uses 12px buttons, 16-24px cards, pill chips */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* Button gradients + shadows */
  --btn-gradient:           linear-gradient(to right, #a855f7, #7c3aed);
  --btn-shadow:             rgba(168,85,247,0.3) 0px 10px 15px -3px, rgba(168,85,247,0.3) 0px 4px 6px -4px;
  --btn-shadow-hover:       rgba(168,85,247,0.5) 0px 10px 25px -3px, rgba(168,85,247,0.4) 0px 4px 10px -4px;

  --btn-gradient-cyan:      linear-gradient(to right, #06b6d4, #0891b2);
  --btn-shadow-cyan:        rgba(6,182,212,0.3) 0px 10px 15px -3px, rgba(6,182,212,0.3) 0px 4px 6px -4px;
  --btn-shadow-cyan-hover:  rgba(34,211,238,0.5) 0px 10px 25px -3px, rgba(6,182,212,0.4) 0px 4px 10px -4px;

  --btn-transition: all 0.25s ease;

  /* Card surface */
  --card-bg:           rgba(255,255,255,0.04);
  --card-border:       1px solid rgba(255,255,255,0.08);
  --card-radius:       16px;
  --card-blur:         blur(12px);
  --card-shadow:       0 4px 24px rgba(0,0,0,0.4);
  --card-shadow-hover: 0 0 40px rgba(168,85,247,0.2);
  --card-border-hover: rgba(168,85,247,0.3);

  --transition-fast: 180ms ease;
  --transition-base: 260ms ease;
  --container-max: 1200px;
}

/* ===== 3) Layout ===== */
.container {
  width: min(100% - 2.5rem, var(--container-max));
  margin-inline: auto;
}

.section { padding: var(--space-20) 0; }

.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(1, minmax(0,1fr)); }

@media (min-width: 600px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 900px)  { .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* ===== 4) Components ===== */

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(10,14,26,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border-soft);
}

.site-header-row {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}

/* Brand logo — sized to be impactful, never tiny (per the placeholder-doc rule).
   Default for wide wordmarks: ~2.75rem mobile, ~3.25rem desktop. */
.site-logo {
  display: inline-flex; align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.site-logo img {
  height: clamp(2.5rem, 6.5vw, 3.5rem);
  width: auto;
  max-width: none;
  display: block;
  /* Subtle glow to lift the wordmark against the dark header */
  filter: drop-shadow(0 0 18px rgba(168,85,247,0.25));
}
@media (min-width: 1024px) {
  .site-logo img { height: 3.5rem; }
}

/* Desktop CTAs in the header — login/join. Hidden below 1024px;
   the canvas-nav drawer renders its own copies on mobile. */
.site-cta {
  display: flex; align-items: center;
  gap: 0.5rem;
}

/* Hide on tablet and below — the canvas-nav drawer takes over */
.desktop-only { display: none; }
@media (min-width: 1024px) {
  .desktop-only { display: flex; }
}

/* ===== Canvas nav (menu.navigation.default) theming =====
   Every selector uses ≥0,2,0 specificity to beat the snippet's
   inline <style> block (which is at 0,1,0 and loads after global.css).
   Reference: .claude/skills/web-page-builder/references/placeholders/menu.navigation.default.md */

/* Drawer + overlay — dark navy to match brand bg */
.hs-canvas-nav .hs-canvas-nav__drawer {
  background: var(--color-bg);
  box-shadow: 0 20px 48px rgba(0,0,0,0.6);
}
.hs-canvas-nav .hs-canvas-nav__overlay {
  background: rgba(2,8,23,0.6);
}

/* Primary CTA (Join) inside the drawer — override hardcoded black to brand purple */
.hs-canvas-nav .hs-canvas-nav__cta--primary {
  background: var(--btn-gradient);
  color: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--btn-shadow);
}
.hs-canvas-nav .hs-canvas-nav__cta--primary:hover {
  box-shadow: var(--btn-shadow-hover);
}

/* Secondary CTA (Login) inside the drawer */
.hs-canvas-nav .hs-canvas-nav__cta--secondary {
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

/* Mobile menu items — light text on dark drawer */
.hs-canvas-nav .hs-canvas-nav__menu--mobile .hs-canvas-nav__link,
.hs-canvas-nav .hs-canvas-nav__menu--mobile .hs-canvas-nav__summary {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 500;
}
.hs-canvas-nav .hs-canvas-nav__menu--mobile .hs-canvas-nav__link:hover,
.hs-canvas-nav .hs-canvas-nav__menu--mobile .hs-canvas-nav__summary:hover {
  color: var(--color-primary-bright);
}

/* Close (×) on dark drawer */
.hs-canvas-nav .hs-canvas-nav__close {
  color: var(--color-text);
}

/* Desktop menu links — subtle, hover to white */
.hs-canvas-nav .hs-canvas-nav__menu--desktop .hs-canvas-nav__link {
  color: rgba(248,250,252,0.7);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color var(--transition-fast);
}
.hs-canvas-nav .hs-canvas-nav__menu--desktop .hs-canvas-nav__link:hover {
  color: var(--color-text);
}

/* Drawer logo — keep proportional, slightly smaller than header */
.hs-canvas-nav .hs-canvas-nav__logo {
  max-width: 150px;
}

/* Hamburger inherits color from header — make sure it's light */
.site-header .hs-canvas-nav__toggle span {
  background: var(--color-text);
}

/* Desktop dropdown panel border + shadow */
@media (min-width: 1024px) {
  .hs-canvas-nav .hs-canvas-nav__menu--desktop > .hs-canvas-nav__item > .hs-canvas-nav__details > .hs-canvas-nav__submenu {
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    box-shadow: 0 20px 48px rgba(0,0,0,0.6);
  }
}

/* Buttons — rounded-xl gradient fills with colored drop-shadow glow */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; border: 0; text-decoration: none; white-space: nowrap;
  border-radius: var(--radius-md);
  padding: 16px 32px;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: var(--btn-transition);
}

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primary — purple "show" CTA */
.btn-primary {
  background: var(--btn-gradient);
  color: #fff;
  box-shadow: var(--btn-shadow);
}
.btn-primary:hover { box-shadow: var(--btn-shadow-hover); }

/* Secondary — cyan "platform" CTA (Apply for TV Show, Subscribe to Spark) */
.btn-cyan {
  background: var(--btn-gradient-cyan);
  color: #fff;
  box-shadow: var(--btn-shadow-cyan);
}
.btn-cyan:hover { box-shadow: var(--btn-shadow-cyan-hover); }

/* Tertiary — glass outline (Learn More, Read About) */
.btn-secondary {
  background: rgba(255,255,255,0.05);
  color: #fff;
  border: 1px solid var(--color-border-strong);
}
.btn-secondary:hover {
  background: rgba(168,85,247,0.1);
  border-color: rgba(168,85,247,0.4);
}

.btn-sm    { padding: 10px 20px; font-size: 0.9rem;   border-radius: var(--radius-md); }
.btn-lg    { padding: 18px 40px; font-size: 1.125rem; }
.btn-block { width: 100%; }

/* Card — glass surface, rounded-2xl, purple hover halo */
.card {
  background: var(--card-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  border: var(--card-border);
  padding: var(--space-6);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--card-border-hover);
  box-shadow: var(--card-shadow-hover);
}

/* Chips — color-coded pill badges */
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid transparent;
}
.chip-purple { background: rgba(168,85,247,0.1);  border-color: rgba(168,85,247,0.25);  color: #c4b5fd; }
.chip-cyan   { background: rgba(34,211,238,0.08); border-color: rgba(34,211,238,0.25);  color: #67e8f9; }
.chip-amber  { background: rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.25);  color: #fcd34d; }
.chip-pink   { background: rgba(236,72,153,0.08); border-color: rgba(236,72,153,0.25);  color: #f9a8d4; }

/* CMS menus */
.canvas-navigation-menu {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-6); margin: 0; padding: 0; list-style: none;
}
.canvas-navigation-menu a {
  color: rgba(248,250,252,0.7); font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.02em; transition: color var(--transition-fast);
}
.canvas-navigation-menu a:hover { color: #fff; }

.canvas-footer-menu {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-4) var(--space-6); margin: 0 0 var(--space-4); padding: 0; list-style: none;
}
.canvas-footer-menu a {
  color: var(--color-text-soft); font-size: 0.875rem; transition: color var(--transition-fast);
}
.canvas-footer-menu a:hover { color: var(--color-secondary-bright); }

/* Breadcrumb */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2); padding: var(--space-3) 0;
  color: var(--color-text-dim); font-size: 0.875rem;
}
.breadcrumb a { color: var(--color-primary); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--color-text); }

/* Site footer */
.site-footer {
  padding: var(--space-16) 0 var(--space-8);
  color: var(--color-text-soft); font-size: 0.875rem;
  border-top: 1px solid var(--color-border-soft);
  background: linear-gradient(180deg, transparent 0%, var(--color-bg-cosmic) 100%);
}

/* Footer logo — smaller than the header but still readable, links home. */
.footer-logo {
  display: inline-flex; align-items: center;
  text-decoration: none;
}
.footer-logo img {
  height: clamp(1.75rem, 3vw, 2.25rem);
  width: auto;
  display: block;
  opacity: 0.9;
  filter: drop-shadow(0 0 12px rgba(168,85,247,0.2));
}

/* Footer legal — the horizontal nav of legal-policy links beneath the footer-top. */
.footer-legal {
  display: flex; flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
}
.footer-legal a {
  font-family: var(--font-body);
  color: var(--color-text-dim);
  font-size: 0.78rem;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-legal a:hover { color: var(--color-primary-bright); }

/* Footer layout — the 3-column top row + bottom bar. */
.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-border-soft);
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .footer-top { grid-template-columns: 1.5fr 1fr 1fr; }
}

.footer-brand { display: flex; flex-direction: column; gap: 1rem; }

.footer-desc {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: rgba(100,116,139,0.9);
  line-height: 1.7;
  max-width: 260px;
}

/* SparkTV partnership pill in the footer-brand column */
.footer-spark-badge {
  display: inline-flex; align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  background: rgba(168,85,247,0.06);
  border: 1px solid rgba(168,85,247,0.18);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(196,181,253,0.7);
  width: fit-content;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.footer-spark-badge:hover {
  background: rgba(168,85,247,0.12);
  border-color: rgba(168,85,247,0.3);
}
.footer-spark-badge img {
  height: 0.85rem;
  width: auto;
  display: inline;
}

/* Footer column heading (Explore / Wondrous Date) */
.footer-col-title {
  font-family: var(--font-heading);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin: 0 0 1rem;
}

/* Footer link lists — vertical, no bullets, comfortable spacing */
.footer-links {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 0.55rem;
}
.footer-links a {
  font-family: var(--font-body);
  color: rgba(100,116,139,0.9);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-links a:hover { color: var(--color-primary-bright); }

/* Footer bottom bar — legal nav + (was) copyright */
.footer-bottom {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 1rem;
}

/* ===== 5) Typography helpers ===== */

/* Hero display — Eurostile/Exo 2, thin weight, very wide tracking */
.display {
  font-family: var(--font-display);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: clamp(0.15em, 2vw, 0.28em);
  line-height: 1;
}

/* The signature hero gradient text — white softening to lilac to violet */
.text-gradient-violet {
  background: linear-gradient(180deg, #ffffff 0%, #e8ddf5 30%, #d4b8f0 60%, #b07ce8 80%, #8b5cf6 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; color: transparent;
}

/* Horizontal purple gradient (the original SparkTV CTA flavour) */
.text-gradient-purple {
  background: linear-gradient(to right, #e879f9, #a855f7, #7c3aed);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; color: transparent;
}

/* Pop pink accent — for single words like "DATE" or heart-flagged labels */
.text-gradient-pink {
  background: linear-gradient(to right, #f472b6, #ec4899);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; color: transparent;
}

/* Section eyebrow — small bold caps with wide tracking, color-coded by role */
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-primary-bright);
  margin-bottom: var(--space-3);
}
.eyebrow-purple { color: var(--color-primary-bright); }
.eyebrow-cyan   { color: var(--color-secondary-bright); }
.eyebrow-amber  { color: var(--color-amber); }
.eyebrow-pink   { color: var(--color-pink-soft); }

/* Section headline — Sora bold, tight tracking */
.section-headline {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

.section-subhead {
  font-family: var(--font-body);
  font-size: 1rem; color: var(--color-text-muted);
  max-width: 600px; margin: 0 auto var(--space-10);
  line-height: 1.75;
}

/* Neon divider — short gradient bar under section heads */
.neon-divider {
  width: 48px; height: 2px;
  background: var(--btn-gradient);
  margin: 0 auto var(--space-8);
  border-radius: 2px;
}

/* Hairline-flanked label — the inspiration's "— DATE —" treatment */
.hairline-label {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin: 1rem 0;
}
.hairline-label::before,
.hairline-label::after {
  content: ""; flex: 1; max-width: 120px; height: 1px;
  background: linear-gradient(to right, transparent, var(--color-pink-soft), transparent);
}

/* Section panel — glass call-out card for major sections.
   Matches the inspiration's purple-glass "Casting CTA" panel pattern.
   Apply by wrapping a section's content in <div class="section-panel">. */
.section-panel {
  position: relative;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 4px 40px rgba(0,0,0,0.45),
    0 0 80px rgba(168,85,247,0.06);
  max-width: 1100px;
  margin: 0 auto;
}
/* Soft purple halo bleeding from above the panel — the inspiration's signature ornament */
.section-panel::before {
  content: '';
  position: absolute;
  top: -60px; left: 10%; right: 10%; height: 120px;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(168,85,247,0.18) 0%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}

/* ===== 6) Utilities ===== */
.text-center { text-align: center; }
.muted       { color: var(--color-text-dim); }
.text-soft   { color: var(--color-text-soft); }

.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}