/* Bebas Neue: the wordmark's face (vendor/fonts, from @fontsource/bebas-neue). */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/fonts/bebas-neue-latin-400-normal.woff2') format('woff2'),
       url('/vendor/fonts/bebas-neue-latin-400-normal.woff') format('woff');
}

/* ── Pit Wall layer for entrant pages ──
   The registration, pre-registration and success pages run on style.css +
   public-kinetic.css (light, square corners). This last-loaded layer moves
   them onto The Pit Wall (DESIGN.md) without touching their markup: the
   violet accent for shows still on the stock color, Space Grotesk headings,
   Chivo body, and no decorative dot grid. Light stays the default: entrants
   fill this in on a phone, often outdoors. */

html[data-accent-stock] {
  /* !important: config.js writes the show accent inline on <html>. */
  --primary:        #7154ce !important;
  --accent:         #7154ce !important;
  --accent-ink:     #5a43a4 !important;
  --on-accent:      #ffffff !important;
  --primary-ink:    #5a43a4;
  --primary-deep:   #5a43a4;
  --primary-dim:    rgba(113, 84, 206, 0.10);
  --primary-border: rgba(113, 84, 206, 0.32);
  --on-primary:     #ffffff;
}
:root {
  --bg:             #f8f7fa;
  --text-primary:   #17141d;
  --text-secondary: #463f52;
}

body { font-family: 'Chivo', system-ui, -apple-system, sans-serif !important; }
:is(h1, h2, h3, h4, .event-title, .site-logo-text, .group-legend, .countdown-num, .pay-method-label) {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  letter-spacing: -0.01em !important;
}
.event-title { letter-spacing: -0.03em !important; }
:is(input, select, textarea, button) { font-family: 'Chivo', system-ui, sans-serif; }
.site-logo-text, .kw-entry, .kw-lane { font-family: 'Bebas Neue', 'Archivo Black', 'Archivo', sans-serif !important; }

/* Decorative dot grid off; one continuous background. */
.grid-bg { display: none !important; }

/* Labels read left-aligned in both columns (the right column used to flip
   its label to the right edge, which looks like a mistake on a form). */
.field--col-right > label, .field--col-right > .field-error { text-align: left !important; }

