/**
 * Hero — the one thing theme.json can't express: a responsive Cover overlay and
 * the fixed-width copy column.
 *
 * This sheet serves THREE heroes (all keyed to `.ab-hero`): the home hero (v5,
 * `.ab-hero--home` — headline + donation card), the About hero (`.ab-hero--about`)
 * and the Our-Work hero (`.ab-hero--ourwork`). The rules below the "Home hero
 * (v5)" banner are scoped to `.ab-hero--home` so the About/Our-Work heroes — which
 * still use the `.ab-hero__copy` layout — are untouched.
 *
 * About/Our-Work desktop uses a left-to-right light wash (set inline on the
 * block) so the headline sits on the light surface and the photo bleeds off the
 * right. On narrow screens that side-wash can't protect the text, so we switch to
 * a top-down wash. Loaded only on pages with the hero.
 */

/* The copy is a plain block capped to a readable column and left-aligned in the
   wide band, so its left edge lines up with the header. Its children fill it. */
.ab-hero__copy {
	max-width: 520px;
}

/* About hero (ab-hero--about): Figma copy column is 600px, and there's no stats
   strip beneath it, so drop the home hero's extra bottom padding and let the copy
   sit vertically centred in the 700px cover. */
.ab-hero.ab-hero--about {
	padding-bottom: 0 !important;
}
.ab-hero.ab-hero--about .ab-hero__copy {
	max-width: 600px;
}
/* Anchor the About hero photo to the top (Figma). Overrides the inline
   object-position the seed injects. Scoped to the About hero so Home is untouched. */
.ab-hero.ab-hero--about .wp-block-cover__image-background {
	object-position: 30% 0% !important;
}

/* Keep the two CTAs on one line, vertically centred (desktop). */
.ab-hero__copy .wp-block-buttons {
	flex-wrap: nowrap;
	align-items: center;
}

.ab-hero__copy .wp-block-button {
	flex: 0 0 auto;
}

.ab-hero__copy .ab-button-plain .wp-block-button__link {
	white-space: nowrap;
}

/* Default hero bottom padding for the About / Our-Work heroes (the home hero v5
   sets its own 150px band via .ab-hero--home below). */
.ab-hero {
	padding-bottom: 6rem !important;
}

@media (max-width: 781px) {
	/* Phones: copy spans the column; switch to a top-down wash and anchor the
	   text to the top so the photo and the sign read in the lower half. */
	.ab-hero__copy {
		max-width: 100%;
	}

	/* Phones are too narrow for both CTAs on one line — let them wrap. */
	.ab-hero__copy .wp-block-buttons {
		flex-wrap: wrap;
	}

	.ab-hero .wp-block-cover__background {
		background: linear-gradient(
			180deg,
			rgb(247, 248, 250) 0%,
			rgba(247, 248, 250, 0.94) 40%,
			rgba(247, 248, 250, 0.4) 72%,
			rgba(247, 248, 250, 0.12) 100%
		) !important;
	}

	.ab-hero {
		align-items: flex-start;
		min-height: 560px;
	}
}

/* ============================================================================
   Home hero (v5) — full-bleed photo, white headline + quick-donation card.
   All rules scoped to .ab-hero--home so the About / Our-Work heroes (which
   share .ab-hero and .ab-hero__copy) are unaffected.
   ========================================================================== */

/* Symmetric 150px band on desktop. Beats the shared `.ab-hero{padding-bottom:
   6rem!important}` (single-class) via the two-class selector. */
.ab-hero.ab-hero--home {
	padding-top: 88px !important;
	padding-bottom: 88px !important;
	align-items: center;
}

/* Left column: headline stacked over the donation card, left-aligned in the
   1200 band so its edge lines up with the header. */
.ab-hero--home .ab-hero__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 25px;
	max-width: 630px;
}

/* Fraunces headline, white, tight. Font size rides the fluid `display` preset
   (→ 64px on desktop). A soft shadow lifts it off the busiest part of the photo. */
.ab-hero--home .ab-hero__title {
	margin: 0;
	text-align: left;
	color: var(--wp--preset--color--ab-white);
	text-shadow: 0 1px 18px rgba(8, 20, 33, 0.45);
}

/* ---- Donation card ------------------------------------------------------- */
.ab-hero-donate,
.ab-hero-donate *,
.ab-hero-donate *::before,
.ab-hero-donate *::after {
	box-sizing: border-box;
}

.ab-hero-donate {
	width: 400px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 15px;
	background: var(--wp--preset--color--ab-white);
	border: 0.6px solid var(--wp--custom--neutral--300);
	border-radius: 4px;
	box-shadow: var(--wp--preset--shadow--raised);
	font-family: var(--wp--preset--font-family--sans);
}

/* Radios/checkbox: kept in the DOM for keyboard + labels, hidden visually. */
.ab-hero-donate__freq-input,
.ab-hero-donate__amt-input,
.ab-hero-donate__zakat-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Once / Monthly segmented toggle. */
.ab-hero-donate__freq {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 4px;
	background: var(--wp--custom--neutral--100);
	border-radius: 4px;
}

