/*
 * NourishIQ — mobile.css
 * Paste this file into your project and add ONE line to index.html <head>:
 *   <link rel="stylesheet" href="mobile.css">
 * Place it AFTER your existing <style> block so these rules win.
 *
 * Covers every mobile issue found in the audit:
 *  1. Nav & hamburger menu
 *  2. Hero section & mosaic
 *  3. Scroll strip (marquee)
 *  4. Comparison table
 *  5. Feature section
 *  6. Family / Budget / Coach layouts
 *  7. Research tiles & magnesium band
 *  8. How-it-works steps
 *  9. Pricing cards
 * 10. CTA section & email form
 * 11. Footer
 * 12. Typography scale
 * 13. Tap target enforcement
 * 14. Safe-area / notch support (iPhone)
 * 15. Reduced-motion respect
 */

/* ─────────────────────────────────────────────
   0. BASE MOBILE RESETS
   ───────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Prevent any element from causing horizontal scroll */
  * { max-width: 100%; }
  img, video, iframe, svg { max-width: 100%; height: auto; }

  /* Improve tap highlight on iOS */
  a, button, [role="button"] {
    -webkit-tap-highlight-color: rgba(59,125,216,0.15);
  }

  /* ─────────────────────────────────────────────
     1. NAV
     ───────────────────────────────────────────── */
  #nav {
    padding: 0 16px;
    height: 60px;
    /* Ensure nav never causes overflow */
    overflow: visible;
  }

  /* Hamburger lines — slightly larger for easier tapping */
  #nav-hamburger {
    padding: 10px 8px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    align-items: center;
  }

  /* Mobile nav links — full-width tap targets */
  .nav-links a {
    padding: 16px 24px;
    min-height: 52px;
    display: flex;
    align-items: center;
    font-size: 16px;
  }

  .nav-btn {
    margin: 12px 16px 4px !important;
    padding: 16px 22px !important;
    text-align: center;
    font-size: 15px !important;
    min-height: 52px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* ─────────────────────────────────────────────
     2. HERO
     ───────────────────────────────────────────── */
  #hero {
    min-height: 100svh; /* use svh — avoids browser chrome covering content */
    padding-bottom: 48px;
    padding-top: 72px;  /* clear fixed nav */
  }

  /* Mosaic background — reduce opacity further on mobile to aid readability */
  .hero-mosaic { opacity: 0.10; }

  #hero-content {
    padding: 0 20px 0;
    gap: 28px;
  }

  .hero-eyebrow {
    font-size: 10px;
    padding: 6px 14px;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
  }

  .hero-h1 {
    font-size: clamp(40px, 10.5vw, 56px);
    letter-spacing: -1px;
    margin-bottom: 16px;
    /* Prevent awkward line breaks on very narrow screens */
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .hero-sub {
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 28px;
  }

  /* Stack buttons vertically, full width */
  .hero-btns {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }

  .btn-white {
    justify-content: center;
    padding: 16px 28px;
    font-size: 15px;
    min-height: 52px;
    width: 100%;
  }

  .btn-outline {
    justify-content: center;
    padding: 10px 0;
    font-size: 14px;
    min-height: 44px;
  }

  /* Trust cards — 2 per row */
  .hero-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .trust-card {
    min-width: 0;
    padding: 14px 12px;
    gap: 10px;
  }

  .trust-icon { font-size: 24px; }
  .trust-val  { font-size: 22px; }
  .trust-lbl  { font-size: 12px; }

  /* ─────────────────────────────────────────────
     3. SCROLL STRIP (MARQUEE)
     ───────────────────────────────────────────── */
  #strip { padding: 28px 0; }

  .strip-row { gap: 10px; }

  .strip-photo {
    width: 180px;
    height: 120px;
    border-radius: 10px;
  }

  /* ─────────────────────────────────────────────
     4. COMPARISON TABLE
     ───────────────────────────────────────────── */
  #smarter-choice {
    padding: 48px 0 48px; /* remove side padding — table wrapper handles it */
  }

  #smarter-choice > div:first-child {
    padding: 0 20px;
  }

  /* Scrollable table wrapper — full bleed with padding trick */
  #smarter-choice div[style*="overflow-x"] {
    margin: 0 -0px;
    padding: 0 20px;
    /* Show scroll hint shadow on right edge */
    background:
      linear-gradient(to right, white 20%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), white 80%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.08), rgba(0,0,0,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.08), rgba(0,0,0,0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  /* Tighten table padding on mobile */
  #smarter-choice table th,
  #smarter-choice table td {
    padding: 14px 10px !important;
    font-size: 13px;
  }

  /* Swipe hint label */
  #smarter-choice::after {
    content: '← Swipe to compare →';
    display: block;
    text-align: center;
    font-size: 11px;
    color: rgba(10,16,32,0.35);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-top: 12px;
    padding: 0 20px;
  }

  /* ─────────────────────────────────────────────
     5. FEATURES SECTION
     ───────────────────────────────────────────── */
  .sec { padding: 56px 20px; }

  #features { padding: 56px 20px; }

  .feat-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Feature visual — stack above text, reasonable height */
  .feat-visual {
    position: static !important; /* disable sticky on mobile */
    aspect-ratio: 4 / 3;
    border-radius: 16px;
  }

  .feat-list { margin-top: 0; }

  .feat-n { font-size: 11px; letter-spacing: 2px; }
  .feat-t { font-size: 22px; }
  .feat-d { font-size: 15px; }

  /* Always show feature descriptions on mobile (no hover state) */
  .feat-d {
    max-height: none !important;
    opacity: 1 !important;
    margin-top: 12px !important;
  }

  .feat-badge {
    max-height: none !important;
    opacity: 1 !important;
    margin-top: 10px !important;
  }

  /* ─────────────────────────────────────────────
     6. FAMILY / BUDGET / COACH
     ───────────────────────────────────────────── */
  .fam-layout,
  .bud-layout,
  .coach-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .fam-check  { font-size: 15px; }
  .fam-check-dot { width: 20px; height: 20px; font-size: 9px; }

  /* Budget ring row — stack on very small screens */
  .bud-ring-row {
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
  }

  .bud-metrics { width: 100%; }

  .bud-head { padding: 22px 20px; }
  .bud-head-bg { font-size: 70px; }
  .bud-head-title { font-size: 20px; }

  .bud-pt-icon { width: 40px; height: 40px; font-size: 18px; }
  .bud-pt-title { font-size: 15px; }
  .bud-pt-desc  { font-size: 14px; }

  /* Coach chat chips — wrap freely */
  .chat-chips { flex-wrap: wrap; gap: 8px; }
  .chip {
    font-size: 12px;
    padding: 8px 14px;
    min-height: 36px;
    white-space: nowrap;
  }

  /* ─────────────────────────────────────────────
     7. RESEARCH TILES & MAGNESIUM BAND
     ───────────────────────────────────────────── */
  #research { padding: 52px 16px 44px; }

  /* 2-column grid on mobile (not 1 — tiles are compact enough) */
  .r-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .r-tile {
    padding: 16px 14px;
    border-radius: 14px;
  }

  .r-tile-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 16px;
    margin-bottom: 12px;
  }

  .r-tile-stat { font-size: 20px; }
  .r-tile-desc { font-size: 13px; line-height: 1.5; }
  .r-tile-source { font-size: 11px; }

  /* Magnesium band */
  .r-mag {
    padding: 22px 18px;
    border-radius: 14px;
  }

  .r-mag h3 { font-size: 18px; line-height: 1.3; }
  .r-mag-body { font-size: 14px; line-height: 1.65; margin-bottom: 18px; }

  /* Stack mag pills to single column */
  .r-mag-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .r-mag-pill { padding: 12px 14px; }
  .r-mag-pill-label { font-size: 10px; margin-bottom: 6px; }
  .r-mag-pill-val { font-size: 13px; }
  .r-mag-pill-val span { font-size: 12px; }

  /* ─────────────────────────────────────────────
     8. HOW IT WORKS — STEPS
     ───────────────────────────────────────────── */
  .steps {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }

  .steps::before { display: none; } /* hide connecting line */

  .step-circle {
    width: 64px;
    height: 64px;
    font-size: 24px;
    margin-bottom: 16px;
  }

  .step-title { font-size: 17px; }
  .step-desc  { font-size: 14px; }

  /* ─────────────────────────────────────────────
     9. PRICING
     ───────────────────────────────────────────── */
  #pricing { padding: 56px 20px; }

  .price-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
    gap: 16px;
  }

  .price-card {
    padding: 28px 22px;
    border-radius: 18px;
  }

  .price-amt {
    font-size: 48px;
  }

  .price-desc  { font-size: 14px; }
  .price-feats li { font-size: 14px; }
  .price-pop { font-size: 9px; letter-spacing: 1px; padding: 4px 14px; }

  /* Toggle billing period */
  .ptog-wrap { gap: 10px; }
  .ptog-lbl  { font-size: 13px; }

  /* Promo code input */
  .promo-input {
    padding: 12px 16px;
    font-size: 14px;
    min-height: 48px;
  }

  /* ─────────────────────────────────────────────
     10. CTA SECTION & EMAIL FORM
     ───────────────────────────────────────────── */
  #cta {
    padding: 64px 20px;
    text-align: center;
  }

  .cta-h2 {
    font-size: clamp(32px, 9vw, 48px);
    margin-bottom: 14px;
  }

  .cta-sub {
    font-size: 15px;
    margin-bottom: 28px;
  }

  /* Stack email + button vertically, full width */
  .cta-form {
    flex-direction: column;
    gap: 10px;
    max-width: 100%;
  }

  .cta-input {
    width: 100%;
    padding: 16px 22px;
    font-size: 15px;
    min-height: 52px;
    border-radius: 99px; /* keep pill shape */
  }

  .cta-go {
    width: 100%;
    padding: 16px 28px;
    font-size: 14px;
    min-height: 52px;
  }

  /* ─────────────────────────────────────────────
     11. PHOTO SPLIT SECTION
     ───────────────────────────────────────────── */
  #split { grid-template-columns: 1fr; }

  .split-photo { height: 240px; border-radius: 0; }
  .split-text  { padding: 36px 20px; }

  .split-quote {
    font-size: clamp(20px, 5.5vw, 26px);
    margin-bottom: 20px;
  }

  .split-check { font-size: 14px; }

  /* ─────────────────────────────────────────────
     12. TESTIMONIALS
     ───────────────────────────────────────────── */
  .testi-grid { grid-template-columns: 1fr !important; }

  /* ─────────────────────────────────────────────
     13. FOOTER
     ───────────────────────────────────────────── */
  footer { padding: 44px 20px 24px; }

  .foot-top {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .foot-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .foot-links {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 20px;
  }

  .foot-links a { min-height: 44px; display: inline-flex; align-items: center; }

  /* ─────────────────────────────────────────────
     14. TYPOGRAPHY SCALE
     ───────────────────────────────────────────── */
  h2 { font-size: clamp(30px, 8vw, 48px) !important; }

  .lead  { font-size: 15px; }
  .eyebrow { font-size: 11px; letter-spacing: 2px; }

  body { font-size: 16px; } /* base bump for readability */

  /* ─────────────────────────────────────────────
     15. TAP TARGET ENFORCEMENT
     All interactive elements ≥ 44×44px (Apple HIG / WCAG)
     ───────────────────────────────────────────── */
  a, button, input, select, textarea, [role="button"], [tabindex] {
    min-height: 44px;
  }

  /* Inline text links don't need height enforcement */
  p a, li a, .r-tile-source, .r-mag-source {
    min-height: unset;
    padding: 2px 0;
  }
}

