/**
 * Homepage — Volunteer CTA
 *
 * Full-width red section. Centered single column, max-width 680px.
 * Two buttons: white fill (Volunteer) + ghost white border (Donate).
 *
 * Note: .pjcs-btn base + .pjcs-btn--ghost-white defined in hero.css and
 * spirit-teaser.css respectively (both enqueued globally).
 * This file adds .pjcs-btn--white (white fill, navy text) used here and
 * on the About page closing CTA.
 */

/* =========================================================
   Section shell
   ========================================================= */

.pjcs-volunteer-cta {
	background-color: #CF3223; /* red */
	padding-block: 96px;
	text-align: center;
}

.pjcs-volunteer-cta__inner {
	max-width: 680px;
	margin-inline: auto;
	padding-inline: 32px;
}

/* =========================================================
   Heading
   ========================================================= */

.pjcs-volunteer-cta__heading {
	margin: 0 0 20px;
	font-family: 'Fraunces', serif;
	font-size: 48px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.1;
	color: #ffffff;
}

/* =========================================================
   Body
   ========================================================= */

.pjcs-volunteer-cta__body {
	margin: 0 0 40px;
	font-family: 'Libre Caslon Text', serif;
	font-size: 18px;
	font-style: italic;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.85 );
}

/* =========================================================
   Buttons row
   ========================================================= */

.pjcs-volunteer-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	align-items: center;
}

/* White fill button — Volunteer */
.pjcs-btn--white {
	background-color: #ffffff;
	color: #273965; /* navy text */
	border-color: #ffffff;
}

.pjcs-btn--white:hover,
.pjcs-btn--white:focus {
	filter: brightness( 0.94 );
	color: #273965;
	text-decoration: none;
}

.pjcs-btn--white:focus-visible {
	outline: 2px solid #273965;
	outline-offset: 3px;
}

/* =========================================================
   Responsive
   ========================================================= */

@media ( max-width: 768px ) {

	.pjcs-volunteer-cta {
		padding-block: 72px;
	}

	.pjcs-volunteer-cta__heading {
		font-size: 36px;
	}

	.pjcs-volunteer-cta__body {
		font-size: 16px;
	}
}

/* Small mobile — stack buttons */
@media ( max-width: 480px ) {

	.pjcs-volunteer-cta__buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.pjcs-volunteer-cta__buttons .pjcs-btn {
		text-align: center;
	}
}