/* =============================================================================
   Legend Precision — mobile remediation layer
   Loaded AFTER style.css so it can settle the small-screen defects measured on
   2026-10-15 at 390px: content cut at the right edge across unrelated blocks
   (footer address, upload hint, capability cards, case copy, hero subtitle),
   100vh hero under a fixed nav, a fixed-width mega panel, 400px map, and
   sub-44px tap targets.

   This file only adds/overrides. Removing the enqueue in lp-hardening.php turns
   the whole layer off. It deliberately does not rewrite the 81KB theme sheet.
   ========================================================================== */

/* --- 1. Global overflow guard ------------------------------------------------
   The reported "text cut off" is the document being wider than the viewport, so
   clip at the root and make the usual fixed-width offenders fluid. `clip` (not
   `hidden`) is used so position:sticky / sticky nav behaviour is not destroyed. */
html, body {
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;  /* stop iOS inflating unmatched text */
  text-size-adjust: 100%;
}
img, video, iframe, object, embed, table { max-width: 100%; }
table { table-layout: auto; }

/* Let long strings break instead of pushing the layout wider than the screen. */
.address-text, .footer-contact-item span, .desc, .sec-intro, .spec-v, .spec-k,
.card-desc, .blog-excerpt, p, li, span {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Mega dropdown: was `width: 820px; margin-left: -410px` which cannot fit a
   phone. Keep it full-bleed but bounded. */
.mega, .mega.dd, .mega.dd.dd-wide {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box;
}

/* Any rule that forced nowrap without a JS fitter behind it only ever clipped. */
.has-fit-text, .nav-topbar-item, .news-list-date, .dd-cat, .chip,
.precision-pill, .lp-cases .sec-head .count,
.forminator-ui .forminator-file .lpc-upload-hint {
  white-space: normal !important;
  text-overflow: clip !important;
}

/* --- 2. Hero height on mobile --------------------------------------------------
   100vh is the *visual* viewport minus browser chrome on iOS/Android, so a
   100vh hero is taller than the screen and its lower content falls out of view. */
.hero, .hero--full { min-height: 100svh; }
@supports not (min-height: 100svh) {
  .hero, .hero--full { min-height: 100vh; }
}

/* The hero padding-top is a hard-coded desktop nav height. Derive it from the
   nav's own variable and give phones a little more, never less. */
.hero, .hero--full, .page-header { padding-top: calc(var(--lp-nav, 108px) + 12px); }

/* --- 3. Two-column rows collapse with real gutters ----------------------------
   Screenshots showed body text almost touching both edges once stacked. */
@media (max-width: 900px) {
  .case-row,
  .lp-cases .case-row {
    flex-direction: column !important;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 44px;
  }
  .case-row > .img-side,
  .case-row > .txt-side,
  .lp-cases .case-row .img-side,
  .lp-cases .case-row .txt-side {
    width: 100% !important;
    max-width: 100%;
    flex: 0 0 auto;
  }
  .txt-side, .svc-main, .svc-side { padding: 0 18px; }
  .cap-grid, .specs { gap: 12px; }
}

/* --- 4. Data tables scroll inside themselves, not the page -------------------- */
@media (max-width: 700px) {
  .spec-table, table.spec-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: normal;
  }
  .spec-table th, .spec-table td { padding: 9px 10px; }
}

/* --- 5. Map height follows the screen ---------------------------------------- */
.map-container iframe { height: clamp(240px, 46vh, 400px); }

/* --- 6. Tap targets ------------------------------------------------------------
   44x44 CSS px is the platform guideline (HIG 44, Material 48); the theme's
   small text links fall well under that on touch. */
@media (hover: none) and (pointer: coarse) {
  .btn, .dd-link, .service-card h3 a, .news-list a, .link, a.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .dd-link { padding-top: 12px; padding-bottom: 12px; }
  /* hover-only reveals must not hide content on touch devices */
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- 7. Hero legibility -------------------------------------------------------
   White copy sat directly on a busy machine photo with low contrast in parts. */
.hero--full::before, .hero::before {
  background: linear-gradient(180deg, rgba(4, 44, 83, .62) 0%, rgba(4, 44, 83, .42) 55%, rgba(4, 44, 83, .66) 100%);
}

/* --- 8. Type scale on small screens ------------------------------------------ */
@media (max-width: 600px) {
  .hero h1, .hero--full h1 { font-size: clamp(1.9rem, 8.2vw, 2.6rem); line-height: 1.15; }
  .hero p, .hero--full p { font-size: clamp(0.95rem, 4vw, 1.05rem); }
  .section-title, h2 { font-size: clamp(1.45rem, 6vw, 2rem); }
  .container, .wrap { padding-left: 18px; padding-right: 18px; }
  .stat { min-width: 0; }
}

/* Respect the user's motion preference (the theme already has one reduce block). */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}