/*!
 * allperth-compat.css — Bridge React #root layout vs WordPress FSE wrappers (wp-site-blocks, articles, wp-block-*).
 *
 * Load order: assets/css/app.css (Tailwind bundle) → this file (handle: allperth-compat).
 *
 * ---------------------------------------------------------------------------
 * Pattern authors: what stays on blocks vs what compat covers
 * ---------------------------------------------------------------------------
 *
 * KEEP utility classes on synced patterns / HTML blocks (do not rely on compat to recreate):
 *   • Section shell: min-h-screen, min-h-[100dvh], flex, flex-col, grid, gap-*, order-*
 *   • Content width: max-w-7xl, max-w-4xl, mx-auto — matches theme.json layout (1280px) but Tailwind spacing is authoritative for horizontal padding patterns:
 *       px-4 sm:px-6 lg:px-8 (and py-* / pt-* header offset complements template `site-main pt-24…`)
 *   • Visual language: gradients (bg-gradient-to-*), blobs (animate-blob), rounded-*, shadow-*, blur, text-transparent + bg-clip-text, text-gray-*, font-bold, responsive text-* breakpoints
 *   • Cards / CTAs: border, ring, hover:, transition-, group/group-hover utilities
 *
 * Prefer COMPAT rules for:
 *   • Generic prose inside .entry-content / .blog-content / .suburb-content when using core blocks (Paragraph, Heading, List, Quote) without pasted Tailwind on every inner node.
 *   • Undoing Core global styles / block-library quirks on figures, captions, separators, legacy button markup, responsive images.
 *   • Matching .wp-site-blocks + editor canvas to React “single column flex shell” stacking (min-height, flex-grow context).
 *
 * theme.json intentionally stays lean; canonical marketing design lives in app.css (+ patterns). Adjust this file rather than expanding theme.json for layout exceptions.
 */

/* -----------------------------------------------------------------------------
 * Shell: React used <div id="root" class="min-h-screen">; FSE uses .wp-site-blocks
 * --------------------------------------------------------------------------- */

body.admin-bar .wp-site-blocks {
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
}

html {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

body {
	margin: 0 !important;
	padding-top: 0 !important;
}

/* Ensure the admin bar doesn't push the page down */
#wpadminbar {
	display: none !important;
}

.wp-site-blocks {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	gap: 0 !important;
}

.wp-site-blocks > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Collapse in-flow header shell — fixed .site-header overlays the hero (kills top white strip) */
.wp-site-blocks > .wp-block-group > header.wp-block-template-part,
.wp-site-blocks header.wp-block-template-part,
.wp-site-blocks header {
	height: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	line-height: 0 !important;
	overflow: visible !important;
	background: transparent !important;
}

.wp-site-blocks .site-header {
	top: 0 !important;
	margin: 0 !important;
	padding-top: 0 !important;
}

/* Slightly tighter nav bar (less empty band under the viewport top) */
.wp-site-blocks .site-header .flex.justify-between.items-center.h-24 {
	height: 5rem !important; /* 80px — was h-24 / 96px */
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}

