/* Fearless — re-themes the shared event page (style.css + event.css) to
   match the Light It Up registration layout, in Fearless's own colors.
   Every rule is scoped to body.fearless-branded, which event.js only sets
   when the loaded event is Fearless, so any other event shown through
   event.html keeps the default This Is It Team look. */

body.fearless-branded {
  /* Pulled from the Fearless banner art: cyan → hot pink → orange. */
  --fl-cyan: #00c2e8;
  --fl-pink: #ff2fa8;
  --fl-orange: #ff8a1f;
  --fl-grad: linear-gradient(90deg, var(--fl-cyan) 0%, var(--fl-pink) 50%, var(--fl-orange) 100%);
  --gold: #ff2fa8;
  --gold-dim: #d81b8c;
}

/* ---------- Buttons: Fearless gradient, white text (same treatment as
   lightitup.css, different colors). ---------- */
body.fearless-branded .btn-gold,
body.fearless-branded .btn-hero-pill {
  background: var(--fl-grad) !important;
  color: #ffffff !important;
  border: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: filter 0.15s, transform 0.15s;
}

body.fearless-branded .btn-gold:hover,
body.fearless-branded .btn-hero-pill:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

body.fearless-branded .btn-gold:disabled,
body.fearless-branded .btn-hero-pill:disabled {
  filter: grayscale(0.6) brightness(0.7);
  transform: none;
  cursor: not-allowed;
}

/* Secondary buttons stay outlined, with a pink edge instead of a fill. */
body.fearless-branded .btn-outline {
  border-color: var(--fl-pink) !important;
  color: #ffffff !important;
}

body.fearless-branded .btn-outline:hover {
  background: rgba(255, 47, 168, 0.12) !important;
}

body.fearless-branded .support-fab,
body.fearless-branded .support-panel-header {
  background: var(--fl-grad) !important;
  color: #ffffff !important;
}

body.fearless-branded .support-close-btn {
  color: #ffffff !important;
}

/* ---------- Header: Light It Up has no logo bar above the banner — the
   banner art already carries the branding. ---------- */
body.fearless-branded .event-header {
  display: none;
}

/* ---------- Hero: big rounded banner + date + countdown + one pill,
   mirroring #liu-hero. ---------- */
body.fearless-branded #event-hero-simple {
  width: calc(100vw - 64px);
  margin-left: calc(50% - 50vw + 32px);
  margin-right: calc(50% - 50vw + 32px);
  margin-top: 24px;
  padding-bottom: 40px;
}

body.fearless-branded .hero-simple-image {
  border-radius: 14px;
  margin-bottom: 28px;
}

#fearless-hero-meta {
  font-size: 16px;
  color: var(--text-dim);
  margin: 0 0 28px;
}

#fearless-countdown {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.fearless-countdown-unit {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  min-width: 76px;
}

.fearless-countdown-unit span {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 30px;
  background: var(--fl-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.fearless-countdown-unit label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-top: 6px;
}

#fearless-hero-extras .btn-hero-pill {
  width: auto;
  padding: 14px 40px;
  font-size: 15px;
}

/* The summary card repeats the banner's name/date/Buy Tickets, so it's
   hidden on the main page like on Light It Up. Kept on the ticket page,
   where it's the only reminder of which event you're buying for. */
body.fearless-branded .event-page:not(.ticket-mode) .event-summary-card {
  display: none;
}

/* ---------- Ticket selection accents ---------- */
body.fearless-branded input[type="checkbox"],
body.fearless-branded input[type="radio"] {
  accent-color: var(--fl-pink);
}

@media (max-width: 640px) {
  /* Edge to edge on phones, same as Light It Up's banner. */
  body.fearless-branded #event-hero-simple {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    padding-bottom: 48px;
  }

  body.fearless-branded .hero-simple-image {
    border-radius: 0;
  }

  #fearless-hero-meta,
  #fearless-countdown {
    padding: 0 16px;
  }

  .fearless-countdown-unit {
    min-width: 64px;
    padding: 10px 12px;
  }

  .fearless-countdown-unit span {
    font-size: 24px;
  }
}

/* ---------- Welcome video backdrop: the This Is It convention crowd shot
   (stage + "THIS IS IT CONVENTION" screen) instead of event.css's default
   stage-lights photo. Centered a little low so the stage screens show. */
body.fearless-branded #event-hero-cta-block::before {
  background: url("../assets/fearless-video-bg.jpg") center 55% / cover no-repeat;
  /* The photo is already dark, so brighten it rather than stacking the
     default 40% black wash on top. */
  filter: brightness(1.5) saturate(1.15);
}

body.fearless-branded #event-hero-cta-block::after {
  background: rgba(10, 10, 10, 0.12);
}