/* Light It Up — re-themes the shared component system (style.css + event.css)
   via CSS custom-property overrides rather than rewriting components from
   scratch. Loaded after both, so these variables win. Fearless is
   completely unaffected — it never loads this file. */

:root {
  --bg: #05070a;
  --surface: #12161c;
  --surface-2: #1a2028;
  --border: #262d38;
  --gold: #ffd60a; /* electric "light it up" accent, replaces Fearless's orange */
  --gold-dim: #e0b600;
  --text: #f5f7fa;
  --text-dim: #9aa4b2;
}

@font-face {
  font-family: "Anton";
  src: local("Anton");
}

/* ---------- Buttons: purple-to-red gradient, matching the lightning bolts
   in the hero artwork. Applied to the actual CTA buttons (.btn-gold,
   .btn-hero-pill, .btn-outline) — left as-is for genuinely secondary
   controls like the small text links and the language switcher, which
   would just look noisy painted the same way. Text goes white here
   instead of the near-black used against solid --gold, since white reads
   far better against a saturated purple/red gradient and matches the
   hero art's own white lettering. */
.btn-gold,
.btn-hero-pill,
.btn-outline {
  background: linear-gradient(90deg, #7c3aed 0%, #d6249f 50%, #f43f5e 100%) !important;
  color: #ffffff !important;
  border: none !important;
  transition: filter 0.15s, transform 0.15s;
}

.btn-gold:hover,
.btn-hero-pill:hover,
.btn-outline:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

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

.support-fab {
  background: linear-gradient(90deg, #7c3aed 0%, #d6249f 50%, #f43f5e 100%) !important;
  color: #ffffff !important;
}

.support-fab:hover {
  filter: brightness(1.12);
}

.support-panel-header {
  background: linear-gradient(90deg, #7c3aed 0%, #d6249f 50%, #f43f5e 100%) !important;
  color: #ffffff !important;
}

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

/* ---------- Hero / countdown ----------
   The hero is a single designed graphic (title, date, and location are
   already baked into the artwork) rather than text overlaid on a photo, so
   this just displays it big and full-bleed, then a text overlay would be
   redundant. Full-bleed matches the same technique .event-summary-card
   etc. already use elsewhere in event.css (break out of the narrow
   .event-main column, inset only 32px / 16px on mobile) rather than a
   custom width — keeps this section's edges flush with everything else
   instead of looking narrower/boxed-in. */

#liu-hero {
  position: relative;
  text-align: center;
  padding: 0 0 40px;
  margin-bottom: 32px;
  box-sizing: border-box;
  width: calc(100vw - 64px);
  margin-left: calc(50% - 50vw + 32px);
  margin-right: calc(50% - 50vw + 32px);
}

#liu-hero-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  margin-bottom: 28px;
}

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

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

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

.liu-countdown-unit span {
  display: block;
  font-family: "Anton", "Montserrat", sans-serif;
  font-size: 30px;
  background: linear-gradient(90deg, #7c3aed 0%, #d6249f 50%, #f43f5e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

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

#liu-hero .btn-hero-pill {
  width: auto;
  padding: 14px 36px;
  font-size: 15px;
}

@media (max-width: 640px) {
  #liu-hero {
    padding: 0 0 56px;
    width: calc(100vw - 32px);
    margin-left: calc(50% - 50vw + 16px);
    margin-right: calc(50% - 50vw + 16px);
  }

  #liu-hero-image {
    border-radius: 10px;
    margin-bottom: 32px;
  }

  #liu-countdown {
    margin-bottom: 40px;
  }

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

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

/* ---------- Replace Fearless-specific photo backgrounds inherited from
   event.css with the real Light It Up hero art, now that it exists. Only
   the mobile menu uses it here — the Welcome Video block keeps event.css's
   own default background so the hero banner graphic doesn't repeat twice
   on the same page. */

.utility-bar.mobile-menu-open {
  background: linear-gradient(180deg, rgba(5, 7, 10, 0.82), rgba(5, 7, 10, 0.95)),
    url("../assets/light-it-up-hero.png") center 30% / cover no-repeat !important;
}

