/* ==========================================================================
   responsive-base.css — mobile retrofit layer
   Loaded AFTER style.css. Everything here is additive and scoped to touch or
   narrow viewports, so the signed-off desktop layout is never altered.

   Standards applied
   -----------------
   WCAG 2.2  1.4.10 Reflow          no horizontal scroll at 320 CSS px
   WCAG 2.2  2.5.8  Target Size     >= 24px minimum; 44px targeted on touch
   WCAG 2.2  1.4.4  Resize Text     zoom never blocked, no text-size-adjust lock
   Apple HIG / Material Design      44 x 44 pt / 48 dp comfortable touch target
   iOS Safari                       inputs >= 16px or the page auto-zooms
   CSS Env                          safe-area insets for notched devices
   ========================================================================== */

/* --- 1. Stop iOS inflating body text in landscape ------------------------ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* --- 2. Safe-area insets (notch / home indicator) ------------------------
   .mbar is pinned to bottom:0. On an iPhone the home indicator sits over its
   lower ~34px, so the two primary mobile CTAs lose part of their tap area. */
@supports (padding: env(safe-area-inset-bottom)) {
  .mbar {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .fab {
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    right:  calc(22px + env(safe-area-inset-right, 0px));
  }
  .drawer {
    padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  }
  @media (max-width: 680px) {
    /* body already clears 56px for the bar; add the inset on top */
    body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  }
}

/* --- 3. Form fields: 16px minimum on touch ------------------------------
   Below 16px, iOS Safari zooms the viewport on focus and the visitor has to
   pinch back out — the fastest way to lose an enquiry mid-form. Desktop keeps
   its finer .92rem, which is why this is scoped rather than global. */
@media (max-width: 980px), (pointer: coarse) {
  .field input,
  .field select,
  .field textarea,
  input[type="tel"],
  input[type="text"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px;
  }
  .field label { font-size: .8rem; }
  .field .fic input,
  .field .fic select { min-height: 48px; }
}

/* --- 4. Touch targets: 44px on touch pointers ---------------------------
   All of these already clear the WCAG 2.5.8 minimum of 24px; this lifts them
   to the Apple HIG / Material comfortable size on devices actually using a
   finger, without changing the desktop proportions that were approved. */
@media (max-width: 980px), (pointer: coarse) {
  .btn--sm { min-height: 44px; padding: .7rem 1.05rem; }
  .social a { width: 44px; height: 44px; }
  .mbar a { min-height: 52px; }
  .lnk, .rel a, .fgroup a, .drawer-group a, .foot a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .faq__q { min-height: 48px; }
  /* keep neighbouring targets from merging under a fingertip */
  .fgroup div { gap: .7rem 1.4rem; }
}

/* --- 5. Scrolling regions ----------------------------------------------- */
.table-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* --- 6. Reflow guards at 320px ------------------------------------------
   Defence in depth: long unbroken strings (phone numbers, URLs, place names)
   are the usual cause of a stray horizontal scrollbar once grids collapse. */
@media (max-width: 400px) {
  h1, h2, h3, .lede, .over { overflow-wrap: break-word; }
  .ta__t b, .num, .ask__phone b { white-space: normal; }
  .jr__stop p, .card-body p { max-width: 100%; }
}

/* --- 7. Landscape phones: don't let a tall hero eat the whole screen ----- */
@media (max-width: 900px) and (orientation: landscape) {
  .hx, .phero { min-height: auto; }
}

/* --- 8. Packages section: risk panel + next-step rows (phones) -----------
   .krl__risk is a <p> holding three ticks and three text runs — six flex
   items. Switching it to flex-direction:column stacked all six, orphaning
   every tick on its own line. A two-track grid re-pairs them (auto = tick,
   1fr = its sentence) with no markup change, and the trio becomes one quiet
   reassurance panel instead of three stray sentences.

   .krl__more then reads as menu rows — label, then full-width tappable lines
   with the arrow parked at the right edge, matching the drawer navigation. */
@media (max-width: 680px) {
  /* auto-placement pairs them on its own: tick -> track 1, its sentence ->
     track 2, three rows. No per-item rules needed, and none are possible —
     the sentences are anonymous boxes, not elements. */
  .krl__risk {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .6rem .7rem;
    align-items: start;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-left: 2px solid var(--brand);
    border-radius: var(--radius-sm);
    padding: 18px 18px 18px 16px;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--ink-2);
  }
  .krl__risk svg {
    margin: 0;
    vertical-align: 0;
    align-self: start;
    margin-top: .2rem;
  }

  .krl__more {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 26px;
    padding-top: 0;
    border-top: none;
  }
  .krl__more > span {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 0 10px;
  }
  .krl__more .lnk {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 54px;
    border-top: 1px solid var(--line);
    font-weight: 600;
    font-size: .96rem;
  }
  .krl__more .lnk:last-child { border-bottom: 1px solid var(--line); }
}

/* --- 9. Motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}