/**
 * Base layer under every AI-generated GrL'Ca design.
 *
 * Shared by the preview on grlca.com and the live site, so the page the
 * customer picks is the page they get. Deliberately tiny and opinion-free:
 * everything visual belongs to the generated stylesheet. This only removes
 * the browser and WordPress defaults a design should never have to fight.
 */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--wp--preset--font-family--body, system-ui, sans-serif);
	color: var(--wp--preset--color--contrast, #111);
	background: var(--wp--preset--color--base, #fff);
	-webkit-font-smoothing: antialiased;
}

.wp-site-blocks { padding: 0; }

.grlca-main { display: block; overflow-x: clip; }

/* Sections sit inside main > .entry-content on the live site. */
.grlca-main .grlca-section { margin-block: 0; position: relative; }
.grlca-main > .entry-content { margin: 0; }

img, svg, video { max-width: 100%; height: auto; }

.wp-block-image { margin: 0; }
.wp-block-image img { display: block; }

.wp-block-columns { gap: var(--grlca-gap, 2rem); margin-bottom: 0; }

.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.wp-block-button__link { display: inline-block; text-decoration: none; cursor: pointer; }

.grlca-details { list-style: none; margin: 0; padding: 0; }
.grlca-detail__label { display: block; }

.grlca-form input,
.grlca-form textarea { width: 100%; font: inherit; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/*
 * One content width for the whole site.
 *
 * The design declares --grlca-container and pads its own full-bleed sections
 * to it. Everything else that can land in a page — WooCommerce's shop, product,
 * cart, checkout and account screens, notices, anything added in the admin
 * panel — is held to the same width here, so no page is wider or narrower
 * than the home page. Designs made before the variable existed get 1200px.
 */
.grlca-main > .entry-content > :not(.grlca-section),
.grlca-contained {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: max(var(--grlca-gutter, 1.25rem), calc((100% - var(--grlca-container, 1200px)) / 2));
}
.grlca-contained { padding-block: clamp(2rem, 5vw, 4rem); }

/* A design section that ends up inside a contained wrapper (the shop page's
   own intro, printed by WooCommerce above the products) still runs edge to
   edge, and its padding measures against the full width again. */
.grlca-contained .grlca-section {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}
.grlca-contained > :first-child .grlca-section:first-child,
.grlca-contained .woocommerce-products-header .grlca-section:first-child { margin-top: calc(-1 * clamp(2rem, 5vw, 4rem)); }