/* ============================================================
   responsive.css — additive cross-device hardening.
   Loaded AFTER style.css. Everything here only PREVENTS overflow
   and improves small-screen ergonomics. It does not restyle the
   desktop design (no colours, layouts, or spacing of existing
   components are overridden outside small-screen media queries).
   ============================================================ */

/* 1) Media never causes horizontal scroll, on any device */
img, svg, video, iframe, embed, object, canvas {
    max-width: 100%;
}
img { height: auto; }

/* 2) Stop accidental horizontal scrolling (stray wide element on phones).
   Use `clip` where supported: it prevents horizontal scroll WITHOUT making the
   body a scroll container, so `position: sticky` on the header actually works.
   (`hidden` fallback first for old Safari < 16.) */
html, body { overflow-x: hidden; overflow-x: clip; }
body { max-width: 100%; }

/* 3) Long words / URLs / emails wrap instead of pushing the layout wide */
h1, h2, h3, h4, h5, p, li, a, span, td, th, label, strong, em, blockquote {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 4) Code & preformatted blocks wrap rather than scroll the page */
pre, code, kbd, samp { white-space: pre-wrap; word-break: break-word; }

/* 5) Tables stay within their container */
table { max-width: 100%; }

/* ---------- Tablet & large phone (≤768px) ---------- */
@media (max-width: 768px) {
    .container { padding-left: 18px; padding-right: 18px; }
}

/* ---------- Phones (≤480px) ---------- */
@media (max-width: 480px) {
    .container { padding-left: 14px; padding-right: 14px; }
    /* keep big call-to-action buttons tappable but not oversized */
    .btn-lg { padding: 14px 24px; font-size: 1rem; }
}