/* Dedicated ticket page (?step=tickets) backdrop — event.css's default is a
   heavily blurred, near-black version of whatever the event's image_url
   is. Overridden here to use the hero art directly, unblurred and lighter,
   so it actually reads as the Light It Up banner instead of an abstract
   dark blur. */
.event-page.ticket-mode::before {
  background: url("../assets/light-it-up-hero.png") center 30% / cover no-repeat !important;
  filter: saturate(1.1) !important;
}

.event-page.ticket-mode::after {
  background: linear-gradient(180deg, rgba(5, 7, 10, 0.72), rgba(5, 7, 10, 0.85)) !important;
}

/* ---------- Fearless's "simple hero" (#event-hero-simple) just re-displays
   the event's image_url a second time — redundant here since #liu-hero
   already shows the same artwork as the designed banner above. Hide it
   only on this page; Fearless still relies on it via event.css. ---------- */

#event-hero-simple {
  display: none !important;
}

/* ---------- Welcome Video CTA block — Light It Up has no promo video, so
   this collapses to just a stage-lights photo behind a duplicate RSVP
   button. Hidden via CSS rather than removed from the HTML, since
   lightitup.js references its child elements (#event-hero-video-col etc.)
   unconditionally on every page load. Fearless keeps this block via
   event.css, unaffected. ---------- */

#event-hero-cta-block {
  display: none !important;
}

/* ---------- Ticket type selection — radio cards, not a quantity stepper
   (General Admission vs Virtual Access, pick one). ---------- */

.liu-ticket-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.liu-ticket-option:last-child {
  margin-bottom: 0;
}

.liu-ticket-option:hover {
  border-color: var(--gold-dim);
}

.liu-ticket-option.is-selected {
  border-color: transparent;
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.16), rgba(244, 63, 94, 0.16));
  box-shadow: inset 0 0 0 1.5px #d6249f;
}

.liu-ticket-option.is-soldout {
  opacity: 0.5;
  cursor: not-allowed;
}

.liu-ticket-option input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: #d6249f;
  flex-shrink: 0;
}

.liu-ticket-option-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.liu-ticket-option-info strong {
  font-size: 16px;
}

.liu-ticket-option-info span {
  font-size: 13px;
  color: var(--text-dim);
}

/* ---------- Event summary card — redundant with the designed #liu-hero
   banner above (same name/date/RSVP), so hidden here. Hidden via CSS
   rather than removed from the HTML since lightitup.js references its
   children (#ev-thumb, #ev-name, #get-access-btn, etc.) unconditionally
   on every page load. Fearless keeps this card via event.css,
   unaffected. ---------- */

.event-summary-card {
  display: none !important;
}

/* ---------- "Can't make it in person?" virtual-access promo band ---------- */

#liu-virtual-promo {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 130px 24px;
  margin-bottom: 32px;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-sizing: border-box;
  width: calc(100vw - 64px);
  margin-left: calc(50% - 50vw + 32px);
  margin-right: calc(50% - 50vw + 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 540px;
  background:
    linear-gradient(160deg, rgba(5, 7, 10, 0.82), rgba(5, 7, 10, 0.88)),
    url("../assets/light-it-up-hero.png") center 30% / cover no-repeat;
}

#liu-virtual-promo h3 {
  font-family: "Anton", "Montserrat", sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 6vw, 56px);
  letter-spacing: 0.01em;
  margin: 0 0 16px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

#liu-virtual-promo p {
  color: var(--text-dim);
  font-size: 18px;
  max-width: 560px;
  margin: 0 auto 32px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

#liu-virtual-promo .btn-gold {
  width: auto;
  padding: 18px 44px;
  font-size: 16px;
  display: inline-block;
}

@media (max-width: 640px) {
  #liu-virtual-promo {
    padding: 72px 18px;
    min-height: 400px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border: none;
    border-radius: 0;
  }
}