/* Offer card (cwp/offer-card): the price card on sales pages.
   Ivory card with a 4px brass top edge; on a dark band it keeps its own light colours and the
   Green button (the dark band's brass button would disappear against ivory). */
.block-offer-card {
	--cwp-text-color: var(--wp--preset--color--foreground);
	--wp--custom--color--foreground-alt: var(--wp--preset--color--black);
	--wp--custom--color--button-text: var(--wp--preset--color--white);
	--wp--custom--color--button-border: transparent;
	--wp--custom--color--button-bg: var(--wp--preset--color--green);
	--wp--custom--color--button-text-state: var(--wp--preset--color--white);
	--wp--custom--color--button-border-state: transparent;
	--wp--custom--color--button-bg-state: var(--wp--preset--color--green-dark);
	background: var(--wp--preset--color--background);
	border-top: 4px solid var(--wp--preset--color--quaternary);
	color: var(--wp--preset--color--foreground);
	padding: 36px;
	box-sizing: border-box;
}

.block-offer-card > * {
	margin: 0;
}

/* Program name: Fraunces, like the page headings. The name and the promise under it are centred
   and closed off with a brass hairline, so the head of the card reads as a title block above the
   list of what's included. */
.block-offer-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.15;
	text-align: center;
	color: var(--wp--preset--color--black);
}

.block-offer-card__subtitle {
	margin-top: 6px;
	font-size: 0.9375rem;
	line-height: 1.45;
	text-align: center;
}

/* The hairline sits under whichever of the two the card actually has */
.block-offer-card__title:not(:has(+ .block-offer-card__subtitle)),
.block-offer-card__subtitle {
	padding-bottom: 20px;
	border-bottom: 1px solid var(--wp--preset--color--quaternary);
}

/* What's included: a check mark, the item, and its value in Brass Dark on the right. Every
   other row is shaded linen, the same striping as the tables in posts (Table > Stripes). */
.block-offer-card .block-offer-card__items {
	list-style: none;
	/* The head of the card already has 20px under its rule; the first row adds its own padding */
	margin: 8px 0 0;
	padding: 0;
	font-size: 1rem;
	line-height: 1.45;
}

/* Each row the same height above and below its text, whatever the theme's list spacing */
.block-offer-card .block-offer-card__item {
	display: flex;
	/* Centred, not baseline: a row whose item wraps to two lines would otherwise hang its value
	   and its check mark off the first line */
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 12px;
}
.block-offer-card .block-offer-card__item:nth-child(odd) {
	background-color: var(--wp--preset--color--secondary);
}

.block-offer-card .block-offer-card__item::before {
	content: none;
}

/* Brass check, flush with the card's left edge; a wrapped line lines up with the text */
.block-offer-card__item-text {
	position: relative;
	padding-left: 26px;
}

.block-offer-card__item-text::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 16px;
	height: 16px;
	background: var(--wp--preset--color--quaternary);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.block-offer-card__item-value {
	flex: none;
	font-weight: 700;
	color: var(--wp--preset--color--brass-dark);
	white-space: nowrap;
}

/* "Total value $549" and the price on one centred line, both in Fraunces, sharing a baseline:
   the total struck through in Brass Dark, the price large in Ink. */
.block-offer-card__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 6px 14px;
	margin-top: 20px;
}

.block-offer-card__total {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--wp--preset--color--brass-dark);
}

.block-offer-card__price {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3rem;
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--black);
}

.block-offer-card__price-suffix {
	margin-left: 4px;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 1rem;
	font-weight: 600;
}

/* The button runs the full width of the card */
.block-offer-card__buttons {
	margin-top: 20px;
}

.block-offer-card__buttons .wp-block-button,
.block-offer-card__buttons .wp-block-button__link {
	display: flex;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
}

/* The card is ivory whatever band it sits on, so a link inside it keeps the light-background
   link colours instead of the band's, which would print it ivory on ivory. */
.block-offer-card {
	--wp--custom--color--link: var(--wp--preset--color--brass-dark);
	--wp--custom--color--link-hover: var(--wp--preset--color--brass-dark);
}

.block-offer-card__note {
	margin-top: 14px;
	text-align: center;
	font-size: 0.875rem;
}

/* A note that names a number of days reads as a mark rather than small print: the number
   stacked over its unit, then the rest of the promise in brass caps, all on one line and
   linking down to the Guarantee block. */
.block-offer-card__note--sealed {
	margin-top: 20px;
}
.block-offer-card__note-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	text-decoration: underline transparent;
	text-underline-offset: 4px;
	transition: text-decoration-color var(--wp--custom--transition--speed) ease;
}
/* The underline belongs under the words, not under the stacked number beside them, and only
   once someone reaches for it. */
.block-offer-card__note-link:is(:hover, :focus-visible) .block-offer-card__note-text {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--quaternary);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
.block-offer-card__seal {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
}
.block-offer-card__seal-number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1;
}
.block-offer-card__note-text {
	font-size: var(--wp--custom--caps--label);
	font-weight: 700;
	letter-spacing: var(--wp--custom--caps--tracking-label);
	text-transform: uppercase;
}
.block-offer-card__seal-unit {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Phones: less padding so each item gets the full width; slightly smaller type */
@media only screen and (max-width: 767px) {
	.block-offer-card {
		padding: 24px 18px;
	}

	.block-offer-card__items {
		font-size: 0.9375rem;
	}

	.block-offer-card .block-offer-card__item {
		gap: 12px;
		padding: 11px 10px;
	}

	.block-offer-card__item-value {
		font-size: 0.8125rem;
	}

	.block-offer-card__price {
		font-size: 2.5rem;
	}

	.block-offer-card__total {
		font-size: 1.25rem;
	}
}

/* The offer band pairs a picture with the card. The card's height comes from what is in it, so
   the picture is told to match rather than standing taller or shorter than the thing beside it.
   Needs the Columns block left on its default vertical alignment, so the two columns are the
   same height to begin with; picking Top or Middle on the Columns block turns this off. */
.wp-block-columns:has(> .wp-block-column > .block-offer-card) > .wp-block-column > .wp-block-image {
	height: 100%;
	margin-top: 0;
	margin-bottom: 0;
}

.wp-block-columns:has(> .wp-block-column > .block-offer-card) > .wp-block-column > .wp-block-image img {
	height: 100%;
	object-fit: cover;
}

/* ...and the card fills its own column, so the two boxes are the same height whichever of them
   is the taller. Its contents sit in the middle of whatever height that turns out to be. */
.wp-block-columns:has(> .wp-block-column > .block-offer-card) > .wp-block-column > .block-offer-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}