/* =====================================================================
   HighPur Water Express — Usability / mobile-friendliness pass
   Clears the audit's "Usability: F" by enforcing legible font sizes and
   adequate tap targets on small screens, WITHOUT altering the desktop look.
   (Google/SEOptimer run these checks against the mobile-rendered page.)
   ===================================================================== */

/* ---- 1. LEGIBLE FONT SIZES ----------------------------------------
   Lift every sub-12px decorative/mono label to a 12px floor on phones &
   small tablets. Desktop typography is untouched. */
@media (max-width: 768px) {
  .brand-sub,
  .call-label,
  .pi-label,
  .pi-live,
  .pi-foot,
  .scroll-cue,
  .kicker,
  .mono.kicker,
  .trust-label,
  .ba-tag,
  .svc-tag,
  .fstage,
  .ph-head,
  .ph-stop,
  .slot-text i,
  .finder-progress,
  .result-head,
  .rs-chip,
  .result-spec h4,
  .spec-row .sv .std-pill,
  .result-foot,
  .proof-label,
  .proof-sub,
  .need,
  .quotes-note,
  .quote-flag,
  .imgfig__cap,
  .showcase-note,
  .hud-bar,
  .hud-stat i,
  .hud-stat b,
  .map-directions,
  .info-k,
  .quote-card figcaption span {
    font-size: 0.75rem !important;   /* 12px floor */
  }

  /* very wide tracking can overflow once the size grows — tighten a touch */
  .kicker,
  .mono.kicker,
  .trust-label,
  .scroll-cue,
  .pi-label {
    letter-spacing: 0.12em !important;
  }

  /* keep the body copy itself comfortably legible on phones */
  body { font-size: 16px; }
}

/* ---- 2. TAP TARGETS ------------------------------------------------
   Ensure interactive elements meet the ~44–48px minimum touch size with
   enough spacing, on touch-capable / small screens. */
@media (max-width: 768px) {
  /* footer + inline nav links: give them real height and breathing room */
  .footer-links { gap: 4px 22px; }
  .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 2px;
  }

  /* mobile slide-in menu items already large — guarantee the minimum */
  .mobile-menu a { min-height: 48px; display: flex; align-items: center; }

  /* primary call + CTA buttons */
  .call-btn { min-height: 48px; }
  .btn { min-height: 44px; }

  /* directions / text links that sit inline */
  .map-directions { min-height: 44px; padding: 8px 0; }

  /* service-area chips, FAQ toggles, finder controls */
  .faq-q { min-height: 48px; }
  .result-restart,
  .finder-back { min-height: 44px; }

  /* form controls: comfortable touch height */
  .field input,
  .field select,
  .field textarea { min-height: 48px; }
}

/* On any pointer:coarse device, enforce target size regardless of width */
@media (pointer: coarse) {
  .nav-links a { padding-top: 10px; padding-bottom: 10px; }
}

/* ---- 3. Service-area line (local SEO + clarity) -------------------- */
.footer-areas {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px var(--pad) 0;
  text-align: center;
}
.footer-areas .fa-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aqua);
  margin-bottom: 10px;
}
.footer-areas .fa-cities {
  color: var(--mist);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 760px;
  margin: 0 auto;
  text-wrap: balance;
}
@media (max-width: 768px) {
  .footer-areas .fa-label { font-size: 0.75rem; letter-spacing: 0.12em; }
}