/* ============================================================
   CrossTecch — shared responsive + smooth-scroll layer.
   Drop-in: <link rel="stylesheet" href="/responsive.css"> in <head>
   AFTER the page's own <style> so these guards win where needed.

   Goals:
     1) Kill horizontal overflow / side blank space on every page.
     2) Make images, video, iframes, tables, code fluid on small screens.
     3) Smooth scrolling site-wide (respects reduced-motion).
     4) Comfortable mobile typography + tap targets.

   Deliberately conservative: uses `overflow-x: clip` (NOT hidden) so
   position: sticky / scroll-driven sections keep working, and only
   tightens things at small breakpoints so desktop layouts are untouched.
============================================================ */

/* ---------- 1) smooth scrolling everywhere ---------- */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Anchor jumps land below any fixed header instead of under it. */
:target {
  scroll-margin-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------- 2) no horizontal blank space ---------- */
html,
body {
  max-width: 100%;
  /* clip (not hidden) so sticky / scroll-scrub sections still work */
  overflow-x: clip;
}

/* Older browsers that don't support `clip` fall back to hidden safely. */
@supports not (overflow-x: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

/* ---------- 3) fluid media ---------- */
img,
video,
canvas,
svg,
picture,
embed,
object {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* iframes are width:100% already on this site; just cap them so a wide
   child can never push the page sideways. Height is JS-controlled, so we
   leave height alone. */
iframe {
  max-width: 100%;
}

/* Long unbreakable strings (URLs, tokens) shouldn't force a wide page. */
p,
li,
a,
h1,
h2,
h3,
h4,
h5,
h6,
span,
blockquote,
figcaption {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Code + preformatted blocks scroll internally instead of widening the
   page (matters most on the blog posts). */
pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
code {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Tables get their own horizontal scroll rather than blowing out layout. */
table {
  max-width: 100%;
}

/* ============================================================
   Small-screen tightening (<= 768px). Desktop is untouched.
============================================================ */
@media (max-width: 768px) {
  html,
  body {
    width: 100%;
  }

  /* Comfortable base reading size + rhythm on phones. */
  body {
    font-size: 16px;
    line-height: 1.6;
  }

  /* Tap targets: links/buttons stay easy to hit. */
  a,
  button,
  input[type="submit"],
  input[type="button"],
  .btn,
  .cta-btn,
  .hero-cta,
  .hero-cta-btn {
    min-height: 44px;
  }

  /* Form fields are full-width and >=16px so iOS doesn't zoom on focus. */
  input,
  select,
  textarea {
    max-width: 100%;
    font-size: 16px;
  }

  /* Anything explicitly wider than the screen gets reined in. Kept off
     desktop so wide hero canvases there are unaffected. */
  section,
  header,
  footer,
  main,
  article,
  aside,
  .container,
  .wrapper,
  .row {
    max-width: 100%;
  }
}

/* ============================================================
   Extra-small phones (<= 480px).
============================================================ */
@media (max-width: 480px) {
  /* Give big display headings a sane cap so they don't overflow. */
  h1 {
    font-size: clamp(1.7rem, 8vw, 2.4rem);
    line-height: 1.15;
  }
  h2 {
    font-size: clamp(1.4rem, 6.5vw, 2rem);
    line-height: 1.2;
  }
}
