/**
 * Responsive layout primitives.
 *
 * Mobile-first, logical-property based and independent from individual pages.
 */

:where(.boopi-container, .boopi-container--narrow, .boopi-container--wide) {
	box-sizing: border-box;
	margin-inline: auto;
	padding-inline:
		max(var(--boopi-gutter), env(safe-area-inset-left))
		max(var(--boopi-gutter), env(safe-area-inset-right));
	width: 100%;
}

.boopi-container {
	max-inline-size: var(--boopi-container-default);
}

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

.boopi-container--wide {
	max-inline-size: var(--boopi-container-wide);
}

.boopi-section {
	padding-block: var(--boopi-space-section);
}

/* Reusable section-local visual-layer structure. */
.boopi-visual-section {
	background: var(--boopi-visual-surface, var(--boopi-color-canvas));
	isolation: isolate;
	overflow: clip;
	position: relative;
}

.boopi-visual-section__content {
	position: relative;
	z-index: 1;
}

.boopi-stack {
	display: flex;
	flex-direction: column;
	gap: var(--boopi-stack-gap, var(--boopi-space-5));
}

.boopi-cluster {
	align-items: var(--boopi-cluster-align, center);
	display: flex;
	flex-wrap: wrap;
	gap: var(--boopi-cluster-gap, var(--boopi-space-4));
	justify-content: var(--boopi-cluster-justify, flex-start);
}

.boopi-grid {
	display: grid;
	gap: var(--boopi-grid-gap, var(--boopi-space-5));
	grid-template-columns: repeat(
		auto-fit,
		minmax(min(100%, var(--boopi-grid-min, 16rem)), 1fr)
	);
}

.boopi-switcher {
	display: flex;
	flex-wrap: wrap;
	gap: var(--boopi-switcher-gap, var(--boopi-space-5));
}

.boopi-switcher > * {
	flex-basis: calc((var(--boopi-switcher-threshold, 40rem) - 100%) * 999);
	flex-grow: 1;
	min-inline-size: 0;
}

.boopi-full-bleed {
	margin-inline: calc(50% - 50vw);
	max-inline-size: none;
	width: 100vw;
}

.boopi-scroll-region {
	max-inline-size: 100%;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
}

:where(.boopi-stack, .boopi-cluster, .boopi-grid, .boopi-switcher) > * {
	min-inline-size: 0;
}

.boopi-home-hero__inner {
	align-items: center;
	display: grid;
	gap: 0;
	grid-template-areas:
		"eyebrow"
		"title"
		"media"
		"summary"
		"action"
		"promises";
	padding-inline:
		max(clamp(1.5rem, 4vw, 4.5rem), env(safe-area-inset-left))
		max(clamp(1.5rem, 4vw, 4.5rem), env(safe-area-inset-right));
}

.boopi-home-hero__content {
	display: contents;
	min-inline-size: 0;
}

.boopi-home-hero__copy-main,
.boopi-home-hero__actions {
	display: contents;
}

.boopi-home-hero__eyebrow { grid-area: eyebrow; }
.boopi-home-hero__title { grid-area: title; }
.boopi-home-hero__summary { grid-area: summary; }

.boopi-home-hero__action {
	grid-area: action;
	justify-self: start;
}

.boopi-home-hero__promises { grid-area: promises; }

.boopi-home-hero__media {
	grid-area: media;
	min-inline-size: 0;
}

@media (min-width: 60rem) {
	.boopi-home-hero__inner {
		gap: var(--boopi-space-8);
		grid-template-areas: "content media";
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-inline:
			max(var(--boopi-gutter), env(safe-area-inset-left))
			max(var(--boopi-gutter), env(safe-area-inset-right));
	}

	.boopi-home-hero__content {
		display: block;
		grid-area: content;
	}

	.boopi-home-hero__copy-main {
		display: block;
	}

	.boopi-home-hero__actions {
		align-items: center;
		display: flex;
		gap: var(--boopi-space-4);
	}
}

.entry-header {
	margin-inline: auto;
	max-inline-size: var(--boopi-container-narrow);
}

.entry-content > :where(:not(.alignwide, .alignfull)) {
	margin-inline: auto;
	max-inline-size: var(--boopi-container-narrow);
}

.entry-content > .alignwide {
	margin-inline: auto;
	max-inline-size: var(--boopi-container-default);
}

.entry-content > .alignfull {
	margin-inline: calc(50% - 50vw);
	max-inline-size: none;
	width: 100vw;
}

.elementor-page .entry-content > .elementor {
	margin-inline: 0;
	max-inline-size: none;
}

.site-header {
	background: var(--boopi-color-canvas);
	position: sticky;
	top: 0;
	z-index: var(--boopi-layer-sticky);
}

html {
	scroll-padding-block-start: var(--boopi-header-offset);
}

:where(main, [id]) {
	scroll-margin-block-start: calc(var(--boopi-header-offset) + var(--boopi-admin-bar-offset));
}

.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.site-header__inner {
	align-items: center;
	display: flex;
	gap: var(--boopi-space-4);
	justify-content: space-between;
	margin-inline: auto;
	max-inline-size: var(--boopi-container-storefront);
	padding-block-end: var(--boopi-space-2);
	padding-block-start: var(--boopi-space-5);
	padding-inline:
		max(var(--boopi-gutter), env(safe-area-inset-left))
		max(var(--boopi-gutter), env(safe-area-inset-right));
	width: 100%;
}

