/**
 * Block layout overrides for theme.json
 *
 * Storefront's gutenberg-blocks.css only lets wide/full blocks break out at
 * 66.4989em+ and hard-codes "wide" as calc(25% - 25vw). These rules make the
 * breakouts work at every screen size and use the theme.json sizes:
 *   --wp--style--global--content-size : 1064px
 *   --wp--style--global--wide-size    : 1792px
 *
 * Breakouts apply on the "Full width" page template, or any page when the
 * main sidebar (sidebar-1) has no widgets - same conditions as Storefront.
 */

:root {
	--twg-gutter: 1.41575em;
}

/* ---------- Front end: full width (edge to edge) ---------- */
body.threewrensginwht-align-wide.page-template-template-fullwidth-php .hentry .entry-content .alignfull,
body.threewrensginwht-align-wide.threewrensginwht-full-width-content .hentry .entry-content .alignfull {
	width: auto;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	clear: both;
}

/* Keep text off the screen edge inside full-width groups/columns etc.
   (Images, covers and anything you give padding in the Styles panel are unaffected.) */
body.threewrensginwht-align-wide.page-template-template-fullwidth-php .hentry .entry-content .alignfull:not(.wp-block-image):not(.wp-block-cover):not(.wp-block-cover-image),
body.threewrensginwht-align-wide.threewrensginwht-full-width-content .hentry .entry-content .alignfull:not(.wp-block-image):not(.wp-block-cover):not(.wp-block-cover-image) {
	padding-left: var(--twg-gutter);
	padding-right: var(--twg-gutter);
}

/* ---------- Front end: wide (up to 1792px, centred) ---------- */
body.threewrensginwht-align-wide.page-template-template-fullwidth-php .hentry .entry-content .alignwide,
body.threewrensginwht-align-wide.threewrensginwht-full-width-content .hentry .entry-content .alignwide {
	width: auto;
	max-width: none;
	margin-left: calc((100% - min(var(--wp--style--global--wide-size), 100vw - (2 * var(--twg-gutter)))) / 2);
	margin-right: calc((100% - min(var(--wp--style--global--wide-size), 100vw - (2 * var(--twg-gutter)))) / 2);
	clear: both;
}

/* A wide block nested inside a constrained group is sized by WordPress's
   own layout rules - don't apply the breakout margins twice. */
body.threewrensginwht-align-wide .hentry .entry-content .is-layout-constrained > .alignwide {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--wp--style--global--wide-size);
}

/* ---------- Spacing inside layout blocks ----------
   Let blockGap (Styles > Dimensions > Block spacing) control the space between
   blocks inside Groups/Columns/Rows, instead of Storefront's bottom margins
   doubling up with it. Top-level content outside Groups is left unchanged. */
.hentry .entry-content :is(.is-layout-flow, .is-layout-constrained) > *,
.editor-styles-wrapper :is(.is-layout-flow, .is-layout-constrained):not(.is-root-container) > * {
	margin-block-end: 0;
}

/* ---------- Block editor widths ----------
   Replace Storefront's fixed 1240px editor widths with the theme.json sizes. */
.editor-styles-wrapper .is-root-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not([data-align="left"]):not([data-align="right"]) {
	max-width: var(--wp--style--global--content-size);
}

.editor-styles-wrapper .is-root-container > .wp-block[data-align="wide"],
.editor-styles-wrapper .is-root-container > .wp-block.alignwide {
	max-width: var(--wp--style--global--wide-size);
}

.editor-styles-wrapper .is-root-container > .wp-block[data-align="full"],
.editor-styles-wrapper .is-root-container > .wp-block.alignfull {
	max-width: none;
}