.ab-hero-donate__freq-opt {
	margin: 0;
	padding: 10px;
	text-align: center;
	border-radius: 4px;
	font: 400 15px/1 var(--wp--preset--font-family--sans);
	text-transform: capitalize;
	color: var(--wp--custom--neutral--900);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ab-hero-donate__freq-input:checked + .ab-hero-donate__freq-opt {
	background: var(--wp--custom--action--500);
	color: var(--wp--preset--color--ab-white);
}

.ab-hero-donate__freq-input:focus-visible + .ab-hero-donate__freq-opt {
	outline: 2px solid var(--wp--custom--action--500);
	outline-offset: 2px;
}

/* Amount grid. */
.ab-hero-donate__amounts {
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ab-hero-donate__label {
	padding: 0;
	font: 400 13px/1 var(--wp--preset--font-family--sans);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--custom--neutral--700);
}

.ab-hero-donate__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	align-items: stretch; /* tiles in a row share the featured tile's height */
}

.ab-hero-donate__amt {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 48px;
	padding: 13px 10px;
	border: 0.6px solid var(--wp--custom--neutral--300);
	border-radius: 4px;
	background: var(--wp--custom--neutral--50);
	color: var(--wp--custom--neutral--500);
	font: 400 15px/1 var(--wp--preset--font-family--sans);
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ab-hero-donate__amt span {
	font-size: 13px;
}

/* Featured $100 cell reads two lines ("per surgery" capitalised); the grid
   stretches the other tiles in its row to match. */
.ab-hero-donate__amt--featured span {
	text-transform: capitalize;
}

.ab-hero-donate__amt-input:checked + .ab-hero-donate__amt {
	background: var(--wp--custom--action--bright);
	border-color: var(--wp--custom--action--500);
	color: var(--wp--preset--color--ab-white);
	font-weight: 600;
}

.ab-hero-donate__amt-input:focus-visible + .ab-hero-donate__amt {
	outline: 2px solid var(--wp--custom--action--500);
	outline-offset: 2px;
}

.ab-hero-donate__other {
	grid-column: span 2;
	width: 100%;
	min-height: 48px;
	padding: 13px 10px;
	border: 0.6px solid var(--wp--custom--neutral--300);
	border-radius: 4px;
	background: var(--wp--custom--neutral--50);
	color: var(--wp--custom--neutral--900);
	font: 400 15px/1 var(--wp--preset--font-family--sans);
}

.ab-hero-donate__other::placeholder {
	color: var(--wp--custom--neutral--500);
	opacity: 1;
}

.ab-hero-donate__other:focus {
	outline: 0;
	border-color: var(--wp--custom--action--500);
	box-shadow: 0 0 0 2px rgba(245, 148, 35, 0.25);
}

/* Zakat-eligible toggle. */
.ab-hero-donate__zakat {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	background: var(--wp--custom--emerald--tint);
	border: 1px solid var(--wp--custom--emerald--base);
	border-radius: 4px;
	color: var(--wp--custom--emerald--base);
	font: 400 15px/1.2 var(--wp--preset--font-family--sans);
	text-transform: capitalize;
	cursor: pointer;
}

.ab-hero-donate__zakat-box {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: var(--wp--preset--color--ab-white);
	border: 1.5px solid var(--wp--custom--emerald--base);
	border-radius: 4px;
	color: var(--wp--preset--color--ab-white);
}

.ab-hero-donate__zakat-box svg {
	opacity: 0;
	transition: opacity 0.12s ease;
}

.ab-hero-donate__zakat-input:checked ~ .ab-hero-donate__zakat-box {
	background: var(--wp--custom--emerald--base);
}

.ab-hero-donate__zakat-input:checked ~ .ab-hero-donate__zakat-box svg {
	opacity: 1;
}

.ab-hero-donate__zakat-input:focus-visible ~ .ab-hero-donate__zakat-box {
	outline: 2px solid var(--wp--custom--emerald--base);
	outline-offset: 2px;
}

/* Primary CTA. */
.ab-hero-donate__submit {
	width: 100%;
	padding: 14px 10px;
	border: 0;
	border-radius: 4px;
	background: var(--wp--custom--action--bright);
	color: var(--wp--preset--color--ab-white);
	font: 500 16px/1 var(--wp--preset--font-family--sans);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ab-hero-donate__submit:hover,
.ab-hero-donate__submit:focus-visible {
	background: var(--wp--preset--color--ab-orange-600);
	outline: none;
}

/* Desktop: restore the full 150px band. */
@media (min-width: 782px) {
	.ab-hero.ab-hero--home {
		padding-top: 150px !important;
		padding-bottom: 150px !important;
	}
}

/* Phones: the shared media query above swaps in a LIGHT top-down wash and would
   make the white headline unreadable, so re-assert a dark wash for the home
   hero. Appended after the shared rule, so at equal specificity this wins. */
@media (max-width: 781px) {
	.ab-hero--home .wp-block-cover__background {
		background: linear-gradient(
			180deg,
			rgba(8, 20, 33, 0.88) 0%,
			rgba(8, 20, 33, 0.72) 45%,
			rgba(8, 20, 33, 0.5) 100%
		) !important;
	}

	.ab-hero.ab-hero--home {
		align-items: flex-start;
	}

	.ab-hero--home .ab-hero__col {
		max-width: 100%;
	}
}