/*
 * v2 design layer — A/B comparison against the 1:1 rebuild.
 *
 * EVERY rule in this file is scoped to body.sam-v2-page. The file is only
 * enqueued on pages whose content carries the "sam-v2" marker, so the original
 * page is untouched by design and by delivery.
 *
 * Values come from theme.json tokens; the v2-only tokens are the brand-dark /
 * heading-ink / body-ink / surface-tint / footer-link palette entries and the
 * 8-80px spacing steps.
 */

/* ------------------------------------------------- 1. colour + contrast -- */

/* Body copy: #7A7A7A on white is 4.29:1 and fails AA. #595959 is 7.00:1. */
body.sam-v2-page .sam-prose p,
body.sam-v2-page .sam-v2-lead {
	color: var(--wp--preset--color--body-ink);
}

/* Section headings: #6A7DAF on white is 4.07:1 and fails AA. #3D4C77 is 8.40:1. */
body.sam-v2-page .sam-intro__title,
body.sam-v2-page .sam-carousel-heading {
	color: var(--wp--preset--color--heading-ink);
}

/* Footer links: #606D7C on #252A42 is 2.67:1 and fails AA. #A8B3C4 is 6.66:1. */
body.sam-v2-page .sam-footer li,
body.sam-v2-page .sam-footer li a,
body.sam-v2-page .sam-footer__note {
	color: var(--wp--preset--color--footer-link);
}

/*
 * Primary CTA: white on #6EC1E4 is 2.02:1 — it fails AA even at large-text
 * thresholds. Solid #4F6096 with white is 6.09:1.
 */
/* The button contrast corrections that used to live here are now the base
   styling in site.css — the header is global, so they had to apply to every
   page rather than only the ones carrying the v2 marker. */

/* "Contact Us" sat 10px from the Donate button, which read as one cluster. */
body.sam-v2-page .sam-header__right {
	gap: var(--wp--preset--spacing--32);
}

/* Nothing in the original had a visible keyboard focus state. */
body.sam-v2-page a:focus-visible,
body.sam-v2-page button:focus-visible {
	outline: var(--wp--custom--alt--focus-width) solid var(--wp--preset--color--brand-dark);
	outline-offset: 2px;
	border-radius: var(--wp--custom--button--radius);
}

body.sam-v2-page .sam-header a:focus-visible,
body.sam-v2-page .sam-header button:focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* -------------------------------------------------------- 2. typography -- */

/*
 * Headings ran at line-height 1 (32px type on a 32px box). Anything that wraps
 * to two lines — which the intro H2 and the opportunities H3 both do — had
 * descenders nearly touching the next line's caps.
 */
body.sam-v2-page .sam-intro__title,
body.sam-v2-page .sam-carousel-heading,
body.sam-v2-page .sam-hero__title {
	line-height: var(--wp--custom--alt--heading-lh);
}

/* Long-form copy gets a reading measure instead of filling the column. */
body.sam-v2-page .sam-prose {
	max-width: var(--wp--custom--alt--measure);
}

/*
 * Body copy read as "default WordPress text": 16px on a 24px line (1.5) with
 * only 14.4px between paragraphs, so the block looked dense and undesigned.
 * 17px on 1.65 with a 20px paragraph gap opens it up.
 */
body.sam-v2-page .sam-prose p {
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--wp--custom--alt--body-lh);
	margin-bottom: var(--wp--custom--alt--para-gap);
}

/*
 * The section heading was only 2x the body size at the same weight and family,
 * so there was little typographic contrast between "title" and "text". Larger,
 * heavier, and with slightly negative tracking, which is what makes large
 * sans-serif headings read as deliberate rather than default.
 */
body.sam-v2-page .sam-intro__title {
	font-size: var(--wp--preset--font-size--heading-xl);
	font-weight: 700;
	letter-spacing: var(--wp--custom--alt--tracking-tight);
	line-height: var(--wp--custom--alt--heading-lh-tight);
}

