/**
 * Gutenberg layout: container / full.
 *
 * theme.json enables useRootPaddingAwareAlignments so full-width blocks
 * can break out of root horizontal padding without 100vw hacks.
 *
 * Width tokens (aligned to the 1320px design container):
 * - Content / Wide → --content-width / --container-wide-width (theme.json)
 * - Full           → viewport edge-to-edge (respecting root padding rules)
 *
 * In the editor, select a Group and use Align in the toolbar:
 * - None / Bred = container (1320px)
 * - Full bredde = edge-to-edge
 */

.entry-content {
	width: 100%;
}

/*
 * Core blocks (paragraph, heading, list, …) have no inner gutter of their own.
 * Custom theme blocks pad via __inner; these rules keep loose Gutenberg content
 * off the viewport edge on mobile.
 */
.entry-content > :where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce)) {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-left: max(var(--content-gutter, 1.25rem), env(safe-area-inset-left, 0px));
	padding-right: max(var(--content-gutter, 1.25rem), env(safe-area-inset-right, 0px));
}

.entry-content > .alignwide {
	max-width: var(--container-wide-width);
	margin-inline: auto;
}

.entry-content > .alignfull {
	max-width: none;
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Paragraphs (and similar) dropped into a full-width Group still need a gutter. */
.entry-content .alignfull.is-layout-flow > :where(:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright)),
.entry-content .alignfull.is-layout-constrained > :where(:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright)) {
	padding-left: max(var(--content-gutter, 1.25rem), env(safe-area-inset-left, 0px));
	padding-right: max(var(--content-gutter, 1.25rem), env(safe-area-inset-right, 0px));
}

/* Keep nested constrained content readable inside full-width sections. */
.entry-content .alignfull .is-layout-constrained > :where(:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright)) {
	max-width: var(--content-width);
	margin-inline: auto;
}

.entry-content .alignfull .is-layout-constrained > .alignwide {
	max-width: var(--container-wide-width);
}

/* Floated media remains usable without fighting the width system. */
.entry-content .alignleft {
	float: left;
	margin-inline: 0 var(--space-md) var(--space-md) 0;
}

.entry-content .alignright {
	float: right;
	margin-inline: 0 0 var(--space-md) var(--space-md);
}

.entry-content .aligncenter {
	margin-inline: auto;
}

/* Editor canvas parity. */
.editor-styles-wrapper {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-text);
	background-color: var(--color-background);
}

.editor-styles-wrapper .is-root-container > :where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-left: max(var(--content-gutter, 1.25rem), env(safe-area-inset-left, 0px));
	padding-right: max(var(--content-gutter, 1.25rem), env(safe-area-inset-right, 0px));
}

.editor-styles-wrapper .is-root-container > .alignwide {
	max-width: var(--container-wide-width);
	margin-inline: auto;
}

.editor-styles-wrapper .is-root-container > .alignfull {
	max-width: none;
	width: 100%;
}