/* ============================================================
   AOK WORLD — MOBILE STYLESHEET
   Fixes horizontal overflow + oversized elements on phones.
   Loaded LAST so it overrides page CSS. Only affects <=640px.
   ============================================================ */

/* Global overflow guard — nothing should push past the viewport.
   NOTE: use overflow-x:clip (NOT hidden) — `hidden` on html/body
   silently breaks position:sticky on descendants (the nav). */
@media (max-width: 640px) {
  html, body {
    overflow-x: clip !important;
    max-width: 100vw !important;
  }
  /* Any element that tries to be wider than the screen gets reined in */
  *, *::before, *::after {
    max-width: 100% !important;
  }
  img, svg, video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ---- TICKER BAR: let it scroll/clip instead of pushing width ---- */
  .ticker-bar {
    overflow: hidden !important;
    width: 100% !important;
  }
  .ticker-inner {
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  /* ---- NAV: allow wrap, shrink, no forced width ---- */
  nav, .topnav, #aok-nav, .aok-universal-nav {
    flex-wrap: wrap !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #aok-nav-root .aok-universal-nav {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
  }
  #aok-nav-root .aok-nav-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  #aok-nav-root .aok-nav-links a {
    font-size: 0.58rem !important;
    padding: 4px 6px !important;
    letter-spacing: 0.04em !important;
  }
  /* CTA button: don't let it overflow; wrap to its own row */
  #aok-nav-root .aok-cta, .aok-cta {
    font-size: 0.55rem !important;
    padding: 0.5rem 0.7rem !important;
    white-space: normal !important;
    text-align: center !important;
  }
  .aok-brand, .aok-brand * {
    font-size: 0.7rem !important;
  }

  /* ---- HERO: tame the giant type + contain padding ---- */
  .hero {
    padding-left: 18px !important;
    padding-right: 18px !important;
    overflow: hidden !important;
  }
  .hero-bg-text {
    font-size: 22vw !important;   /* was clamp min 60px — too wide for phones */
    letter-spacing: 0.02em !important;
    opacity: 0.05 !important;
  }
  .hero-headline {
    font-size: clamp(2rem, 11vw, 3rem) !important;
    line-height: 1.08 !important;
    word-break: normal !important;
  }
  .hero-sub, .hero-microcopy {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }
  .hero-actions {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* ---- Big warm CTAs (GOT 4 MINUTES...) ---- */
  .cta-warm, .cta-invite {
    font-size: 0.85rem !important;
    letter-spacing: 0.05em !important;
    padding: 1rem !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    width: 100% !important;
  }

  /* ---- Tighten wide letter-spacing site-wide on small screens ---- */
  .eyebrow, .hero-eyebrow, [class*="eyebrow"] {
    letter-spacing: 0.12em !important;
    font-size: 0.62rem !important;
    word-spacing: normal !important;
  }

  /* ---- Grids: collapse multi-column to single column ---- */
  .verse-grid, .inscription-grid, .tablet-photo-strip, .flame-strip,
  [class*="-grid"], .cards, .card-row {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }

  /* ---- Generic wide sections: cap + pad ---- */
  section, .wrap, .container, .content, main {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }

  /* Tables and pre can force width — let them scroll internally */
  table, pre {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
  }
}

