/*
 * Sponsor a Mitzvah — site styles.
 *
 * Every number here resolves to a token defined in theme.json. If a value needs
 * to change, change it in theme.json, not here.
 */

:root {
	--sam-gap: var(--wp--preset--spacing--20);
	--sam-card-gap: var(--wp--preset--spacing--10);
	/* wide enough to seat the arrow buttons beside the cards, not over them */
	--sam-track-pad: var(--wp--preset--spacing--50);
	/* how many carousel cards are shown; overridden per breakpoint below */
	--sam-cards: 2;
}

/* ---------------------------------------------------------------- shell -- */

/* The measured widths are border-box widths; make ours agree. */
[class^="sam-"],
[class^="sam-"] *,
[class*=" sam-"],
[class*=" sam-"] * {
	box-sizing: border-box;
}

/*
 * Twenty Twenty-Five wraps everything in .wp-site-blocks and adds block gaps
 * between top-level blocks. This page controls its own vertical rhythm.
 */
.wp-site-blocks > *,
.wp-block-post-content > * {
	margin-block: 0;
}

.wp-block-template-part {
	margin-block: 0;
}

.sam-section {
	padding-left: var(--wp--preset--spacing--10);
	padding-right: var(--wp--preset--spacing--10);
}

.sam-container {
	max-width: min(100%, var(--wp--custom--container--desktop));
	margin-left: auto;
	margin-right: auto;
	padding-top: var(--wp--preset--spacing--10);
	padding-bottom: var(--wp--preset--spacing--10);
}

.sam-prose p {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--body);
	margin: 0 0 var(--wp--preset--spacing--14);
}

.sam-prose p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------- header -- */

.sam-header {
	background-color: var(--wp--preset--color--brand);
}

.sam-header__inner {
	max-width: var(--wp--custom--container--desktop);
	margin-inline: auto;
	min-height: var(--wp--preset--spacing--70);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--10);
	padding-inline: var(--wp--preset--spacing--10);
}

.sam-header__logo {
	display: inline-flex;
	line-height: 0;
}

.sam-header__logo img {
	width: var(--wp--custom--logo--desktop);
	max-width: 100%;
	height: auto;
	display: block;
}

.sam-header__right {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
}

.sam-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

.sam-nav a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--rubik);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--nav);
	text-transform: capitalize;
	text-decoration: none;
	color: var(--wp--preset--color--base);
	padding-left: var(--wp--preset--spacing--30);
}

.sam-nav a:hover,
.sam-nav a:focus-visible {
	text-decoration: underline;
}

/* Donate button + every "Sponsor" card button share one token set. */
.sam-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--rubik);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--tight);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--brand-dark);
	border: 0;
	border-radius: var(--wp--custom--button--radius);
	padding: var(--wp--custom--button--pad-y) var(--wp--custom--button--pad-x);
	cursor: pointer;
}

/*
 * The cyan stays as header furniture, but carries a dark label rather than
 * white: #1F2740 on #6EC1E4 is 7.32:1, where white on the same cyan is 2.02:1
 * and fails AA outright. This lives here rather than in the v2 layer because
 * the header pattern is global — a page that never opts into v2 would
 * otherwise inherit the failing combination.
 */
.sam-header__right .sam-btn {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
	font-weight: 600;
}

.sam-btn:hover,
.sam-btn:focus-visible {
	filter: brightness(0.94);
	color: var(--wp--preset--color--base);
}

.sam-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--tap--min);
	height: var(--wp--custom--tap--min);
	min-width: var(--wp--custom--tap--min);
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
	color: var(--wp--preset--color--base);
}

.sam-nav-toggle span,
.sam-nav-toggle span::before,
.sam-nav-toggle span::after {
	display: block;
	width: var(--wp--preset--spacing--24);
	height: var(--wp--custom--card--border-width);
	background: currentColor;
	position: relative;
	content: "";
}

.sam-nav-toggle span::before {
	position: absolute;
	top: calc(-1 * var(--wp--preset--spacing--5));
}

.sam-nav-toggle span::after {
	position: absolute;
	top: var(--wp--preset--spacing--5);
}

/* ----------------------------------------------------------------- hero -- */

