/* ═══════════════════════════════════════════════════════════════════════
   Phone fixes — loaded last so these rules win.
   ───────────────────────────────────────────────────────────────────────
   Problems this file fixes (measured on a 390px iPhone against the live
   site, August 2026):

     1. Every page scrolled sideways by 11px. The header CTA carried an
        inline `display:flex` that beat the media query meant to hide it,
        so the hamburger button sat 11px off the right edge.
     2. The contact page overflowed by 63px: the email address is one long
        unbreakable word, and grid children default to min-width:auto so
        the column refused to shrink below it.
     3. Labels and badges rendered at 11–13px — too small for the parents
        this site is for.
     4. Footer links were 16px tall; a finger needs ~44px.
     5. Pages ran 7,000–9,600px long because desktop section padding was
        still being used on a phone.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. Nothing may push the page sideways ──────────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }

img, video, iframe, svg, table { max-width: 100%; }
img, video { height: auto; }

/* Grid and flex children default to min-width:auto, which means they will
   not shrink below their longest unbreakable word. That is what pushed the
   contact page 63px wide. */
.contact-layout > *,
.contact-item,
.contact-item > div,
.review-layout > *,
.footer-grid > *,
.footer-contact-item,
.footer-contact-item > div,
.form-row > * { min-width: 0; }

/* Email addresses, URLs and long words wrap instead of stretching the page. */
.contact-link,
.footer-contact-item a,
.contact-item a,
.enquiry-contact-value,
.bk-panel-contact-value { overflow-wrap: anywhere; word-break: break-word; }

/* ─── 2. Header — the 11px overflow on every page ────────────────────── */
@media (max-width: 920px) {
  .header-inner { padding-inline: 16px; gap: 10px; }

  /* Keep "Book a Class" reachable on a phone, but compact enough that the
     hamburger still fits. layout.css hides the whole block at this width;
     we bring back just the booking button. The portal link moves into the
     menu instead (see the mobile nav in includes/header.php). */
  .header-cta { display: flex; gap: 8px; }
  .header-cta .btn {
    font-size: 15px;
    padding: 10px 16px;
    min-height: 46px;
    white-space: nowrap;
  }
  .header-cta .btn-outline { display: none; }

  .nav-toggle { flex-shrink: 0; }
}

@media (max-width: 420px) {
  /* On the narrowest phones the full label will not fit alongside the
     hamburger, so shorten it to "Book". */
  .header-cta .btn-primary { font-size: 0; padding: 10px 14px; }
  .header-cta .btn-primary::after {
    content: 'Book';
    font-size: 15px;
    font-family: var(--font-family-headings);
    font-weight: var(--font-weight-bold);
  }
  .site-logo-img { width: 42px; height: 42px; }
}

/* ─── 3. Nothing smaller than 14px on a phone ────────────────────────── */
/* !important is deliberate here. Most pages carry their own <style> block
   emitted after the footer, which sits later in the document than this
   file and would otherwise win on equal specificity. These are corrective
   overrides, not new design, so they are allowed to trump. */
@media (max-width: 600px) {
  .section-label,
  .stat-label,
  .trust-chip,
  .partners-ribbon-label,
  .offering-age-tag,
  .service-tag,
  .service-age-badge,
  .article-category-tag,
  .article-read-time,
  .article-author,
  .article-date,
  .booking-card-meta,
  .booking-price-min,
  .contact-item strong,
  .contact-item-note,
  .footer-desc,
  .footer-links a,
  .footer-policy-links a,
  .footer-contact-item,
  .child-select-age,
  .price-stripe-note,
  .step-note { font-size: 14px !important; }

  /* Uppercase micro-labels need a little air to stay readable at 14px. */
  .section-label,
  .stat-label,
  .contact-item strong { letter-spacing: 0.06em; }

  /* Catch-all for the footer, which is dense with 13px small print. */
  .site-footer p,
  .site-footer a,
  .site-footer li,
  .site-footer span,
  .site-footer strong,
  .site-footer address { font-size: 14px !important; }

  body { font-size: 17px; }
}

/* ─── 4. Tap targets a finger can actually hit ───────────────────────── */
@media (max-width: 920px) {
  .footer-links a,
  .footer-policy-links a {
    display: inline-block !important;
    padding: 11px 0 !important;
    min-height: 44px;
  }
  .footer-social-link { min-width: 48px; min-height: 48px; }

  /* Phone and email in the footer are links too, and were 17px tall. */
  .footer-contact-item a {
    display: inline-block !important;
    padding: 10px 0 !important;
    min-height: 44px;
  }

  /* Full-width buttons read as "the thing to press" on a phone. */
  .page-hero-actions .btn,
  .cta-band-actions .btn,
  .booking-login-btns .btn { width: 100%; }
  .page-hero-actions,
  .cta-band-actions { width: 100%; }
}

/* ─── 5. Less scrolling ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .section        { padding: 40px var(--space-sm); }
  .section-narrow { padding: 32px var(--space-sm); }
  .page-hero      { padding: 40px var(--space-sm); }
  .cta-band       { padding: 40px var(--space-sm); }
  .container      { padding-inline: 16px; }

  .section-heading    { font-size: 26px; }
  .page-hero-heading  { font-size: 30px; line-height: 1.2; }
  .section-subheading { font-size: 17px; margin-bottom: var(--space-md); }

  /* Long paragraphs are hard work on a narrow screen. */
  p { line-height: 1.6; }

  .card { padding: var(--space-sm); }
}

/* ─── 6. Forms sized so iOS does not zoom in on focus ────────────────── */
@media (max-width: 600px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="date"],
  input[type="number"],
  select,
  textarea { font-size: 16px; }
}