/**
 * Sanaa layout system — structural rules per layout variant.
 *
 * Width and side padding are emitted as --sanaa-layout-* variables from
 * the registry (inline via sanaa_layouts_inline_css()); this file holds
 * the structural behavior that cannot be a variable. Everything consumes
 * --sanaa-* tokens so design-system and event overrides keep working.
 */

/* ---------- Boxed: visible page boundary over the site surface ------- */

.sanaa-layout--boxed {
	background: var(--sanaa-surface);
}

.sanaa-layout--boxed #page {
	width: min(100%, calc(var(--sanaa-layout-width) + (var(--sanaa-layout-pad) * 2)));
	margin-inline: auto;
	background: var(--sanaa-bg);
	box-shadow: var(--sanaa-shadow);
}

/* ---------- Split: two-column structural region ----------------------
 * Opt-in wrapper: a template/section applies .sanaa-layout-region where
 * the two-column structure should take effect (context rail + content).
 */

.sanaa-layout--split .sanaa-layout-region {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: calc(var(--sanaa-grid-gap) * 2);
	align-items: start;
}

@media (width <= 900px) {
	.sanaa-layout--split .sanaa-layout-region {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Centered: strong central hierarchy ----------------------- */

.sanaa-layout--centered .entry-header,
.sanaa-layout--centered .sanaa-section-head {
	text-align: center;
	margin-inline: auto;
}

/* ---------- Raw content in a full-bleed main --------------------------
 * Templates that render a full-bleed .site-main (event pages, archives)
 * may emit .entry-content with no .sanaa-container ancestor — builder
 * output excluded, Elementor sections manage their own widths. Give that
 * content the same container math so it keeps the layout gutter instead
 * of running into the viewport edges.
 */

.sanaa-layout
	.site-main:not(.sanaa-container)
	:not(.sanaa-container)
	> .entry-content:not(.sanaa-container, .sanaa-entry-content--builder) {
	width: min(
		100% - (var(--sanaa-layout-pad, var(--sanaa-gutter)) * 2),
		var(--sanaa-layout-width, var(--sanaa-container))
	);
	margin-inline: auto;
}

/* ---------- Measured layouts (narrow, centered, custom) ---------------
 * The page shell keeps the standard --sanaa-layout-width; only content
 * regions inside .site-main cap at --sanaa-layout-measure. max-width
 * (not width) so narrower explicit regions like .sanaa-container--narrow
 * keep their own, slimmer width.
 */

.sanaa-layout--has-measure .site-main .sanaa-container,
.sanaa-layout--has-measure .site-main .entry-content,
.sanaa-layout--has-measure .site-main .entry-header,
.sanaa-layout--has-measure .site-main .comments-area,
.sanaa-layout--has-measure .site-main .post-navigation,
.sanaa-layout--has-measure .site-main .elementor-section > .elementor-container {
	max-width: var(--sanaa-layout-measure);
	margin-inline: var(--sanaa-layout-measure-margin, auto);
}

/* ---------- Elementor content axis ------------------------------------
 * Elementor's boxed inner containers center on the kit content width — a
 * different column than the layout chrome. Root sections and boxed
 * containers share the layout axis so header, builder content and footer
 * align. Nested sections/containers are untouched — they live inside a
 * column that already sits on the axis.
 */

.sanaa-layout .elementor > .elementor-section > .elementor-container,
.sanaa-layout .elementor > .e-con.e-con-boxed {
	max-width: min(
		100% - (var(--sanaa-layout-pad, var(--sanaa-gutter)) * 2),
		var(--sanaa-layout-width, var(--sanaa-container))
	);
	margin-inline: auto;
}

/* ---------- Full width + overflow guard ------------------------------
 * .sanaa-layout--full-width sets --sanaa-layout-width: 100% with the
 * standard responsive padding, so the shell spans the viewport while
 * content keeps a safe side gutter. The clip guard applies to every
 * layout — viewport-width breakouts (e.g. .sanaa-pattern--full) exceed
 * the document by the scrollbar width and must never create horizontal
 * scroll. clip (unlike hidden) does not create a scroll container, so
 * sticky positioning below #page keeps working.
 */

.sanaa-layout #page {
	overflow-x: clip;
}

/* ---------- Elementor layout frame -----------------------------------
 * A template-backed layout renders its Elementor document as a fixed
 * decorative canvas behind the page shell — borders, bands and ornaments
 * drawn in Elementor show through transparent regions while content sits
 * above. pointer-events: none keeps the layer inert; aria-hidden mirrors
 * that in the markup. .site stacks above it.
 */

.sanaa-layout-frame {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.sanaa-layout .site {
	position: relative;
	z-index: 1;
}