.sam-hero {
	position: relative;
	background-size: cover;
	background-position: 50% 0%;
	background-repeat: no-repeat;
	background-attachment: scroll;
	padding: var(--wp--preset--spacing--150) var(--wp--preset--spacing--20);
}

.sam-hero__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--brand);
	opacity: var(--wp--custom--hero--overlay-opacity);
}

.sam-hero__inner {
	position: relative;
	max-width: var(--wp--custom--container--desktop);
	margin-inline: auto;
}

.sam-hero__title {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--hero);
	line-height: var(--wp--custom--line-height--tight);
	font-weight: 400;
	color: var(--wp--preset--color--base);
	margin: 0;
	text-align: left;
}

/* ---------------------------------------------------------- intro block -- */

.sam-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/*
	 * The form spans both rows and is much taller than the copy. Pinning row 1
	 * to max-content stops that extra height being shared out, which would
	 * otherwise push the gallery away from the intro text.
	 */
	grid-template-rows: max-content 1fr;
	grid-template-areas:
		"text form"
		"media form";
	align-items: start;
}

.sam-intro__text {
	grid-area: text;
}

.sam-intro__media {
	grid-area: media;
}

.sam-intro__form {
	grid-area: form;
}

.sam-intro > * {
	padding: var(--wp--preset--spacing--10);
	display: flex;
	flex-direction: column;
	gap: var(--sam-gap);
}

.sam-intro__title {
	font-size: var(--wp--preset--font-size--heading-lg);
	line-height: var(--wp--custom--line-height--tight);
	color: var(--wp--preset--color--brand);
	margin: 0;
	text-align: left;
}

.sam-gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sam-gap);
	padding: var(--wp--preset--spacing--10);
}

.sam-gallery img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	height: auto;
}

/* ------------------------------------------------------------- carousel -- */

.sam-carousel-section {
	padding-block: var(--wp--preset--spacing--20);
}

.sam-carousel-heading {
	text-align: center;
	color: var(--wp--preset--color--brand);
	margin: 0 0 var(--wp--preset--spacing--20);
	line-height: var(--wp--custom--line-height--tight);
}

.sam-carousel-heading.is-h2 {
	font-size: var(--wp--preset--font-size--heading-lg);
}

.sam-carousel-heading.is-h3 {
	font-size: var(--wp--preset--font-size--heading-md);
}

.sam-carousel {
	position: relative;
}

/* Arrows centre on the track, not on the track-plus-dots. */
.sam-carousel__viewport {
	position: relative;
}

.sam-carousel__track {
	display: flex;
	gap: var(--sam-card-gap);
	/*
	 * Centre the cards when they do not fill the row — a three-card row in a
	 * four-card track was leaving 392px of dead space on its right at 1440.
	 *
	 * `safe` is doing the work: plain `center` on a flex scroller pushes the
	 * overflow equally to both ends, and the left-hand cards become
	 * unreachable because there is no negative scroll. With `safe`, alignment
	 * falls back to flex-start the moment the content overflows, so every row
	 * that scrolls still starts at the first card.
	 */
	justify-content: safe center;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	padding: var(--wp--preset--spacing--15) var(--sam-track-pad) var(--wp--preset--spacing--10);
	list-style: none;
	margin: 0;
}

.sam-carousel__track::-webkit-scrollbar {
	display: none;
}

.sam-card {
	flex: 0 0 calc(
		(100% - (var(--sam-cards) - 1) * var(--sam-card-gap)) / var(--sam-cards)
	);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--base);
	border: var(--wp--custom--card--border-width) solid var(--wp--preset--color--card-border);
	border-radius: var(--wp--custom--card--radius);
	padding: var(--wp--custom--card--pad);
}

.sam-card__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--wp--custom--card--radius);
	height: auto;
}

.sam-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--10) var(--wp--preset--spacing--15);
	text-align: center;
}

.sam-card__text {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--ink);
	margin: 0;
	flex: 1 1 auto;
}

.sam-card__price {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--sub);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--tight);
	color: var(--wp--preset--color--brand);
	margin: 0;
}

.sam-card .sam-btn {
	width: 100%;
}