body.sam-v2-page .sam-carousel-heading {
	font-weight: 700;
	letter-spacing: var(--wp--custom--alt--tracking-tight);
}

/* Oswald is only loaded at 400 — asking for 700 here would render faux-bold. */
body.sam-v2-page .sam-hero__title {
	letter-spacing: var(--wp--custom--alt--tracking-tight);
}

body.sam-v2-page .sam-v2-lead {
	font-size: var(--wp--preset--font-size--sub);
	line-height: var(--wp--custom--line-height--tagline);
	margin: var(--wp--preset--spacing--16) 0 0;
	max-width: var(--wp--custom--alt--measure);
	color: var(--wp--preset--color--base);
}

/* ------------------------------------------------------------- 3. hero -- */

body.sam-v2-page .sam-hero {
	padding-block: var(--wp--preset--spacing--80);
}

/*
 * The flat 72% overlay flattened the photograph into a blue band. A gradient
 * scrim keeps type contrast where the words are and lets the image read.
 */
body.sam-v2-page .sam-hero__overlay {
	opacity: 1;
	background: linear-gradient(
		100deg,
		rgba(31, 39, 64, 0.88) 0%,
		rgba(79, 96, 150, 0.72) 45%,
		rgba(106, 125, 175, 0.35) 100%
	);
}

body.sam-v2-page .sam-v2-eyebrow {
	display: inline-block;
	font-family: var(--wp--preset--font-family--rubik);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--wp--custom--button--radius);
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--12);
	margin-bottom: var(--wp--preset--spacing--16);
}

body.sam-v2-page .sam-v2-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--12);
	margin-top: var(--wp--preset--spacing--32);
}

body.sam-v2-page .sam-btn--onhero {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--heading-ink);
	font-weight: 600;
}

body.sam-v2-page .sam-btn--ghost {
	background-color: transparent;
	color: var(--wp--preset--color--base);
	border: 1px solid rgba(255, 255, 255, 0.6);
}

/* -------------------------------------------- 4. section rhythm + panel -- */

body.sam-v2-page .sam-carousel-section {
	padding-block: var(--wp--preset--spacing--64);
}

/* The tier carousel sits on a tint so it reads as its own decision zone
   rather than more white page. */
body.sam-v2-page .sam-v2-panel {
	background-color: var(--wp--preset--color--surface-tint);
	border-block: 1px solid var(--wp--preset--color--hairline);
}

body.sam-v2-page .sam-carousel-heading {
	margin-bottom: var(--wp--preset--spacing--8);
}

body.sam-v2-page .sam-v2-subhead {
	text-align: center;
	font-size: var(--wp--preset--font-size--sub);
	line-height: var(--wp--custom--line-height--tagline);
	color: var(--wp--preset--color--body-ink);
	margin: 0 auto var(--wp--preset--spacing--32);
	max-width: var(--wp--custom--alt--measure);
	padding-inline: var(--wp--preset--spacing--20);
}

body.sam-v2-page .sam-section {
	padding-block: var(--wp--preset--spacing--48);
}

/* ------------------------------------------------------------ 5. cards -- */

body.sam-v2-page .sam-carousel__track {
	gap: var(--wp--preset--spacing--20);
	padding-block: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
	padding-inline: var(--wp--preset--spacing--64);

	/*
	 * Without scroll-padding, mandatory snapping parks the first card flush at
	 * scroll offset 0 — the track's inline padding is scrolled away and the
	 * overlaid prev arrow ends up sitting on the card (on top of the price).
	 * scroll-padding moves the snap position inward so the gutter survives.
	 */
	scroll-padding-inline: var(--wp--preset--spacing--64);
}

body.sam-v2-page .sam-card {
	--sam-card-gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--8);
	border-radius: var(--wp--custom--alt--radius);
	border-color: var(--wp--preset--color--hairline);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

