/* ignite27 — base reset, layout & typography, built on tokens.css */

/* Accessibility note: the design system's --ig-text-muted (#767676) and
   --ig-charcoal-100 (#A7A7A7) tokens don't reliably clear WCAG AA (4.5:1) for
   small body/caption copy once placed on the #F4F4F4 subtle surface. This
   site uses a slightly darker "safe" muted tone for anything that's actually
   read as text, and keeps the original tokens for decorative, disabled, and
   placeholder use where AA doesn't apply. */
:root { --ig-text-muted-safe: #6C6C6C; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ig-font-sans);
  font-size: var(--ig-font-body);
  line-height: var(--ig-lh-body);
  color: var(--ig-text);
  background: var(--ig-bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; }
h1, h2, h3, h4, h5, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::selection { background: var(--ig-primary-magenta); color: #fff; }

:focus-visible { outline: 2px solid var(--ig-primary-magenta); outline-offset: 2px; }

/* ---- Layout ------------------------------------------------------------ */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 900px) { .wrap { padding: 0 24px; } }
@media (max-width: 560px) { .wrap { padding: 0 20px; } }

.section { padding: var(--ig-space-16) 0; }
.section-sm { padding: var(--ig-space-12) 0; }
@media (max-width: 700px) {
  .section { padding: var(--ig-space-12) 0; }
  .section-sm { padding: var(--ig-space-8) 0; }
}

.grid { display: grid; gap: var(--ig-space-6); }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { display: flex; flex-direction: column; }
.gap-1 { gap: var(--ig-space-1); } .gap-2 { gap: var(--ig-space-2); } .gap-3 { gap: var(--ig-space-3); }
.gap-4 { gap: var(--ig-space-4); } .gap-6 { gap: var(--ig-space-6); } .gap-8 { gap: var(--ig-space-8); }

/* ---- Type ---------------------------------------------------------------*/
.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: var(--ig-ls-eyebrow);
  text-transform: uppercase; color: var(--ig-text-muted-safe);
}
.section-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ig-text-muted-safe); margin-bottom: var(--ig-space-4); display: block;
}
.h-display, .h1, .h2, .h3 {
  font-style: italic; font-weight: var(--ig-weight-thin); letter-spacing: var(--ig-ls-display);
  color: var(--ig-text-heading); line-height: var(--ig-lh-heading); margin: 0;
}
.h1 { font-size: clamp(36px, 6vw, 72px); }
.h2 { font-size: clamp(30px, 4.5vw, 52px); }
.h3 { font-size: clamp(24px, 3.4vw, 36px); }
.h4 { font-style: italic; font-weight: 400; font-size: 22px; letter-spacing: -0.01em; color: var(--ig-text-heading); }
.lede { font-size: 18px; line-height: 1.6; color: var(--ig-text); }
.muted { color: var(--ig-text-muted-safe); }
.center { text-align: center; }
.mono { font-family: var(--ig-font-mono); }

.on-gradient { color: #fff; }
.on-gradient .section-label, .on-gradient .eyebrow { color: rgba(255,255,255,.82); }
.on-gradient .lede, .on-gradient p { color: rgba(255,255,255,.92); }

/* ---- Gradient surfaces ---------------------------------------------------*/
.bg-mesh { background: var(--ig-gradient-primary); }
.bg-logo-grad { background: var(--ig-gradient-logo); }
.bg-subtle { background: var(--ig-bg-subtle); }
.bg-ink { background: var(--ig-ink); color: #fff; }

.text-grad {
  background: var(--ig-gradient-logo);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Page-top glow: sits behind the translucent header on every page
   that doesn't already have its own hero gradient there (js/app.js skips
   inserting this on any page whose first <main> child is .hero, since
   index.html's own hero background already shows through the header).
   Unlike the hero's full-strength background, this is a light, additive
   wash -- it only needs to read behind the header and fade out shortly
   after, not color the whole page -- so it's masked to fade to fully
   transparent well before typical page content (page title, etc.) begins,
   keeping heading/body text contrast unaffected. ---- */
.ig-page-top-glow {
  position: absolute; top: 0; left: 0; right: 0; z-index: -1;
  height: clamp(240px, 30vw, 420px);
  pointer-events: none;
  background:
    radial-gradient(at 10% -10%, rgba(243,0,127,.55) 0%, rgba(243,0,127,0) 48%),
    radial-gradient(at 58% -14%, rgba(0,114,245,.5) 0%, rgba(0,114,245,0) 44%),
    radial-gradient(at 96% -6%,  rgba(10,99,216,.5) 0%, rgba(10,99,216,0) 46%);
  filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
}

/* ---- Header / nav --------------------------------------------------------*/
.site-header {
  /* fixed, not sticky: position:sticky still reserves its own space in
     normal flow and only overlaps content that later scrolls up beneath
     it -- at rest (scrollY 0) it never overlaps the hero at all, so the
     hero was never actually visible through it and it read as "moving"
     with the page since it wasn't genuinely pinned to the viewport.
     position:fixed removes it from flow entirely so it always floats
     over whatever's beneath it, including the hero right at page load.
     js/app.js compensates by padding non-hero pages' <main> by the
     header's rendered height so their content isn't hidden under it. */
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: rgba(20,19,21,.6); backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.site-header .wrap { display: flex; align-items: center; gap: 28px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.brand svg { height: 36px; width: auto; display: block; }
.brand .num { color: var(--ig-primary-magenta); }
.footer-col .brand svg { height: 42px; }

/* flex: 1 takes up the whole space between the logo and the header
   actions (Manage order / Get tickets), and justify-content centers the
   links within that space rather than letting them sit flush left
   against the logo. */
.main-nav { display: flex; align-items: center; justify-content: center; gap: 2px; flex: 1; min-width: 0; }
.main-nav a {
  position: relative; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.72);
  padding: 10px 14px; white-space: nowrap;
}
.main-nav a:hover { color: #fff; }
.main-nav a.active { color: #fff; }
.main-nav a.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2.5px;
  border-radius: 100px; background: var(--ig-gradient-logo);
}
.header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.nav-toggle {
  display: none; border: none; background: transparent; cursor: pointer; padding: 8px;
  color: #fff;
}
@media (max-width: 900px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-actions .btn-lg-hide { display: none; }
}
.mobile-nav {
  display: none; flex-direction: column; gap: 2px; padding: 8px 20px 20px;
  border-top: 1px solid rgba(255,255,255,.1);
  background: rgba(20,19,21,.9); backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.mobile-nav.open { display: flex; }
.mobile-nav a { padding: 12px 4px; font-weight: 700; font-size: 15px; color: rgba(255,255,255,.8); border-bottom: 1px solid rgba(255,255,255,.1); }
.mobile-nav a.active { color: var(--ig-primary-magenta); }

/* ---- Footer ---------------------------------------------------------- */
.site-footer { background: var(--ig-ink); color: #fff; padding: var(--ig-space-16) 0 var(--ig-space-8); }
.site-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--ig-space-8); margin-bottom: var(--ig-space-12); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-col h5 { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 14px; }
.footer-col a { display: block; font-size: 14px; padding: 6px 0; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  padding-top: var(--ig-space-6); border-top: 1px solid rgba(255,255,255,.12);
  font-size: 13px; color: rgba(255,255,255,.5);
}

/* ---- Utility spacing ----------------------------------------------------*/
.mt-0{margin-top:0}.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}.mt-12{margin-top:48px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}.mb-12{margin-bottom:48px}

.divider { height: 1px; background: var(--ig-border); border: none; margin: var(--ig-space-8) 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: #fff; color: #000; padding: 12px 20px;
  z-index: 200; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}