.sam-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--wp--preset--spacing--46);
	height: var(--wp--preset--spacing--46);
	min-width: var(--wp--custom--tap--min);
	min-height: var(--wp--custom--tap--min);
	display: flex;
	align-items: center;
	justify-content: center;
	border: var(--wp--custom--card--border-width) solid var(--wp--preset--color--card-border);
	border-radius: var(--wp--custom--button--radius);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--icon);
	line-height: var(--wp--custom--line-height--tight);
	cursor: pointer;
	z-index: 2;
	padding: 0;
}

.sam-carousel__arrow[hidden] {
	display: none;
}

/* At either end of the track the arrow stays in place but reads as inactive. */
.sam-carousel__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.sam-carousel__arrow--prev {
	left: 0;
}

.sam-carousel__arrow--next {
	right: 0;
}

.sam-carousel__dots {
	display: flex;
	justify-content: center;
	/*
	 * Wraps because the dot count follows the tier count, and the longest
	 * category has 16. At 375px that many 44px tap targets ran the rail out to
	 * 406px and gave the whole document a horizontal scrollbar — the dots are
	 * outside the carousel's clipping context, so nothing else contained them.
	 */
	flex-wrap: wrap;
	row-gap: var(--wp--preset--spacing--5);
	gap: var(--wp--preset--spacing--5);
	/*
	 * Stated rather than inherited: the rail used to pick up the UA's default
	 * ul margin-block-end, which core's flow-layout resets to 0 inside a Group
	 * block — so the same rail rendered 16px shorter on block-built pages.
	 */
	margin-top: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--16);
	padding: 0;
	list-style: none;
}

.sam-carousel__dot {
	width: var(--wp--custom--tap--min);
	height: var(--wp--custom--tap--min);
	min-width: var(--wp--custom--tap--min);
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sam-carousel__dot::before {
	content: "";
	display: block;
	width: var(--wp--preset--spacing--10);
	height: var(--wp--preset--spacing--10);
	border-radius: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--dot-idle);
}

.sam-carousel__dot[aria-current="true"]::before {
	background-color: var(--wp--preset--color--dot-active);
}

/* -------------------------------------------------------------- divider -- */

.sam-divider {
	padding: var(--wp--preset--spacing--15) 0;
}

.sam-divider hr {
	border: 0;
	border-top: var(--wp--custom--card--border-width) solid var(--wp--preset--color--rule);
	margin: 0;
	height: 0;
}

/* ------------------------------------------------------------- donorbox -- */

.sam-donorbox iframe {
	max-width: 500px;
	min-width: 250px;
	width: 100%;
	max-height: none !important;
	border: 0;
	display: block;
}

/* --------------------------------------------------------------- footer -- */

.sam-footer {
	position: relative;
	background-color: var(--wp--preset--color--brand);
	padding-top: var(--wp--preset--spacing--40);
}

.sam-footer__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--footer-dark);
	opacity: 0.97;
}

.sam-footer__inner {
	position: relative;
	max-width: var(--wp--custom--container--desktop);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--sam-gap);
}

.sam-footer__col:first-child {
	padding-right: var(--wp--preset--spacing--70);
}

.sam-footer__logo img {
	width: var(--wp--custom--logo--footer);
	max-width: 100%;
	height: auto;
	display: block;
}

.sam-footer__tagline {
	font-family: var(--wp--preset--font-family--rubik);
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--line-height--tagline);
	color: var(--wp--preset--color--base);
	text-align: center;
	margin: 0 0 var(--wp--preset--spacing--20);
}

.sam-footer h2,
.sam-footer h3 {
	font-family: var(--wp--preset--font-family--rubik);
	font-size: var(--wp--preset--font-size--sub);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--tight);
	color: var(--wp--preset--color--base);
	margin: 0 0 var(--wp--preset--spacing--20);
}

.sam-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sam-footer li,
.sam-footer li a {
	font-family: var(--wp--preset--font-family--rubik);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--footer-list);
	color: var(--wp--preset--color--footer-muted);
	text-decoration: none;
}

.sam-footer li a:hover,
.sam-footer li a:focus-visible {
	text-decoration: underline;
}