/* ─────────────────────────────────────────────
   SAFE-AREA INSETS (iPhone notch / Dynamic Island)
   Applied at all sizes so it handles landscape too
   ───────────────────────────────────────────── */
#nav {
  padding-left:  max(56px, env(safe-area-inset-left));
  padding-right: max(56px, env(safe-area-inset-right));
}

@media (max-width: 640px) {
  #nav {
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  /* Sections near bottom of page */
  footer {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  /* Fixed CTA bar if added in future */
  .sticky-cta-bar {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* ─────────────────────────────────────────────
   REDUCED MOTION
   Respects user accessibility preference
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .strip-row             { animation: none; }
  #hero::before,
  #hero::after           { animation: none; }
  .hero-dot              { animation: none; }
  *                      { transition-duration: 0.01ms !important;
                           animation-duration:  0.01ms !important; }
}

/* ─────────────────────────────────────────────
   EXTRA SMALL SCREENS (< 380px — older iPhones, budget Androids)
   ───────────────────────────────────────────── */
@media (max-width: 380px) {
  .hero-h1 { font-size: 38px; }

  /* Single column research tiles on very small screens */
  .r-grid { grid-template-columns: 1fr; }

  /* Single column steps */
  .steps { grid-template-columns: 1fr; gap: 24px; }

  /* Single column trust cards */
  .hero-trust { grid-template-columns: 1fr 1fr; } /* keep 2-col, just tighter */

  .trust-card { padding: 12px 10px; }
  .trust-val  { font-size: 20px; }
}