/**
 * Donate Page
 *
 * Covers:
 *   .pjcs-donate-body         — centered cream section with donation pitch + CTA
 *   .pjcs-donate-tier         — quick-select amount chips
 *   .pjcs-btn--large          — oversized button variant (donate only)
 *
 * Note: page header uses shared .pjcs-page-header (page-header.css).
 * .pjcs-btn base + .pjcs-btn--red from hero.css.
 */

/* =========================================================
   Donate Body
   Cream background, centered single column.
   ========================================================= */

.pjcs-donate-body {
	background-color: #FAF2F0; /* cream */
	padding-block: 96px;
}

.pjcs-donate-body__inner {
	max-width: 680px;
	margin-inline: auto;
	padding-inline: 32px;
	text-align: center;
}

/* Eyebrow */
.pjcs-donate-body__eyebrow {
	margin: 0 0 20px;
	font-family: 'DM Sans', sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #CF3223; /* red */
}

/* Heading */
.pjcs-donate-body__heading {
	margin: 0 0 28px;
	font-family: 'Fraunces', serif;
	font-size: 48px;
	font-weight: 400;
	line-height: 1.05;
	color: #273965; /* navy */
}

/* Red rule */
.pjcs-donate-body__rule {
	width: 48px;
	height: 3px;
	background-color: #CF3223; /* red */
	margin: 0 auto 40px;
}

/* Body paragraphs */
.pjcs-donate-body__body {
	margin: 0 0 24px;
	font-family: 'Libre Caslon Text', serif;
	font-size: 18px;
	line-height: 1.75;
	color: #2E2820; /* charcoal */
}

.pjcs-donate-body__body:last-of-type {
	margin-bottom: 0;
}

/* =========================================================
   Donation Tiers (quick-select amount chips)
   ========================================================= */

.pjcs-donate-body__tiers {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 48px 0 40px;
}

.pjcs-donate-tier {
	display: inline-block;
	padding: 10px 24px;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #273965; /* navy */
	background-color: #ffffff;
	border: 2px solid rgba( 39, 57, 101, 0.20 );
	border-radius: 2px;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.pjcs-donate-tier:hover,
.pjcs-donate-tier:focus {
	border-color: #CF3223; /* red */
	color: #CF3223;
	background-color: #fff;
	outline: none;
}

.pjcs-donate-tier:focus-visible {
	outline: 2px solid #CF3223;
	outline-offset: 2px;
}

/* Disabled tier — non-interactive, greyed out */
.pjcs-donate-tier--disabled,
.pjcs-donate-tier--disabled.pjcs-donate-tier--featured {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
	user-select: none;
}

/* Featured tier — highlighted */
.pjcs-donate-tier--featured {
	border-color: #CF3223; /* red */
	background-color: #CF3223;
	color: #ffffff;
}

.pjcs-donate-tier--featured:hover,
.pjcs-donate-tier--featured:focus {
	background-color: #b02b1e;
	border-color: #b02b1e;
	color: #ffffff;
}

/* =========================================================
   CTA block
   ========================================================= */

.pjcs-donate-body__cta {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

/* Disabled button — non-interactive, greyed out */
.pjcs-btn--disabled {
	opacity: 0.40;
	cursor: not-allowed;
	pointer-events: none;
	user-select: none;
	filter: saturate( 0 );
}

/* Large button variant */
.pjcs-btn--large {
	padding: 18px 48px;
	font-size: 14px;
	letter-spacing: 0.12em;
}

/* Secure note under CTA */
.pjcs-donate-body__secure-note {
	margin: 0;
	font-family: 'DM Sans', sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.08em;
	color: rgba( 46, 40, 32, 0.50 ); /* charcoal 50% */
	display: flex;
	align-items: center;
	gap: 6px;
}

.pjcs-donate-body__lock {
	flex-shrink: 0;
	color: rgba( 46, 40, 32, 0.40 );
}

/* =========================================================
   Compliance line
   ========================================================= */

.pjcs-donate-body__compliance {
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid rgba( 46, 40, 32, 0.12 );
	font-family: 'DM Sans', sans-serif;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.7;
	color: rgba( 46, 40, 32, 0.45 );
}

/* =========================================================
   Responsive — Mobile ( ≤ 768px )
   ========================================================= */

@media ( max-width: 768px ) {
	.pjcs-donate-body {
		padding-block: 64px;
	}

	.pjcs-donate-body__heading {
		font-size: 36px;
	}

	.pjcs-donate-body__body {
		font-size: 16px;
	}

	.pjcs-donate-tier {
		padding: 10px 18px;
		font-size: 13px;
	}

	.pjcs-btn--large {
		padding: 16px 32px;
		width: 100%;
		text-align: center;
	}
}