/* ============================================================
   Culturis Platform — Mobile Foundation
   Consolidates the lessons from InnaPace v34f → v34g.2:
   - No horizontal overflow (most common mobile bug)
   - 768/480/360 breakpoint tiers
   - Hamburger nav at ≤768px (CSS only; pair with header.php JS)
   - Form inputs ≥16px font (prevents iOS auto-zoom)
   - Tap targets ≥44px (Apple HIG)
   - Sticky mobile header (keeps hamburger in reach during scroll)
   - High-specificity selectors to beat legacy !important rules
   ============================================================ */

/* ── Universal anti-overflow guard ── */
html, body { overflow-x: hidden; max-width: 100%; }

@media (max-width: 768px) {
  /* Every image/media element stays inside the viewport */
  img, picture, video, svg { max-width: 100%; height: auto; }

  /* ── Hamburger nav reveal (specificity 0,3,1 to beat legacy 0,3,0 !important) ── */
  .site-header .nav .nav-links,
  .site-header .nav ul.nav-links,
  .site-header .nav .nav-cta-group {
    display: none !important;
  }
  .site-header .nav .nav-burger {
    display: flex !important;
  }
  .site-header .nav {
    gap: 0 !important;
    flex-wrap: nowrap !important;
    padding: 14px 20px !important;
  }

  /* ── Sticky header so hamburger stays in reach ── */
  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100;
    background: var(--cream, #F4EFE5);
    box-shadow: 0 1px 0 rgba(28, 43, 58, 0.06);
  }
  /* Drawer must stack above sticky header */
  .nav-drawer          { z-index: 9999; }
  .nav-drawer-backdrop { z-index: 9998; }

  /* Lock body scroll while drawer is open */
  body.nav-drawer-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }

  /* ── Form inputs: 16px font prevents iOS auto-zoom on focus ── */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 48px;
    padding: 12px 14px;
  }
  textarea { min-height: 120px; }
  button[type="submit"], .btn[type="submit"] {
    min-height: 52px;
    font-size: 15px;
  }

  /* ── Tap targets ≥ 44×44 (Apple HIG) ── */
  .btn, .btn-primary, .btn-teal, .btn-ghost, .btn-arrow,
  a.btn, button.btn,
  .quick-cat, .answer-chip {
    min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* FAQ accordion specifically */
  .faq-q {
    padding: 18px 0 !important;
    min-height: 56px;
    font-size: 16px !important;
    line-height: 1.4;
  }
  .faq-q-icon, .faq-toggle {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }
  .faq-a { font-size: 14.5px !important; }

  /* ── Typography scale ── */
  h1 { font-size: 44px !important; line-height: 1.08 !important; letter-spacing: -1.5px !important; }
  h2 { font-size: 36px !important; line-height: 1.15 !important; }
  h3 { font-size: 22px !important; line-height: 1.25 !important; }

  /* ── Footer 4-col → 2-col stack ── */
  .footer-inner { padding: 56px 20px 36px !important; }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col h4 { font-size: 14px !important; margin-bottom: 12px !important; }
  .footer-col a { font-size: 14px !important; line-height: 1.6; }
  .footer-tag    { font-size: 14px !important; }
  .footer-socials { margin-top: 18px !important; gap: 12px; }
  .footer-social  { width: 42px; height: 42px; }
  .footer-bottom {
    flex-direction: column !important;
    gap: 14px !important;
    align-items: flex-start !important;
    padding-top: 28px !important;
    margin-top: 36px !important;
    font-size: 12px !important;
  }
}

/* ── ≤ 480px: small phone tier ── */
@media (max-width: 480px) {
  h1 { font-size: 32px !important; line-height: 1.15 !important; letter-spacing: -1px !important; }
  h2 { font-size: 28px !important; line-height: 1.2 !important; }
  h3 { font-size: 20px !important; }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

/* ── ≤ 360px: small-phone last-resort tier ── */
@media (max-width: 360px) {
  h1 { font-size: 28px !important; }
  h2 { font-size: 24px !important; }

  /* If a 2-col grid is too cramped at 360, drop to 1-col */
  .h-categories-grid,
  .h-rooted-imgs,
  .a-half-cta-imgs,
  .a-mind-imgs {
    grid-template-columns: 1fr !important;
  }
}