/**
 * Mobile responsiveness — site-wide overrides for phones (≤767px).
 *
 * Scoped to `body main` (and a few global anchors) so the header / footer
 * keep their existing tuned layout. Loaded after style.css and custom.css
 * so source order gives these rules priority at equal specificity.
 *
 * Breakpoints:
 *   ≤ 767px   = phones
 *   ≤ 480px   = small phones
 */

/* ─────────────────────────────────────────────────────────────────────────
 * 1. Global guards — viewport, anchor offset, no horizontal scroll
 * ────────────────────────────────────────────────────────────────────────*/
html {
	scroll-padding-top: 72px; /* sticky mobile header — single nav row */
}

@media (max-width: 767px) {
	html,
	body {
		max-width: 100vw;
		overflow-x: hidden;
	}

	#page,
	#content,
	main,
	main > * {
		max-width: 100%;
		min-width: 0;
	}

	/* Ensure images, videos, iframes never blow out the viewport */
	main img,
	main video,
	main iframe,
	main svg {
		max-width: 100%;
		height: auto;
	}

	main iframe {
		width: 100%;
	}

	/* Decorative blur layers (h-[600px] w-[600px] orbs) are hidden entirely
	   in section 8 — no need to constrain them here. */
}

/* ─────────────────────────────────────────────────────────────────────────
 * 2. Section vertical rhythm — tighten heavy paddings on phones
 *    Targets bare utility classes; sm:/md:/lg: variants still win at higher
 *    breakpoints because they live in higher-min-width media queries.
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	body main .py-32 { padding-top: 3rem; padding-bottom: 3rem; }
	body main .py-24 { padding-top: 3rem; padding-bottom: 3rem; }
	body main .py-20 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
	body main .py-16 { padding-top: 2.25rem; padding-bottom: 2.25rem; }
	body main .py-14 { padding-top: 2rem; padding-bottom: 2rem; }
	body main .py-12 { padding-top: 1.75rem; padding-bottom: 1.75rem; }

	body main .pt-32 { padding-top: 3rem; }
	body main .pt-24 { padding-top: 3rem; }
	body main .pt-20 { padding-top: 2.5rem; }
	body main .pt-16 { padding-top: 2.25rem; }
	body main .pb-32 { padding-bottom: 3rem; }
	body main .pb-24 { padding-bottom: 3rem; }
	body main .pb-20 { padding-bottom: 2.5rem; }
	body main .pb-16 { padding-bottom: 2.25rem; }

	body main .my-20 { margin-top: 2rem; margin-bottom: 2rem; }
	body main .my-16 { margin-top: 1.75rem; margin-bottom: 1.75rem; }
	body main .my-12 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
	body main .mt-16 { margin-top: 1.75rem; }
	body main .mb-16 { margin-bottom: 1.75rem; }
	body main .mt-12 { margin-top: 1.5rem; }
	body main .mb-12 { margin-bottom: 1.5rem; }
	body main .mb-14 { margin-bottom: 1.75rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 3. Section horizontal padding — keep edges tight, never claustrophobic
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	body main .px-8,
	body main .px-10,
	body main .px-12 { padding-left: 1rem; padding-right: 1rem; }

	/* `p-7`/`p-8`/`p-10` on cards is a classic mobile-cluttering value */
	body main .p-10 { padding: 1.25rem; }
	body main .p-8  { padding: 1.125rem; }
	body main .p-7  { padding: 1rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 4. Grid / flex gaps — collapse generous desktop gaps on small screens
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	body main .gap-16 { gap: 1.5rem; }
	body main .gap-14 { gap: 1.5rem; }
	body main .gap-12 { gap: 1.25rem; }
	body main .gap-10 { gap: 1.125rem; }
	body main .gap-8  { gap: 1rem; }

	body main .gap-x-16 { column-gap: 1.5rem; }
	body main .gap-x-12 { column-gap: 1.25rem; }
	body main .gap-x-10 { column-gap: 1.125rem; }
	body main .gap-x-8  { column-gap: 1rem; }
	body main .gap-x-6  { column-gap: 0.875rem; }
	body main .gap-x-5  { column-gap: 0.75rem; }

	body main .gap-y-16 { row-gap: 1.5rem; }
	body main .gap-y-12 { row-gap: 1.25rem; }
	body main .gap-y-10 { row-gap: 1.125rem; }
	body main .gap-y-8  { row-gap: 1rem; }

	body main .space-y-12 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
	body main .space-y-10 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.125rem; }
	body main .space-y-8  > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 5. Typography — keep headlines bold but readable on a 4–6" screen
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	body main h1,
	body main .text-7xl { font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1.1; }
	body main .text-6xl { font-size: clamp(1.875rem, 8vw, 2.5rem); line-height: 1.1; }
	body main .text-5xl { font-size: clamp(1.75rem, 7.5vw, 2.25rem); line-height: 1.15; }
	body main .text-4xl { font-size: clamp(1.5rem, 6.5vw, 2rem); line-height: 1.2; }
	body main .text-3xl { font-size: clamp(1.375rem, 5.5vw, 1.75rem); line-height: 1.25; }
	body main .text-2xl { font-size: clamp(1.25rem, 5vw, 1.5rem); line-height: 1.3; }
	body main p.text-xl,
	body main .leading-relaxed.text-xl { font-size: 1.0625rem; line-height: 1.55; }

	body main .leading-none { line-height: 1.1; }
	body main .tracking-tighter { letter-spacing: -0.01em; }

	/* Long words / URLs / phone numbers never push past the edge */
	body main h1,
	body main h2,
	body main h3,
	body main p {
		overflow-wrap: anywhere;
	}
}

