/**
 * Shared Page Header Component
 *
 * Used by: volunteer, donate, events pages.
 * (Issues uses .pjcs-issues-header; American Spirit uses .pjcs-spirit-header
 *  — both predate this shared component and have unique designs.)
 *
 * .pjcs-page-header                 — base: navy bg, centered
 * .pjcs-page-header--navy           — modifier (explicit; reserved for future variants)
 * .pjcs-page-header__stripe         — 6px red top bar
 * .pjcs-page-header__inner          — max-width 780px, centered
 * .pjcs-page-header__eyebrow        — DM Sans 10px uppercase red
 * .pjcs-page-header__heading        — Fraunces 64px white
 * .pjcs-page-header__subhead        — Libre Caslon Text italic 20px white 75% opacity
 */

/* =========================================================
   Base
   ========================================================= */

.pjcs-page-header {
	background-color: #273965; /* navy */
	position: relative;
	text-align: center;
	padding-block: 80px;
}

/* 6px red top stripe */
.pjcs-page-header__stripe {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 6px;
	background-color: #CF3223; /* red */
}

.pjcs-page-header__inner {
	max-width: 780px;
	margin-inline: auto;
	padding-inline: 32px;
}

/* Eyebrow */
.pjcs-page-header__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 */
}

/* H1 display title */
.pjcs-page-header__heading {
	margin: 0 0 24px;
	font-family: 'Fraunces', serif;
	font-size: 64px;
	font-weight: 400;
	line-height: 1.0;
	color: #ffffff;
}

/* Subhead — Libre Caslon Text italic, quieter */
.pjcs-page-header__subhead {
	margin: 0;
	font-family: 'Libre Caslon Text', serif;
	font-size: 20px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.4;
	color: rgba( 255, 255, 255, 0.70 );
}

/* =========================================================
   Responsive — Tablet ( ≤ 1024px )
   ========================================================= */

@media ( max-width: 1024px ) {
	.pjcs-page-header__heading {
		font-size: 52px;
	}
}

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

@media ( max-width: 768px ) {
	.pjcs-page-header {
		padding-block: 60px;
	}

	.pjcs-page-header__heading {
		font-size: 40px;
		margin-bottom: 16px;
	}

	.pjcs-page-header__subhead {
		font-size: 17px;
	}
}

/* =========================================================
   Responsive — Small mobile ( ≤ 480px )
   ========================================================= */

@media ( max-width: 480px ) {
	.pjcs-page-header__heading {
		font-size: 34px;
	}
}