/* H2M Express layout primitives: container, sections, stripe divider. */

.h2m-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.h2m-section {
	padding-block: var(--section-pad);
}

.h2m-section.is-dark {
	background: var(--surface-dark);
	color: var(--text-on-dark);
}

.h2m-section.is-card {
	background: var(--surface-card);
}

/* Stripe divider (HANDOFF 2.5): slanted slate bars, rebuilt from the 1440x17 bitmap as a CSS gradient. */
.h2m-stripe {
	display: block;
	width: 100%;
	height: 17px;
	background: repeating-linear-gradient(
		120deg,
		transparent 0 10px,
		var(--otw-slate) 10px 26px
	);
}

.h2m-stripe.is-flipped {
	transform: scaleY(-1);
}

.h2m-stripe.is-dark {
	background: repeating-linear-gradient(
		120deg,
		transparent 0 10px,
		var(--otw-navy) 10px 26px
	);
}

@media (max-width: 1199px) {
	.h2m-section {
		padding-block: var(--section-pad-md);
	}
}

@media (max-width: 767px) {
	.h2m-container {
		padding-inline: var(--gutter-md);
	}

	.h2m-section {
		padding-block: var(--section-pad-sm);
	}
}

@media (max-width: 389px) {
	.h2m-container {
		padding-inline: var(--gutter-sm);
	}
}

/*
 * Product page (templates/single-product.html): full-bleed main (P4-R16); each block owns its container. The summary
 * row holds the gallery and the buy box, 1fr 1fr (HANDOFF 3.03), stacked on mobile. Block-gap margins from the
 * flow layout are reset so the grid and the sections set their own spacing.
 */
main.h2m-product > *,
.h2m-product .h2m-product-summary > * {
	margin-block: 0;
}

.h2m-product-summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 60px;
	align-items: start;
}

@media (max-width: 1199px) {
	.h2m-product-summary {
		gap: var(--space-6);
	}
}

@media (max-width: 767px) {
	.h2m-product-summary {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-6);
	}
}

/*
 * Product sections (HANDOFF 3.03 items 5-9): one light-grey band holding an 820px column of sections, 60px apart.
 * The band disappears when no section rendered. Sections land below the sticky bars (anchor-nav.js measures them).
 */
.h2m-product-sections {
	padding-block: var(--space-8) var(--space-9);
	background: var(--surface-page);
}

.h2m-product-sections:not(:has(.h2m-psection, .h2m-downloads__disclaimer)) {
	display: none;
}

.h2m-product-sections .h2m-product-sections__column {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	max-width: 820px;
}

.h2m-product-sections__column > * {
	margin-block: 0;
}

.h2m-psection {
	scroll-margin-top: calc(var(--h2m-sticky-offset, 0px) + var(--h2m-anchor-nav-height, 48px) + var(--space-4));
}

.h2m-psection:focus {
	outline: none;
}

.h2m-psection__title {
	margin: 0 0 var(--space-4);
	color: var(--text-heading);
	font-size: var(--text-lg-size);
	line-height: 36px;
	font-weight: var(--weight-extrabold);
}

.h2m-psection__body,
.h2m-specs__row {
	font-size: 16px;
	line-height: 26px;
}

.h2m-psection__body > :first-child {
	margin-top: 0;
}

.h2m-psection__body > :last-child {
	margin-bottom: 0;
}

.h2m-psection__body p,
.h2m-specs__row p {
	margin: 0 0 var(--space-4);
}

.h2m-psection__body :is(h3, h4, h5, h6),
.h2m-specs__row :is(h3, h4, h5, h6) {
	margin: var(--space-6) 0 var(--space-2);
	color: var(--text-heading);
	font-size: 18px;
	line-height: 26px;
	font-weight: var(--weight-extrabold);
}

.h2m-specs__row :is(h3, h4, h5, h6):first-child {
	margin-top: 0;
}

.h2m-psection__body ul,
.h2m-specs__row ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 var(--space-4);
	padding: 0;
	list-style: none;
	color: var(--text-body);
}

.h2m-psection__body ul > li,
.h2m-specs__row ul > li {
	position: relative;
	padding-inline-start: 19px;
}

.h2m-psection__body ul > li::before,
.h2m-specs__row ul > li::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: var(--radius-pill);
	background: var(--otw-slate);
}

@media (max-width: 767px) {
	.h2m-product-sections {
		padding-block: var(--space-7) var(--section-pad-sm);
	}

	.h2m-product-sections .h2m-product-sections__column {
		gap: var(--space-7);
	}

	.h2m-psection__title {
		font-size: var(--text-h5-size);
		line-height: var(--text-h5-line);
	}
}

/* Header part, main and footer part stack flush: the root block gap would show the page grey between them. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* The skip link (and any #main jump) lands below the stuck RFQ strip, which is at least 64px tall. */
.wp-site-blocks:has(.h2m-rfq-strip.is-active) > main {
	scroll-margin-top: calc(var(--h2m-sticky-offset, var(--wp-admin--admin-bar--height, 0px) + 64px));
}

/*
 * Route templates (P4-R16): main and core/post-content are full-bleed, h2m blocks own their containers. Content with
 * no h2m block (legal pages) is wrapped by H2M\Theme\Routes in .h2m-prose: a readable column with section padding.
 */
main.h2m-archive > *,
main.h2m-404 > *,
main.h2m-singular > *,
main.h2m-posts > *,
main.h2m-singular > .wp-block-post-content > * {
	margin-block: 0;
}

.h2m-prose {
	max-width: calc(var(--content-narrow) + 2 * var(--container-pad));
	padding-block: var(--space-8) var(--section-pad);
	font-size: var(--text-body-size);
	line-height: var(--text-body-line);
}

.h2m-prose__title {
	margin: 0 0 var(--space-7);
	color: var(--text-heading);
	font-size: clamp(34px, 3.6vw, 52px);
	line-height: 1.15;
	font-weight: var(--weight-extrabold);
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.h2m-prose :is(h2, h3, h4) {
	margin: var(--space-7) 0 var(--space-3);
	color: var(--text-heading);
	line-height: 1.25;
	text-transform: none;
}

.h2m-prose h2 {
	font-size: var(--text-h4-size);
}

.h2m-prose :is(h3, h4) {
	font-size: var(--text-h5-size);
}

.h2m-prose :is(p, ul, ol, table) {
	margin: 0 0 var(--para-gap);
}

.h2m-prose a {
	color: var(--text-link);
}

.h2m-prose a:hover,
.h2m-prose a:focus-visible {
	color: var(--text-link-hover);
}

.h2m-posts__list {
	padding-block-end: var(--section-pad);
}

@media (max-width: 767px) {
	.h2m-prose {
		padding-block: var(--space-7) var(--section-pad-sm);
	}

	.h2m-prose__title {
		margin-bottom: var(--space-5);
	}

	.h2m-posts__list {
		padding-block-end: var(--section-pad-sm);
	}
}