.wp-site-blocks main.site-main {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Main landmark from templates already carries flex-1; ensure block layout does not shrink oddly */
.wp-site-blocks > main.site-main,
.wp-site-blocks main.wp-block-group.site-main {
	flex: 1 1 auto;
	min-width: 0;
}

/* -----------------------------------------------------------------------------
 * Typography inheritance — core Headings / paragraphs inside post content wrappers
 * (Patterns with explicit text-* classes on headings stay untouched — higher specificity wins.)
 * --------------------------------------------------------------------------- */

.entry-content :where(p:not([class*="text-"])),
.suburb-content :where(p:not([class*="text-"])),
.blog-content :where(p:not([class*="text-"])) {
	color: inherit;
	line-height: 1.625;
	font-size: 1rem;
}

@media (min-width: 768px) {
	.entry-content :where(p:not([class*="text-"])),
	.suburb-content :where(p:not([class*="text-"])),
	.blog-content :where(p:not([class*="text-"])) {
		font-size: 1.125rem;
	}
}

.entry-content :where(.wp-block-heading:not([class*="text-"])) {
	font-weight: 700;
	line-height: 1.25;
	color: rgb(17 24 39); /* gray-900 */

	/* Matches React emphasis: prefer explicit utilities on patterns for homepage hero H1 gradient */
	font-size: 1.5rem;
}

@media (min-width: 640px) {
	.entry-content :where(.wp-block-heading:not([class*="text-"])) {
		font-size: clamp(1.5rem, 2.5vw, 2.25rem);
	}
}

.entry-content :where(.wp-block-heading:not([class*="text-"])) + .wp-block-heading:not([class*="text-"]),
.entry-content :where(.wp-block-heading:not([class*="text-"])) + p {
	margin-top: var(--wp--style--block-gap, 1rem);
}

/* -----------------------------------------------------------------------------
 * Lists — overlap between Core list block & Tailwind preflight
 * --------------------------------------------------------------------------- */

.entry-content :where(.wp-block-list:not(.is-style-plain)),
.blog-content :where(.wp-block-list:not(.is-style-plain)),
.suburb-content :where(.wp-block-list:not(.is-style-plain)) {
	padding-left: 1.25rem;
	box-sizing: border-box;
	list-style-position: outside;
	margin-block: 1rem;
}

.entry-content :where(.wp-block-list:not(.is-style-plain).is-vertical) > li > .wp-block,
.blog-content :where(.wp-block-list:not(.is-style-plain).is-vertical) > li > .wp-block {
	margin-block: 0;
}

.entry-content :where(.wp-block-list.is-style-list-no-style),
.blog-content :where(.wp-block-list.is-style-list-no-style),
.suburb-content :where(.wp-block-list.is-style-list-no-style) {
	list-style-type: "";
	padding-inline-start: 0;
	margin-inline-start: 0;
}

/* -----------------------------------------------------------------------------
 * Links — inside prose regions (rounded-xl+ / inline-flex CTAs handled below as no-underline.)
 * --------------------------------------------------------------------------- */

.blog-content :where(a:not(.wp-element-button):not([class*="rounded-"])),
.suburb-content :where(a:not(.wp-element-button):not([class*="rounded-"])) {
	font-weight: 600;
	color: rgb(37 99 235);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	text-decoration-color: rgb(96 165 250);
	transition: color 150ms ease, text-decoration-color 150ms ease;
}

.blog-content :where(a:not(.wp-element-button):not([class*="rounded-"]):hover),
.suburb-content :where(a:not(.wp-element-button):not([class*="rounded-"]):hover) {
	color: rgb(29 78 216);
	text-decoration-color: rgb(37 99 235);
}

.entry-content :where(a:not([class*="text-"], .wp-element-button)) {
	font-weight: 600;
	color: rgb(37 99 235);
	text-decoration: none;
}

.entry-content :where(a:not(.wp-element-button):hover) {
	text-decoration: underline;
}

/* -----------------------------------------------------------------------------
 * Figures / images / galleries — responsive + caption parity with React portfolios
 * --------------------------------------------------------------------------- */

.wp-site-blocks figure,
.wp-site-blocks .wp-block-image,
.wp-site-blocks .wp-block-gallery {
	margin-inline: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.wp-site-blocks figure img,
.wp-site-blocks .wp-block-image img,
.wp-site-blocks .wp-block-gallery-item img {
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}

.wp-site-blocks .wp-block-gallery.has-nested-images figure.wp-block-image {
	margin: 0;
}

.wp-site-blocks figure figcaption,
.wp-site-blocks .wp-block-gallery .blocks-gallery-caption,
.wp-site-blocks .wp-element-caption {
	text-align: center;
	font-style: italic;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: rgb(107 114 128);
	margin-top: 0.5rem;
}

/* -----------------------------------------------------------------------------
 * Separator block — aligns with muted borders used in patterns
 * --------------------------------------------------------------------------- */

.wp-site-blocks hr.wp-block-separator,
.entry-content hr.wp-block-separator {
	border: none;
	border-top: 1px solid rgb(229 231 235);
	opacity: 1;
	max-width: none;
	height: auto;
}

.wp-site-blocks .wp-block-separator.is-style-dots::before {
	color: rgb(156 163 175);
	opacity: 0.85;
}

/* -----------------------------------------------------------------------------
 * Buttons (Core) — baseline radius; gradients stay on HTML/pattern Buttons with utilities
 * --------------------------------------------------------------------------- */

.wp-block-button__link.wp-element-button,
.wp-block-file .wp-element-button {
	border-radius: 0.625rem;
	text-decoration: none;
	box-sizing: border-box;
}

/* Only when markup has no Tailwind bg-* utilities on the anchor */
.wp-block-button__link.wp-element-button:not([class*="bg-"]) {
	padding: 0.75rem 1.5rem;
	font-weight: 600;
	transition:
		background-color 0.2s,
		transform 0.2s,
		box-shadow 0.2s;
}

.wp-block-buttons.is-layout-vertical .wp-block-button__link.wp-element-button {
	width: auto;
	align-self: flex-start;
}

/* -----------------------------------------------------------------------------
 * FAQ / accordion — Details block or raw HTML `<details>`
 * --------------------------------------------------------------------------- */

.entry-content summary,
.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	list-style-position: outside;
	padding-block: 0.25rem;
}

.entry-content .wp-block-details,
.entry-content details {
	border-bottom: 1px solid rgb(229 231 235);
	padding-block: 0.75rem;
}

.wp-block-html details {
	cursor: unset;
	border-bottom: inherit;
	padding-block: inherit;
}

/* Homepage FAQ parity: React accordion chevron → <details> + .ap-home-faq */
.wp-site-blocks details.ap-home-faq {
	border-radius: 0.75rem;
	border: 1px solid rgb(229 231 235);
	overflow: hidden;
	background: rgb(255 255 255);
	cursor: unset;
	box-shadow:
		0 1px 3px rgb(0 0 0 / 0.05),
		0 1px 2px -1px rgb(0 0 0 / 0.06);
	transition: box-shadow 0.2s ease;
}

.wp-site-blocks details.ap-home-faq:hover {
	box-shadow:
		0 4px 12px rgb(0 0 0 / 0.08),
		0 2px 4px rgb(0 0 0 / 0.04);
}

.wp-site-blocks details.ap-home-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.5rem;
	text-align: left;
	list-style: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.wp-site-blocks details.ap-home-faq summary:hover {
	background-color: rgb(249 250 251);
}

.wp-site-blocks details.ap-home-faq summary::-webkit-details-marker {
	display: none;
}

.wp-site-blocks details.ap-home-faq summary .ap-home-faq-title {
	flex: 1 1 auto;
}

.wp-site-blocks details.ap-home-faq .ap-home-faq-chevron {
	flex-shrink: 0;
	transition: transform 0.3s ease;
	transform: rotate(0deg);
}

.wp-site-blocks details.ap-home-faq[open] .ap-home-faq-chevron {
	transform: rotate(180deg);
}

.wp-site-blocks details.ap-home-faq .ap-home-faq-body {
	padding: 0 1.5rem 1.5rem;
}

/* -----------------------------------------------------------------------------
 * Blog archive — Search strip (Blog.tsx hero parity)
 * --------------------------------------------------------------------------- */

.wp-site-blocks .ap-blog-search-strip .wp-block-search__inside-wrapper {
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow:
		0 10px 15px -3px rgb(0 0 0 / 0.08),
		0 4px 6px -4px rgb(0 0 0 / 0.05);
	border: 1px solid rgb(229 231 235);
}

.wp-site-blocks .ap-blog-search-strip .wp-block-search__input {
	padding: 0.875rem 1.25rem;
	font-size: 1rem;
}

/* -----------------------------------------------------------------------------
 * Quotes / Pullquote — prevent double padding when nested in .blog-content wrappers
 * --------------------------------------------------------------------------- */

.wp-block-quote,
.wp-block-pullquote blockquote {
	margin-inline: 0;
	box-sizing: border-box;
}

/* -----------------------------------------------------------------------------
 * Tables (Core)
 * --------------------------------------------------------------------------- */

.wp-site-blocks .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.wp-site-blocks .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: rgb(249 250 251);
}

