/*
 * ============================================================
 * life4her.com — Mobile Responsive Overrides
 * File: mobile-overrides.css
 * Loaded AFTER /_astro/_slug_.CY5JznxE.css
 *
 * Purpose: Fills gaps left by the Astro-generated stylesheet.
 * Does NOT duplicate rules the Astro CSS already handles.
 *
 * Issues fixed:
 *  1. Horizontal overflow / layout blowout
 *  2. Hamburger nav (nav overflows on narrow screens)
 *  3. Bilingual text wrapping (overflow-wrap, word-break)
 *  4. Images (max-width:100%)
 *  5. Buttons (full-width on mobile)
 *  6. Form input font-size 16px (prevents iOS auto-zoom)
 *  7. Container padding tightened on very small screens
 *  8. Hero heading reduced further on <400px
 *  9. nav.is-open toggle for hamburger JS
 * ============================================================
 */

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

*, *::before, *::after {
  box-sizing: border-box; /* Astro already sets this; belt-and-suspenders */
}

/* ── 2. Images always responsive ── */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* ── 3. Bilingual text — prevent CJK/Latin mix from breaking layout ── */
p, h1, h2, h3, h4, h5, h6,
li, blockquote, label,
.zh, .zh-text {
  overflow-wrap: break-word;
  word-break: break-word;
}

.zh, .zh-text {
  line-height: 1.75;
}

/* ── 4. Hamburger button — hidden by default (desktop) ── */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 10px;
  font-size: 22px;
  color: var(--charcoal, #2d3436);
  line-height: 1;
  border-radius: 6px;
  transition: background 0.15s;
  /* Ensure 44px touch target */
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.nav-toggle:hover {
  background: var(--sage-lt, #e8f0eb);
}

/* ── 5. Sticky header — keep brand + toggle aligned ── */
.header-inner {
  flex-wrap: wrap;
}


/* ======================================================
   MOBILE — 768px and below
   The Astro CSS already handles:
     - .header-inner flex-direction:column
     - .two-col / .contact-wrap / .form-row → 1 col
     - .card-grid / .resource-grid → 2 col (480 → 1 col)
     - .article-grid → 1 col
     - .foundations-grid → 2 col (480 → 1 col)
     - .es-body → 1 col
     - .newsletter-fields → column
     - footer email full width
   We add what's missing.
====================================================== */
@media (max-width: 768px) {

  /* ── Hamburger: show button, hide nav by default ── */
  .nav-toggle {
    display: flex;
    flex-shrink: 0;
    order: 2;
  }

  /* Brand takes full remaining width */
  .brand {
    flex: 1;
    max-width: calc(100% - 60px);
    order: 1;
  }

  /* Nav collapses by default */
  header nav {
    display: none;
    width: 100%;
    order: 3;
  }

  /* Nav open state (toggled by JS) */
  header nav.is-open {
    display: block;
  }

  /* Stacked nav list */
  nav ul {
    flex-direction: column !important;
    gap: 0 !important;
    border-top: 1px solid var(--border, #dde4dd);
    padding: 6px 0;
  }

  nav ul li a {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px;
    padding: 11px 4px !important;
    font-size: 15px !important;
    border-bottom: 1px solid var(--border, #dde4dd);
    white-space: normal;
    line-height: 1.4;
    min-height: 44px;
  }

  nav ul li:last-child a {
    border-bottom: none;
  }

  nav ul li a .zh {
    font-size: 0.82em;
    color: var(--mid, #5a6470);
  }

  /* ── Buttons: full width on mobile ── */
  .btn-primary,
  .btn-secondary,
  button[type="submit"],
  button.btn-touch {
    width: 100%;
    display: block;
    text-align: center;
    padding: 14px 20px;
    font-size: 1rem;
  }

  /* Exception: inline badges / small contextual buttons */
  .article-tag,
  .category-tab,
  .foundation-link,
  .read-more {
    width: auto;
    display: inline-block;
    padding: revert;
    font-size: revert;
  }

  /* Resource item buttons */
  .resource-item .btn-secondary {
    margin-top: 14px;
  }

  /* ── Form inputs: 16px font prevents iOS auto-zoom ── */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
    width: 100%;
  }

  /* Newsletter first-name field (not in Astro CSS) */
  .newsletter-fields input[type="text"] {
    min-width: unset;
    width: 100%;
  }

  /* ── Hero: avoid excessive height ── */
  .hero {
    min-height: auto;
  }

  /* ── Container: tighter horizontal padding ── */
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ── Sections: reduce vertical padding ── */
  .section {
    padding: 48px 0 !important;
  }

  .network-statement-section {
    padding: 20px 0 !important;
  }

  /* ── es-closing button (currently inline-block, needs full width) ── */
  .es-closing .btn-primary {
    width: 100%;
    display: block;
    box-sizing: border-box;
  }

  /* ── Footer newsletter button ── */
  .footer-newsletter-form > div {
    flex-direction: column;
    align-items: stretch;
  }

  .footer-newsletter-form .btn-primary,
  .footer-newsletter-form button {
    width: 100%;
  }

  /* ── contact-info on mobile needs breathing room ── */
  .contact-info {
    padding-top: 8px;
  }
}


/* ======================================================
   SMALL MOBILE — 480px and below
   Astro already handles: card/resource/foundations → 1 col
   We add what's missing.
====================================================== */
@media (max-width: 480px) {

  /* ── Hero heading extra reduction ── */
  .hero h1 {
    font-size: clamp(1.1rem, 5.5vw, 1.6rem) !important;
    line-height: 1.55;
  }

  /* ── Section headings ── */
  .section-header h2,
  .founder-text h2,
  .es-header h2 {
    font-size: clamp(1.1rem, 5vw, 1.5rem) !important;
    line-height: 1.4;
  }

  /* ── Brand name sizing ── */
  .brand-name {
    font-size: clamp(1.2rem, 6vw, 1.45rem);
  }

  .brand-en,
  .brand-zh {
    font-size: clamp(0.62rem, 2.8vw, 0.78rem);
  }

  /* ── Container: tightest padding for 360px screens ── */
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* ── Cards: tighter padding ── */
  .card,
  .foundation-card,
  .article-card,
  .resource-item {
    padding: 18px 16px !important;
  }

  /* ── Prose layout ── */
  .prose {
    padding: 32px 14px 48px;
  }

  /* ── Founder credential block ── */
  .founder-credential {
    font-size: 0.88rem;
  }

  /* ── Consent label: ensure checkbox doesn't zoom ── */
  .consent-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  /* ── Feature list ── */
  .feature-list li {
    font-size: 0.88rem;
  }

  /* ── Blockquote in caregiver section ── */
  .col-highlight {
    padding: 24px 20px;
  }

  .col-highlight blockquote {
    font-size: 1rem;
  }
}