/**
 * Donate — hero, then the Gravity Forms donation form beside a panel of
 * suggested amounts, closing on mail-a-check / Venmo / Zelle and why-donate.
 */

.rth-donate {
	flex: 1;
	min-width: 0;
}

.donate {
	width: min(1486px, 100% - 40px);
	margin-inline: auto;
	padding-block: var(--space-xl) var(--space-2xl);
}

.donate__title {
	margin-bottom: clamp(2.5rem, 5vw, 5.5rem);
}

/* Hero */
.donate__hero {
	margin: 0 0 var(--space-2xl);
}

.donate__hero-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 30px;
}

.donate__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 460px;
	gap: var(--space-2xl); /* 96px between the form and the amounts panel */
	align-items: start;
}

/* Gravity Forms overrides. */
.donate .gform_wrapper .gfield_label {
	margin-bottom: var(--space-xs);
	font-family: var(--font-display); /* Lexend */
	font-weight: 500;
	font-size: calc(1.8125rem * var(--fs-scale)); /* 29px */
	line-height: normal;
	letter-spacing: 0;
	color: black;
}

.donate .gform_wrapper input[type='text'],
.donate .gform_wrapper textarea {
	padding: 0.75rem 1rem;
	font-family: var(--font-display); /* Lexend */
	font-weight: 200;
	font-size: calc(2.125rem * var(--fs-scale)); /* 34px */
	line-height: normal;
	border-radius: 10px;
}

.donate .gform_wrapper .ginput_container_product_price {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: white;
	border: 1px solid var(--color-field-border);
	border-radius: 10px;
}

.donate .gform_wrapper .ginput_container_product_price:focus-within {
	border-color: var(--color-olive);
}

.donate .gform_wrapper .gfield_error .ginput_container_product_price {
	border-color: var(--color-brick);
}

.donate .gform_wrapper .ginput_container_product_price::before {
	content: 'USD |';
	flex: none;
	font-family: var(--font-display); /* Lexend */
	font-weight: 200;
	font-size: calc(2.125rem * var(--fs-scale)); /* 34px */
	line-height: normal;
	color: var(--color-placeholder);
}

.donate .gform_wrapper .ginput_container_product_price .ginput_amount {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.donate .gform_wrapper .ginput_container_product_price .ginput_amount:focus {
	outline: none;
}

.donate .gform_wrapper input::placeholder,
.donate .gform_wrapper textarea::placeholder {
	font-family: var(--font-display); /* Lexend */
	font-weight: 200;
	font-size: calc(2.125rem * var(--fs-scale)); /* 34px */
}

.donate .gform_wrapper .gfield_checkbox .gchoice,
.donate .gform_wrapper .gfield_radio .gchoice {
	gap: var(--space-sm);
}

.donate .gform_wrapper .gfield_checkbox label,
.donate .gform_wrapper .gfield_radio label {
	font-family: var(--font-display); /* Lexend */
	font-weight: 400;
	font-size: calc(1.8125rem * var(--fs-scale)); /* 29px */
	line-height: normal;
	letter-spacing: 0;
	color: black;
}

/* Fee and total */
.donate .gform_wrapper .gfield--input-type-calculation .gfield_label,
.donate .gform_wrapper .gfield--type-total .gfield_label {
	font-weight: 300;
	font-size: calc(1.5rem * var(--fs-scale)); /* 24px */
}

.donate .gform_wrapper .ginput_product_price_label {
	display: none;
}

.donate .gform_wrapper .ginput_product_price {
	font-family: var(--font-display); /* Lexend */
	font-weight: 300;
	font-size: calc(1.5rem * var(--fs-scale)); /* 24px */
	line-height: 1.417; /* 34 / 24 */
	color: black;
}

.donate .gform_wrapper.gform-theme .gfield--type-total input.ginput_total {
	padding: 0; /* Otherwise the input's own padding indents it past the fee line. */
	font-family: var(--font-display); /* Lexend */
	font-weight: 500;
	font-size: calc(1.8125rem * var(--fs-scale)); /* 29px */
	line-height: normal;
	color: black;
}

/* Validation messages and field hints, e.g. the donation minimum. */
.donate .gform_wrapper .gform_validation_errors,
.donate .gform_wrapper .gfield_validation_message,
.donate .gform_wrapper .gfield_description {
	font-family: var(--font-display); /* Lexend */
	font-weight: 300;
	font-size: calc(1.125rem * var(--fs-scale)); /* 18px */
	line-height: 1.4;
}

/* Gravity Forms gives validation messages the description class too. */
.donate .gform_wrapper .gfield_description:not(.gfield_validation_message) {
	color: var(--color-placeholder);
}

/* Hide second hint since it is redundant. */
.donate .gform_wrapper .gfield--input-type-price .gfield_validation_message {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
}

/* Suggested amounts */
.donate__amounts {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin: 0;
	padding: var(--space-sm);
	list-style: none;
	background: var(--color-mint);
	border-radius: 30px;
}

.donate__amount {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-md);
	align-items: center;
	padding: var(--space-sm) var(--space-md);
	background: white;
	border-radius: 30px;
}

.donate__amount-value,
.donate__amount-covers {
	font-family: var(--font-display); /* Lexend */
	font-weight: 300;
	font-size: calc(1.5rem * var(--fs-scale)); /* 24px */
	line-height: 1.417; /* 34 / 24 */
	letter-spacing: 0;
	color: black;
}

/* Mail a check / Venmo / Zelle */
.donate__ways {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xl) var(--space-2xl);
	margin-top: var(--space-2xl);
}

.donate__ways-col {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	min-width: 0;
}

.donate__way {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	min-width: 0;
}

.donate__way-icon {
	flex: none;
	width: 43px;
	height: 34px;
	margin-top: 7px;
}

.donate__way-icon path {
	stroke: black;
}

.donate__way-heading {
	margin: 0 0 var(--space-xs);
	font-family: var(--font-display); /* Lexend */
	font-weight: 500;
	font-size: calc(1.8125rem * var(--fs-scale)); /* 29px */
	line-height: normal;
	letter-spacing: 0;
	color: black;
}

.donate__way-text {
	margin: 0;
	overflow-wrap: anywhere; /* The Zelle email is one unbreakable word on phones. */
	font-family: var(--font-display); /* Lexend */
	font-weight: 300;
	font-size: calc(1.625rem * var(--fs-scale)); /* 26px */
	line-height: normal;
	letter-spacing: 0;
	color: black;
}

.donate__way-text + .donate__way-text {
	margin-top: var(--space-xs);
}

/* Why donate */
.donate__why {
	margin-top: var(--space-2xl);
	padding: var(--space-xs);
	background: var(--color-mint);
	border: 1px solid black;
	border-radius: 30px;
}

.donate__why-card {
	padding: var(--space-md) var(--space-lg);
	background: white;
	border: 1px solid black;
	border-radius: 30px;
}

.donate__why-heading {
	margin: 0 0 var(--space-xs);
	font-family: var(--font-display); /* Lexend */
	font-weight: 500;
	font-size: calc(1.8125rem * var(--fs-scale)); /* 29px */
	line-height: 1.517; /* 44 / 29 */
	letter-spacing: 0;
	color: black;
}

.donate__why-text p {
	margin: 0;
	font-family: var(--font-display); /* Lexend */
	font-weight: 300;
	font-size: calc(1.3125rem * var(--fs-scale)); /* 21px */
	line-height: 2.095; /* 44 / 21 */
	letter-spacing: 0;
	color: black;
}

@media (max-width: 1000px) {
	.donate__body {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
	}
}