/* -----------------------------------------------------------------------------
 * Navigation / Footer template parts — avoid extra default list indent from Core stylesheet
 * --------------------------------------------------------------------------- */

.wp-site-blocks .wp-block-navigation .wp-block-navigation-item__content {
	text-wrap: wrap;
	word-break: break-word;
}

/* -----------------------------------------------------------------------------
 * Block editor & Site Editor iframes load this file via enqueue_block_editor_assets.
 * Avoid duplicating template padding (e.g. site-main pt-24) — only neutral fixes here.
 * --------------------------------------------------------------------------- */

.editor-styles-wrapper,
.block-editor-iframe__body {
	box-sizing: border-box;
}

.editor-styles-wrapper .is-root-container,
.block-editor-iframe__body .is-root-container {
	min-width: 0;
}

/* -----------------------------------------------------------------------------
 * Section 2 — Homepage hero (patterns)
 * React: single full-viewport gradient section with grid lg:cols-2, badge, CTAs, stats strip.
 * Keep on pattern utilities: pt-24 / sm: pt / grid, blobs, gradients, typography on H1/subhead/feature chips,
 * OptimizedImage card — compat only handles stray core Image/List inside that section.
 * --------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * Section 3 — Homepage services / grids (Services.tsx style)
 * Keep: max-w-7xl mx-auto px-*, grid sm:cols-* gap-*, card hover utilities.
 * --------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * Section 4 — Homepage FAQ accordion (manual state in React vs Core Details/HTML in WP)
 * Use Core Details/HTML block inside a Group with Tailwind wrappers; compat styles details above.
 * --------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * Section 5 — Homepage testimonials grid (plain div cards in React → Group + Columns in WP)
 * Keep: gradient card backgrounds text utilities on headings/body copied from patterns.
 * --------------------------------------------------------------------------- */

/* Homepage testimonials removed — hide if markup reappears */
.wp-site-blocks main section#testimonials,
.wp-site-blocks main section.ap-testimonials {
	display: none !important;
}

/* -----------------------------------------------------------------------------
 * Section 6 — Homepage contact strip + forms (future plugin forms)
 * Compat avoids fighting input styles when React used Tailwind form controls — reuse utility classes per field wrapper.
 * --------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * Section 7 — Blog (.blog-content in globals.css) + single template wrapper
 * Prose-heavy: rely on .blog-content rules in app.css; compat adds link/list fallbacks outside those selectors.
 * --------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * Section 8 — Inner pages About/Services hub/Gallery hero band
 * Matches template `inner-hero-page` gradient shell or pattern-only heroes — keep animate-blob wrappers in HTML block or pattern markup.
 * --------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * Section 9 — Suburb CPT body (.suburb-content in app.css mirrors long-form typography)
 * Compat reinforces links/lists when mixing core blocks inside that wrapper.
 * --------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * Header scroll enhancement (paired with assets/js/app.js `.is-scrolled` toggle)
 * --------------------------------------------------------------------------- */

