/* ========================================================================== mobile-fixes.css — Mobile & Safari/iOS corrections Loaded globally, last in the cascade so it can correct earlier rules. Fixes, in order: 1. iOS Safari auto-zoom on form focus (inputs under 16px) 2. Minimum 44x44px touch targets (WCAG 2.2 AA / Apple HIG) 3. iOS momentum scrolling + tap highlight polish 4. Safe-area padding for notched iPhones ========================================================================== */ /* ── 1. iOS auto-zoom on input focus ────────────────────────────────────── iOS Safari zooms the page whenever a focused form control has a computed font-size below 16px, and it does NOT zoom back out afterwards. Every field on the site was 14.72px (.92rem), so tapping any of them left the user zoomed in on a horizontally-shifted page — the single worst mobile bug on the site. 16px is the exact threshold; this does not change the visual size on desktop, where the original sizing is preserved below. */ @media (max-width: 1024px) { input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], input[type="date"], input[type="time"], input:not([type]), select, textarea { font-size: 16px !important; } } /* ── 2. Touch target sizing ─────────────────────────────────────────────── WCAG 2.2 AA (2.5.8) asks for 24x24 minimum; Apple's HIG and Google's guidance both say 44x44. These were as small as 18px tall. */ @media (max-width: 1024px) { .btn, .btn-secondary, .btn-primary, .nav-phone, .btn-nav-cta, .btn-mobile-cta, .ft-social-btn, .cr-more, .rv-cta-link, .ct-directions-btn, .btn-ct-call, .btn-ct-wa, .btn-ct-book { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Footer link lists — 18px tall rows were the worst offenders */ .ft-links li a, .mobile-nav-links > li > a, .mobile-nav-submenu li a { min-height: 44px; display: flex; align-items: center; } .ft-social-btn { min-width: 44px; } /*

toggles (FAQ + "add more details") */ summary { min-height: 44px; display: flex; align-items: center; } .faq-item summary { min-height: 48px; } /* Footer utility row — legal links and the email/directions links were 18-22px tall, the smallest targets on the page. */ .ft-directions, .ft-bottom a, .ft-legal a, .ft-contact-row a { min-height: 44px; display: inline-flex; align-items: center; } /* Desktop-style nav is still shown on tablets up to 1024px */ .nav-link { min-height: 44px; display: inline-flex; align-items: center; } .btn-emerg-secondary { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* ── 3. iOS scrolling & tap feedback ──────────────────────────────────── */ .svc-cost-table-wrap, .svc-compare-wrap, .mobile-nav, .nav-mega { -webkit-overflow-scrolling: touch; } a, button, summary, [role="button"] { -webkit-tap-highlight-color: rgba(27, 111, 216, .15); } /* Stop iOS turning long numbers/addresses into low-contrast auto-links */ a[href^="tel:"] { text-decoration: none; } /* ── 4. Notched iPhone safe areas ─────────────────────────────────────── */ @supports (padding: max(0px)) { @media (max-width: 768px) { .site-header .nav-inner, footer .container { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); } } } /* ── 5. Prevent iOS text auto-inflation in landscape ──────────────────── */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ══════════════════════════════════════════════════════════════════════════ 6. HORIZONTAL SHIFTING FIX ("design moves left and right" on phones) ══════════════════════════════════════════════════════════════════════════ Root cause: three things pushed content past the viewport, and because only had overflow-x:hidden (html was still `visible`), the browser expanded the LAYOUT viewport to fit — window.innerWidth measured 640px on a 320px phone. Mobile browsers respond by zooming out and allowing the page to pan sideways. The culprits were: a) .specialists-label span — white-space:nowrap on a 612px string b) .cr-modal — display:flex even when closed, so its 640px content stayed in layout (it was only hidden with visibility/opacity) c) decorative .*-glow divs up to 800px wide ────────────────────────────────────────────────────────────────────── */ /* DO NOT set overflow-x on . Tested and rejected: both `overflow-x:hidden` and `overflow-x:clip` on detach the sticky site header (it scrolled away at -1500px on every device, desktop included). Any overflow value other than `visible` on the root element establishes a scroll container / clipping context that `position:sticky` descendants resolve against. body{overflow-x:hidden} already exists in style.css and does NOT break sticky, because the header sticks relative to . So the correct fix is to remove the causes of the overflow — done below — rather than clip the document and lose the sticky header. */ body { max-width: 100%; } /* (a) Let the long specialist label wrap instead of forcing one 612px line */ .specialists-label span, .specialists-label-txt { white-space: normal !important; } @media (max-width: 768px) { .specialists-label { text-align: center; } .specialists-label span { display: inline-block; max-width: 100%; } } /* (b) A closed modal must leave the layout entirely. visibility:hidden alone keeps its box — and its box was 640px wide. */ .cr-modal:not(.is-open):not(.open):not([aria-hidden="false"]) { display: none !important; } /* (c) Decorative glows are purely visual; never let them create overflow */ [class*="-glow"] { max-width: 100%; pointer-events: none; } /* (d) THE 80px. .ft-cta-strip::before is a decorative 260px circle pinned at right:-80px. The section computes to overflow-x:visible at tablet widths, so that circle pushed the document 80px wider than the viewport — measured as exactly +80px on both iPad Pro (834->914) and desktop (1440->1520). Isolated by hiding each child in turn until scrollWidth dropped. Clipping the section removes the overflow with zero visual change, since the circle is a low-opacity decorative flourish. */ .ft-cta-strip { overflow: hidden; } /* (e) Last 3px: between 769px and ~900px the desktop nav is still shown but the logo + 6 links + phone + CTA no longer fit, pushing .nav-cta ~2px past the viewport. Tighten the spacing in that band only. */ @media (min-width: 769px) and (max-width: 900px) { .nav-inner { gap: 12px; padding-left: 16px; padding-right: 16px; } .nav-links { gap: 0; } .nav-link { padding-left: 8px; padding-right: 8px; } .btn-nav-cta { padding-left: 14px; padding-right: 14px; } .nav-phone { display: none; } /* number stays in the header CTA + footer */ } /* Belt-and-braces: nothing in the document may exceed the viewport width */ @media (max-width: 1024px) { img, video, iframe, table, pre { max-width: 100%; } } /* ── 7. Mobile sticky bar: now two actions, not three ───────────────────── "Book Now" was removed from the bar (and the separate duplicate "Book Appointment" sticky bar was deleted from index.php), so the grid must collapse from 3 columns to 2 or the buttons leave a dead third column. Booking remains available via the header CTA and the on-page form — this only removes the redundant sticky duplicates. */ @media (max-width: 768px) { .home-sticky-bar { grid-template-columns: 1fr 1fr !important; } .home-sticky-bar a { min-height: 48px; justify-content: center; } /* One bar only — reserve exactly its height so nothing sits underneath */ body { padding-bottom: 76px; } }