body.sam-v2-page .sam-card:hover {
	box-shadow: 0 6px 18px rgba(31, 39, 64, 0.12);
	transform: translateY(-2px);
}

body.sam-v2-page .sam-card__thumb {
	border-radius: var(--wp--custom--button--radius);
}

body.sam-v2-page .sam-card__body {
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--12)
		var(--wp--preset--spacing--12);
	gap: var(--wp--preset--spacing--12);
	text-align: left;
}

/* Description reads faster left-aligned once it runs past two lines. */
body.sam-v2-page .sam-card__text {
	color: var(--wp--preset--color--body-ink);
	text-align: left;
}

/*
 * Price is the deciding piece of information, so it leads the block instead of
 * sitting under the description in body-sized type.
 */
body.sam-v2-page .sam-card__price {
	order: -1;
	font-size: var(--wp--preset--font-size--heading-md);
	font-weight: 700;
	color: var(--wp--preset--color--heading-ink);
	line-height: var(--wp--custom--line-height--tight);
}

body.sam-v2-page .sam-card .sam-btn {
	font-weight: 600;
	min-height: var(--wp--custom--tap--min);
}

body.sam-v2-page .sam-carousel__arrow {
	border-color: var(--wp--preset--color--hairline);
	color: var(--wp--preset--color--heading-ink);
	box-shadow: 0 2px 8px rgba(31, 39, 64, 0.14);
	border-radius: 50%;
}

body.sam-v2-page .sam-carousel__dot[aria-current="true"]::before {
	background-color: var(--wp--preset--color--brand-dark);
}

/* ------------------------------------------ 6. donation form + content -- */

body.sam-v2-page .sam-intro {
	gap: var(--wp--preset--spacing--48);
}

body.sam-v2-page .sam-intro > * {
	gap: var(--wp--preset--spacing--24);
}

/*
 * The Donorbox iframe renders ~1650px tall while the copy column ends around
 * 1130px, so the grid row is sized by the form and ~514px of blank white sits
 * beside the end of the copy.
 *
 * Moving the form into its own stacked section was measured and rejected: it
 * removed the 514px void but made the page 1,487px taller and pushed the form
 * 283px FURTHER down. Sticky keeps the compact two-column height and keeps the
 * form beside the copy the whole way down, so the void is never on screen at
 * the same time as the reader's attention.
 */
@media (min-width: 768px) {
	body.sam-v2-page .sam-intro__form {
		position: sticky;
		top: var(--wp--custom--alt--sticky-top);
		align-self: start;
	}
}

body.sam-v2-page .sam-gallery {
	gap: var(--wp--preset--spacing--16);
	padding: 0;
}

body.sam-v2-page .sam-v2-form-heading {
	font-size: var(--wp--preset--font-size--sub);
	font-weight: 600;
	line-height: var(--wp--custom--alt--heading-lh);
	color: var(--wp--preset--color--heading-ink);
	margin: 0 0 var(--wp--preset--spacing--12);
}

body.sam-v2-page .sam-gallery img {
	border-radius: var(--wp--custom--button--radius);
	transition: transform 0.25s ease;
}

body.sam-v2-page .sam-gallery a:hover img,
body.sam-v2-page .sam-gallery img:hover {
	transform: scale(1.02);
}

body.sam-v2-page .sam-divider hr {
	border-top-color: var(--wp--preset--color--hairline);
}

/* ------------------------------------------------- 7. mobile sticky CTA -- */

body.sam-v2-page .sam-v2-stickybar {
	display: none;
}