.sam-footer__note {
	font-family: var(--wp--preset--font-family--rubik);
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--line-height--tagline);
	color: var(--wp--preset--color--footer-muted);
	margin: 0;
}

.sam-subscribe {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--card--gap);
	margin-top: var(--wp--preset--spacing--20);
}

/* Visually hidden, still read aloud — the placeholder is not a label. */
.sam-subscribe__label,
.sam-subscribe__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.sam-subscribe__input {
	flex: 1 1 12rem;
	min-width: 0;
	min-height: var(--wp--custom--tap--min);
	font-family: var(--wp--preset--font-family--rubik);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--base);
	border: 0;
	border-radius: var(--wp--custom--button--radius);
	padding: 0 var(--wp--preset--spacing--20);
}

.sam-subscribe__btn {
	flex: 0 0 auto;
	min-height: var(--wp--custom--tap--min);
}

.sam-subscribe__input::placeholder {
	color: var(--wp--preset--color--body);
	opacity: 1;
}

.sam-subscribe__input:focus-visible {
	outline: var(--wp--custom--alt--focus-width) solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.sam-subscribe__btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

.sam-subscribe__msg {
	font-family: var(--wp--preset--font-family--rubik);
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--line-height--tagline);
	color: var(--wp--preset--color--base);
	margin: var(--wp--preset--spacing--20) 0 0;
}

.sam-subscribe__msg[hidden] {
	display: none;
}

.sam-subscribe__msg--error {
	color: var(--wp--custom--feedback--error);
}

/* --------------------------------------------------- core-block markup -- */

/*
 * v3 pages are assembled from core blocks so the client can edit them in the
 * editor. Core wraps images in <figure> and buttons in .wp-block-button, so the
 * BEM classes above land on a wrapper rather than the element itself. These
 * rules bridge that difference. They are additive — the hand-written v1/v2 pages
 * still match the original selectors and render unchanged.
 *
 * Buttons need no bridging: theme.json styles elements.button with the same
 * tokens as .sam-btn, so a core Button block already looks right.
 */

/* core/image: the class lands on the <figure>, the styling belongs on the img. */
figure.sam-card__thumb,
.sam-gallery figure {
	margin: 0;
}

figure.sam-card__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--wp--custom--card--radius);
	height: auto;
}

/* Keeps the CTA pinned to the bottom of the card whatever the description length. */
.sam-card__cta {
	margin-top: auto;
}

.sam-card__cta .wp-block-button,
.sam-card__cta .wp-block-button__link {
	width: 100%;
}

/*
 * Card buttons stretch to the card and centre their label, so the shared 24px
 * inline padding buys nothing visually — but it does shrink the content box by
 * 48px. Below about 360px a card is ~88px wide, which left 40px for a word
 * needing 67, and both "Sponsor" and "Explore" broke onto a second line.
 */
.sam-card__cta .wp-block-button__link,
.sam-card .sam-btn {
	white-space: nowrap;
	padding-inline: var(--wp--preset--spacing--10);
}

/* ---------------------------------------------------------- breakpoints -- */

/* Carousel density: fluid within each band, ~4-6 cards on desktop, 2 on phones. */
@media (min-width: 601px) {
	:root { --sam-cards: 3; }
}

@media (min-width: 901px) {
	:root { --sam-cards: 4; }
}

@media (min-width: 1201px) {
	:root { --sam-cards: 5; }
}

@media (min-width: 1601px) {
	:root { --sam-cards: 6; }
}

/*
 * Browse rows hold 3-4 categories, not the 7-16 tiers a category page carries,
 * so the shared 5- and 6-up densities left one or two empty slots at the end of
 * every row. Capping them at 4 fills the row and gives the thumbnails more
 * size, without changing the component.
 */
@media (min-width: 1201px) {
	#browse { --sam-cards: 4; }
}