@media (min-width: 60rem) {
	.site-main.boopi-home .boopi-container {
		max-inline-size: var(--boopi-container-storefront);
	}
}

@media (min-width: 80rem) {
	.site-header__inner {
		max-inline-size: none;
		padding-inline:
			max(calc(2 * var(--boopi-space-7)), env(safe-area-inset-left))
			max(calc(2 * var(--boopi-space-7)), env(safe-area-inset-right));
	}
}

.site-branding {
	flex: 0 0 auto;
	order: 1;
}

.primary-navigation {
	margin-inline: auto;
	min-inline-size: 0;
	order: 2;
}

.primary-menu {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--boopi-space-2) var(--boopi-space-4);
}

.site-header__search,
.site-header__account {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
}

.site-header__search {
	order: 3;
}

.site-header__account {
	order: 4;
}

.site-header__panel,
.site-header__panel-surface {
	display: contents;
}

.site-header__backdrop,
.site-header__panel-close {
	display: none;
}

.site-header__cart {
	flex: 0 0 auto;
	order: 5;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: var(--wp-admin--admin-bar--height, 46px);
	}
}

/* Header layout contract: collapsed below 80rem; wide at or above 80rem. */
@media (max-width: 79.99rem) {
	.site-header__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
	}

	.site-branding {
		grid-column: 1;
		grid-row: 1;
	}

	.site-header__cart {
		align-items: center;
		align-self: center;
		display: flex;
		grid-column: 2;
		grid-row: 1;
	}

	.boopi-navigation-enhanced .menu-toggle {
		align-self: center;
		display: inline-flex;
		grid-column: 3;
		grid-row: 1;
	}

	.site-header__panel,
	.site-header__panel-surface {
		display: block;
	}

	.site-header__panel {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.boopi-navigation-enhanced .site-header__panel {
		inset: 0;
		pointer-events: none;
		position: fixed;
		visibility: hidden;
		z-index: var(--boopi-layer-overlay);
	}

	.boopi-navigation-enhanced .site-header__panel.is-open {
		pointer-events: auto;
		visibility: visible;
	}

	.boopi-navigation-enhanced .site-header__backdrop {
		background: var(--boopi-color-overlay);
		display: block;
		inset: 0;
		position: absolute;
	}

	.boopi-navigation-enhanced .site-header__panel-surface {
		background: var(--boopi-color-canvas);
		block-size: 100%;
		box-shadow: var(--boopi-shadow-lg);
		display: flex;
		flex-direction: column;
		inline-size: min(90dvw, 24rem);
		inset-block: 0;
		inset-inline-end: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding:
			max(var(--boopi-space-4), env(safe-area-inset-top))
			max(var(--boopi-space-4), env(safe-area-inset-right))
			max(var(--boopi-space-4), env(safe-area-inset-bottom))
			var(--boopi-space-4);
		position: absolute;
		transform: translateX(100%);
		transition: transform var(--boopi-motion-normal) var(--boopi-ease-standard);
	}

	.boopi-navigation-enhanced .site-header__search {
		margin-block-end: var(--boopi-space-4);
		order: 0;
	}

	.boopi-navigation-enhanced .primary-navigation {
		order: 1;
	}

	.boopi-navigation-enhanced .site-header__account {
		align-items: stretch;
		align-self: stretch;
		display: flex;
		inline-size: 100%;
		margin-block-start: auto;
		order: 2;
		padding-block-start: var(--boopi-space-6);
	}

	.boopi-navigation-enhanced .site-header__account > .boopi-account-link {
		flex: 1 1 100%;
		inline-size: 100%;
	}

	@supports not (width: 100dvw) {
		.boopi-navigation-enhanced .site-header__panel-surface {
			inline-size: min(90vw, 24rem);
		}
	}

	.boopi-navigation-enhanced .site-header__panel.is-open .site-header__panel-surface {
		transform: translateX(0);
	}

	.boopi-navigation-enhanced .site-header__panel-close {
		display: inline-flex;
		margin-inline-start: auto;
	}

	.boopi-navigation-enhanced .primary-menu {
		display: block;
		inline-size: 100%;
	}

	.boopi-navigation-enhanced .primary-navigation {
		inline-size: 100%;
		margin-inline: 0;
	}

	.boopi-navigation-enhanced .boopi-header-search__panel {
		position: static;
		width: 100%;
	}
}

html.boopi-navigation-open {
	overflow: hidden;
}

@supports (width: 100dvw) {
	.boopi-full-bleed {
		margin-inline: calc(50% - 50dvw);
		width: 100dvw;
	}

	.entry-content > .alignfull {
		margin-inline: calc(50% - 50dvw);
		width: 100dvw;
	}
}
/* The temporary work-in-progress template keeps plugin assets without the site shell. */
.site--work-in-progress,
.site-main--work-in-progress {
	min-height: 100%;
}

.site.site--work-in-progress > .site-main.site-main--work-in-progress {
	margin: 0;
	width: 100%;
	max-width: none;
	padding: 0;
}