/*!
 * 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;
}

.wp-site-blocks header {
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !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.
 * --------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * 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)
 * --------------------------------------------------------------------------- */

.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;
}