/* ============================================================================
   Mobile UX hardening for American Aligners
   - WCAG 2.5.5: touch target ≥ 44×44 px
   - iOS no-zoom on input focus (font-size ≥ 16 px)
   - Anti-CLS fallback font metrics (size-adjust technique)
   - Smooth scroll, tap highlight, momentum scroll
   - Stops horizontal scroll on small viewports
   ============================================================================ */

/* === Global mobile-first base === */
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body {
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(160,125,203,.20);
  -webkit-overflow-scrolling: touch;
  text-rendering: optimizeLegibility;
}

/* Stop any single element from horizontally overflowing the page */
img, video, iframe, picture, canvas, svg { max-width: 100%; height: auto; }
table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
pre, code { max-width: 100%; overflow-x: auto; }

/* ----------------------------------------------------------------------------
   ANTI-CLS: fallback font metric overrides
   Browsers use these as the local fallback while web fonts download. Setting
   size-adjust matches the metrics of Inter/Outfit so when the real font swaps in
   the text doesn't visibly resize → CLS goes to 0 from font swap.
   ---------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter-fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Outfit-fallback";
  src: local("Arial");
  size-adjust: 105%;
  ascent-override: 95%;
  descent-override: 24%;
  line-gap-override: 0%;
}
/* Use the fallback in our system stack so it's picked before the web font loads */
body { font-family: 'Inter', 'Inter-fallback', system-ui, -apple-system, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', 'Outfit-fallback', 'Inter', system-ui, sans-serif; }

/* ----------------------------------------------------------------------------
   TOUCH TARGETS — 44×44 minimum on all interactive elements (WCAG 2.5.5)
   ---------------------------------------------------------------------------- */
button,
.btn, .thm-btn, .thm-btn a,
input[type="submit"], input[type="button"], input[type="reset"],
a.btn, a.thm-btn,
.main-menu__list .menu-item > a,
.mobile-nav__toggler,
.mobile-nav__link {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Increase tap area without expanding the visual element */
  position: relative;
}
/* Pure icon buttons get tap-area expansion via ::after */
.icon-only, .social-icon, .fa-icon {
  position: relative;
}
.icon-only::after, .social-icon::after {
  content: '';
  position: absolute;
  inset: -10px;
}

/* ----------------------------------------------------------------------------
   FORMS — iOS auto-zooms inputs with font-size < 16px. Set 16px on mobile.
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
  input, select, textarea, button {
    font-size: 16px !important; /* prevent iOS zoom on focus */
  }
}
input, select, textarea {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #d8d6e2;
  box-sizing: border-box;
}
textarea { min-height: 88px; padding: 12px 14px; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid #a27dcb;
  outline-offset: 1px;
  border-color: #a27dcb;
}
/* Disabled state stays readable on mobile */
input:disabled, select:disabled, textarea:disabled {
  background: #f5f3fa;
  color: #8a8499;
  cursor: not-allowed;
}

/* Search inputs lose default magnifier on iOS — keep them flat */
input[type="search"] { -webkit-appearance: none; appearance: none; }

/* ----------------------------------------------------------------------------
   FOCUS RING — visible but not ugly. Modern :focus-visible only.
   ---------------------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid #a27dcb;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ----------------------------------------------------------------------------
   IMAGES — anti-CLS even before perf.php injects width/height
   ---------------------------------------------------------------------------- */
img[loading="lazy"] {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

/* ----------------------------------------------------------------------------
   MOTION — respect user preference
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------------------------
   NARROW MOBILE TIGHTENING — for ≤375px (iPhone SE)
   ---------------------------------------------------------------------------- */
@media (max-width: 375px) {
  .container { padding-left: 12px !important; padding-right: 12px !important; }
  .page-hero { padding: 70px 0 50px !important; }
  .page-hero h1 { font-size: 1.8rem !important; line-height: 1.2 !important; }
  .page-hero p  { font-size: 0.95rem !important; }
  .content-block { padding: 50px 0 !important; }
  .content-block h2 { font-size: 1.5rem !important; }
  .feature-card, .testi-card, .resource-card { padding: 18px 16px !important; }
  /* Stack two-column grids */
  .row2, .row3 { grid-template-columns: 1fr !important; }
}

/* ----------------------------------------------------------------------------
   ADMIN PAGES — pages.php / robots.php were built for desktop. Collapse on phone.
   ---------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* page-slugs table → cards */
  .slug-table { display: block; }
  .slug-table thead { display: none; }
  .slug-table tbody, .slug-table tr, .slug-table td { display: block; width: 100%; }
  .slug-table tr { border: 1px solid #eef; border-radius: 12px; padding: 10px; margin-bottom: 12px; background: #fff; }
  .slug-table td { border-bottom: none; padding: 8px 10px; }
  .slug-table td::before {
    content: attr(data-label);
    display: block; font-size: 11px; text-transform: uppercase;
    color: #888; font-weight: 700; letter-spacing: .4px; margin-bottom: 4px;
  }
  /* Meta editor: stack left + right columns */
  .meta-form > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Stats row stacks 2-up on phone, single-up below 480 */
  .stats-row { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .stats-row { grid-template-columns: 1fr !important; }
}

/* ----------------------------------------------------------------------------
   NICETIES — selection color, scroll padding for sticky headers, smooth scroll
   ---------------------------------------------------------------------------- */
::selection { background: #a27dcb; color: #fff; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

/* Prevent FOUT on header logo */
.main-menu-two-wrapper__logo img { aspect-ratio: 16/9; }