:root {
	--endo-navy: #0A2559;
	--endo-navy-dark: #071A40;
	--endo-gold: #D9A03B;
	--endo-gold-dark: #B8811E;
	--endo-hero-max: 1400px;
	--endo-hero-ratio: 1400 / 450; /* matches the CrellySlider's native canvas size */
}

.endo-hero * { box-sizing: border-box; }

.endo-hero {
	position: relative;
	overflow: hidden;
	min-height: 560px;
	display: flex;
	align-items: center;
	background-color: transparent;
}

.endo-hero-bg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: var(--endo-hero-max);
	background-color: transparent;
	background-size: cover;
	background-position: center;
}

/* Above the tablet breakpoint: the section is HARD-locked to 450px
   (not min-height — a min-height let tall content push the section
   taller than the 450px image/slider box, exposing a solid navy strip
   above/below where nothing covered the extra space). At a fixed
   450px, .endo-hero's overflow:hidden clips anything that doesn't
   fit instead of growing the box, and the section's own background
   is transparent, so there's no colour block to see even if it did.
   The background image/slider itself keeps the base .endo-hero-bg
   sizing (top:0/bottom:0 — fills 100% of this fixed height, cropped
   to fill via background-size:cover / object-fit:cover), so it
   always reaches the full 450px regardless of viewport width, rather
   than scaling down below 450px on screens narrower than 1400px.
   Below 991px the hero switches to a stacked layout with the photo
   as a full-height backdrop instead, so none of this applies there —
   see the existing tablet breakpoint further down. */
@media (min-width: 992px) {
	.endo-hero--home {
		height: 450px;
		min-height: 0;
	}

	/* Inner-page banner gets the same 450px lock, matching the
	   endo-page-banner image size (PART B.1) and the home_slider
	   fallback pixel-for-pixel. */
	.endo-hero--page {
		height: 450px;
		min-height: 0;
	}
}

.endo-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(7, 26, 64, 0.92) 0%,
		rgba(7, 26, 64, 0.72) 38%,
		rgba(7, 26, 64, 0.32) 65%,
		rgba(7, 26, 64, 0.15) 100%
	);
}

.endo-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 1320px;
	margin: 0 auto;
	width: 100%;
	padding: 70px 24px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
}

/* ---- Left: eyebrow / headline / CTAs ---- */
.endo-hero-content {
	max-width: 620px;
	color: #fff;
}

.endo-hero-eyebrow {
	display: block;
	color: var(--endo-gold);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.endo-hero-title {
	font-size: 42px;
	line-height: 1.2;
	font-weight: 800;
	margin: 0 0 8px;
	color: #fff;
}

.endo-hero-since {
	font-size: 22px;
	font-weight: 700;
	color: var(--endo-gold);
	margin-bottom: 18px;
}

.endo-hero-desc {
	font-size: 15.5px;
	line-height: 1.7;
	color: #E5E9F2;
	max-width: 520px;
	margin: 0 0 30px;
}

.endo-hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.endo-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 24px;
	border-radius: 6px;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.endo-btn:active { transform: translateY(1px); }

.endo-btn-gold {
	background: var(--endo-gold);
	color: var(--endo-navy-dark);
	border: 1.5px solid var(--endo-gold);
}
.endo-btn-gold:hover {
	background: var(--endo-gold-dark);
	border-color: var(--endo-gold-dark);
}
.endo-btn-gold .dashicons {
	font-size: 17px;
	width: 17px;
	height: 17px;
}

.endo-btn-outline {
	background: transparent;
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
}
.endo-btn-outline:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
}

