/**
 * Layout.
 *
 * Replaces the design-system plugin's layout primitives, which were a complete
 * set of `hpds-*` utilities that no markup in this theme referenced — the
 * theme's own components carry their own layout. What is left here is the
 * container, the page frame, and the reset that lets a full-bleed band work
 * inside WooCommerce's content wrapper.
 */

/* The single content measure. 1248px with a 32px gutter, from the canvas. */
.hp-container {
	inline-size: min(100% - (2 * var(--hp-gutter)), var(--hp-container));
	margin-inline: auto;
}

.hp-container--narrow {
	max-inline-size: var(--hp-container-narrow);
}

/* Still centred and still gutter-respecting — `inline-size` above already does
 * both — this only raises the ceiling. */
.hp-container--wide {
	inline-size: min(100% - (2 * var(--hp-gutter)), var(--hp-container-wide));
}

/* ---- page frame ---- */

html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	/* The page must never scroll sideways; wide children scroll inside their
	 * own container instead. */
	overflow-x: hidden;
}

.hp-site {
	display: flex;
	flex-direction: column;
	min-block-size: 100vh;
}

.hp-main {
	flex: 1;
}

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

img {
	height: auto;
}

/* ---- WooCommerce's content wrapper ----
 * Core opens `#primary.content-area > #main.site-main` around every shop page.
 * The archive hero is a full-bleed band inside that wrapper, so the wrapper is
 * deliberately left at full width and unpadded; the contained rows each carry
 * their own .hp-container. Constraining it here instead would box the hero in
 * and cost a negative-margin escape hatch.
 */

.woocommerce #primary.content-area,
.woocommerce-page #primary.content-area {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	float: none;
}

.woocommerce #main.site-main,
.woocommerce-page #main.site-main {
	margin: 0;
	padding: 0;
	/* The canvas closes every shop page with 48px below the last row, so the
	 * pagination does not sit flush against the footer. */
	padding-block-end: var(--hp-space-12);
}

/* Core clears its archive with a float-based grid; the grid here is CSS grid,
 * so the clearfix is inert but the floats it compensates for are not. */
.woocommerce .woocommerce-products-header {
	margin: 0;
}

/* ---- accessibility ---- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	z-index: var(--hp-z-modal);
	top: var(--hp-space-2);
	inset-inline-start: var(--hp-space-2);
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--hp-space-3) var(--hp-space-4);
	background: var(--hp-surface);
	color: var(--hp-text);
	border-radius: var(--hp-radius);
	box-shadow: var(--hp-shadow-md);
	clip-path: none;
}

/* Anything that opts out of motion keeps its layout but loses the animation. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}