/* Shared editorial layout contract for the front end and the block editor. */

:root {
	--emergency-layout-content-width: var(--wp--style--global--content-size, 45rem);
	--emergency-section-padding: var(--wp--preset--spacing--section-desktop, 6rem);
	--emergency-section-heading-gap: var(--wp--preset--spacing--heading-desktop, 2.5rem);
	--emergency-layout-max-width: var(--wp--style--global--wide-size, var(--wp--custom--layout--max-width, 120rem));
	--emergency-layout-desktop-columns: var(--wp--custom--layout--desktop-columns, 12);
	--emergency-layout-mobile-columns: var(--wp--custom--layout--mobile-columns, 4);
	--emergency-layout-desktop-margin: var(--wp--custom--layout--desktop-margin, 3.75rem);
	--emergency-layout-desktop-gutter: var(--wp--custom--layout--desktop-gutter, 1.25rem);
	--emergency-layout-mobile-margin: var(--wp--custom--layout--mobile-margin, 1rem);
	--emergency-layout-mobile-gutter: var(--wp--custom--layout--mobile-gutter, 0.625rem);
	--emergency-layout-margin: var(--emergency-layout-desktop-margin);
	--emergency-layout-gutter: var(--emergency-layout-desktop-gutter);
	--emergency-layout-columns: var(--emergency-layout-desktop-columns);
	--emergency-layout-block-margin: var(--emergency-layout-margin);
	--emergency-layout-boxed-max-width: calc(var(--emergency-layout-max-width) + (2 * var(--emergency-layout-margin)));
}

:where(body, .editor-styles-wrapper) {
	--emergency-layout-block-margin: var(--emergency-layout-margin);
	--wp--style--root--padding-left: var(--emergency-layout-margin) !important;
	--wp--style--root--padding-right: var(--emergency-layout-margin) !important;
}

:where(.wp-site-blocks, .editor-styles-wrapper .is-root-container) {
	--emergency-layout-bleed: max(var(--emergency-layout-margin), calc((100vw - var(--emergency-layout-max-width)) / 2 + var(--emergency-layout-margin)));
	--emergency-layout-content-inset: max(var(--emergency-layout-margin), calc((100vw - var(--emergency-layout-max-width)) / 2));
	--emergency-layout-root-bleed: 0;
	--emergency-page-inset: var(--emergency-layout-content-inset);
}

body .wp-site-blocks,
.editor-styles-wrapper .is-root-container {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-inline: auto;
}

:where(.wp-site-blocks) > *,
.editor-styles-wrapper .is-root-container > * {
	margin-block: 0 !important;
}