/* Tablet and below: hamburger nav, shorter hero, narrower container. */
@media (max-width: 1024px) {
	.sam-container,
	.sam-hero__inner,
	.sam-header__inner,
	.sam-footer__inner {
		max-width: min(100%, var(--wp--custom--container--tablet));
	}

	.sam-hero {
		padding-block: var(--wp--preset--spacing--100);
	}

	.sam-header__logo img {
		width: var(--wp--custom--logo--mobile);
	}

	.sam-nav-toggle {
		display: flex;
	}

	/*
	 * Desktop keeps the original's exact 38px button. At touch widths the tap
	 * target is raised to the 44px minimum.
	 */
	.sam-btn {
		min-height: var(--wp--custom--tap--min);
	}

	.sam-nav {
		display: none;
	}

	.sam-nav.is-open {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--wp--preset--color--brand);
		z-index: 10;
		padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20)
			var(--wp--preset--spacing--20);
	}

	.sam-nav.is-open ul {
		flex-direction: column;
		align-items: flex-start;
	}

	.sam-nav.is-open a {
		padding-left: 0;
		min-height: var(--wp--custom--tap--min);
	}

	.sam-header {
		position: relative;
	}
}

@media (max-width: 767px) {
	.sam-container,
	.sam-hero__inner,
	.sam-header__inner,
	.sam-footer__inner {
		max-width: min(100%, var(--wp--custom--container--mobile));
	}

	.sam-hero__title {
		font-size: var(--wp--preset--font-size--hero-sm);
	}

	/* Original stacks: intro copy, then the donation form, then gallery + explainer. */
	.sam-intro {
		grid-template-columns: 1fr;
		grid-template-areas:
			"text"
			"form"
			"media";
	}

	.sam-footer__inner {
		grid-template-columns: 1fr;
	}

	.sam-footer__col:first-child {
		padding-right: 0;
	}

	:root {
		--sam-track-pad: var(--wp--preset--spacing--20);
	}

	/* Arrows would overlap the cards at this width; touch swipe carries it. */
	.sam-carousel__arrow {
		display: none;
	}
}

/* ------------------------------------------------- content pages + forms -- */

/*
 * How It Works, Contact and Apply have no photography behind their hero. The
 * overlay alone sits at 72% over the white page, which lands white text at
 * about 2.6:1 — so these carry a solid dark base underneath instead.
 */
.sam-hero--plain {
	background-color: var(--wp--preset--color--footer-dark);
}

/*
 * Numbered steps on How It Works.
 *
 * The copy already takes the 68ch reading measure from .sam-prose, so the
 * column is ~612px wide however wide the container is. Centring the list keeps
 * that deliberate rather than leaving it hanging against the left edge of an
 * otherwise empty 1140px row.
 */
.sam-steps {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	max-width: 46rem;
	margin-inline: auto;
}

/* Kept on the same axis as the steps above it. */
.sam-section .sam-container > .sam-contact-direct {
	max-width: 46rem;
	margin-inline: auto;
}

.sam-step {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--wp--preset--spacing--30);
	align-items: start;
}

.sam-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--rubik);
	font-weight: 600;
	line-height: 1;
}

.sam-step__body > :first-child {
	margin-top: 0;
}

.sam-step__body h2 {
	font-size: var(--wp--preset--font-size--heading-s);
	color: var(--wp--preset--color--heading-ink);
	margin-bottom: var(--wp--preset--spacing--20);
}

@media (max-width: 600px) {
	.sam-step {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--20);
	}
}

/* Contact + Apply forms. */
.sam-form {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	max-width: 34rem;
}

.sam-form__row {
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

.sam-form label {
	font-family: var(--wp--preset--font-family--rubik);
	font-weight: 600;
	color: var(--wp--preset--color--heading-ink);
}

.sam-form__optional {
	font-weight: 400;
	color: var(--wp--preset--color--body-ink);
}

.sam-form input[type="text"],
.sam-form input[type="email"],
.sam-form input[type="tel"],
.sam-form select,
.sam-form textarea {
	width: 100%;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--button--radius);
	padding: var(--wp--preset--spacing--20);
	min-height: var(--wp--custom--tap--min);
}

.sam-form textarea {
	min-height: 10rem;
	resize: vertical;
}

.sam-form input:focus-visible,
.sam-form select:focus-visible,
.sam-form textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-dark);
	outline-offset: 1px;
}

