/* assets/mobile.css - shared phone and tablet layer, loaded after each page's own styles.
   Added 22/10/2026: hamburger menu, 48 px touch targets, sticky "15 min" CTA, no sideways scroll.
   overflow-x is set to `clip`, never `hidden`: hidden turns html/body into a scroll container and
   breaks position:sticky (see the 25/09/2026 note in the page styles). */

.nav-toggle, .mobile-cta { display: none; }

@media (max-width: 768px) {
  html, body { overflow-x: clip; }
  img, video, canvas, iframe, table { max-width: 100%; }

  /* Touch targets: at least 48 px high for every button and CTA */
  .btn-primary, .btn-secondary, button, [role="tab"], select,
  input[type="submit"], input[type="button"] { min-height: 48px; }
  .site-nav-row > a.btn-primary { min-height: 48px; padding: 12px 18px !important; }

  /* Inputs at 16 px so iOS does not zoom into the form */
  input, select, textarea { font-size: 16px !important; }

  /* Hamburger menu replaces the sideways-scrolling link strip */
  .site-nav-row { flex-wrap: wrap !important; padding: 12px 16px !important; gap: 12px !important; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-left: auto; padding: 0;
    border: 1px solid var(--border, #e3e0ee); border-radius: 12px;
    background: var(--surface, #fff); color: var(--text-primary, #1a1a1a); cursor: pointer;
  }
  .nav-toggle svg { width: 24px; height: 24px; }
  .site-nav .site-nav-links { display: none !important; }
  .site-nav.is-open .site-nav-links {
    display: flex !important; order: 3; width: 100%;
    flex-direction: column; align-items: stretch !important; gap: 0 !important;
    overflow: visible; padding: 4px 0 8px;
    border-top: 1px solid var(--border, #e3e0ee);
  }
  .site-nav.is-open .site-nav-links a {
    display: flex; align-items: center; min-height: 48px; padding: 0 4px;
    font-size: 16px; border-bottom: 1px solid var(--border, #e3e0ee);
  }

  /* Sticky "15 min" CTA at the bottom of the screen */
  .mobile-cta {
    display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
    align-items: center; justify-content: center; min-height: 52px; padding: 0 20px;
    border-radius: 999px; background: var(--violet, #5b34c4); color: #fff !important;
    font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 16px; text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  body.has-mobile-cta { padding-bottom: 80px; }
}