body .wp-site-blocks > .site-header,
.editor-styles-wrapper .is-root-container > .site-header {
	box-sizing: border-box;
	width: calc(100% + (2 * var(--emergency-layout-root-bleed)));
	max-width: none;
	margin-inline: calc(-1 * var(--emergency-layout-root-bleed)) !important;
	background: var(--wp--preset--color--white, #fff);
}

body .wp-site-blocks > .site-header > .wp-block-emergency-mega-menu,
body .wp-site-blocks > .site-header > .emergency-header-shell,
.editor-styles-wrapper .is-root-container > .site-header > .wp-block-emergency-mega-menu,
.editor-styles-wrapper .is-root-container > .site-header > .emergency-header-shell {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--emergency-layout-max-width);
	margin-inline: auto;
	background: var(--wp--preset--color--white, #fff);
}

/*
 * `emergency-layout-grid` remains as a compatibility class for saved
 * templates. It is now a page shell rather than an implicit grid. Native
 * constrained layouts own the default content width; a real twelve-column
 * composition opts into `emergency-layout-grid--columns` explicitly.
 */
.wp-site-blocks :is(.emergency-layout-grid, .wp-block-post-content),
.editor-styles-wrapper :is(.emergency-layout-grid, .wp-block-post-content) {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-inline: auto;
}

.wp-site-blocks .emergency-layout-grid,
.editor-styles-wrapper .emergency-layout-grid {
	padding-inline: var(--emergency-page-inset, var(--emergency-layout-margin));
}

.wp-site-blocks .wp-block-post-content,
.editor-styles-wrapper .wp-block-post-content {
	padding-inline: var(--emergency-page-inset, var(--emergency-layout-margin));
}

.wp-site-blocks .wp-block-post-content > .emergency-layout-grid,
.editor-styles-wrapper .wp-block-post-content > .emergency-layout-grid {
	padding-inline: 0;
}

/* Legacy full-width post-content remains readable while templates migrate. */
.wp-site-blocks .wp-block-post-content.alignfull,
.editor-styles-wrapper .wp-block-post-content.alignfull {
	width: 100%;
	max-width: none;
	padding-inline: var(--emergency-page-inset, var(--emergency-layout-margin));
}

body .wp-site-blocks > .alignfull,
.editor-styles-wrapper .is-root-container > .alignfull {
	width: calc(100% + 2 * var(--emergency-layout-root-bleed));
	max-width: none;
	margin-inline: calc(-1 * var(--emergency-layout-root-bleed)) !important;
}

.wp-site-blocks :is(.emergency-layout-grid, .wp-block-post-content) > *,
.editor-styles-wrapper :is(.emergency-layout-grid, .wp-block-post-content) > * {
	box-sizing: border-box;
	min-width: 0;
	--emergency-layout-block-margin: 0;
}

.wp-site-blocks :is(.emergency-layout-grid, .wp-block-post-content) > .alignwide,
.editor-styles-wrapper :is(.emergency-layout-grid, .wp-block-post-content) > .alignwide {
	width: 100%;
	max-width: var(--emergency-layout-max-width);
	margin-inline: auto !important;
}

.wp-site-blocks :is(.emergency-layout-grid, .wp-block-post-content) > .alignfull,
.editor-styles-wrapper :is(.emergency-layout-grid, .wp-block-post-content) > .alignfull {
	width: calc(100% + (2 * var(--emergency-page-inset)));
	max-width: none;
	margin-inline: calc(-1 * var(--emergency-page-inset)) !important;
	--emergency-layout-block-margin: var(--emergency-layout-margin);
}

/* Keep the page shell as the single source of horizontal padding. */
.wp-site-blocks :is(.emergency-layout-grid, .wp-block-post-content) :where(.has-global-padding),
.editor-styles-wrapper :is(.emergency-layout-grid, .wp-block-post-content) :where(.has-global-padding) {
	padding-inline: 0 !important;
}

.wp-site-blocks :is(.emergency-layout-grid, .wp-block-post-content).has-global-padding,
.editor-styles-wrapper :is(.emergency-layout-grid, .wp-block-post-content).has-global-padding,
.wp-site-blocks :is(.emergency-layout-grid, .wp-block-post-content) > .has-global-padding,
.editor-styles-wrapper :is(.emergency-layout-grid, .wp-block-post-content) > .has-global-padding {
	padding-inline: var(--emergency-layout-block-margin, var(--emergency-layout-margin)) !important;
}

.wp-site-blocks .wp-block-post-content > .emergency-layout-edge-to-edge.has-global-padding,
.editor-styles-wrapper .wp-block-post-content > .emergency-layout-edge-to-edge.has-global-padding {
	padding-inline: 0 !important;
}

.wp-site-blocks :is(.emergency-layout-grid, .wp-block-post-content).emergency-layout-readable,
.editor-styles-wrapper :is(.emergency-layout-grid, .wp-block-post-content).emergency-layout-readable {
	max-width: var(--emergency-layout-content-width);
}

.wp-site-blocks .emergency-layout-grid > .wp-block-post-content,
.editor-styles-wrapper .emergency-layout-grid > .wp-block-post-content {
	max-width: none;
	padding-inline: 0;
}

/* Simple pages share title and spacing; composed documents own both. */
.emergency-page-shell {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

.emergency-page-shell:has(.wp-block-post-content > .emergency-page-composition),
.emergency-page-shell:has(.wp-block-post-content > .emergency-hero--internal-feature:first-child),
.emergency-page-shell:has(.wp-block-post-content > .emergency-hero--internal-title:first-child) {
	padding-block: 0;
}

.emergency-page-shell:has(.wp-block-post-content > .emergency-page-composition) > .wp-block-post-title,
.emergency-page-shell:has(.wp-block-post-content > .emergency-hero--internal-feature:first-child) > .wp-block-post-title,
.emergency-page-shell:has(.wp-block-post-content > .emergency-hero--internal-title:first-child) > .wp-block-post-title,
.emergency-layout-grid:has(> .wp-block-post-content > .emergency-hero--internal-feature:first-child) > .wp-block-post-title,
.emergency-layout-grid:has(> .wp-block-post-content > .emergency-hero--internal-title:first-child) > .wp-block-post-title {
	display: none;
}

@layer emergency-inline-layout {

	.wp-site-blocks > main.emergency-layout-grid {
		max-width: none !important;
		padding-inline: var(--emergency-page-inset) !important;
	}

	/* Inset single bodies own their gutter; the outer shell only caps width. */
	.wp-site-blocks > main.emergency-layout-grid.emergency-single-page-shell,
	.editor-styles-wrapper .emergency-layout-grid.emergency-single-page-shell {
		--emergency-page-inset: 0;
		max-width: var(--emergency-layout-max-width) !important;
		padding: 0 !important;
	}

	/*
	 * A page owns the editorial inset. Normal sections fill its content box;
	 * full-width sections cancel that same inset without their own padding.
	 */
	.wp-site-blocks .wp-block-post-content > .emergency-page-composition.alignfull,
	.editor-styles-wrapper .wp-block-post-content > .emergency-page-composition.alignfull {
		box-sizing: border-box;
		width: calc(100% + (2 * var(--emergency-page-inset))) !important;
		max-width: none !important;
		margin-inline: calc(-1 * var(--emergency-page-inset)) !important;
		padding-inline: var(--emergency-page-inset) !important;
	}

	.emergency-page-composition > :is(.alignwide, .emergency-layout-shell, .emergency-section__shell),
	.editor-styles-wrapper .emergency-page-composition > :is(.alignwide, .emergency-layout-shell, .emergency-section__shell) {
		box-sizing: border-box;
		width: 100% !important;
		max-width: var(--emergency-layout-max-width) !important;
		margin-inline: auto !important;
		padding-inline: 0 !important;
	}

	.emergency-page-composition > .alignfull,
	.editor-styles-wrapper .emergency-page-composition > .alignfull {
		box-sizing: border-box;
		width: calc(100% + (2 * var(--emergency-page-inset))) !important;
		max-width: none !important;
		margin-inline: calc(-1 * var(--emergency-page-inset)) !important;
	}

	/* A normal section cannot outgrow the content column that contains it. */
	.emergency-section.alignwide {
		width: 100% !important;
		max-width: 100% !important;
		margin-inline: auto !important;
	}

	.emergency-section,
	.emergency-section-fragment,
	.emergency-section__shell {
		padding-inline: 0 !important;
	}

	/* Full-width surfaces align their inner shell to the page's content box. */
	.emergency-page-composition .alignfull:not(.emergency-page-composition) > :is(.emergency-section__shell, .emergency-section.alignwide),
	.emergency-layout-contained-content > :where(:not(.alignfull)) {
		box-sizing: border-box;
		width: calc(100% - (2 * var(--emergency-section-shell-inset, var(--emergency-page-inset)))) !important;
		max-width: var(--emergency-section-shell-max-width, var(--emergency-layout-max-width)) !important;
		margin-inline: auto !important;
		padding-inline: 0 !important;
	}

	.emergency-layout-grid--columns {
		padding-inline: 0 !important;
	}

	.emergency-single-page__content--inset {
		--emergency-column-end-inset: var(--emergency-column-inset);
		padding-inline-end: var(--emergency-column-end-inset) !important;
	}

	@supports (width: calc(1px * sign(1px))) {

		.emergency-single-page__content--inset {
			--emergency-column-above-max: sign(max(0px, 100vw - var(--emergency-layout-max-width)));
			--emergency-column-end-inset: calc(var(--emergency-column-inset) * (1 - var(--emergency-column-above-max)));
		}
	}

	/* Full-width fragments stay within the column unless they own a surface. */
	.emergency-single-page__content--inset .emergency-section-fragment.alignfull {
		width: 100% !important;
		max-width: none !important;
		margin-inline: 0 !important;
	}

	/* Extend the background; preserve content padding at both column edges. */
	.emergency-single-page__content--inset :is(.emergency-section__padded-content, .emergency-section.emergency-section__with-padding:not(.emergency-section--delegated)) {
		box-sizing: border-box;
		width: calc(100% + var(--emergency-column-inset) + var(--emergency-column-end-inset)) !important;
		max-width: none !important;
		margin-inline: calc(-1 * var(--emergency-column-inset)) calc(-1 * var(--emergency-column-end-inset)) !important;
		padding-inline: var(--emergency-column-inset) !important;
	}

	/* Pattern wrappers are transparent; the section inside declares its width. */
	.emergency-page-composition > .emergency-section-wrapper.alignfull {
		width: 100% !important;
		margin-inline: 0 !important;
		overflow: visible;
	}

	.emergency-section-wrapper > .emergency-section.alignfull {
		width: calc(100% + (2 * var(--emergency-page-inset))) !important;
		max-width: none !important;
		margin-inline: calc(-1 * var(--emergency-page-inset)) !important;
	}

}

/* Opt-in twelve-column compositions. */
.wp-site-blocks .emergency-layout-grid.emergency-layout-grid--columns,
.editor-styles-wrapper .emergency-layout-grid.emergency-layout-grid--columns {
	display: grid;
	grid-template-columns: repeat(var(--emergency-layout-columns), minmax(0, 1fr));
	column-gap: var(--emergency-layout-gutter);
	row-gap: 0;
}

.wp-site-blocks .emergency-layout-grid.emergency-layout-grid--columns > *,
.editor-styles-wrapper .emergency-layout-grid.emergency-layout-grid--columns > * {
	grid-column: 1 / -1;
}

.wp-site-blocks .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-3,
.editor-styles-wrapper .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-3 {
	grid-column: span 3;
}

.wp-site-blocks .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-4,
.editor-styles-wrapper .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-4 {
	grid-column: span 4;
}

.wp-site-blocks .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-6,
.editor-styles-wrapper .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-6 {
	grid-column: span 6;
}

.wp-site-blocks .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-8,
.editor-styles-wrapper .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-8 {
	grid-column: span 8;
}

.wp-site-blocks .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-9,
.editor-styles-wrapper .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-9 {
	grid-column: span 9;
}

.wp-site-blocks .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-full,
.editor-styles-wrapper .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-full {
	grid-column: 1 / -1;
}

/* Saved single bodies stay inside their editorial shell. */
.wp-site-blocks .emergency-single-page-shell__body > .emergency-page-composition.alignfull,
.editor-styles-wrapper .emergency-single-page-shell__body > .emergency-page-composition.alignfull {
	width: 100%;
	max-width: var(--emergency-layout-max-width);
	margin-inline: 0 !important;
	padding-inline: 0 !important;
	--emergency-page-inset: 0;
}

@media (max-width: 63.999rem) {

	:where(body, .editor-styles-wrapper) {
		--emergency-layout-margin: var(--emergency-layout-mobile-margin);
		--emergency-layout-gutter: var(--emergency-layout-mobile-gutter);
		--emergency-layout-columns: var(--emergency-layout-mobile-columns);
		--emergency-layout-block-margin: var(--emergency-layout-margin);
	}

	/* Nested edge-to-edge adapter for sticky navigation inside a wide shell. */
	.emergency-project-editorial > .emergency-layout-edge-to-edge,
	.emergency-project-editorial .emergency-single-page__layout > .emergency-layout-edge-to-edge,
	.editor-styles-wrapper .emergency-project-editorial > .emergency-layout-edge-to-edge {
		box-sizing: border-box;
		width: 100vw;
		max-width: 100vw;
		margin-inline: calc(50% - 50vw) !important;
		padding-inline: var(--emergency-layout-content-inset) !important;
	}

	.wp-site-blocks .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-3,
	.editor-styles-wrapper .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-3,
	.wp-site-blocks .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-4,
	.editor-styles-wrapper .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-4,
	.wp-site-blocks .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-6,
	.editor-styles-wrapper .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-6,
	.wp-site-blocks .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-8,
	.editor-styles-wrapper .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-8,
	.wp-site-blocks .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-9,
	.editor-styles-wrapper .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-9,
	.wp-site-blocks .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-full,
	.editor-styles-wrapper .emergency-layout-grid.emergency-layout-grid--columns > .emergency-grid-span-full {
		grid-column: 1 / -1;
	}
}

@layer emergency-inline-layout {

	/* A bounded composition owns responsive gutters, never its sections. */
	:is(.wp-site-blocks, .editor-styles-wrapper) .emergency-page-composition.emergency-page-composition--inset.alignfull {
		--emergency-page-inset: var(--emergency-layout-bounded-inset, calc(0 * var(--emergency-layout-margin))) !important;
		box-sizing: border-box;
		width: 100% !important;
		margin-inline: 0 !important;
		padding-inline: var(--emergency-page-inset) !important;
	}
}