/* aa-mobile-fix.css — universal mobile-responsiveness safety net (2026-05-26)
 *
 * Purpose: minimum mobile UX guarantees layered ON TOP of any page's own CSS.
 * Designed to be non-destructive: avoids !important on layout, only nudges
 * what was missing (touch targets, horizontal overflow, font-size floors,
 * hero clamps, image/table responsive defaults).
 *
 * Loaded LAST so the cascade always wins where it needs to. Safe to drop
 * onto any page — references no page-specific selectors.
 */

/* 1) Prevent horizontal scroll at the root. The #1 cause of "scrolls forever
 *    sideways" on mobile is one runaway element forcing the viewport wider. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 2) Make every img/video/iframe respect its container. */
img, video, iframe, embed, object, svg {
  max-width: 100%;
  height: auto;
}

/* 3) Tables that exist should scroll horizontally rather than overflow. */
table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 4) Long code/pre blocks should scroll within their container. */
pre, code {
  max-width: 100%;
  overflow-x: auto;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* 5) Touch-target minimums on mobile (WCAG 2.2 AA = 24x24, Apple HIG = 44x44).
 *    We use 44px. Only kicks in at narrow viewports so desktop links/buttons
 *    aren't visually inflated. Excludes inline anchors inside running prose
 *    via :not selectors so paragraphs don't grow giant line gaps. */
@media (max-width: 640px) {
  a.btn,
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .nav-links a,
  .navbar a,
  .navbar-cta,
  .cta-row .btn,
  .resource-list a,
  .state-link {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
  }

  /* Form controls should be at least 44px tall and 16px font to prevent
   * iOS Safari zoom-on-focus. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    min-height: 44px;
    font-size: 16px;
  }
}

/* 6) Readable font-size floor on small screens.
 *    Aimed only at body/paragraph elements; respects deliberate small print. */
@media (max-width: 480px) {
  body,
  p,
  li,
  td,
  .resource-list .desc,
  .article-card p,
  .stat-card .label {
    font-size: max(14px, 1rem);
  }

  /* Heroic H1s set in rem on tiny screens overflow lines. Clamp them. */
  h1 {
    font-size: clamp(1.6rem, 7.5vw, 2.4rem);
    line-height: 1.2;
    word-break: break-word;
  }

  h2 {
    font-size: clamp(1.3rem, 5.5vw, 1.75rem);
    line-height: 1.25;
  }

  /* CTAs that sit side-by-side with margin-left should stack cleanly. */
  .cta-row .btn-secondary {
    margin-left: 0;
    margin-top: 0.75rem;
  }
  .cta-row .btn {
    display: block;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Tame oversize hero blocks defined inline in older pages. */
  .hero {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Containers should breathe rather than hug the edge. */
  .container,
  main.container,
  .about-section,
  .about-hero {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
}

/* 7) Sticky/floating CTAs should NOT cover content on tiny screens. */
@media (max-width: 480px) {
  .floating-cta,
  .sticky-cta {
    max-width: calc(100% - 16px);
    font-size: 0.95rem;
  }
  body {
    padding-bottom: max(env(safe-area-inset-bottom), 8px);
  }
}

/* 8) Hover effects gated behind hover-capable input so tap users don't get
 *    sticky :hover states on touch devices. */
@media (hover: none) {
  a:hover, button:hover {
    text-decoration: inherit;
  }
}