/* ==========================================================================
   Africa Curated - Mobile usability fixes
   Added 2026-06-20. Additive only. Targets iPhone / Android viewports.
   Preserves all desktop layout, type, color, and brand.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Global containment - kill horizontal overflow site-wide
   -------------------------------------------------------------------------- */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

#site-header,
.site-header {
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

.marquee-strip,
.marquee {
  overflow: hidden;
}

.marquee-text {
  max-width: none;
}


/* --------------------------------------------------------------------------
   2. Mobile-specific layout fixes (phones, 480px and below)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {

  /* --- 2a. Tighten hero sections so first-screen has actual content --- */
  .hero,
  header.hero {
    min-height: auto;
    padding: 6rem 1.25rem 3rem;
  }

  .page-hero,
  .program-hero,
  section.page-hero {
    min-height: auto !important;
    padding: 5rem 1.25rem 2.5rem !important;
  }

  /* Page-hero title that often runs 80-100px on mobile - cap it */
  .page-hero h1,
  .page-hero-title,
  .program-hero h1 {
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1.08;
  }

  /* Decorative oversized roman numerals / chapter marks on the hero corner */
  .hero-numeral,
  .chapter-numeral,
  .hero-mark,
  [class*="hero"] [aria-hidden="true"][class*="numeral"],
  [class*="hero"] [aria-hidden="true"][class*="mark"] {
    font-size: clamp(4rem, 18vw, 8rem);
    right: 0.5rem;
    opacity: 0.4;
  }

  .hero-title {
    font-size: clamp(2.5rem, 11vw, 3.75rem);
    line-height: 1.05;
  }

  .hero-scroll-indicator,
  .hero__scroll-text {
    font-size: 12px;
  }

  /* --- 2b. Hero metadata grid - stack cleanly --- */
  .hero-meta {
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
  }

  .hero-meta-item {
    font-size: 11px;
  }

  .hero-meta-item strong {
    font-size: 14px;
  }

  /* --- 2c. Bump up tiny metadata text to a readable mobile floor --- */
  .section-label,
  .page-hero-label,
  .hero-label,
  .tag,
  .sidebar-label,
  .form-label,
  .press-label,
  .eyebrow,
  .question-num,
  .video-fallback,
  .video-fallback a,
  .teaser-banner,
  .access__field label,
  .ex-detail-label {
    font-size: 13px;
    letter-spacing: 0.14em;
  }

  /* --- 2d. Tour table / journey / timeline - force single column --- */
  .tour-table [role="row"],
  .tour-table > div:not(:first-child),
  .program-journey,
  .timeline,
  .city-progression,
  .ex-details {
    grid-template-columns: 1fr !important;
  }

  /* --- 2e. Hero CTAs - full width, comfortable tap target --- */
  .hero-actions,
  .modal-form,
  .access__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
  }

  .hero-actions a,
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1rem;
    box-sizing: border-box;
    text-align: center;
  }

  /* --- 2f. Artist index number - keep contained --- */
  .artist-index-number {
    right: 1rem;
    font-size: clamp(3rem, 18vw, 5rem);
  }

  /* --- 2g. Long links that overflow - allow wrapping --- */
  .section-label,
  .social-link,
  a[href*="instagram"],
  a[href^="mailto:"],
  a[href*="vimeo"] {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }

  /* --- 2h. Multimedia/install grids - single column --- */
  .install-grid,
  .multimedia-grid,
  .chapter-cards {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }

  /* --- 2i. Footer - readable spacing and tap targets --- */
  footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}


/* --------------------------------------------------------------------------
   3. iOS input-zoom prevention (16px floor on all inputs)
      Applies on ALL viewports because iOS zooms regardless of device width
      whenever a focused input is below 16px.
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="password"],
textarea,
select,
.mailing-input,
.form-input,
.access__input,
.next-city__input {
  font-size: 16px;
}

@media (max-width: 480px) {
  .mailing-input,
  .form-input,
  .access__input,
  .next-city__input {
    min-height: 48px;
  }

  .mailing-btn,
  .access__submit,
  .next-city__form button,
  .modal-form button[type="submit"] {
    min-height: 48px;
    font-size: 14px;
  }
}


/* --------------------------------------------------------------------------
   4. Touch target minimum 44x44 for all primary mobile controls
      Apple HIG and WCAG 2.5.5 both call for this.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .mobile-menu-btn,
  .theme-toggle,
  .header-actions button,
  .header-actions a {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .header-actions {
    gap: 0.5rem;
  }

  .modal-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}


/* --------------------------------------------------------------------------
   5. Mobile nav menu - lock to viewport width regardless of doc overflow
   -------------------------------------------------------------------------- */