/* ---- Right: stats card ---- */
.endo-hero-stats {
	flex-shrink: 0;
	width: 300px;
	background: rgba(6, 20, 48, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	padding: 22px 24px;
	backdrop-filter: blur(2px);
}

.endo-hero-stats ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.endo-hero-stats li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.endo-hero-stats li:first-child { padding-top: 0; }
.endo-hero-stats li:last-child { border-bottom: 0; padding-bottom: 0; }

.endo-hero-stats .dashicons {
	color: var(--endo-gold);
	font-size: 24px;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.endo-hero-stat-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}
.endo-hero-stat-text strong {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
}
.endo-hero-stat-text span {
	color: #C7D0E0;
	font-size: 12.5px;
}

/* ---- Poster layer: hero-bg.jpg + overlay + content ----
   Matches .endo-hero-bg's own centred/1400px-capped box exactly —
   inset:0 alone would size this to the full-width .endo-hero section
   instead, so the overlay tint (and everything stacked on top of it:
   title, CTAs, stats card) would spill out past the boxed background
   image into the letterboxed margins on ultra-wide screens. */
.endo-hero-poster {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: var(--endo-hero-max);
	z-index: 2;
}

/* ===========================================================
   CRELLYSLIDER BACKGROUND (front page only)
   -----------------------------------------------------------
   CrellySlider renders its own wrapper + slide markup, which
   we stretch to fill .endo-hero-bg the same way the static
   background image does. If your CrellySlider version wraps
   slides in different class names, check the front-end HTML
   output and add matching selectors alongside these.

   Sits UNDER the poster layer (z-index 1) until the 10s timer
   in header.js adds .endo-hero--show-slider to the <section>,
   at which point the two crossfade — see further down.
   =========================================================== */
.endo-hero-bg-slider {
	z-index: 1;
	background: transparent;
}

/* Only the plugin's own inner wrapper/slides get forced to fill 100% of
   .endo-hero-bg-slider — that outer div's own position/size is already
   correct (centred, capped to 1400px, aspect-locked on desktop) via the
   .endo-hero-bg rules above, so it's deliberately left out of this list;
   including it here previously set left:0/right:0 via inset:0, which
   silently cancelled that centring. !important guards against
   CrellySlider applying its own inline width/height on these elements. */
.endo-hero-bg-slider > div,
.endo-hero-bg-slider .crellyslider,
.endo-hero-bg-slider .cs-slider {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

.endo-hero-bg-slider img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The reference design shows a clean, controls-free photo — hide CrellySlider's
   native arrows/dots/thumbs rather than letting them float over the hero content.
   Delete these rules if you'd rather keep visible slide navigation. */
.endo-hero-bg-slider .cs-arrow,
.endo-hero-bg-slider .cs-bullets,
.endo-hero-bg-slider .cs-thumbs {
	display: none;
}

/* ===========================================================
   POSTER → SLIDER CROSSFADE
   -----------------------------------------------------------
   Only applies when the hero actually has a slider
   (.endo-hero--has-slider — see endo_hero_markup() in
   functions.php). On load: poster (hero-bg.jpg + headline/
   CTAs/stats) is fully visible, slider is transparent and
   behind it. After 10s, header.js adds .endo-hero--show-slider
   and the two fade: poster disappears, slider takes over as
   the only thing visible — no text/CTAs/stats on top of it.
   =========================================================== */
.endo-hero--has-slider .endo-hero-poster {
	opacity: 1;
	transition: opacity 1.2s ease;
}
.endo-hero--has-slider .endo-hero-bg-slider {
	opacity: 0;
	transition: opacity 1.2s ease;
}
.endo-hero--has-slider.endo-hero--show-slider .endo-hero-poster {
	opacity: 0;
	pointer-events: none;
}
.endo-hero--has-slider.endo-hero--show-slider .endo-hero-bg-slider {
	opacity: 1;
}

/* ===========================================================
   INNER-PAGE BANNER VARIANT (endo-hero--page)
   -----------------------------------------------------------
   Same component, shorter and centred: page title only,
   background is the page's featured image (or the static
   fallback when no featured image is set).
   =========================================================== */

/* GeneratePress prints its own page title above the content
   (.entry-title) — PART A.7 in functions.php already turns that off
   on the front page (it duplicated the homepage's own "About Our
   Department" heading). On inner pages this hero banner shows
   get_the_title() itself as the corner title box, so GP's plain
   .entry-title above the content would just repeat it a second time
   right below the hero — hidden here instead of via the
   generate_show_title filter, since GP's title-area wrapper still
   contributes useful spacing/structure elsewhere. */
.entry-title {
	margin-bottom: 0;
	display: none;
}

/* Below 992px this collapses to a min-height instead (see the tablet
   breakpoint further down) — the fixed 450px only applies at desktop
   widths, in the media query above. */

/* Inner pages: poster and slider now both render in the markup as
   siblings (functions.php PART C1) instead of PHP picking only one —
   these rules are what actually decide which one shows. Desktop keeps
   the exact same either/or result as before (featured image wins if
   set, slider otherwise); the ≤991px block further down overrides
   this for mobile only, forcing the slider regardless. */
.endo-hero--page .endo-hero-bg-slider {
	display: none;
}
.endo-hero--page.endo-hero--has-page-slider:not(.endo-hero--has-featured-bg) .endo-hero-bg-slider {
	display: block;
}
.endo-hero--page.endo-hero--has-page-slider:not(.endo-hero--has-featured-bg) > .endo-hero-poster {
	display: none;
}

/* Inner-page banners show the photo/slider plain, with no dark tint —
   only the front-page hero (.endo-hero--home) keeps the overlay, since
   its headline/CTAs/stats need the contrast to stay readable. */
.endo-hero--page .endo-hero-overlay {
	display: none;
}

.endo-hero-inner--page {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	text-align: left;
	padding: 0 32px 32px;
}

.endo-hero-content--page {
	max-width: 620px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	animation: endo-hero-page-title-in .6s ease both;
}

/* Square-ish blue badge that sits over the bottom-left corner of the
   featured image / slider. Padding is intentionally close on all sides
   (rather than a full-width bar) so short titles read as a squarish
   box; long titles will widen it — a fixed 1:1 square would clip text,
   so this keeps the "box" look while staying legible for any title. */
.endo-hero-title-box {
	display: inline-block;
	max-width: 100%;
	background: var(--endo-navy);
	background: rgba(10, 37, 89, 0.88);
	border-radius: 4px;
	padding: 20px 26px;
}

.endo-hero-title--page {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	font-size: 34px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .2px;
	color: #fff;
}

.endo-hero-breadcrumb {
	margin-top: 8px;
}

.endo-hero-breadcrumb-icon {
	font-size: 15px;
	width: 15px;
	height: 15px;
	line-height: 1;
	color: #D7DEEC;
	vertical-align: -2px;
	margin-right: 3px;
}

.endo-hero-breadcrumb-inner {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 4px;
	font-size: 13px;
	letter-spacing: .2px;
	color: #D7DEEC;
}

.endo-hero-breadcrumb a {
	color: #D7DEEC;
	text-decoration: none;
	transition: color .15s ease;
}
.endo-hero-breadcrumb a:hover {
	color: var(--endo-gold);
	text-decoration: underline;
}

@keyframes endo-hero-page-title-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 560px) {
	.endo-hero--page { min-height: 200px; }
	.endo-hero-inner--page { padding: 0 16px 20px; }
	.endo-hero-title-box {
		padding: 14px 18px;
	}
	.endo-hero-title--page {
		font-size: 22px;
	}
	.endo-hero-breadcrumb-inner {
		font-size: 12px;
	}
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */

@media (max-width: 1199px) {
	.endo-hero-title { font-size: 36px; }
	.endo-hero-stats { width: 270px; }
}

/* ---- Tablets: stack stats card under the content ---- */
@media (max-width: 991px) {

	/* MOBILE HERO RULES (explicit product decision, not a fallback):
	     - Home page: static hero image ONLY. The 10s poster→slider
	       crossfade (endo-hero--has-slider) is gated to desktop-only
	       in header.js itself now (the timer never even starts below
	       992px) — this display:none is a belt-and-braces backstop
	       in case that JS check is ever removed.
	     - Inner pages: slider ONLY, always, regardless of whether the
	       page has a featured image set (overrides the desktop
	       either/or rules above). Sized to the slider's own native
	       1400×450 aspect ratio rather than a guessed min-height
	       pixel value, so the box can never end up taller than the
	       image actually renders — the exact mismatch that caused
	       the white gap this rule replaces. */
	.endo-hero--home .endo-hero-bg-slider {
		display: none !important;
	}
	.endo-hero--page.endo-hero--has-page-slider .endo-hero-bg-slider {
		display: block !important;
	}
	.endo-hero--page.endo-hero--has-page-slider > .endo-hero-poster {
		display: none !important;
	}
	.endo-hero--page.endo-hero--has-page-slider {
		aspect-ratio: 1400 / 450;
		height: auto;
		min-height: 0;
	}

	.endo-hero {
		min-height: 0;
	}
	.endo-hero--home {
		min-height: 380px;
	}
	.endo-hero--page {
		min-height: 260px;
	}
	.endo-hero-inner {
		flex-direction: column;
		padding: 50px 20px 40px;
	}
	.endo-hero-content { max-width: 100%; }
	.endo-hero-title { font-size: 32px; }
	.endo-hero-stats {
		width: 100%;
		max-width: 420px;
	}

	/* ---- Slider layer height fix ----
	   .endo-hero-bg-slider (the CrellySlider background — front-page
	   auto-crossfade AND the inner-page fallback slider both use this
	   same layer) normally inherits .endo-hero-bg's top:0/bottom:0
	   positioning. With NO explicit height, and a containing block
	   (.endo-hero) that only has a min-height (not a definite height),
	   that leaves the slider's own height undefined — browsers fall
	   back to sizing it from ITS OWN content instead (the plugin's
	   slide markup / native image size), which is what was blowing the
	   mobile hero up far taller than the poster/content ever was, and
	   pushing the News Ticker down with it. Anchoring to 'top' with an
	   explicit height (matching the poster's own min-height above,
	   so the two line up) fixes that without touching the poster/
	   content layer at all — it keeps its original min-height and can
	   still grow if its own content ever needs the room. */
	.endo-hero-bg-slider {
		top: 0;
		bottom: auto;
		height: 380px;
	}
	/* NOTE: no equivalent fixed-height override for
	   .endo-hero--page .endo-hero-bg-slider here — its box is sized by
	   aspect-ratio (see the mobile hero rules above), so the slider
	   layer just inherits the plain top:0/bottom:0 fill from
	   .endo-hero-bg and stretches to match that automatically. A fixed
	   height here would fight the aspect-ratio sizing and reintroduce
	   exactly the box/image height mismatch this was meant to fix. */
}

/* ---- Phones (portrait) ---- */
@media (max-width: 560px) {
	.endo-hero--home { min-height: 260px; }
	.endo-hero--home .endo-hero-bg-slider { height: 260px; }
	.endo-hero-inner { padding: 40px 16px 32px; }
	.endo-hero-title { font-size: 26px; }
	.endo-hero-since { font-size: 18px; }
	.endo-hero-desc { font-size: 14px; }
	.endo-btn {
		flex: 1 1 auto;
		justify-content: center;
		padding: 12px 16px;
		font-size: 13.5px;
	}
	.endo-hero-cta { width: 100%; }
	.endo-hero-stats {
		padding: 18px;
		max-width: 100%;
	}
	.endo-hero-stat-text strong { font-size: 16px; }
}

/* ---- Short-viewport landscape (phones, and small tablets that still
   fall under the 991px tablet breakpoint above) — same fixed-height
   approach, just shorter, so the hero doesn't eat the whole landscape
   viewport before the News Ticker and page content appear. Placed
   last so it wins over the portrait rules above on any width it
   matches, regardless of source order elsewhere in this file. ---- */
@media (max-width: 991px) and (orientation: landscape) and (max-height: 500px) {
	.endo-hero--home { min-height: 220px; }
	.endo-hero--page { min-height: 170px; }
	.endo-hero--home .endo-hero-bg-slider { height: 220px; }
	.endo-hero-inner {
		padding: 20px 24px;
	}
	.endo-hero-stats { display: none; }
}