/* Keep header above hero image overlays (even if a page still has absolute-positioned media). */
.wp-site-blocks .site-header,
.wp-block-template-part .site-header,
header.site-header {
	z-index: 50;
}

.site-header.is-scrolled {
	background-color: rgb(255 255 255 / 0.6);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow:
		0 10px 15px -3px rgb(0 0 0 / 0.1),
		0 4px 6px -4px rgb(0 0 0 / 0.08);
}

/* Mobile menu button hover — matches Navigation.tsx (transparent vs scrolled). */
.site-header:not(.is-scrolled) .site-header-nav-btn:hover {
	background-color: rgb(255 255 255 / 0.1);
}

.site-header.is-scrolled .site-header-nav-btn:hover {
	background-color: rgb(243 244 246);
}

/* -----------------------------------------------------------------------------
 * No underlines — primary nav / footer chrome / buttons / CTA anchors (React parity)
 * --------------------------------------------------------------------------- */

.wp-site-blocks :is(button, button:hover),
.wp-site-blocks :is(.wp-block-button__link, .wp-block-button__link:hover),
.wp-site-blocks :is(.wp-element-button, .wp-element-button:hover),
.wp-site-blocks :is(a, a:hover, a:focus) {
	text-decoration: none !important;
	text-decoration-line: none !important;
}

/* Re-apply underlines only for prose links where we actually want them */
.blog-content :where(a:not(.wp-element-button):not([class*="rounded-"])),
.suburb-content :where(a:not(.wp-element-button):not([class*="rounded-"])),
.entry-content :where(a:not(.wp-element-button):not([class*="rounded-"]):hover) {
	text-decoration: underline !important;
}

.site-header :is(a, a:hover, a:focus) {
	text-decoration: none !important;
	text-decoration-line: none !important;
}

.wp-site-blocks footer :is(a, a:hover, a:focus),
.wp-site-blocks .wp-block-template-part:is([aria-label*="footer" i]) :is(a, a:hover, a:focus),
.wp-site-blocks .wp-block-navigation .wp-block-navigation-item__content,
.wp-site-blocks .wp-block-navigation .wp-block-navigation-item__content:hover {
	text-decoration: none !important;
	text-decoration-line: none !important;
}

/* Pattern & dynamic HTML anchors that use Tailwind pill / card radii behave as buttons. */
.wp-site-blocks :is(main, footer, header) a[class*="rounded-"],
.wp-site-blocks :is(main, footer, header) a[class*="rounded-"]:hover,
.wp-site-blocks :is(main, footer, header) a[class*="rounded-"]:focus {
	text-decoration: none;
	text-decoration-line: none;
}

/* -----------------------------------------------------------------------------
 * Accessibility — keyboard focus parity (patterns use raw anchors / summaries)
 * --------------------------------------------------------------------------- */

.wp-site-blocks a:focus-visible,
.wp-site-blocks button:focus-visible {
	outline: 3px solid rgb(37 99 235); /* blue-600 */
	outline-offset: 2px;
}

.wp-site-blocks details.ap-home-faq summary:focus-visible {
	outline: 3px solid rgb(37 99 235);
	outline-offset: 2px;
	border-radius: 0.375rem;
}

/* DesignTab footer credit — does not rely on Tailwind purge */
.ap-designtab-credit .ap-designtab-heart {
	filter: drop-shadow(0 1px 2px rgba(248, 113, 113, 0.45));
}