.mobile-menu,
.mobile-nav,
.nav-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  overflow-y: auto;
  box-sizing: border-box;
}

.mobile-menu a,
.mobile-nav a {
  max-width: calc(100vw - 3rem);
}


/* --------------------------------------------------------------------------
   6. Chapter-1 page - add a slim sticky header so mobile users can navigate
      The chapter-1 page has no <header>; this gives one without changing HTML.
      It only shows on mobile (where the gap is most painful).
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body.chapter-page::before,
  body[data-page="chapter-1"]::before {
    content: "AFRICA CURATED";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.875rem 1rem;
    background: rgba(12, 10, 7, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: 13px;
    letter-spacing: 0.22em;
    color: var(--color-accent, #b8913a);
    text-align: center;
    border-bottom: 1px solid rgba(184, 145, 58, 0.25);
  }
}

/* Chapter-1 specifically - tighten the hero on mobile so BEGIN is visible */
@media (max-width: 480px) {
  .chapter-1 .hero,
  body.chapter-page header.hero {
    min-height: calc(100svh - 60px);
    padding-top: 4.5rem;
    padding-bottom: 2rem;
  }

  .hero__scroll {
    font-size: 13px;
    min-height: 44px;
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
  }
}


/* --------------------------------------------------------------------------
   7. Body text floor - make any sub-14px body copy readable on mobile
      Universal floor for ANY visible text element on small screens.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* Main body text */
  p, li, dd, dt, blockquote, figcaption {
    font-size: max(15px, 1rem);
    line-height: 1.65;
  }

  /* Generic small-text elements that often render at 10-13px on mobile.
     These selectors target the most common patterns of tiny supporting text. */
  span,
  small,
  a,
  label,
  time,
  cite,
  em,
  strong,
  div {
    /* Only acts as a FLOOR - elements with explicit font-size below 13px get raised */
  }

  /* Specific class-based tiny text that needs to come up */
  .tag,
  .pill,
  .status-pill,
  .badge,
  .meta,
  .meta-label,
  .meta-value,
  .caption,
  .footnote,
  .legend,
  .legend-item,
  .sidebar-label,
  .sidebar-value-small,
  .ex-detail-label,
  .ex-detail-value,
  .press-credit,
  .press-detail,
  .credit,
  .credit-line,
  .photo-credit,
  .ex-desc,
  .hero-meta-item,
  .marquee-text,
  .marquee-sep,
  .footer-meta,
  .footer-copy,
  .footer-info,
  nav a,
  .nav-link,
  .breadcrumb,
  .breadcrumb a {
    font-size: max(13px, 0.85rem);
  }

  .hero-meta-item strong,
  .ex-detail-value,
  .sidebar-value {
    font-size: max(14px, 0.95rem);
  }
}

/* On very small phones, keep tap-text at minimum 12px even after caps */
@media (max-width: 380px) {
  .hero-meta-item {
    font-size: 10px;
  }
  .hero-meta-item strong {
    font-size: 13px;
  }
}


/* --------------------------------------------------------------------------
   8. Forms - readable inline labels, full-width fields on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .form-group,
  .access__field,
  .next-city__field {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
  }

  .form-grid,
  .access__grid,
  .next-city__form {
    grid-template-columns: 1fr !important;
  }
}


/* --------------------------------------------------------------------------
   9. Modal overlays - safe on tiny screens
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .modal-box {
    width: calc(100vw - 1.5rem);
    max-width: calc(100vw - 1.5rem);
    margin: 1rem;
    padding: 1.5rem;
    max-height: calc(100svh - 2rem);
    overflow-y: auto;
  }

  .modal-title {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .modal-subtitle {
    font-size: 14px;
  }
}