/**
 * ZARE Theme layout foundation — T1-F1 geometry + T1-F2 rhythm.
 *
 * This file owns page geometry only. Components do not invent viewport padding.
 * The public contract is: viewport -> safe area -> shell gutter -> width role.
 */

:root,
body {
	--zare-layout-reading: var(--wp--custom--zare-experience--container--reading, 45rem);
	--zare-layout-component: var(--wp--custom--zare-experience--container--component, 61.25rem);
	--zare-layout-wide: var(--wp--custom--zare-experience--container--wide, 77.5rem);
	--zare-layout-gutter: var(--wp--custom--zare-experience--shell--content-inset, clamp(1rem, 0.75rem + 1.25vw, 2rem));
	--zare-layout-gutter-start: max(var(--zare-layout-gutter), env(safe-area-inset-left, 0px));
	--zare-layout-gutter-end: max(var(--zare-layout-gutter), env(safe-area-inset-right, 0px));
}

:where(.zare-shell, .zare-shell__inner, .zare-layout-context, .zare-container--reading, .zare-container--component, .zare-container--wide) {
	box-sizing: border-box;
	min-width: 0;
}


/* Neutralize any inherited alignfull margin math at Theme-owned page chrome. */
:where(.zare-theme-header.alignfull, .zare-theme-footer.alignfull, .zare-layout-main.alignfull) {
	width: 100%;
	max-width: none;
	margin-inline: 0 !important;
}

/**
 * Shell = full-width boundary that supplies the canonical safe inline inset.
 * Header, footer and future page chrome use the same shell contract.
 */
.zare-shell {
	width: 100%;
	padding-inline-start: var(--zare-layout-gutter-start);
	padding-inline-end: var(--zare-layout-gutter-end);
}

.zare-shell__inner {
	width: 100%;
	max-width: var(--zare-layout-wide);
	margin-inline: auto;
}

.zare-container--reading,
.zare-container--component,
.zare-container--wide {
	width: 100%;
	margin-inline: auto;
}

.zare-container--reading {
	max-width: var(--zare-layout-reading);
}

.zare-container--component {
	max-width: var(--zare-layout-component);
}

.zare-container--wide {
	max-width: var(--zare-layout-wide);
}

/**
 * Start-alignment modifier for a narrower semantic container inside a broader
 * page/composition canvas. Uses logical properties so RTL follows inline-start.
 */
.zare-container--reading.zare-container--start,
.zare-container--component.zare-container--start,
.zare-container--wide.zare-container--start {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* Keep constrained child content readable, but anchor it to the same start edge. */
.zare-container--start.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/**
 * Post-content adapter.
 *
 * Core block semantics still decide reading / wide / full. The theme supplies
 * the viewport-safe gutter at the content boundary, rather than patching each
 * pattern or third-party component independently.
 */
.zare-layout-context {
	width: 100%;
	max-width: none !important;
	margin: 0 !important;
	padding: 0;
}

.zare-layout-context > :where(:not(.alignfull)) {
	box-sizing: border-box;
	width: calc(100% - var(--zare-layout-gutter-start) - var(--zare-layout-gutter-end));
	margin-inline: auto !important;
}

.zare-layout-context > :where(:not(.alignwide):not(.alignfull)) {
	max-width: var(--zare-layout-reading);
}

.zare-layout-context > .alignwide {
	max-width: var(--zare-layout-wide);
}

.zare-layout-context > .alignfull {
	width: 100%;
	max-width: none;
	margin-inline: 0 !important;
}

/**
 * Page/landing canvas mode. Reading, Component and Wide children keep their
 * semantic max widths but share the same Wide inline-start edge. This avoids
 * a visually wandering left edge while preserving readable line length.
 */
.zare-layout-context.zare-layout-context--start > :where(:not(.alignfull)) {
	margin-inline-start: max(
		var(--zare-layout-gutter-start),
		calc((100% - var(--zare-layout-wide)) / 2)
	) !important;
	margin-inline-end: auto !important;
}

/* A full-width surface may contain an explicitly wide inner composition. */
.zare-layout-context > .alignfull > .alignwide {
	box-sizing: border-box;
	width: calc(100% - var(--zare-layout-gutter-start) - var(--zare-layout-gutter-end));
	max-width: var(--zare-layout-wide);
	margin-inline: auto !important;
}

.zare-layout-main {
	width: 100%;
	min-width: 0;
}

.zare-layout-section {
	padding-block: var(--wp--custom--zare-experience--section--default-space, clamp(2rem, 1.5rem + 1vw, 2.75rem));
}

.zare-layout-section--hero {
	padding-block: var(--wp--custom--zare-experience--section--hero-space, clamp(3rem, 2rem + 3vw, 5rem));
}

.zare-layout-section--compact {
	padding-block: var(--wp--custom--zare-experience--section--compact-space, 1.5rem);
}


/* Root-level Badge follows the reading-column start instead of the viewport edge. */
.zare-layout-context > .wp-block-paragraph.is-style-badge {
	width: fit-content;
	max-width: calc(100% - var(--zare-layout-gutter-start) - var(--zare-layout-gutter-end));
	margin-inline-start: max(var(--zare-layout-gutter-start), calc((100% - var(--zare-layout-reading)) / 2)) !important;
	margin-inline-end: auto !important;
}