.sam-form__check {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.sam-form__check input {
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
}

.sam-form__check label {
	font-weight: 400;
}

.sam-form__error[hidden] {
	display: none;
}

.sam-form__error {
	color: #8A1C1C;
	background-color: #FDECEC;
	border: 1px solid #E4B4B4;
	border-radius: var(--wp--custom--button--radius);
	padding: var(--wp--preset--spacing--20);
}

.sam-form__note {
	color: var(--wp--preset--color--body-ink);
	font-size: var(--wp--preset--font-size--caption);
}

.sam-form button {
	justify-self: start;
	min-height: var(--wp--custom--tap--min);
}

/* Direct contact details block. */
.sam-contact-direct {
	background-color: var(--wp--preset--color--surface-tint);
	border-radius: var(--wp--custom--button--radius);
	padding: var(--wp--preset--spacing--40);
}

.sam-contact-direct h2 {
	font-size: var(--wp--preset--font-size--heading-s);
	color: var(--wp--preset--color--heading-ink);
	margin-top: 0;
}

.sam-contact-direct a {
	color: var(--wp--preset--color--brand-dark);
}

/* ------------------------------------------------- homepage browse rows -- */

/*
 * Category cards on the homepage are the tier card with the price and button
 * taken out and the whole card made the link — one target instead of a small
 * button, which is what a browse row wants on touch. They keep .sam-card so
 * carousel.js measures its page width from them like any other row.
 */
a.sam-cat-card {
	text-decoration: none;
	color: inherit;
	transition: border-color 120ms ease, transform 120ms ease;
}

a.sam-cat-card:hover,
a.sam-cat-card:focus-visible {
	border-color: var(--wp--preset--color--brand-dark);
	transform: translateY(-2px);
}

a.sam-cat-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-dark);
	outline-offset: 2px;
}

.sam-cat-card__name {
	font-family: var(--wp--preset--font-family--rubik);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--heading-ink);
	margin: 0;
	text-align: center;
}

/* Cards with nowhere to go yet — no link, so no hover or pointer. */
.sam-cat-card--soon {
	opacity: 0.72;
}

.sam-cat-card__soon {
	display: inline-block;
	font-family: var(--wp--preset--font-family--rubik);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--wp--preset--color--body-ink);
	margin-top: var(--wp--preset--spacing--5);
}

/*
 * Row headings sit left, unlike the centred carousel headings elsewhere.
 *
 * The inline padding matches the track's, so the heading starts on the same
 * vertical as the first card. Constraining this to the container instead put
 * it 106px to the right of the cards, which the track does not share because
 * it runs full-bleed to let cards scroll off the edge.
 */
/*
 * These were rendering at 16px — body size — for an <h2>. The rule asked for
 * --wp--preset--font-size--heading-s, which does not exist in the scale (it
 * runs sub 18 / heading-md 28 / heading-lg 32), so the variable resolved to
 * nothing and the browser default applied.
 *
 * heading-md sits them one step below the full-section headings (Who We Are and
 * the two panels, both 32px), which is the right relationship: these label a row
 * inside the browse section rather than opening a section of their own. Colour
 * stays on the single heading token the rest of the site uses — at 28px it now
 * carries the weight it was missing, and #3D4C77 on white is 8.4:1.
 */
.sam-row-heading {
	font-size: var(--wp--preset--font-size--heading-md);
	line-height: var(--wp--custom--alt--heading-lh);
	letter-spacing: var(--wp--custom--alt--tracking-tight);
	font-weight: 600;
	color: var(--wp--preset--color--heading-ink);
	margin: 0 0 var(--wp--preset--spacing--20);
	padding-inline: var(--wp--preset--spacing--64);
	text-align: left;
}

/* Homepage summary + closing CTA. */
.sam-home-panel {
	background-color: var(--wp--preset--color--surface-tint);
	border-radius: var(--wp--custom--card--radius);
	padding: var(--wp--preset--spacing--50);
	text-align: center;
}

.sam-home-panel h2 {
	font-size: var(--wp--preset--font-size--heading-lg);
	color: var(--wp--preset--color--heading-ink);
	margin-top: 0;
}

.sam-home-panel .sam-prose {
	margin-inline: auto;
}

