/*
 * wp-bridge.css — owned by stream B (converter, wordpress/tools/convert.cjs). Loaded LAST, on the front end
 * and in the editor. Makes the core-block wrappers the converter emits render exactly like the Astro HTML.
 *
 * Why `revert-layer`: site.css (the Astro/Tailwind build) lives entirely in cascade layers, and WordPress's
 * own CSS (block-library, global styles, layout) is unlayered — unlayered CSS beats ANY layered rule,
 * whatever its specificity. `prop: revert-layer` in an unlayered rule discards WordPress's value for that
 * property and lets the layers decide: Tailwind utilities, the Astro base styles and the `lsm-bridge`
 * layer below. That is exactly the Astro result.
 *
 * Scope: `.wp-block-post-content` (page content) — header/footer chrome is the theme's job (theme.css).
 */

/* Declared after site.css's layers, so it is the highest-priority LAYER (still below unlayered CSS). */
@layer lsm-bridge {
	/* ── Images ─────────────────────────────────────────────────────────────────────────────────────
	   The converter turns Astro's `div.photo-frame > picture > img.absolute.inset-0.h-full.w-full.object-cover`
	   into `figure.wp-block-image.<frame classes>.lsm-cover > img`: the figure carries the frame (aspect ratio,
	   rounding, plate shadow, position) and the image fills it, cropped, as on Astro. */
	.wp-block-image.lsm-cover > img,
	.wp-block-image.lsm-cover > a > img {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
	}

	/* ── FAQ (core/details with .lsm-faq) ─────────────────────────────────────────────────────────────
	   WordPress's <summary> takes no class, so this re-creates the Astro summary
	   (`flex items-center justify-between gap-4 cursor-pointer list-none px-5 py-4 font-heading font-bold
	   text-primary-dark`) and its chevron chip (`h-7 w-7 rounded-lg bg-primary-soft text-primary
	   transition-transform group-open:rotate-180`, svg 14px `M12 16L4 8h16z`) as a pseudo-element. */
	.wp-block-details.lsm-faq > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: calc(var(--spacing) * 4);
		cursor: pointer;
		list-style: none;
		padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5);
		font-family: var(--font-heading);
		font-weight: var(--font-weight-bold);
		color: var(--color-primary-dark);
	}
	.wp-block-details.lsm-faq > summary::-webkit-details-marker {
		display: none;
	}
	.wp-block-details.lsm-faq > summary::after {
		content: "";
		flex-shrink: 0;
		display: inline-flex;
		width: calc(var(--spacing) * 7);
		height: calc(var(--spacing) * 7);
		border-radius: var(--radius-lg);
		background: var(--color-primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23581494'%3E%3Cpath d='M12 16L4 8h16z'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
		transition-property: transform, translate, scale, rotate;
		transition-timing-function: var(--default-transition-timing-function);
		transition-duration: var(--default-transition-duration);
	}
	.wp-block-details.lsm-faq[open] > summary::after {
		rotate: 180deg;
	}

	/* ── GoHighLevel quote form (Custom HTML block `div.lsm-ghl-form > iframe`) ─────────────────────────
	   Reserve the form's height (data-height 988) so the layout does not jump while form_embed.js loads. */
	.lsm-ghl-form > iframe {
		display: block;
		min-height: 988px;
	}
}

/* ── Hand page content back to the Astro CSS ───────────────────────────────────────────────────────── */

/* Spacing: block-library margins (`.wp-block-image { margin: 0 0 1em }`, figure margins) and any layout /
   blockGap margins WordPress adds to children of layout containers. Tailwind's mt-N, mb-N and mx-auto decide. */
.wp-block-post-content :is(.wp-block-group, .wp-block-image, .wp-block-heading, .wp-block-list, .wp-block-details, p, li, figure, ul, ol, details) {
	margin-block: revert-layer;
	margin-inline: revert-layer;
}

/* Images: block-library sizes every `.wp-block-image img` (height:auto, max-width:100%, vertical-align). */
.wp-block-post-content .wp-block-image img {
	box-sizing: revert-layer;
	width: revert-layer;
	height: revert-layer;
	max-width: revert-layer;
	vertical-align: revert-layer;
}

/* Links and FAQ summaries: colour/decoration/cursor come from the Astro classes, never from global styles. */
.wp-block-post-content :is(p, li, h1, h2, h3, h4, h5, h6, summary) a:not(.wp-element-button) {
	color: revert-layer;
	text-decoration: revert-layer;
}
.wp-block-post-content .wp-block-details.lsm-faq > summary {
	cursor: revert-layer;
}

/* ── Block editor canvas only (the iframe body is .editor-styles-wrapper) ──────────────────────────────
   Editing view, not the published page: keep it close enough to the front end that the agency sees what
   they are editing. */

/* The editor puts an inline `height: auto` on every image block's <img>; a cover image must still fill its frame. */
.editor-styles-wrapper .wp-block-image.lsm-cover > img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
}

/* Every editor block wrapper is position: relative. A Custom HTML block that only holds decorative absolute
   layers (hero gradient, "shards") must let them position against their section, as on the front end. */
.editor-styles-wrapper .wp-block-html.block-editor-block-list__block:has(> .block-editor-inner-content > :is(.absolute, .shard)) {
	position: static;
}

/* The same `position: relative` on editor block wrappers would undo Tailwind's `absolute` on Group/Image blocks
   (hero background layer, cover images). */
.editor-styles-wrapper .block-editor-block-list__block.absolute {
	position: absolute;
}