/* =============================================================================
   MOBILE-OPTIMIZE-2026-05-30 · SITEWIDE responsive hardening
   -----------------------------------------------------------------------------
   90% of traffic is phones. This is the definitive mobile pass. It is a
   LAYOUT-ONLY, COLOR-NEUTRAL skin — it touches no JavaScript, no imagery, and
   no colors (the light-theme / high-contrast skins own color). It loads after
   the theme CSS and uses !important inside a single 768px media query so the
   mobile rules win without affecting desktop at all.

   DELIBERATELY SAFE per the lessons baked into CLAUDE.md:
     • height:auto is applied to RASTER IMAGES ONLY. iframes, canvas, svg, video
       and embeds keep their parent-defined heights — the weather page's Leaflet
       maps, Windy embeds, Ozolio ski webcams, and chart canvases ALL rely on a
       fixed parent height and collapse to 0 if forced to height:auto.
     • 44px touch targets are scoped to button-like controls, not every <a>, so
       inline body-text links are untouched.
     • Inputs are pinned to 16px to stop iOS Safari auto-zoom on focus.
     • We do NOT override grid-template-columns: the site's card/photo grids
       (.cm-grid, the welding album `.g`, storefront `.grid`, …) already use
       auto-fit/auto-fill minmax(), so they reflow to 1-2 columns on their own.
       overflow-x:hidden below is the backstop for any stray wide grid.

   Reversible: delete this file + its <link> on each page. Desktop is unaffected
   because every rule lives inside @media (max-width:768px).
   ========================================================================== */

@media (max-width: 768px) {

  /* 1 ── KILL HORIZONTAL OVERFLOW — the #1 mobile bug ─────────────────────── */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  *, *::before, *::after { box-sizing: border-box; }

  /* 2 ── MEDIA NEVER EXCEEDS THE VIEWPORT ─────────────────────────────────── */
  /* height:auto is SAFE on raster images only. */
  img { max-width: 100% !important; height: auto !important; }
  /* iframes / canvas / svg / video / embeds: cap WIDTH, KEEP their height. */
  video, iframe, canvas, svg, embed, object { max-width: 100% !important; }

  /* 3 ── WIDE DATA TABLES SCROLL, they don't widen the page ───────────────── */
  table {
    display: block;
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 4 ── FORM CONTROLS — 16px kills iOS zoom-on-focus, never overflow ──────── */
  html { -webkit-text-size-adjust: 100%; }
  input, select, textarea {
    font-size: 16px !important;
    max-width: 100% !important;
  }

  /* 5 ── 44px MINIMUM TOUCH TARGETS (Apple HIG) ───────────────────────────── */
  /* Scoped to interactive button-like controls — inline text links untouched. */
  button, .btn, a.btn, .nl, .nl-cta, .hero-cta, .sec-cta, .cta,
  .btn-pri, .btn-out, .btn-gold, .btn-outline-gold, .new-cta, .snow-reel-cta,
  input[type="submit"], input[type="button"], select,
  details > summary, [role="button"] {
    min-height: 44px;
  }
  /* Vertically center text-bearing tap targets so 44px reads cleanly. */
  a.btn, .btn, .nl-cta, .hero-cta, .sec-cta, .cta, .btn-pri, .btn-out,
  .btn-gold, .btn-outline-gold, .snow-reel-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 6 ── BREATHING ROOM + NOTHING WIDER THAN THE SCREEN ───────────────────── */
  .section, .wx-section, .content, .container, main {
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100vw !important;
  }
  .card, .panel, article, .cm-card, .live-card, .part-card, .pipe-card,
  .product-card, .tool-card, .new-card, .show-card, .stack-card, .lens-card,
  .why-card, .cat-card, .step, .ws-card {
    max-width: 100% !important;
  }
}