.sam-home-panel .wp-block-buttons {
	justify-content: center;
}

.sam-home-panel__aside {
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--body-ink);
}

/* ------------------------------------------------ homepage v2: Who We Are -- */

/*
 * Two columns: the copy and its button on the left, a 2x2 image cluster on the
 * right. A centred single column left the paragraph stranded in a wide empty
 * band — the images give the section something to sit against, and they are
 * chosen to echo the range the paragraph describes rather than to decorate.
 */
.sam-whoweare {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	padding-block: var(--wp--preset--spacing--50);
}

@media (min-width: 901px) {
	.sam-whoweare {
		grid-template-columns: 1.05fr 0.95fr;
		gap: var(--wp--preset--spacing--64);
	}
}

.sam-whoweare__text h2 {
	font-size: var(--wp--preset--font-size--heading-lg);
	color: var(--wp--preset--color--heading-ink);
	margin: 0 0 var(--wp--preset--spacing--20);
	text-align: left;
}

.sam-whoweare__text p {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--alt--body-lh, 1.65);
	color: var(--wp--preset--color--body-ink);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.sam-whoweare__media {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--10);
}

.sam-whoweare__media img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--wp--custom--card--radius);
}

/*
 * The cluster reads as one block rather than four tiles: the outer corners stay
 * rounded and the inner ones square off.
 */
.sam-whoweare__media img:nth-child(1) { border-end-end-radius: 0; border-start-end-radius: 0; border-end-start-radius: 0; }
.sam-whoweare__media img:nth-child(2) { border-start-start-radius: 0; border-end-start-radius: 0; border-end-end-radius: 0; }
.sam-whoweare__media img:nth-child(3) { border-start-start-radius: 0; border-start-end-radius: 0; border-end-end-radius: 0; }
.sam-whoweare__media img:nth-child(4) { border-start-start-radius: 0; border-start-end-radius: 0; border-end-start-radius: 0; }

/* ------------------------------------------- homepage v2: category cards -- */

/*
 * Full-bleed image with the label sitting on it. Contrast comes from a gradient
 * plus a text-shadow, matching how the hero handles the same problem — no
 * backdrop-filter, which is expensive to composite and inconsistent on older
 * mobile Safari.
 */
.sam-cat-card--rich {
	position: relative;
	display: block;
	padding: 0;
	border: 0;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background-color: var(--wp--preset--color--footer-dark);
	border-radius: var(--wp--custom--card--radius);
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.sam-cat-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	transition: transform 320ms ease;
}

.sam-cat-card__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(31, 39, 64, 0.94) 0%,
		rgba(31, 39, 64, 0.78) 24%,
		rgba(31, 39, 64, 0.28) 52%,
		rgba(31, 39, 64, 0) 74%
	);
	transition: opacity 200ms ease;
}

.sam-cat-card__content {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: block;
	padding: var(--wp--preset--spacing--20);
	z-index: 1;
}

.sam-cat-card--rich .sam-cat-card__name {
	display: block;
	font-family: var(--wp--preset--font-family--rubik);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--tight);
	color: var(--wp--preset--color--base);
	text-align: left;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/*
 * Collapsed with max-height rather than the 0fr grid trick: the description is
 * a bare text node, and 0fr needs a real child element to carry overflow:hidden
 * or the row never collapses. 7em clears the longest description at the
 * narrowest card, and over-shooting only affects easing, not layout.
 */
.sam-cat-card__desc {
	display: block;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	margin-top: 0;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--base);
	text-align: left;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
	transition: max-height 220ms ease, opacity 180ms ease, margin-top 220ms ease;
}

.sam-cat-card__link {
	position: absolute;
	inset: 0;
	z-index: 2;
	text-decoration: none;
}

.sam-cat-card__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: -4px;
}

.sam-cat-card__close {
	position: absolute;
	top: var(--wp--preset--spacing--10);
	right: var(--wp--preset--spacing--10);
	z-index: 3;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background-color: rgba(31, 39, 64, 0.62);
	color: var(--wp--preset--color--base);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 160ms ease, visibility 160ms ease;
}

