/* 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;
}

/* Below 991px the nav switches to its mobile layout (nav-bar__ul hidden,
   logo no longer absolutely centered) and the logo's two lines
   ("GRAND" / "FOOD FESTIVAL") stack, making the fixed nav taller than
   --nav-height accounts for — confirmed empirically (nav-bar renders
   ~5-12px taller than these sections' padding-top reserves for it at
   every width in that range), so content was clipping under the nav.
   Adding a flat buffer is simpler and more robust than chasing the exact
   deficit at each fluid breakpoint. */
@media screen and (max-width: 991px) {
  .tickets,
  .legal {
    padding-top: calc(var(--section-padding) + 1.5em);
  }
}

.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;
  }
}

/* .nav-bar__inner is display:flex, justify-content:space-between across
   exactly two participants (.nav-logo__wrap is absolutely positioned and
   floats independently on top, not part of flex spacing). Wrapping both
   CTA buttons together keeps it at two flex participants so the second
   button lands next to the first instead of getting its own evenly-spaced
   slot in the middle of the bar, colliding with the centered logo. */
.nav-bar__ctas {
  display: flex;
  align-items: center;
  gap: 0.75em;
}

/* -------------------------- footer socials -------------------------- */

.footer__social {
  display: flex;
  gap: 0.75em;
  margin-top: 1.25em;
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75em;
  height: 2.75em;
  border-radius: 50%;
  border: 0.125em solid var(--color-dark);
  background-color: var(--color-white);
  box-shadow: 0.25em 0.25em 0 0 #00000026;
  color: var(--color-dark);
  transition:
    transform 200ms cubic-bezier(0.625, 0.05, 0, 1),
    box-shadow 200ms cubic-bezier(0.625, 0.05, 0, 1);
}

.footer__social-link:hover {
  transform: translate(-0.1em, -0.1em) rotate(-4deg);
  box-shadow: 0.35em 0.35em 0 0 #00000026;
}

.footer__social-link svg {
  width: 1.25em;
  height: 1.25em;
}

/* -------------------------- community section -------------------------- */

/* .community only ever had padding-top (it used to sit right before .tweets,
   which supplies its own generous padding-bottom so the boundary between
   them always had breathing room). Now it sits right before .faq, which has
   no padding-top of its own either — with neither side padding the gap,
   the photo grid butted straight up against the FAQ heading. */
.community {
  padding-bottom: var(--section-padding);
}

/* Two-row opposite-direction infinite marquee, reusing the same
   data-css-marquee / initCSSMarquee mechanism as .logo-marquee (see
   39050.css) — it clones+measures+observes generically per-instance, so
   no JS changes were needed to add these two rows alongside it. */
.community__marquee-rows {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

.community-marquee {
  overflow: hidden;
  width: 100%;
  display: flex;
  gap: 0;
  position: relative;
}

/* Edge fade via a solid-color gradient overlay instead of mask-image —
   mask-image on a container with actively-animating children can force
   the browser onto a lower-quality compositing layer, softening the
   contained text while it scrolls. A plain color-matched gradient
   overlay achieves the same visual fade without ever touching the
   animated content's own compositing/alpha. */
.community-marquee::before,
.community-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3em;
  z-index: 1;
  pointer-events: none;
}

.community-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--color-light), transparent);
}

.community-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--color-light), transparent);
}

.community-marquee__list {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: max-content;
  animation: sponsorMarquee 20s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}

/* Plays the same sponsorMarquee keyframes backwards — no separate
   reverse keyframes block needed. */
.community-marquee__list--reverse {
  animation-direction: reverse;
}

.community-marquee__item {
  display: flex;
  align-items: center;
  gap: 1em;
  padding-right: 1em;
  flex-shrink: 0;
}

.community-marquee__card {
  flex-shrink: 0;
  width: 12.5em;
}

/* initCSSMarquee's IntersectionObserver sets animationPlayState as an
   inline style, which beats a plain stylesheet rule regardless of
   selector specificity — !important is required to pause on hover. */
.community-marquee:hover [data-css-marquee-list] {
  animation-play-state: paused !important;
}

.community-tag__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
}

.community-tag__role {
  font-size: 0.75em;
  font-weight: 500;
  opacity: 0.65;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .community-marquee::before,
  .community-marquee::after {
    width: 2em;
  }

  .community-marquee__card {
    width: 9.5em;
  }

  .community-marquee__item {
    gap: 0.75em;
    padding-right: 0.75em;
  }

  .community__marquee-rows {
    gap: 1em;
  }
}