/* ============================================================
   GAI World 2026 — Site Design System v1 (staged 2026-07-20)
   Implements the July 2026 visual audit:
   1. Two-typeface system: Barlow (display) + Inter (body/UI).
      Kills Times New Roman / Arial fallbacks and Lexend Deca.
   2. One hero surface: deep navy over the skyline texture
      (replaces the flat saturated purple wash).
   3. Three-tier button system: yellow primary / blue secondary /
      navy outline tertiary.
   Loaded per-page via footerHtml (after theme CSS, so it wins).
   Assets live in File Manager /gai-world-cro. Remove the include
   tag from a page's footer HTML to undo for that page.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

/* ---------- 1. TYPE SYSTEM ---------- */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
}
/* Force inheritance so unstyled elements stop falling back to
   Times/Arial. Icon-font elements are excluded. */
main div:not([class*="fa-"]):not([class*="icon"]):not([class*="material"]),
main p, main li, main td, main th, main a, main label,
main blockquote, main figcaption, main input, main select, main textarea, main button,
header nav a, header .nav-link {
  font-family: inherit;
}
main h1, main h2, main h3, main h4, main h5,
main .h1, main .h2, main .h3 {
  font-family: 'Barlow', 'Inter', sans-serif !important;
}
/* Heading spans: theme sets Inter on spans inside headings — inherit Barlow */
main h1 span:not([class*="fa-"]), main h2 span:not([class*="fa-"]),
main h3 span:not([class*="fa-"]), main h4 span:not([class*="fa-"]) {
  font-family: inherit !important;
}
main h1 { font-weight: 900 !important; }
main h2, main h3 { font-weight: 800 !important; }
/* Eyebrow / kicker labels: Barlow 600 uppercase (retires Lexend Deca) */
main .hero .pre-title, main .pre-title, main .eyebrow-text, main .sub-title {
  font-family: 'Barlow', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ---------- 2. HERO SURFACE ---------- */
/* Navy over the existing background image: the skyline reads as a
   subtle texture instead of a flat purple wash. */
main .hero {
  background-color: #0B132B !important;
  position: relative;
}
main .hero::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(155deg,
    rgba(5, 13, 81, .93) 0%,
    rgba(11, 19, 43, .95) 55%,
    rgba(2, 14, 38, .97) 100%) !important;
}
main .hero > * { position: relative; z-index: 1; }
main .hero h1 {
  font-family: 'Barlow', sans-serif !important;
  font-weight: 900 !important;
}
/* Homepage (id 216716383311) keeps its photo hero — exempt it. */
body.hs-content-id-216716383311 .hero { background-color: transparent !important; }
body.hs-content-id-216716383311 .hero::before { content: none !important; }

/* ---------- 3. BUTTON SYSTEM (3 tiers) ---------- */
/* Primary — yellow filled pill, dark navy text. The buy/register action. */
main .fill-btn, .gw-btn--ticket, header .transparent-btn {
  background: #FBCC24 !important;
  border-color: #FBCC24 !important;
  color: #020E26 !important;
  border-radius: 50px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}
main .fill-btn:hover, .gw-btn--ticket:hover, header .transparent-btn:hover {
  background: #E9BB14 !important;
  border-color: #E9BB14 !important;
  color: #020E26 !important;
}
/* Secondary — action-blue filled pill for supporting actions. */
.gw-btn--purple {
  background: #0E41FB !important;
  border-color: #0E41FB !important;
  color: #FFFFFF !important;
  border-radius: 50px !important;
}
.gw-btn--purple:hover { background: #0A34CF !important; border-color: #0A34CF !important; }
/* Tertiary — navy outline pill for low-emphasis links. */
.gw-btn--purple-outline {
  background: transparent !important;
  border: 2px solid #050D51 !important;
  color: #050D51 !important;
  border-radius: 50px !important;
}
.gw-btn--purple-outline:hover { background: #050D51 !important; color: #FFFFFF !important; }