/* ---- Scrolling/marquee bands: clip to viewport (they animate horizontally) ---- */
@media (max-width: 640px) {
  .breaking-band, .ticker-bar, .dispatch-band, [class*="marquee"], [class*="scroll-band"] {
    overflow: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  .breaking-text, .ticker-inner {
    font-size: 11px !important;
  }
  /* Any full-bleed announcement/invitation band that holds big centered text */
  .charter-band, .submit-band, .faith-symbol-band, [class*="-band"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
    text-align: center !important;
  }
  .charter-band *, .submit-band * {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  /* Big all-caps taglines that use huge letter-spacing — force wrap */
  h1, h2, h3, .tagline, [class*="tagline"], [class*="invitation"] {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* Extra-small phones */
@media (max-width: 400px) {
  .hero-headline { font-size: 2rem !important; }
  #aok-nav-root .aok-nav-links a { font-size: 0.54rem !important; padding: 3px 5px !important; }
}

/* ============================================================
   HOMEPAGE HAMBURGER NAV (mobile)
   Desktop: burger hidden, full nav shows.
   Mobile: burger shows, link list collapses into a dropdown.
   ============================================================ */
.nav-burger { display: none; }

@media (max-width: 760px) {
  nav .nav-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 14px !important;
  }
  .nav-brand {
    font-size: 0.72rem !important;
    flex: 1 1 auto !important;
    line-height: 1.2 !important;
  }
  /* Show the hamburger */
  .nav-burger {
    display: block !important;
    order: 2 !important;
    background: transparent !important;
    border: 1px solid var(--gold, #C8952A) !important;
    color: var(--gold-light, #E8B84B) !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
  }
  .nav-burger.active { background: var(--gold, #C8952A) !important; color: #110800 !important; }
  /* Enter button drops to full-width row below */
  .nav-enter {
    order: 3 !important;
    flex: 1 1 100% !important;
    text-align: center !important;
    font-size: 0.62rem !important;
    padding: 0.6rem !important;
  }
  /* The link list: hidden by default, shown when .open */
  .nav-worlds {
    order: 4 !important;
    flex: 1 1 100% !important;
    display: none !important;
    flex-direction: column !important;
    list-style: none !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--earth, #3a2410) !important;
  }
  .nav-worlds.open { display: flex !important; }
  .nav-worlds li { width: 100% !important; }
  .nav-worlds li a {
    display: block !important;
    padding: 12px 14px !important;
    font-size: 0.85rem !important;
    border-bottom: 1px solid rgba(200,149,42,0.15) !important;
    color: var(--gold-light, #E8B84B) !important;
  }
  /* strip the LIVE badge dots in mobile menu for cleanliness */
  .nav-worlds li a.live::after { display: none !important; }
}

/* ============================================================
   HERO FIX (mobile) — the yellow bar / heading / microcopy
   were overflowing because .hero-left kept big padding and the
   microcopy used wide letter-spacing + nowrap-ish uppercase.
   ============================================================ */
@media (max-width: 640px) {
  .hero { grid-template-columns: 1fr !important; }
  .hero-right { display: none !important; }
  .hero-left {
    padding: 1.5rem 1.1rem 2rem !important;   /* was 3rem sides */
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .hero-headline {
    font-size: clamp(2rem, 11vw, 3rem) !important;
    line-height: 1.05 !important;
  }
  .hero-sub {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }
  /* The "GOT 4 MINUTES..." warm CTA + its container: contain + wrap */
  .cta-warm-wrap, .cta-warm, .hero-cta-warm, [class*="cta-warm"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
    line-height: 1.35 !important;
  }
  /* NEW HERE button: allow wrap, don't force nowrap off-screen */
  .nav-enter {
    white-space: normal !important;
    text-align: center !important;
    font-size: 0.58rem !important;
  }
  /* "Everyone enters through the Vault..." microcopy — wrap it */
  .hero-microcopy {
    font-size: 0.68rem !important;
    letter-spacing: 0.06em !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.6 !important;
    text-align: left !important;
  }
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hero-actions a, .hero-actions button {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

@media (max-width: 640px) {
  .btn-primary, .btn-ghost {
    white-space: normal !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    letter-spacing: 0.04em !important;
    font-size: 0.82rem !important;
    padding: 0.9rem 1rem !important;
  }
}

/* ============================================================
   GRID SHRINK FIX — a 1fr grid track refuses to shrink below
   its content's intrinsic width, forcing the column (and its
   children) wider than the phone. minmax(0,1fr) lets it shrink.
   ============================================================ */
@media (max-width: 640px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) !important;
    display: block !important;   /* simplest: no grid on mobile */
  }
  .hero-left {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* Ensure nothing inside the hero can exceed the column */
  .hero-left * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   STICKY NAV (mobile) — keep the header + hamburger pinned
   to the top while scrolling. Requires that no ancestor uses
   overflow-x:hidden (we use clip instead, above).
   ============================================================ */
@media (max-width: 760px) {
  nav,
  #aok-nav-root nav.aok-universal-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: #110800 !important;   /* opaque so content doesn't show through */
  }
  #aok-nav-root {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }
  /* When the dropdown is open, let it scroll if taller than screen */
  #aok-nav-root ul.aok-worlds.open,
  .nav-worlds.open {
    max-height: 70vh !important;
    overflow-y: auto !important;
    background: #110800 !important;
  }
}