/* =============================================================
   Custom Hero Breadcrumb — hero-breadcrumb.css  v2.2.0
   Hero section only; fixed header lives in site-nav.css.
   ============================================================= */

/* ── Reset ── */
.mcusa-hero-crumb *, .mcusa-hero-crumb *::before, .mcusa-hero-crumb *::after {
	box-sizing: border-box;
}

/* ── Section wrapper ── */
.mcusa-hero-crumb {
	position: relative;
	clear: both;
	width: 100%;
	min-height: 80vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	margin: 0 !important;
}

/* Compact variant for custom templates that carry their own intro */
.mcusa-hero-crumb--compact {
	min-height: 55vh;
}

/* Breadcrumb-only — page intro carries the H1 */
.mcusa-hero-crumb--breadcrumb-only {
	min-height: clamp(220px, 32vh, 360px);
	align-items: flex-end;
}
.mcusa-hero-crumb--breadcrumb-only .mcusa-hero-crumb__inner {
	padding-top: clamp(5rem, 10vw, 7rem);
	padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* ── Dark gradient overlay — heaviest at top for nav readability ── */
.mcusa-hero-crumb__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(10,5,2,.88)    0%,
		rgba(26,15,8,.62)  35%,
		rgba(131,77,34,.48) 65%,
		rgba(26,15,8,.78) 100%
	);
	z-index: 1;
}

/* Subtle Mithila dot pattern on overlay */
.mcusa-hero-crumb__overlay::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(253,246,227,.07) 1px, transparent 1px);
	background-size: 20px 20px;
	pointer-events: none;
}

/* ── Inner container ── */
.mcusa-hero-crumb__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	/* Top padding clears the fixed site header (see site-nav.css) */
	padding: calc(var(--mcusa-header-height, 76px) + clamp(2rem, 6vw, 4rem)) clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 6vw, 4.5rem);
	text-align: center;
}

/* ── Decorative kicker line ── */
.mcusa-hero-crumb__kicker {
	display: block;
	width: 40px;
	height: 2px;
	background: rgba(253,246,227,.5);
	margin: 0 auto 1rem;
	border-radius: 2px;
}

/* ── Page title — standard WP pages ── */
.mcusa-hero-crumb h1,
.mcusa-hero-crumb .mcusa-hero-crumb__title {
	font-family: var(--wdtFontTypo_Alt, 'Oswald', sans-serif) !important;
	font-size: clamp(2rem, 5vw, 3.4rem) !important;
	font-weight: 700 !important;
	color: #fdf6e3 !important;
	margin: 0 0 1.1rem !important;
	text-transform: none !important;
	line-height: 1.15 !important;
	word-break: normal !important;
	text-shadow: 0 2px 14px rgba(10,5,2,.55);
}

/* ── Page label — custom templates (avoids duplicate H1) ── */
.mcusa-hero-crumb__label {
	font-family: var(--wdtFontTypo_Alt, 'Oswald', sans-serif) !important;
	font-size: clamp(1.6rem, 4vw, 2.8rem) !important;
	font-weight: 700 !important;
	color: #fdf6e3 !important;
	margin: 0 0 1rem !important;
	text-transform: none !important;
	line-height: 1.15 !important;
	text-shadow: 0 2px 14px rgba(10,5,2,.55);
}

/* ── Breadcrumb trail ── */
.mcusa-hero-crumb .breadcrumb {
	float: none !important;
	width: auto !important;
	clear: none !important;
	display: inline-flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	color: rgba(253,246,227,.65) !important;
	font-size: .88rem !important;
	font-weight: 500 !important;
}

.mcusa-hero-crumb .breadcrumb a {
	color: rgba(253,246,227,.85) !important;
	transition: color .2s !important;
}

.mcusa-hero-crumb .breadcrumb a:hover {
	color: #fdf6e3 !important;
	text-decoration: none !important;
}

.mcusa-hero-crumb .breadcrumb .current {
	color: rgba(253,246,227,.55) !important;
}

/* Delimiter */
.mcusa-hero-crumb .breadcrumb-default-delimiter {
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 10px !important;
	padding: 0 !important;
}

.mcusa-hero-crumb .breadcrumb-default-delimiter::before {
	background-color: rgba(253,246,227,.4) !important;
	height: 12px !important;
}

/* ── Bottom accent stripe ── */
.mcusa-hero-crumb::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, #834d22 30%, rgba(131,77,34,.6) 70%, transparent);
}

/* ── Leadership detail: show the full portrait, never crop ──
   The global hero uses background-size:cover, which crops tall
   artist photos. On single Leadership pages, fit the whole image
   inside the hero regardless of section height. Dark fill matches
   the overlay so the side bands read as an intentional frame. */
body.single-mae_leadership .mcusa-hero-crumb {
	background-size: contain;
	background-color: #1a0f08;
}

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 991px) {
	.mcusa-hero-crumb          { min-height: 65vh; }
	.mcusa-hero-crumb--compact { min-height: 48vh; }

	.mcusa-hero-crumb__inner {
		padding-top: clamp(5rem, 10vw, 7rem);
	}
}

@media (max-width: 767px) {
	.mcusa-hero-crumb          { min-height: 60vh; }
	.mcusa-hero-crumb--compact { min-height: 42vh; }

	.mcusa-hero-crumb h1,
	.mcusa-hero-crumb .mcusa-hero-crumb__title {
		font-size: clamp(1.5rem, 6vw, 2rem) !important;
	}

	.mcusa-hero-crumb__label {
		font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
	}

	.mcusa-hero-crumb .breadcrumb {
		font-size: .8rem !important;
	}
}