@media (max-width: 480px) {
	body main h1,
	body main .text-7xl { font-size: clamp(1.875rem, 9vw, 2.375rem); }
	body main .text-6xl { font-size: clamp(1.75rem, 8.5vw, 2.125rem); }
	body main .text-5xl { font-size: clamp(1.625rem, 7.5vw, 2rem); }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 6. Buttons — full-width stacking + thumb-sized hit targets
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 640px) {
	body main .inline-flex.items-center.justify-center,
	body main a.inline-flex,
	body main button.inline-flex {
		min-height: 44px;
	}

	/* When two CTAs are flexed side-by-side on phones, stack them */
	body main .flex.flex-col.sm\:flex-row {
		gap: 0.75rem;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 7. Cards & containers — softer corners, less cramped padding
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	body main .rounded-3xl { border-radius: 1.25rem; }
	body main .rounded-2xl { border-radius: 1rem; }

	/* Big card grids look great on desktop, hostile when squeezed.
	   Reduce internal density so content can breathe. */
	body main .grid.grid-cols-1 { row-gap: 1rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 8. Hide pure-decoration that adds clutter on phones
 *    (Patterns commonly used for desktop atmosphere only.)
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	/* Decorative h-[600px]/h-64 glow orbs in hero/section backgrounds —
	   they offer zero value on a 4–6" screen and waste paint cycles. */
	body main .pointer-events-none.absolute,
	body main [aria-hidden="true"].absolute[class*="blur"] {
		display: none !important;
	}

	/* Decorative dividers (the 3px copper bar under section eyebrows etc.) */
	body main [aria-hidden="true"] > .h-\[3px\],
	body main [aria-hidden="true"].h-\[3px\] {
		display: none;
	}

	/* Stat / hero star ribbons bordered above/below — collapse the border */
	body main .border-t.border-white\/10 { padding-top: 1rem; margin-top: 1rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 8b. Buttons — right-size oversized CTAs and make them full-width on
 *      phones so they're easy to thumb-press.
 *      Covers patterns:  px-7 py-4 text-lg   ·   px-8 py-5 text-xl   ·
 *                        px-7 py-3.5 text-base   ·   px-8 py-4 text-base
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 640px) {
	/* Oversized CTA padding shrinks; touch target stays ≥44px via min-height */
	body main a.inline-flex.px-7,
	body main a.inline-flex.px-8,
	body main button.inline-flex.px-7,
	body main button.inline-flex.px-8 {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	body main a.inline-flex.py-4,
	body main button.inline-flex.py-4,
	body main a.inline-flex.py-5,
	body main button.inline-flex.py-5 {
		padding-top: 0.875rem;
		padding-bottom: 0.875rem;
	}

	body main a.inline-flex.text-lg,
	body main button.inline-flex.text-lg {
		font-size: 1rem;
	}

	body main a.inline-flex.text-xl,
	body main button.inline-flex.text-xl {
		font-size: 1.0625rem;
	}

	/* Stack-and-fill: any flex-col CTA group makes its children full-width
	   so two CTAs read as one prominent stack rather than two narrow pills. */
	body main .flex.flex-col > a.inline-flex,
	body main .flex.flex-col > button.inline-flex,
	body main .flex.flex-col.sm\:flex-row > a.inline-flex,
	body main .flex.flex-col.sm\:flex-row > button.inline-flex {
		width: 100%;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 8c. Trust strips — the post-hero trust strip on the homepage duplicates
 *     the in-hero trust bullets ("Licensed", "Satisfaction"). Hide it on
 *     phones to remove redundancy and reclaim above-the-fold space.
 *     Targeting: a wrapped 4-item trust row sitting in a `border-b` band
 *     directly under a hero — that pattern is unique enough not to false-fire.
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	body.home main .border-b.border-gray-100.bg-white .flex.flex-wrap.items-center.justify-center.gap-x-8 {
		display: none;
	}

	body.home main .border-b.border-gray-100.bg-white {
		display: none;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 9. Forms — no zoom-on-focus on iOS (font-size ≥ 16px), full-width inputs
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	body main input[type="text"],
	body main input[type="email"],
	body main input[type="tel"],
	body main input[type="number"],
	body main input[type="search"],
	body main input[type="url"],
	body main textarea,
	body main select {
		font-size: 16px;
		max-width: 100%;
		width: 100%;
	}

	body main label {
		display: block;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 10. Tables — horizontal scroll wrapper instead of overflow
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	body main table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 11. Header mobile cluster — split CTA + hamburger lives next to logo.
 *     Tighten tap-highlight tone and add subtle press feedback.
 * ────────────────────────────────────────────────────────────────────────*/
.site-header [data-track-cta="mobile-header-call"],
.site-header [data-track-cta="mobile-header-form"] {
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0.15);
	transition: background-color 120ms ease, transform 120ms ease;
}

.site-header [data-track-cta="mobile-header-call"]:active,
.site-header [data-track-cta="mobile-header-form"]:active {
	transform: scale(0.985);
}

/* All three mobile header controls (phone, message, hamburger) are 36×36
   square icon buttons by default — see header-content.php — so no extra
   sizing rules are needed here. */

/* ─────────────────────────────────────────────────────────────────────────
 * 12. Mobile menu polish — safe-area inset for notched phones
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	#mobile-menu {
		padding-bottom: calc(1rem + env(safe-area-inset-bottom));
		max-height: calc(100vh - 64px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 13. Footer — collapse oversized desktop column gaps on phones
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	.site-footer .grid.gap-12,
	.site-footer .grid.gap-10,
	.site-footer .grid.gap-8 {
		gap: 1.5rem;
	}

	.site-footer .py-16,
	.site-footer .py-20,
	.site-footer .py-24 {
		padding-top: 2.25rem;
		padding-bottom: 2.25rem;
	}
}

/* On small phones the footer's 4 link columns are forced into 2-cols of
   ~6 links each — 24+ vertical links per column. Single column reads better. */
@media (max-width: 480px) {
	.site-footer .grid.grid-cols-2 {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.site-footer h3 {
		font-size: 0.75rem;
	}
}

/* Landing footer trust badges — tighten gap on small phones. */
@media (max-width: 480px) {
	.site-footer .flex.flex-wrap.items-center.justify-center.gap-6,
	.site-footer .flex.flex-wrap.items-center.justify-center.gap-10 {
		gap: 0.75rem 1rem;
		font-size: 0.75rem;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 14. Service Areas — on phones the Leaflet interactive map is poor UX
 *      (small target, scroll-trap, no useful detail at this zoom). Hide
 *      the map entirely; the sidebar (ZIP lookup + pills + city list)
 *      becomes the full-width primary surface.
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	main .wsa-map-wrap {
		display: none;
	}

	main .wsa-board {
		grid-template-columns: 1fr;
		gap: 0;
	}

	main .wsa-side {
		max-height: none;
		height: auto;
		overflow: visible;
		border-radius: 14px;
	}

	main .wsa-list {
		overflow-y: visible;
		max-height: none;
	}

	main .wsa-board-wrap {
		padding-top: 24px;
		padding-bottom: 32px;
	}

	/* The map-hint and floating map controls are part of the hidden map
	   wrapper, but belt-and-suspenders if any moved out. */
	main .wsa-map-hint,
	main .wsa-map-controls {
		display: none;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 15. Embedded iframes in patterns (Google Maps, video) — the `aspect-[4/3]`
 *      wrapper renders ~360×270px on a 360px-wide phone, then the next 4:3
 *      tile below it. The map alone can take 60vh; cap the height instead.
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	main .aspect-\[4\/3\],
	main .aspect-\[16\/9\] {
		aspect-ratio: auto;
		height: clamp(220px, 50vw, 320px);
	}

	main .aspect-\[4\/3\] iframe,
	main .aspect-\[16\/9\] iframe {
		height: 100%;
		width: 100%;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 16. Gutenberg buttons — `wp-block-buttons` doesn't stack-and-fill on
 *      mobile by default. Force vertical stack with full-width buttons in
 *      CTA pattern blocks so users don't get half-width pills side by side.
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 640px) {
	main .wp-block-buttons {
		display: flex;
		flex-direction: column;
		gap: 0.625rem;
		width: 100%;
	}

	main .wp-block-buttons > .wp-block-button,
	main .wp-block-buttons > .wp-block-button__link {
		width: 100%;
	}

	main .wp-block-button__link {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 17. Filter / select rows — patterns like the testimonials filter use a
 *      `.flex.flex-wrap.gap-4.justify-between` row that wraps to 2-3
 *      partial-width selects. Force a tidy single-column stack on phones.
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 640px) {
	main .flex.flex-wrap.gap-4.justify-between {
		flex-direction: column;
		align-items: stretch;
		gap: 0.625rem;
	}

	main .flex.flex-wrap.gap-4.justify-between > * {
		width: 100%;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 18. Long-text CTAs — buttons with patterns like
 *      "Call to Schedule — 831.225.4344" wrap at narrow widths. Tighten
 *      letter spacing and font-size so they hold on one line in most cases.
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 480px) {
	main a.inline-flex,
	main button.inline-flex {
		letter-spacing: -0.005em;
	}

	main a.inline-flex.text-base,
	main button.inline-flex.text-base {
		font-size: 0.9375rem;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 19. Category / archive tab nav — `.overflow-x-auto` rows of pill tabs
 *      should not show their scrollbar (visual noise on iOS).
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	main .overflow-x-auto {
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
	}

	main .overflow-x-auto::-webkit-scrollbar {
		display: none;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 20. Sticky in-content sidebars (`lg:sticky lg:top-24`) — only kick in at
 *      lg breakpoint, so phones already see them stacked below content.
 *      Belt-and-suspenders: make sure no `position: sticky` leaks in below
 *      lg, and any sticky in-content element accounts for the 96px header.
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 1023px) {
	main .sticky:not(.site-header):not(.header-wrapper) {
		position: relative;
		top: auto;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 21. Hero portraits / about story — when an image lives in the *second*
 *      column of a `lg:grid-cols-2` row but conceptually leads the story,
 *      flip it above the text on phones. Targeted: rows where the second
 *      column is an `<img>` wrapper.
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	main .grid.grid-cols-1.lg\:grid-cols-2 > div:has(> img:only-child),
	main .grid.grid-cols-1.lg\:grid-cols-2 > .relative:has(> img) {
		order: -1;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 22. Services mega-menu — keep the desktop panel responsive at narrow
 *     desktop widths (768–1100px) so it never clips against the viewport.
 *     The mobile accordion (under 768px) handles phones — see #22b.
 * ────────────────────────────────────────────────────────────────────────*/
.mega-menu--services .mega-menu-panel {
	max-width: calc(100vw - 32px);
}

/* On medium-narrow desktops, swap the panel's two-column grid down to one
   column so each row stays comfortably wide. */
@media (max-width: 900px) and (min-width: 768px) {
	.mega-menu--services .mega-menu-panel {
		width: 360px !important;
	}

	.mega-menu--services .mega-menu-panel .grid.grid-cols-2 {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
}

/* 22b. Mobile services accordion — long lists need scroll. The wrapping
       mobile menu already scrolls; here we just ensure each link has a
       comfortable 44px tap target and the column heading reads clearly. */
@media (max-width: 767px) {
	#mobile-services-content > div p {
		padding-top: 0.25rem;
	}

	#mobile-services-content a {
		min-height: 40px;
	}

	#mobile-services-content {
		padding-bottom: 0.75rem;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 23. Comments form — `rows="5"` textareas eat ~180px on a phone, and
 *      side-by-side Name/Email grids feel cramped at 360px wide.
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 640px) {
	main #commentform .comment-form-author,
	main #commentform .comment-form-email,
	main .comment-form-author,
	main .comment-form-email,
	main #commentform .grid.grid-cols-1.md\:grid-cols-2,
	main .grid.grid-cols-1.md\:grid-cols-2:has(input[type="email"]) {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	main #commentform textarea,
	main textarea[rows] {
		min-height: 110px;
		max-height: 200px;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 24. Reference-style pages — glossary, maintenance guide, useful downloads
 *      sometimes use 3- or 4-column reference grids that should stack.
 *      Targets only those pages by template-class hooks the theme already sets.
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	main.tpl-plumbing-glossary .grid.md\:grid-cols-3,
	main.tpl-plumbing-glossary .grid.md\:grid-cols-4,
	main.tpl-maintenance-guide .grid.md\:grid-cols-3,
	main.tpl-maintenance-guide .grid.md\:grid-cols-4,
	main.tpl-useful-downloads .grid.md\:grid-cols-3,
	main.tpl-useful-downloads .grid.md\:grid-cols-4,
	main.tpl-video-tutorials .grid.md\:grid-cols-3,
	main.tpl-video-tutorials .grid.md\:grid-cols-4 {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 25. Booking / homeowner / ROI tools use custom (non-Tailwind) class
 *      prefixes (`.hcp-`, `.wade-roi-`, `.hcp-cal-wrap` etc.) and define
 *      their own breakpoints (some use min-width:900px). Cap minimum heights
 *      and force single-column layout below 768px.
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	main .hcp-cal-wrap {
		grid-template-columns: 1fr !important;
		gap: 0.75rem;
	}

	main .hcp-slots-panel {
		min-height: 0;
		padding: 0.75rem;
	}

	main .hcp-filter-bar {
		grid-template-columns: 1fr !important;
		gap: 0.5rem;
	}

	main [class*="-roi-"] .grid,
	main [class*="-roi-"] .flex {
		gap: 0.625rem;
	}

	main [class*="-roi-"] input,
	main [class*="-roi-"] select {
		font-size: 16px;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 26. Mobile UX polish
 *      - Smooth in-page scroll for anchor jumps under the sticky header
 *      - Tap highlight tone matches the brand instead of system blue
 *      - Sticky CTA never gets text-selected on a long-press
 *      - Bottom safe-area pad so the last section doesn't sit flush against
 *        a notch / home indicator on iOS
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	html {
		scroll-behavior: smooth;
	}

	body {
		-webkit-tap-highlight-color: rgba(188, 111, 48, 0.15);
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	.site-header [data-track-cta^="mobile-header"],
	.site-header [data-track-cta^="mobile-header"] * {
		user-select: none;
		-webkit-user-select: none;
	}

	.site-footer {
		padding-bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
	}

	/* Visible focus ring for keyboard / switch-control users on phones */
	main a:focus-visible,
	main button:focus-visible {
		outline: 2px solid var(--color-brand, #bc6f30);
		outline-offset: 2px;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 27. Mobile menu — when open, lock the page behind it so background
 *      content doesn't scroll under the menu (handled CSS-only with
 *      `:has()` since the existing toggle script just adds/removes
 *      `.hidden` from `#mobile-menu`).
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	body:has(#mobile-menu:not(.hidden)) {
		overflow: hidden;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 28. Reduced-motion — respect users who turn off animations
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	main *,
	main *::before,
	main *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 29. Gutenberg `wp-block-columns` reflow — patterns built with Gutenberg
 *      columns rely on flex defaults; below 781px the editor stops doing
 *      layout for you. Force vertical stack on phones.
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	main .wp-block-columns {
		flex-direction: column;
		gap: 1rem;
	}

	main .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
		min-width: 0;
	}

	/* Inline `style="flex-basis:60%"` etc. that Gutenberg writes when a
	   user sets a non-default column width — flatten on phones. */
	main [style*="flex-basis"][style*="%"] {
		flex-basis: 100% !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 30. Tailwind `md:w-1/2` and `md:w-1/3` — when used WITHOUT a base
 *      `w-full`, the column collapses to its content width on mobile,
 *      not full-width. Belt-and-suspenders enforcement.
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	main .md\:w-1\/2,
	main .md\:w-1\/3,
	main .md\:w-1\/4,
	main .md\:w-2\/3,
	main .md\:w-3\/4 {
		width: 100%;
	}

	main .lg\:w-1\/3,
	main .lg\:w-1\/4,
	main .lg\:w-2\/3,
	main .lg\:w-3\/4 {
		width: 100%;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 31. Touch devices — disable hover-only effects (scale, color shift) so
 *      tap-and-hold on mobile doesn't get stuck in a half-hover state.
 * ────────────────────────────────────────────────────────────────────────*/
@media (hover: none) {
	main .group:hover .group-hover\:scale-110,
	main .group:hover .group-hover\:scale-105,
	main .group:hover .group-hover\:scale-100 {
		transform: none;
	}

	main .group:active .group-hover\:opacity-100 {
		opacity: 1;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 32. Stat blocks — large `.text-3xl` / `.text-4xl` numbers inside a
 *      2-col mobile stat grid often crush their labels. Cap to clamp().
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 480px) {
	main .grid.grid-cols-2 .text-4xl,
	main .grid.grid-cols-2 .text-3xl {
		font-size: clamp(1.375rem, 6vw, 1.875rem);
		line-height: 1.1;
	}

	/* Trim padding inside packed 2-col stat tiles so labels don't get cut */
	main .grid.grid-cols-2 .p-4,
	main .grid.grid-cols-2 .p-6 {
		padding: 0.75rem;
	}

	main .grid.grid-cols-2 .text-center .text-sm {
		font-size: 0.75rem;
	}
}

/* page-contact.php specific: 4-up stat strip with divide-x renders awkward
   1px lines on a 2-col mobile layout. Reduce divider visibility. */
@media (max-width: 480px) {
	main dl.grid.grid-cols-2.divide-x .text-3xl,
	main dl.grid.grid-cols-2.divide-x dt {
		font-size: 1.25rem;
	}

	main dl.grid.grid-cols-2.divide-x dd {
		font-size: 0.7rem;
	}

	main dl.grid.grid-cols-2.divide-x > * {
		padding: 0.875rem 0.5rem;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 33. Pagination — long page-number lists must wrap, not horizontal-scroll
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 640px) {
	main .pagination,
	main .page-numbers,
	main nav.pagination > .nav-links {
		flex-wrap: wrap;
		gap: 0.25rem;
		justify-content: center;
	}

	main .page-numbers a,
	main .page-numbers span,
	main .pagination a,
	main .pagination span {
		padding: 0.5rem 0.625rem;
		font-size: 0.875rem;
		min-width: 2rem;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 34. About template — its `space-y-20` between top-level sections puts
 *      80px gaps on phones. Halve it. Targeted via the `.tpl-about` hook.
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	main.tpl-about .space-y-20 > :not([hidden]) ~ :not([hidden]) {
		margin-top: 2.5rem;
	}
	main.tpl-about .space-y-16 > :not([hidden]) ~ :not([hidden]) {
		margin-top: 2rem;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 35. Single-post hero `.wps-post-hero__actions` — 3 buttons (Read, Call,
 *      Quote) wrap awkwardly on tiny phones. Stack and fill.
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 480px) {
	main .wps-post-hero__actions {
		flex-direction: column;
		gap: 0.625rem;
	}
	main .wps-post-hero__actions > a {
		width: 100%;
		justify-content: center;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 36. Single-service info box — `md:grid-cols-12 md:gap-0` with col-span-4
 *      borders looks like a row of compartments on desktop. On phones the
 *      vertical borders sit awkwardly; flatten to a single divider stack.
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	main .grid.md\:grid-cols-12.md\:gap-0 {
		gap: 1rem;
	}

	main .grid.md\:grid-cols-12.md\:gap-0 > .md\:border-l,
	main .grid.md\:grid-cols-12.md\:gap-0 > .md\:border-r {
		border-left: 0;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 1rem;
	}

	main .grid.md\:grid-cols-12.md\:gap-0 > :last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 37. Article card image heights — `h-44` (176px) and `h-48` (192px) on
 *      single-column mobile cards squeezes the excerpt below the fold.
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 640px) {
	main .grid.grid-cols-1 .relative.h-48,
	main .grid.grid-cols-1 .relative.h-44 {
		height: 11rem; /* 176px → still landscape but doesn't dominate */
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 38. Service-areas map pattern (Gutenberg `service-areas-map.php`) —
 *      the `aspect-[4/3]` Google Maps iframe takes too much vertical
 *      space; flip to 16/9 on phones (already capped via #15 too).
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	main .wp-block-html .aspect-\[4\/3\]:has(> iframe) {
		aspect-ratio: 16 / 9;
		height: auto;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 39. Landing template — testimonial grid renders `grid-cols-2` (set by the
 *      renderer). At 600–767px, two cramped columns; force 1-col on phones.
 *      Scoped to `.wades-unified-landing-article` (the body class set by
 *      `wades_render_unified_landing_post_body()`).
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	.wades-unified-landing-article .grid.grid-cols-2:not(.divide-x) {
		grid-template-columns: 1fr;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * 40. Landing template process steps — `sm:grid-cols-3` cramps at
 *      640–767px. Force 1-col below 768.
 * ────────────────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
	.wades-unified-landing-article .sm\:grid-cols-3 {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}