/* Mobile safety stylesheet — applies safe-area-inset padding to
   sticky/fixed elements so they don't overlap the iOS notch when the page is
   rendered with viewport-fit=cover. Also enforces 16px minimum on form inputs
   to prevent iOS Safari from auto-zooming on focus.
   Generated by scripts/patch-mobile-meta-and-safe-area.js — safe to edit. */

/* Sticky / fixed nav: push down past the notch. */
nav,
.cc-global-header,
.header,
header[role="banner"] {
  padding-top: max(var(--cc-nav-pad-top, 0.75rem), env(safe-area-inset-top));
  padding-left: max(var(--cc-nav-pad-x, 1rem), env(safe-area-inset-left));
  padding-right: max(var(--cc-nav-pad-x, 1rem), env(safe-area-inset-right));
}

/* Body should not push horizontally on notched devices in landscape. */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Bottom-floating toasts and CTAs need bottom safe area. */
.toast,
.compare-toast,
.cc-fixed-bottom,
[data-cc-bottom-cta] {
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 18px));
}

/* iOS Safari auto-zooms on focus when the input font is < 16px.
   Force 16px minimum on all text-entry controls to prevent that jarring zoom.
   Use !important sparingly but here we genuinely override any inline styles. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  font-size: max(16px, 1rem);
}

/* Improve momentum scrolling on iOS for any scroll containers. */
.cc-scroll,
[data-cc-scroll] {
  -webkit-overflow-scrolling: touch;
}

/* Eliminate iOS gray tap highlight; use our own active state instead. */
button,
a,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* Minimum touch target — 44×44 per Apple HIG. Applied as an inline-block
   pseudo-trick: any small button gets a transparent padding ring to expand
   its hit area without changing its visual size. Opt-in via .cc-tap-44. */
.cc-tap-44 {
  position: relative;
}
.cc-tap-44::after {
  content: '';
  position: absolute;
  inset: 50% 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
}