/* Same font files as styles/font-overrides.css — last @font-face wins so these load from /fonts (no Webflow CORS). */
@font-face {
  font-family: Sugar Peachy;
  src: url('/fonts/6823196ade90fea73e8e6f49_SugarPeachy-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Sugar Peachy;
  src: url('/fonts/6823196b5078496620baca67_SugarPeachy-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Sugar Peachy;
  src: url('/fonts/6823196bd30a30cb9faecda3_SugarPeachy-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Quicksand;
  src: url('/fonts/68231a25bc19eb6c1f208a6d_Quicksand-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Quicksand;
  src: url('/fonts/68231a25c6efc758105c0b16_Quicksand-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* From original index.html <style> block — after Webflow imports */
[data-section-enabled='false'] {
  display: none !important;
}

/* .nav-logo was a plain <div> in the original export; it's a real <a> now
   (Next Link, so the logo can navigate home from any page — see Nav.tsx),
   which picks up the shared CSS's global `a { text-decoration: underline }`
   rule that a <div> never did. Same "invisible until it's a real link"
   fix .btn already needed, applied here too, to keep the logo's appearance
   pixel-identical to before. */
.nav-logo {
  text-decoration: none;
}

.about__title-main {
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
}

@media (max-width: 479px) {
  .about__title-main {
    white-space: normal;
  }
}

/* If legacy scripts fail or GSAP never hides the Webflow loader (cream fullscreen) */
body[data-gf-loader-dismiss='true'] .loading-container {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* -------------------------- legal pages -------------------------- */
/* Same section-padding/background tokens as .tickets — plain body copy,
   no sticker-card treatment needed for dense legal text. */

.legal {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
  background-color: var(--color-light);
}

.legal__content {
  max-width: 48em;
  margin: 0 auto;
}

.legal__content h2 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.legal__content p,
.legal__content li {
  font-size: 1.125em;
  margin-bottom: 1em;
}

.legal__content ul {
  list-style: disc;
  padding-left: 1.5em;
  margin-bottom: 1em;
}

.legal__content li {
  margin-bottom: 0.5em;
}

.legal__updated {
  opacity: 0.6;
  margin-bottom: 3em;
}

/* -------------------------- /tickets page -------------------------- */

.tickets {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
  background-color: var(--color-light);
  position: relative;
}

.tickets__header {
  text-align: center;
  max-width: 40em;
  margin: 0 auto 3em;
}

.tickets__h1 {
  margin-bottom: 0.4em;
}

.h2__boxed.is--tickets {
  /* em, not rem: this box's font-size cascades from the huge h1 it sits in
     (.h2__boxed sets font-size: .95em on itself), so a root-relative rem
     value barely registers against how large the box actually renders. */
  border-radius: 0.25em;
  transform: rotate(-3deg);
  /* .h2__boxed is display:flex, which is block-level — inside this h1 (a
     full-width block element) it stretches to fill the whole line instead
     of shrink-wrapping to "Tickets". width:fit-content keeps it flex
     (needed for its icon/text centering) while sizing to its content. */
  width: fit-content;
  /* text-align:center on .tickets__header only centers inline content —
     this is a block-level flex box now, so it needs its own auto margins
     to line up under "Get Your" instead of sitting at the left edge. */
  margin: 0 auto;
}

.tickets__p {
  font-size: 1.125em;
}

.ticket-checkout {
  max-width: 32em;
  margin: 0 auto;
}

.ticket-checkout__card {
  border: 0.125em solid var(--color-dark);
  background-color: var(--color-white);
  border-radius: 1em;
  box-shadow: 0.5em 0.5em 0 0 #00000026;
  padding: 2em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.ticket-checkout__card.is--shake {
  animation: gf-shake 0.5s;
}

.ticket-form__label {
  font-weight: 700;
  margin-top: 0.75em;
  margin-bottom: 0.25em;
}

.ticket-form__field {
  margin-bottom: 0;
}

.ticket-price {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  margin: 0.75em 0;
}

.ticket-price__original {
  text-decoration: line-through;
  opacity: 0.5;
  font-size: 1.125em;
  transition: opacity 200ms cubic-bezier(0.625, 0.05, 0, 1);
}

.ticket-price__current {
  font-family: 'Sugar Peachy', Arial, sans-serif;
  font-size: 1.75em;
  color: var(--color-orange);
}

.ticket-checkout__message {
  font-weight: 700;
}

.ticket-checkout__message.is--error {
  color: var(--color-orange);
}

.ticket-checkout__pay {
  width: 100%;
  margin-top: 0.5em;
  color: var(--color-white);
}

.ticket-checkout__pay.is--loading {
  pointer-events: none;
  animation: gf-btn-pulse 1s infinite;
}

.ticket-view {
  max-width: 24em;
  margin: 0 auto;
  text-align: center;
  border: 0.125em solid var(--color-dark);
  background-color: var(--color-white);
  border-radius: 1em;
  box-shadow: 0.5em 0.5em 0 0 #00000026;
  padding: 2.5em 2em;
}

.ticket-view__badge {
  display: inline-block;
  font-family: 'Sugar Peachy', Arial, sans-serif;
  font-size: 1.25em;
  background-color: var(--color-mango);
  border: 0.125em solid var(--color-dark);
  border-radius: 0.75em;
  padding: 0.3em 0.6em;
  transform: rotate(-2deg);
  margin-bottom: 0.75em;
}

.ticket-view__name {
  font-weight: 700;
  margin-bottom: 1.25em;
}

.ticket-view__qr-frame {
  display: inline-block;
  border: 0.125em solid var(--color-dark);
  border-radius: 0.75em;
  padding: 0.75em;
  margin-bottom: 1.25em;
}

.ticket-view__qr-frame img {
  display: block;
  width: 15em;
  height: 15em;
}

.ticket-view__status {
  font-weight: 700;
  margin-bottom: 0.75em;
}

.ticket-view__status.is--used {
  color: var(--color-blue);
}

.ticket-view__venue {
  opacity: 0.7;
}

.ticket-success {
  max-width: 32em;
  margin: 0 auto;
  text-align: center;
  border: 0.125em solid var(--color-dark);
  background-color: var(--color-white);
  border-radius: 1em;
  box-shadow: 0.5em 0.5em 0 0 #00000026;
  padding: 2.5em 2em;
}

.ticket-success__badge {
  display: inline-block;
  font-family: 'Sugar Peachy', Arial, sans-serif;
  font-size: 1.75em;
  background-color: var(--color-mango);
  border: 0.125em solid var(--color-dark);
  border-radius: 0.75em;
  padding: 0.3em 0.6em;
  transform: rotate(-3deg);
  margin-bottom: 0.75em;
}

.ticket-success__lede {
  margin-bottom: 1.5em;
}

.ticket-success__summary {
  border-top: 0.125em solid var(--color-dark);
  border-bottom: 0.125em solid var(--color-dark);
  padding: 1em 0;
  margin-bottom: 1.5em;
}

.ticket-success__row {
  display: flex;
  justify-content: space-between;
  padding: 0.4em 0;
  font-weight: 700;
}

.ticket-success__actions {
  display: flex;
  gap: 0.75em;
  flex-wrap: wrap;
}

.ticket-success__btn {
  flex: 1 1 auto;
  color: var(--color-white);
}

.ticket-success__btn.is--secondary {
  background-color: var(--color-blue);
}

@keyframes gf-shake {
  10%,
  90% {
    transform: translateX(-0.2em);
  }
  20%,
  80% {
    transform: translateX(0.3em);
  }
  30%,
  50%,
  70% {
    transform: translateX(-0.5em);
  }
  40%,
  60% {
    transform: translateX(0.5em);
  }
}

@keyframes gf-btn-pulse {
  0%,
  100% {
    box-shadow: 0 0.25em 0 0 #00000026;
  }
  50% {
    box-shadow: 0 0.25em 0 0 #00000000;
  }
}