@media (max-width: 767px) {
	/*
	 * The hero carries more than v1 (eyebrow + lead + two actions), so the
	 * vertical padding comes down to keep the first screen from being all hero.
	 */
	body.sam-v2-page .sam-hero {
		padding-block: var(--wp--preset--spacing--40);
	}

	body.sam-v2-page .sam-v2-hero-actions {
		margin-top: var(--wp--preset--spacing--20);
	}

	body.sam-v2-page .sam-v2-hero-actions .sam-btn {
		flex: 1 1 auto;
	}

	/*
	 * The 64px gutter exists to seat the prev/next arrows beside the cards.
	 * Arrows are hidden at this width, so that gutter would just eat 128px of
	 * a 390px screen and drop the visible card count from two to one.
	 */
	body.sam-v2-page .sam-carousel__track {
		padding-inline: var(--wp--preset--spacing--20);
		scroll-padding-inline: var(--wp--preset--spacing--20);
	}

	body.sam-v2-page .sam-gallery {
		grid-template-columns: repeat(2, 1fr);
	}

	body.sam-v2-page .sam-carousel-section,
	body.sam-v2-page .sam-section {
		padding-block: var(--wp--preset--spacing--40);
	}

	/*
	 * On a ~5,100px page the donation form starts around 1,480px down with no
	 * persistent route back to it. This keeps it one tap away at all times.
	 */
	body.sam-v2-page .sam-v2-stickybar {
		display: flex;
		position: fixed;
		inset: auto 0 0 0;
		z-index: 40;
		gap: var(--wp--preset--spacing--12);
		align-items: center;
		justify-content: space-between;
		padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
		background: var(--wp--preset--color--base);
		border-top: 1px solid var(--wp--preset--color--hairline);
		box-shadow: 0 -2px 14px rgba(31, 39, 64, 0.14);
	}

	body.sam-v2-page .sam-v2-stickybar p {
		margin: 0;
		font-size: var(--wp--preset--font-size--caption);
		line-height: var(--wp--custom--line-height--tight);
		color: var(--wp--preset--color--body-ink);
	}

	/* Thumbnail anchors the bar to the page you are actually sponsoring. */
	body.sam-v2-page .sam-v2-stickybar__thumb {
		flex: 0 0 auto;
		width: var(--wp--custom--alt--thumb);
		height: var(--wp--custom--alt--thumb);
		object-fit: cover;
		border-radius: var(--wp--custom--button--radius);
		display: block;
	}

	body.sam-v2-page .sam-v2-stickybar__label {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--12);
		min-width: 0;
	}

	body.sam-v2-page .sam-v2-stickybar__label p {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body.sam-v2-page .sam-v2-stickybar .sam-btn {
		flex: 0 0 auto;
		min-height: var(--wp--custom--tap--min);
	}

	/* Keep the sticky bar from covering the end of the footer. */
	body.sam-v2-page .sam-footer__inner {
		padding-bottom: var(--wp--preset--spacing--80);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.sam-v2-page .sam-card,
	body.sam-v2-page .sam-gallery img {
		transition: none;
	}
	body.sam-v2-page .sam-card:hover {
		transform: none;
	}
}

/* ---------------------------------------------- 10. core-block markup -- */

/*
 * Bridges core-block output onto the v2 look for the v3 (client-editable)
 * pages — see the matching section in site.css. Additive only: the v2 page's
 * hand-written HTML keeps matching the original selectors above.
 */

body.sam-v2-page figure.sam-card__thumb,
body.sam-v2-page figure.sam-card__thumb img {
	border-radius: var(--wp--custom--button--radius);
}

/*
 * Core buttons inherit theme.json's accent background, which is the 2.02:1
 * combination this layer exists to correct — see the .sam-btn note above.
 */
body.sam-v2-page .wp-block-button__link {
	background-color: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--base);
}

body.sam-v2-page .sam-card .wp-block-button__link {
	font-weight: 600;
	min-height: var(--wp--custom--tap--min);
}

/* Hero CTAs: the modifier class sits on core's .wp-block-button wrapper. */
body.sam-v2-page .sam-btn--onhero .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--heading-ink);
	font-weight: 600;
}

body.sam-v2-page .sam-btn--ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--base);
	border: 1px solid rgba(255, 255, 255, 0.6);
}

body.sam-v2-page .sam-v2-stickybar .wp-block-button__link {
	min-height: var(--wp--custom--tap--min);
}