/* Violet as text uses the deep ink (7.1:1 on white). */
html[data-accent-stock] :is(.event-title span, .group-number, .countdown-num, .req, main a, .site-signin) { color: #5a43a4; }
/* Leftover hardcoded blue tints from style.css, retinted to the accent. */
.site-header { background: linear-gradient(to bottom, var(--primary-dim) 0%, transparent 100%) !important; }
.radio-option:hover { background: color-mix(in srgb, var(--primary) 4%, transparent) !important; }
.radio-option:has(input:checked) { background: var(--primary-dim) !important; }
.contact-banner-inner { background: var(--primary-dim) !important; }
/* The wordmark's LANE takes the brand accent; footer links stay light on the dark footer. */
html[data-accent-stock] .kw-lane { color: #7154ce !important; }
/* Footer: a slim bar pinned to the foot of the page, the bottom twin of
   the pinned top bar. Wordmark + copyright left, links right; phones keep
   just the links. */
body > .kfooter {
  position: fixed !important; inset: auto 0 0 0; z-index: 90; margin: 0 !important;
  flex-direction: row !important; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 48px; padding: 0 clamp(1rem, 3vw, 2.5rem) env(safe-area-inset-bottom, 0px) !important;
  background: #121015 !important; border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.2); transform: translateZ(0);
}
body > .kfooter > div { display: flex; align-items: baseline; gap: 0.9rem; }
body > .kfooter .kfooter-logo { font-family: 'Bebas Neue', 'Archivo Black', 'Archivo', sans-serif; font-weight: 400; font-size: 1.25rem; letter-spacing: 0.02em; }
body > .kfooter .kfooter-logo .kw-lane { color: var(--accent, #7154ce); }
body > .kfooter .kfooter-tagline { margin: 0; font-size: 0.66rem; }
body > .kfooter .kfooter-nav { gap: 1.25rem; font-size: 0.85rem; }
body:has(> .kfooter) { padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 600px) {
  body > .kfooter > div { display: none; }
  body > .kfooter .kfooter-nav { width: 100%; justify-content: space-around; gap: 0; }
}
.kfooter a { color: rgba(245, 242, 249, 0.82) !important; }
.kfooter a:hover { color: #ffffff !important; }
html[data-accent-stock] .group-number { background: rgba(113, 84, 206, 0.10); border-color: rgba(113, 84, 206, 0.32); }
.form-group { box-shadow: 0 1px 2px rgba(20, 16, 30, 0.05), 0 8px 24px rgba(20, 16, 30, 0.05) !important; }
:is(input, select, textarea):focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-dim) !important; outline: none; }

/* The price line is a sentence, not data: body type, not mono. */
.payment-amount { font-family: 'Space Grotesk', system-ui, sans-serif !important; font-size: 1.25rem !important; letter-spacing: -0.01em !important; color: var(--text-primary); }
.payment-divider-text { font-family: 'Space Grotesk', system-ui, sans-serif !important; letter-spacing: 0.06em !important; }

/* ── Top bar: the console's black bar ── EntryLane wordmark on the left,
   the show name beside it, Sign in on the right. */
.site-header {
  display: flex !important; align-items: center; gap: 1rem;
  min-height: 64px; padding: 0 clamp(1rem, 3vw, 2.5rem) !important;
  background: #121015 !important; border-bottom: 0 !important;
  text-align: left !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
  /* Stays pinned while the form scrolls under it. */
  position: sticky !important; top: 0; z-index: 100 !important; transform: translateZ(0);
}
.site-brand {
  flex: none; text-decoration: none; line-height: 1;
  font-family: 'Bebas Neue', 'Archivo Black', 'Archivo', sans-serif; font-weight: 400; font-size: 1.75rem; letter-spacing: 0.02em;
}
.site-brand .kw-entry { color: #f5f2f9; }
.site-header .logo-wrap {
  flex: 1; min-width: 0; padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.site-header .site-logo-text {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'Space Grotesk', system-ui, sans-serif !important; font-weight: 600 !important;
  font-size: 1.35rem; /* js/fit-show-name.js steps this down for long names */
  letter-spacing: 0.03em !important; text-transform: uppercase; line-height: 1.2;
  color: #f5f2f9 !important;
}
.site-header .site-signin {
  position: static !important; flex: none;
  color: #f5f2f9 !important; border-color: rgba(255, 255, 255, 0.22) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600;
}
.site-header .site-signin:hover { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.4) !important; }
@media (max-width: 520px) {
  .site-brand { font-size: 1.1rem; }
  .site-header .logo-wrap { padding-left: 0.75rem; }
  .site-header .site-signin { padding: 0.35rem 0.7rem !important; font-size: 0.78rem; }
}

/* ── Form fields: tighter on desktop; phones keep the 48px tap target ── */
@media (min-width: 761px) {
  .form-section :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) {
    min-height: 40px !important; padding: 0.5rem 0.75rem !important; font-size: 0.95rem !important;
  }
  .form-section .radio-option { min-height: 44px !important; }
  .form-section .field-grid { gap: 0.9rem 1.1rem !important; }
  .form-section .form-group { padding: 1.5rem 1.75rem !important; }
}
.form-section :is(input, select, textarea) { max-width: 100%; }

/* A narrower form column on desktop so single fields aren't 700px wide. */
@media (min-width: 761px) { .form-section .form-container { max-width: 620px !important; } }
/* The show name now sits in the top bar, so the kicker above the heading
   would only repeat it. */
.prereg-kicker { display: none !important; }
/* Long show names wrap to two lines (js/fit-show-name.js) instead of being
   cut off at one. */
.site-header .site-logo-text.is-wrapped {
  white-space: normal; line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}