.sam-cat-card__close:hover,
.sam-cat-card__close:focus-visible {
	background-color: rgba(31, 39, 64, 0.85);
}

/*
 * Expanded state: hover on pointer devices, .is-open on touch, plus
 * :focus-within so keyboard users get the same reveal.
 *
 * :focus-within has to honour .is-dismissed as well. Clicking the close
 * button leaves focus on that button, which is inside the card — without the
 * guard the card re-expands the instant it collapses.
 */

/*
 * Scoped to body.sam-v2-page to outrank `body.sam-v2-page .sam-card:hover`
 * in the v2 layer, which sets translateY(-2px) on every card and otherwise
 * beats these on specificity — the card revealed its description but never
 * actually scaled.
 */
body.sam-v2-page .sam-cat-card--rich.is-open,
body.sam-v2-page .sam-cat-card--rich:focus-within:not(.is-dismissed) {
	transform: scale(1.06);
	box-shadow: 0 14px 30px rgba(31, 39, 64, 0.34);
	z-index: 4;
}

.sam-cat-card--rich.is-open .sam-cat-card__desc,
.sam-cat-card--rich:focus-within:not(.is-dismissed) .sam-cat-card__desc {
	max-height: 7em;
	opacity: 1;
	margin-top: var(--wp--preset--spacing--5);
}

.sam-cat-card--rich.is-open .sam-cat-card__veil,
.sam-cat-card--rich:focus-within:not(.is-dismissed) .sam-cat-card__veil {
	opacity: 1;
}

.sam-cat-card--rich.is-open .sam-cat-card__img,
.sam-cat-card--rich:focus-within:not(.is-dismissed) .sam-cat-card__img {
	transform: scale(1.04);
}

.sam-cat-card--rich.is-open .sam-cat-card__close,
.sam-cat-card--rich:focus-within:not(.is-dismissed) .sam-cat-card__close {
	opacity: 1;
	visibility: visible;
}

/*
 * Hover only where a real pointer exists. Without this, mobile Safari fires
 * :hover on first tap and the JS "first tap reveals, second navigates" flow
 * fights the stylesheet.
 */
@media (hover: hover) and (pointer: fine) {
	body.sam-v2-page .sam-cat-card--rich:hover:not(.is-dismissed) {
		transform: scale(1.06);
		box-shadow: 0 14px 30px rgba(31, 39, 64, 0.34);
		z-index: 4;
	}

	.sam-cat-card--rich:hover:not(.is-dismissed) .sam-cat-card__desc {
		max-height: 7em;
		opacity: 1;
		margin-top: var(--wp--preset--spacing--5);
	}

	.sam-cat-card--rich:hover:not(.is-dismissed) .sam-cat-card__img {
		transform: scale(1.04);
	}

	.sam-cat-card--rich:hover:not(.is-dismissed) .sam-cat-card__close {
		opacity: 1;
		visibility: visible;
	}
}

/*
 * The track is a horizontal scroller, so it clips vertically too — overflow-x
 * on one axis forces the other to auto. Without this padding the scaled card
 * gets its top and bottom shaved off.
 */
.sam-cat-card--rich {
	scroll-snap-align: start;
}

#browse .sam-carousel__track:has(.sam-cat-card--rich) {
	padding-block: var(--wp--preset--spacing--24);
}

@media (prefers-reduced-motion: reduce) {
	.sam-cat-card--rich,
	.sam-cat-card__img,
	.sam-cat-card__desc,
	.sam-cat-card__close {
		transition: none;
	}

	body.sam-v2-page .sam-cat-card--rich.is-open,
	body.sam-v2-page .sam-cat-card--rich:focus-within:not(.is-dismissed) {
		transform: none;
	}

	@media (hover: hover) and (pointer: fine) {
		body.sam-v2-page .sam-cat-card--rich:hover:not(.is-dismissed) {
			transform: none;
		}
	}
}

/*
 * Row headings centre on the v2 homepage, matching the cards below them, which
 * centre whenever they do not fill the row. Scoped with :has() so the existing
 * homepage keeps its left-aligned headings while both are under review.
 */
.sam-carousel-section:has(.sam-cat-card--rich) .sam-row-heading {
	text-align: center;
}