/* ============================================================
   Hunterdon Millionaires — responsive guardrails
   Loaded after styles.css. Sitewide mobile safety net; keep all
   mobile fixes here rather than inlining per-page hacks.
   ============================================================ */

html,
body {
  max-width: 100%;
  /* `clip` (not `hidden`) — `hidden` turns body into a scroll container and
     breaks position:sticky for the site header. */
  overflow-x: clip;
}

img,
video,
iframe,
table,
pre {
  max-width: 100%;
}

iframe {
  border: 0;
}

@media (max-width: 768px) {
  /* Comfortable tap targets on every primary control. */
  a[href^="#schedule"],
  a[href="/"],
  a[href="/privacy"],
  a[href="/terms"],
  button,
  [role="button"],
  input[type="range"] {
    min-height: 44px;
  }

  /* Keep long unbroken strings (emails, URLs) from forcing a scrollbar. */
  a,
  p,
  li,
  h1,
  h2,
  h3 {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 768px) {
  /* Inline prose links (e.g. the support mailto) get a taller hit area.
     Vertical padding on an inline element grows the touch target without
     changing the line box, so paragraph rhythm is untouched. */
  p a[href^="mailto:"],
  li a[href^="mailto:"] {
    padding-block: 12px;
  }
}

@media (max-width: 768px) {
  /* Minimum readable body text on phones: bump 10-11px micro-labels and
     legal disclaimers up to 12px so they stay legible without zooming. */
  p, li, span, label, small {
    /* !important is required: these sizes come from inline style attributes
       in the exported markup, which otherwise outrank the stylesheet. */
    font-size: max(1em, 12px) !important;
  }

  /* Footer utility links were 36px wide — widen the horizontal hit area so
     every footer link clears the 44x44 touch-target minimum. */
  footer a[href="/privacy"],
  footer a[href="/terms"],
  footer a[href^="#schedule"] {
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}