.ap-designtab-credit .ap-designtab-link {
	background: linear-gradient(90deg, #22d3ee, #60a5fa, #67e8f9);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.ap-designtab-credit .ap-designtab-link:hover,
.ap-designtab-credit .ap-designtab-link:focus {
	opacity: 0.85;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Contact info cards — long email stays inside card, centred */
.ap-contact-info-cards .grid {
	align-items: stretch;
}

.ap-contact-card {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ap-contact-card__value {
	width: 100%;
	max-width: 100%;
	padding: 0 0.25rem;
	text-align: center;
}

.ap-contact-info-cards .ap-contact-email-link {
	display: inline-block;
	max-width: 100%;
	font-size: 0.875rem;
	line-height: 1.4;
	word-break: break-all;
	overflow-wrap: anywhere;
	text-align: center;
}

@media (min-width: 640px) {
	.ap-contact-info-cards .ap-contact-email-link {
		font-size: 1rem;
	}
}

/* -----------------------------------------------------------------------------
 * Homepage layout safety net — corrupted HTML / missing flex classes on CTAs
 * --------------------------------------------------------------------------- */

.wp-site-blocks main [class*="lg:grid-cols-2"] {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	align-items: center;
}

@media (min-width: 1024px) {
	.wp-site-blocks main [class*="lg:grid-cols-2"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Services / pricing tiles / testimonial grids */
.wp-site-blocks main [class*="md:grid-cols-2"] {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}

@media (min-width: 768px) {
	.wp-site-blocks main [class*="md:grid-cols-2"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wp-site-blocks main [class*="lg:grid-cols-3"] {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}

@media (min-width: 768px) {
	.wp-site-blocks main [class*="md:grid-cols-2"][class*="lg:grid-cols-3"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.wp-site-blocks main [class*="lg:grid-cols-3"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.wp-site-blocks main [class*="flex-col"][class*="sm:flex-row"] {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.wp-site-blocks main [class*="flex-col"][class*="sm:flex-row"] {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
}

.wp-site-blocks main a[class*="rounded-xl"][class*="px-"],
.wp-site-blocks main a[class*="rounded-lg"][class*="px-8"] {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	white-space: nowrap;
	width: auto;
	max-width: 100%;
	min-width: 0;
}

.wp-site-blocks main a[class*="inline-block"][class*="px-8"][class*="py-4"] {
	display: inline-block;
	white-space: normal;
	text-align: center;
}

/* Empty phone CTA shell left when PHP was stripped from stored HTML */
.wp-site-blocks main a[href=""],
.wp-site-blocks main a:not([href]),
.wp-site-blocks main a[href=""]:empty {
	display: none !important;
}

/*
 * Solid gradient CTAs — full pill background (avoids clipped/partial paint).
 * Match contiguous "bg-gradient-to-r from-blue-600 to-cyan-500" only —
 * NOT hover:from-blue-600 on outline Contact Us buttons.
 */
.wp-site-blocks main a.ap-hero-cta-primary,
.wp-site-blocks main a[class*="bg-gradient-to-r from-blue-600 to-cyan-500"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	padding: 0.875rem 2rem !important;
	white-space: normal !important;
	width: auto !important;
	max-width: 100%;
	background-color: #2563eb !important;
	background-image: linear-gradient(to right, #2563eb, #06b6d4) !important;
	color: #fff !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	-webkit-text-fill-color: #fff !important;
}

/* Outline Contact CTA — keep white fill + blue border (not forced gradient) */
.wp-site-blocks main a.ap-hero-cta-secondary,
.wp-site-blocks main section[class*="100dvh"] a[href*="/contact/"][class*="border-blue-600"],
.wp-site-blocks main a[href*="/contact/"][class*="bg-white"][class*="border-blue-600"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	background-color: #fff !important;
	background-image: none !important;
	color: #2563eb !important;
	-webkit-text-fill-color: #2563eb !important;
	border: 2px solid #2563eb !important;
}

/* Renovation image overlays — keep badge + bottom card from colliding */
.wp-site-blocks main section[class*="from-blue-600"][class*="via-cyan-500"] figure.relative.rounded-2xl > .absolute[class*="top-6"],
.wp-site-blocks main section[class*="from-blue-600"][class*="via-cyan-500"] .relative.rounded-2xl > .absolute[class*="top-6"][class*="right-6"] {
	position: absolute !important;
	top: 1.5rem !important;
	right: 1.5rem !important;
	left: auto !important;
	bottom: auto !important;
	z-index: 20 !important;
}

.wp-site-blocks main section[class*="from-blue-600"][class*="via-cyan-500"] figure.relative.rounded-2xl > figcaption,
.wp-site-blocks main section[class*="from-blue-600"][class*="via-cyan-500"] .relative.rounded-2xl > .absolute[class*="bottom-6"] {
	position: absolute !important;
	bottom: 1.5rem !important;
	left: 1.5rem !important;
	right: 1.5rem !important;
	top: auto !important;
	z-index: 20 !important;
}

/* Homepage contact — force stable 2-col + stacked sidebar rows */
.wp-site-blocks main section#contact.ap-home-contact,
.wp-site-blocks main section#contact {
	overflow: visible !important;
}

.wp-site-blocks main section#contact .ap-home-contact-grid,
.wp-site-blocks main section#contact .grid.lg\:grid-cols-2,
.wp-site-blocks main section#contact [class*="lg:grid-cols-2"] {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 3rem !important;
	align-items: start !important;
	width: 100% !important;
}

@media (min-width: 1024px) {
	.wp-site-blocks main section#contact .ap-home-contact-grid,
	.wp-site-blocks main section#contact .grid.lg\:grid-cols-2,
	.wp-site-blocks main section#contact [class*="lg:grid-cols-2"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

.wp-site-blocks main section#contact .ap-home-contact-form-wrap,
.wp-site-blocks main section#contact .ap-home-contact-aside {
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
}

.wp-site-blocks main section#contact .ap-home-contact-aside {
	display: flex !important;
	flex-direction: column !important;
	gap: 2rem !important;
}

.wp-site-blocks main section#contact .ap-home-contact-aside > .bg-white,
.wp-site-blocks main section#contact .ap-home-contact-aside > [class*="from-blue-600"] {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.wp-site-blocks main section#contact .space-y-6 > .flex.items-start,
.wp-site-blocks main section#contact .space-y-6 > [class*="items-start"] {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 1rem !important;
	width: 100% !important;
}

/* -----------------------------------------------------------------------------
 * Homepage hero — two columns + CTA safety net
 * --------------------------------------------------------------------------- */

/* Background blobs / grid stay BEHIND all hero content (mix-blend can paint over otherwise) */
.wp-site-blocks main section[class*="100dvh"] {
	isolation: isolate;
}

.wp-site-blocks main section[class*="100dvh"] > .absolute.inset-0 {
	z-index: 0 !important;
	pointer-events: none !important;
}

.wp-site-blocks main section[class*="100dvh"] > .absolute.inset-0 [class*="blur"],
.wp-site-blocks main section[class*="100dvh"] > .absolute.inset-0 [class*="animate-blob"] {
	z-index: 0 !important;
	pointer-events: none !important;
}

.wp-site-blocks main section[class*="100dvh"] > .max-w-7xl,
.wp-site-blocks main section[class*="100dvh"] > [class*="max-w-7xl"] {
	position: relative !important;
	z-index: 10 !important;
	isolation: isolate;
}

/* Image glow orbs stay behind the photo frame (z-index:-1 inside isolated group) */
.wp-site-blocks main section[class*="100dvh"] .relative.group {
	position: relative !important;
	isolation: isolate;
}

.wp-site-blocks main section[class*="100dvh"] .relative.group > [class*="-inset-4"],
.wp-site-blocks main section[class*="100dvh"] .relative.group > [class*="blur-2xl"],
.wp-site-blocks main section[class*="100dvh"] .relative.group > [class*="-top-4"][class*="blur"],
.wp-site-blocks main section[class*="100dvh"] .relative.group > [class*="-bottom-4"][class*="blur"] {
	z-index: -1 !important;
	pointer-events: none !important;
}

.wp-site-blocks main section[class*="100dvh"] .relative.group > .relative.rounded-2xl,
.wp-site-blocks main section[class*="100dvh"] .relative.group > [class*="rounded-2xl"][class*="overflow-hidden"] {
	position: relative !important;
	z-index: 1 !important;
	isolation: isolate;
}

/* White float cards only — never promote blur glow orbs that also use -left/-right */
.wp-site-blocks main section[class*="100dvh"] .relative.group > .absolute[class*="bg-white"][class*="-left-4"],
.wp-site-blocks main section[class*="100dvh"] .relative.group > .absolute[class*="bg-white"][class*="-right-4"] {
	z-index: 4 !important;
}

/* Trust pills (green ticks) — keep all three on one line from md up */
.wp-site-blocks main section[class*="100dvh"] [class*="flex-wrap"][class*="gap-2"][class*="mb-8"],
.wp-site-blocks main section[class*="100dvh"] [class*="flex-wrap"][class*="gap-2"][class*="mb-10"] {
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 0.5rem 0.75rem !important;
}

.wp-site-blocks main section[class*="100dvh"] [class*="flex-wrap"][class*="gap-2"][class*="mb-8"] > [class*="rounded-full"],
.wp-site-blocks main section[class*="100dvh"] [class*="flex-wrap"][class*="gap-2"][class*="mb-10"] > [class*="rounded-full"] {
	flex: 0 1 auto !important;
	white-space: nowrap !important;
}

@media (max-width: 767px) {
	.wp-site-blocks main section[class*="100dvh"] [class*="flex-wrap"][class*="gap-2"][class*="mb-8"],
	.wp-site-blocks main section[class*="100dvh"] [class*="flex-wrap"][class*="gap-2"][class*="mb-10"] {
		flex-wrap: wrap !important;
	}
}

/* Orphan shimmer overlay escaped the CTA row and covers the hero — hide it */
.wp-site-blocks main section[class*="100dvh"] .flex.flex-col.sm\:flex-row.gap-3 > .absolute.inset-0,
.wp-site-blocks main section[class*="100dvh"] [class*="flex-col"][class*="sm:flex-row"][class*="gap-3"] > .absolute.inset-0 {
	display: none !important;
}

/* Hero H1 — slightly smaller + tighter so CTAs/stats stay above the fold */
.wp-site-blocks main section[class*="100dvh"] h1 {
	overflow: visible;
	word-break: normal;
	font-size: 1.7rem !important; /* was text-3xl ~1.875rem */
	line-height: 1.15 !important;
	margin-bottom: 0.75rem !important;
}

@media (min-width: 640px) {
	.wp-site-blocks main section[class*="100dvh"] h1 {
		font-size: 1.95rem !important; /* was text-4xl 2.25rem */
		margin-bottom: 0.875rem !important;
	}
}

@media (min-width: 768px) {
	.wp-site-blocks main section[class*="100dvh"] h1 {
		font-size: 2.25rem !important; /* was text-5xl 3rem */
	}
}

@media (min-width: 1024px) {
	.wp-site-blocks main section[class*="100dvh"] h1 {
		font-size: 2.55rem !important; /* was text-6xl 3.75rem */
		line-height: 1.12 !important;
		margin-bottom: 1rem !important;
	}
}

/* Trim a little vertical space under the lead paragraph / badge / pills */
.wp-site-blocks main section[class*="100dvh"] h1 + p {
	margin-bottom: 1rem !important;
}

.wp-site-blocks main section[class*="100dvh"] [class*="rounded-full"][class*="mb-4"],
.wp-site-blocks main section[class*="100dvh"] [class*="rounded-full"][class*="mb-6"] {
	margin-bottom: 0.75rem !important;
}

/* Pills → CTAs → stats: a little more air between the three rows */
.wp-site-blocks main section[class*="100dvh"] [class*="flex-wrap"][class*="gap-2"][class*="mb-8"],
.wp-site-blocks main section[class*="100dvh"] [class*="flex-wrap"][class*="gap-2"][class*="mb-10"] {
	margin-bottom: 1.25rem !important;
	margin-top: 0 !important;
}

.wp-site-blocks main section[class*="100dvh"] .flex.flex-col.sm\:flex-row.gap-3,
.wp-site-blocks main section[class*="100dvh"] [class*="flex-col"][class*="sm:flex-row"][class*="gap-3"] {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	gap: 0.625rem 0.75rem !important;
}

.wp-site-blocks main section[class*="100dvh"] .flex.flex-col.sm\:flex-row.gap-3 > a,
.wp-site-blocks main section[class*="100dvh"] [class*="flex-col"][class*="sm:flex-row"][class*="gap-3"] > a {
	padding-top: 0.75rem !important;
	padding-bottom: 0.75rem !important;
}

.wp-site-blocks main section[class*="100dvh"] [class*="mt-8"][class*="flex-wrap"] {
	margin-top: 1.35rem !important;
}

/* Taller hero photo; align columns to top so stats stay on-screen */
@media (min-width: 1024px) {
	.wp-site-blocks main section[class*="100dvh"] .max-w-7xl [class*="lg:grid-cols-2"],
	.wp-site-blocks main section[class*="100dvh"] [class*="lg:grid-cols-2"] {
		align-items: start !important;
	}

	.wp-site-blocks main section[class*="100dvh"] .relative.group img {
		height: 34rem !important;
		max-height: min(62vh, 34rem) !important;
	}
}

@media (min-width: 1280px) {
	.wp-site-blocks main section[class*="100dvh"] .relative.group img {
		height: 38rem !important;
		max-height: min(66vh, 38rem) !important;
	}
}

/* Hero trust stats — three columns; number ABOVE label (never side-by-side) */
.wp-site-blocks main section[class*="100dvh"] .mt-8.sm\:mt-12.flex.flex-wrap,
.wp-site-blocks main section[class*="100dvh"] [class*="mt-8"][class*="sm:mt-12"][class*="flex-wrap"] {
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 0 1.5rem !important;
	width: 100% !important;
}

/*
 * IMPORTANT: do NOT use display:contents here — that put “50+” and “Happy Customers”
 * as sibling flex items on one line. Keep each stat as a stacked column.
 */
.wp-site-blocks main section[class*="100dvh"] [class*="mt-8"][class*="flex-wrap"] .group.cursor-pointer {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: center !important;
	gap: 0.15rem !important;
	flex: 0 0 auto !important;
}

.wp-site-blocks main section[class*="100dvh"] [class*="mt-8"][class*="flex-wrap"] [class*="text-2xl"][class*="font-bold"] {
	display: block !important;
	white-space: nowrap;
	line-height: 1.15;
}

.wp-site-blocks main section[class*="100dvh"] [class*="mt-8"][class*="flex-wrap"] [class*="text-gray-600"] {
	display: block !important;
	white-space: nowrap;
	line-height: 1.25;
}

.wp-site-blocks main section[class*="100dvh"] [class*="mt-8"][class*="flex-wrap"] > [class*="w-px"],
.wp-site-blocks main section[class*="100dvh"] [class*="mt-8"][class*="flex-wrap"] [class*="w-px"][class*="h-12"] {
	display: block !important;
	align-self: center !important;
	width: 1px !important;
	min-height: 3rem;
	flex: 0 0 1px !important;
}


/* Image must not sit in the stats row when still nested in corrupted HTML */
.wp-site-blocks main section[class*="100dvh"] [class*="mt-8"][class*="flex-wrap"] .order-1.lg\:order-2 {
	flex: 0 0 100% !important;
	width: 100% !important;
}

@media (min-width: 1024px) {
	.wp-site-blocks main section[class*="100dvh"] .max-w-7xl [class*="lg:grid-cols-2"] {
		position: relative !important;
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 2.5rem;
		align-items: start;
		min-height: 0;
	}

	.wp-site-blocks main section[class*="100dvh"] [class*="lg:grid-cols-2"] > .text-gray-900.order-2.lg\:order-1,
	.wp-site-blocks main section[class*="100dvh"] [class*="lg:grid-cols-2"] > .order-2.lg\:order-1 {
		grid-column: 1;
		grid-row: 1;
		min-width: 0;
		align-self: start;
		position: relative;
		z-index: 1;
	}

	/* Healthy layout: image is a direct grid sibling — stay in normal flow (never absolute). */
	.wp-site-blocks main section[class*="100dvh"] [class*="lg:grid-cols-2"] > .order-1.lg\:order-2 {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
		transform: none !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		grid-column: 2;
		grid-row: 1;
		align-self: start;
		z-index: 1;
	}

	/*
	 * Nested-only fallback: image still inside the text column.
	 * Pin to the right half without taking the text column out of flow.
	 */
	.wp-site-blocks main section[class*="100dvh"] [class*="lg:grid-cols-2"] > .order-2.lg\:order-1 > .order-1.lg\:order-2,
	.wp-site-blocks main section[class*="100dvh"] [class*="lg:grid-cols-2"] > .text-gray-900.order-2.lg\:order-1 > .order-1.lg\:order-2 {
		position: absolute !important;
		top: 50% !important;
		right: 0 !important;
		left: auto !important;
		transform: translateY(-50%) !important;
		width: calc(50% - 1.5rem) !important;
		max-width: calc(50% - 1.5rem) !important;
		margin: 0 !important;
		order: unset !important;
		z-index: 2;
	}
}

/* -----------------------------------------------------------------------------
 * Service-area location hero — two columns on desktop (text | image)
 * --------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.wp-site-blocks main .min-h-screen > section:first-of-type .grid.lg\:grid-cols-2,
	.wp-site-blocks main .min-h-screen > section:first-of-type [class*="lg:grid-cols-2"] {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3rem;
		align-items: center;
	}

	/* Safety net when image column was nested inside the text column (missing </div>). */
	.wp-site-blocks main .min-h-screen > section:first-of-type .grid.lg\:grid-cols-2 > .order-2.lg\:order-1:has(> .order-1.lg\:order-2) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3rem;
		align-items: center;
	}

	.wp-site-blocks main .min-h-screen > section:first-of-type .grid.lg\:grid-cols-2 > .order-2.lg\:order-1 > .order-1.lg\:order-2 {
		order: 2;
		grid-column: 2;
	}

	/*
	 * Hero — image nested inside the text column.
	 * Do NOT turn the text column into a 2-col grid (that squeezes copy to ~268px).
	 * Absolute positioning above already pins the image to the right column.
	 */
	.wp-site-blocks main section[class*="min-h-"][class*="100dvh"] .grid.lg\:grid-cols-2 > .text-gray-900.order-2.lg\:order-1:has(> .order-1.lg\:order-2),
	.wp-site-blocks main section[class*="min-h-"][class*="100dvh"] .grid[class*="lg:grid-cols-2"] > .order-2.lg\:order-1:has(> .order-1.lg\:order-2) {
		display: block;
		min-width: 0;
	}

	.wp-site-blocks main section[class*="min-h-"][class*="100dvh"] .grid.lg\:grid-cols-2 > .text-gray-900.order-2.lg\:order-1:has(> .order-1.lg\:order-2) > :not(.order-1),
	.wp-site-blocks main section[class*="min-h-"][class*="100dvh"] .grid[class*="lg:grid-cols-2"] > .order-2.lg\:order-1:has(> .order-1.lg\:order-2) > :not(.order-1) {
		max-width: 100%;
	}
}

/* -----------------------------------------------------------------------------
 * Why Choose Us — two columns when content column was nested inside image column
 * --------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.wp-site-blocks main section.bg-gradient-to-br.from-blue-600 .grid.lg\:grid-cols-2 > .order-2.lg\:order-1:has(> .order-1.lg\:order-2),
	.wp-site-blocks main section[class*="from-blue-600"][class*="via-cyan-500"] .grid[class*="lg:grid-cols-2"] > .order-2.lg\:order-1:has(> .order-1.lg\:order-2) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3rem;
		align-items: center;
	}

	.wp-site-blocks main section.bg-gradient-to-br.from-blue-600 .grid.lg\:grid-cols-2 > .order-2.lg\:order-1 > .order-1.lg\:order-2,
	.wp-site-blocks main section[class*="from-blue-600"][class*="via-cyan-500"] .grid[class*="lg:grid-cols-2"] > .order-2.lg\:order-1 > .order-1.lg\:order-2 {
		order: 2;
		grid-column: 2;
	}
}

/* -----------------------------------------------------------------------------
 * Service areas suburb grid — card styling when wpautop left bare <p> labels
 * --------------------------------------------------------------------------- */

.wp-site-blocks main .grid[class*="lg:grid-cols-5"].max-w-6xl > p.text-gray-800.font-semibold {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.5rem;
	margin: 0;
	background: #fff;
	border: 2px solid #bfdbfe;
	border-radius: 0.75rem;
	padding: 1rem;
	text-align: center;
	font-weight: 600;
	color: #1f2937;
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

.wp-site-blocks main .grid[class*="lg:grid-cols-5"].max-w-6xl {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

@media (min-width: 640px) {
	.wp-site-blocks main .grid[class*="lg:grid-cols-5"].max-w-6xl {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.wp-site-blocks main .grid[class*="lg:grid-cols-5"].max-w-6xl {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.wp-site-blocks main .grid[class*="lg:grid-cols-5"].max-w-6xl {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}