/*
 * trbc/page-header — "Direction B, immersive"
 *
 * The photograph runs full bleed and dissolves into the page ground rather
 * than sitting under a scrim. Two things that were learned the hard way and
 * must not be undone:
 *
 *  1. The fade's last stop is exactly --trbc-ph-ground. If it resolves to
 *     anything else, a seam shows where the band ends.
 *  2. It closes by 84% of the band, not 96%. The type block starts around
 *     two-thirds down, and an unhurried fade left the heading sitting on a
 *     quarter of live photograph.
 *
 * Fading a warm image UP into a cool near-white ground desaturates the
 * midtones into grey fog. That is why the ground here is a warm-leaning
 * off-white rather than a blue-grey, and why the scrim does almost nothing —
 * contrast is the type block's job, not the overlay's.
 */

.trbc-page-header {
	/* Local aliases onto css/tokens.css. The component keeps its own names so
	   a Divi background colour can override just this header, but the values
	   are no longer decided here. --trbc-ph-ground stays a hair warmer than
	   --trbc-ground: the two must match exactly or a seam shows where the fade
	   ends. Warm, not blue-grey — fading a warm photograph up into a cool
	   near-white turns the midtones to fog (see the note above). */
	--trbc-ph-ground: var(--trbc-ground-warm);
	--trbc-ph-ink: var(--trbc-ink);
	--trbc-ph-soft: var(--trbc-ink-soft);
	--trbc-ph-line: var(--trbc-line);
	--trbc-ph-brand: var(--trbc-brand);
	--trbc-ph-brand-ink: var(--trbc-brand-ink);
	--trbc-ph-band: 360px;
	--trbc-ph-lockup: 300px;
	/* Tucks the pinned rail under the fixed site header. The bar no longer
	   shrinks on scroll, so this is simply its height: 80px desktop, 64px
	   below the 1200px desktop breakpoint. --mn-admin-offset is what nav-modern.js publishes for the
	   WP admin bar, and CSS re-evaluates it as the bar slides away on mobile —
	   which is why `top` must live here and not be cached in JS. */
	--trbc-ph-sticky-top: calc(var(--mn-admin-offset, 0px) + 80px);
	/* Inner measure. The photograph goes edge to edge; the words must not. */
	--trbc-ph-measure: var(--trbc-measure);
	--trbc-ph-face: var(--trbc-face);

	position: relative;
	background: var(--trbc-ph-ground);
	font-family: var(--trbc-ph-face);
	color: var(--trbc-ph-ink);
	/* NOT overflow:hidden — that would kill position:sticky on the menu rail.
	   The photo band clips itself instead, on .trbc-ph__stage. */
}

/* Full bleed by default.
   Divi puts modules inside a max-width row, which boxed the photograph into a
   floating rectangle with hard left/right edges — the dissolve only reads when
   nothing sits beside it. The margin trick escapes whatever container it lands
   in, so an editor does not have to configure section padding to get it.
   100vw includes the scrollbar on Windows and would cause a horizontal scroll;
   nav-modern.js already publishes its measured width as --mn-scrollbar. */
.trbc-ph--full {
	width: calc(100vw - var(--mn-scrollbar, 0px));
	margin-left: calc(50% - 50vw + (var(--mn-scrollbar, 0px) / 2));
	margin-right: calc(50% - 50vw + (var(--mn-scrollbar, 0px) / 2));
	max-width: none;
	border-radius: 0;
}

/* Contained keeps the old banner treatment: 1200px, rounded bottom corners. */
.trbc-ph--contained {
	max-width: 1200px;
	margin-inline: auto;
	overflow: hidden;
}

@media (min-width: 1200px) {
	.trbc-ph--contained {
		border-radius: 0 0 18px 18px;
	}
}

/* ---------- section menu rail ----------
   Sits at the foot of the header and pins below the fixed site header, so the
   section stays navigable once the reader is deep in the page.

   NOT position:sticky. Sticky can only stick inside its own parent's box, and
   this rail's parent is the header component — so sticky released it the
   instant the header scrolled past. js/page-header.js swaps it to fixed once
   a sentinel at its natural position scrolls under the site header. */
.trbc-ph__menu {
	position: relative;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: var(--trbc-space-1);
	/* Centred. As a segmented control the group is an object in its own right,
	   not a row of links that should hang off the content column's left edge —
	   an object reads as deliberate in the middle and as leftover at the side. */
	justify-content: center;
	padding-block: var(--trbc-space-2);
	padding-inline: var(--trbc-space-4);
	min-height: 60px;
	/* An opaque shelf, not frosted glass. Translucency was doing nothing here
	   except making the bar hard to read, and backdrop-filter is silently
	   dropped whenever an ancestor carries a transform. */
	background: var(--trbc-surface);
	border-top: 1px solid var(--trbc-ph-line);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

/* ---------- the segmented control ----------
   Unpinned, a row of bare links read as four grey words on a flat ground —
   nothing said "these are the pages in this section". A bordered, tinted
   group with a filled current item reads as operable while standing still,
   which is the entire job of section navigation. */
.trbc-ph__menu-group {
	display: inline-flex;
	flex: 0 0 auto;
	/* No gap — the segments meet, and a hairline between them does the
	   separating. Gap alone left them reading as four loose words again. */
	gap: 0;
	padding: 3px;
	background: var(--trbc-ground);
	border: 1px solid var(--trbc-line);
	border-radius: calc(var(--trbc-radius-sm) + 3px);
}

.trbc-ph__menu::-webkit-scrollbar {
	display: none;
}

/* Pinned state, applied by js/page-header.js. Left/right are pinned to the
   viewport rather than the component so the rail keeps its full-bleed width
   even when the header itself is the contained variant. */
/* Lift the whole section while the rail is pinned.
 *
 * The rail's own z-index is useless here, and it took a hit-test to see why:
 * every Divi section is `position: relative; z-index: auto`, so they paint in
 * document order as siblings, and a fixed child paints with its section. The
 * rail was therefore covered by every section BELOW it on the page no matter
 * how high its own z-index went — 999 made no difference; raising the parent
 * section to 50 fixed it instantly.
 *
 * Scoped to the pinned state so the section only outranks its siblings while
 * the rail is actually floating, and drops back the moment it returns to flow.
 */
.et_pb_section:has(.trbc-ph__menu.is-pinned) {
	z-index: 40;
}

/* Pinned it is OPAQUE.
 *
 * In the flow the rail has the header's own ground behind it, so a translucent
 * fill costs nothing. Once it detaches it is floating over live body copy, and
 * at 0.82 alpha the paragraph underneath reads straight through it — worse
 * still because backdrop-filter is silently dropped whenever any ancestor
 * carries a transform, filter or will-change, which Divi's animation classes
 * routinely do. Frosted glass that fails open is just a transparent bar, so
 * the pinned state does not rely on it. */
.trbc-ph__menu.is-pinned {
	position: fixed;
	top: var(--trbc-ph-sticky-top);
	left: 0;
	right: var(--mn-scrollbar, 0px);
	background: var(--trbc-surface);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-top-color: transparent;
	border-bottom: 1px solid var(--trbc-line);
	box-shadow: var(--trbc-shadow-1);
}

/* The footer handoff must not unpin the rail because removing and restoring
   its spacer changes document height at the observer boundary. Keep the rail
   structurally pinned and suppress only its paint and hit testing. */
.trbc-ph__menu.is-pinned.is-footer-suppressed {
	visibility: hidden;
	pointer-events: none;
}

/* Holds the rail's height in the flow while it is pinned, so the page does not
   jump the moment it detaches. Height is set in JS from the measured rail. */
.trbc-ph__menu-spacer {
	height: 0;
}

.trbc-ph__menu-sentinel {
	height: 1px;
	margin-bottom: -1px;
	pointer-events: none;
}

/* No JS, no pinning — the rail stays put and everything still works. */
.no-js .trbc-ph__menu.is-pinned {
	position: relative;
}

.trbc-ph__menu-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	/* Every link is a complete target; the surrounding group does not enlarge
	   its hit area. Hold the platform-standard 44px on touch and pointer input. */
	min-height: var(--trbc-tap);
	padding: 0 var(--trbc-space-4);
	border-radius: var(--trbc-radius-sm);
	font-size: var(--trbc-text-base);
	font-weight: var(--trbc-weight-semibold);
	line-height: 1;
	white-space: nowrap;
	color: var(--trbc-ph-soft);
	text-decoration: none;
	transition: background var(--trbc-ease-quick), color var(--trbc-ease-quick),
		box-shadow var(--trbc-ease-quick);
}

/* Compact rails use less shelf height while retaining the same sticky
   behaviour as longer section menus. Navigation should not change its
   scrolling model solely because an editor removes or adds a destination. */
.trbc-ph__menu--compact {
	min-height: 52px;
	padding-block: var(--trbc-space-1);
}

/* The divider sits in the seam between two segments. It is drawn on the later
   segment so the first one never carries a stray edge. */
.trbc-ph__menu-item + .trbc-ph__menu-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 20px;
	background: var(--trbc-line-strong);
	transition: opacity var(--trbc-ease-quick);
}

/* A raised segment supplies its own edge, so the hairline on either side of it
   would double up — hide both. Same on hover, where the tinted segment does
   the same job. */
.trbc-ph__menu-item[aria-current]::before,
.trbc-ph__menu-item:hover::before,
.trbc-ph__menu-item:has(+ .trbc-ph__menu-item[aria-current])::after,
.trbc-ph__menu-item[aria-current] + .trbc-ph__menu-item::before,
.trbc-ph__menu-item:hover + .trbc-ph__menu-item::before {
	opacity: 0;
}

.trbc-ph__menu-item:hover {
	color: var(--trbc-ph-ink);
	background: rgba(16, 23, 28, 0.05);
}

/* The current segment lifts out of the group rather than filling with brand.
   A filled blue segment competes with the page's one filled button; a raised
   white one says "you are here" without claiming to be an action. */
.trbc-ph__menu-item[aria-current] {
	background: var(--trbc-surface);
	color: var(--trbc-ink);
	box-shadow: 0 1px 2px rgba(16, 23, 28, 0.14);
}

.trbc-ph__menu-item[aria-current]:hover {
	background: var(--trbc-surface);
}

.trbc-ph__menu-item:focus-visible {
	outline: 2px solid var(--trbc-focus);
	outline-offset: 2px;
}

/* ---------- photo band + fade ---------- */
.trbc-ph__stage {
	position: relative;
	overflow: hidden;
}

.trbc-ph__photo {
	position: absolute;
	inset: 0 0 auto;
	height: var(--trbc-ph-band);
	background-image: var(--trbc-ph-photo, none);
	background-size: cover;
	background-position: center 38%;
}

.trbc-ph__fade {
	position: absolute;
	inset: 0 0 auto;
	height: var(--trbc-ph-band);
	background: linear-gradient(
		180deg,
		rgba(247, 246, 244, 0) 0%,
		rgba(247, 246, 244, 0.05) 30%,
		rgba(247, 246, 244, 0.74) 62%,
		var(--trbc-ph-ground) 84%
	);
}

/* No photograph is the common case on this site, not an edge case: a brand
   field, never a flat colour block. */
.trbc-ph--no-photo .trbc-ph__photo {
	background-image:
		radial-gradient(90% 120% at 12% 0%, rgba(73, 149, 209, 0.5) 0%, transparent 60%),
		radial-gradient(80% 100% at 100% 100%, rgba(21, 86, 134, 0.55) 0%, transparent 62%),
		linear-gradient(150deg, #143c5a 0%, #0d2537 100%);
}

/* ---------- body ---------- */
.trbc-ph__body {
	position: relative;
	z-index: 2;
	width: min(100%, var(--trbc-ph-measure));
	margin-inline: auto;
	padding: calc(var(--trbc-ph-band) * 0.62) var(--trbc-space-8) var(--trbc-space-8);
	text-align: center;
}

.trbc-ph--left .trbc-ph__body {
	text-align: left;
}

.trbc-ph--compact .trbc-ph__body {
	padding-top: calc(var(--trbc-ph-band) * 0.52);
	padding-bottom: var(--trbc-space-6);
}

/* ---------- section chip ----------
   Brand blue on this ground is 2.98:1 — under AA at this size. The chip
   carries its own ground and deep-blue ink instead, which measures between
   6.4:1 and 9.6:1 depending on the photograph behind it. */
.trbc-ph__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--trbc-space-2);
	margin: 0 0 var(--trbc-space-3);
	padding: 6px var(--trbc-space-4) 6px var(--trbc-space-3);
	border-radius: var(--trbc-radius-pill);
	font-size: var(--trbc-text-xs);
	font-weight: var(--trbc-weight-bold);
	letter-spacing: var(--trbc-tracking-wide);
	line-height: 1;
	color: #17456a;
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.85);
	-webkit-backdrop-filter: blur(14px) saturate(165%);
	backdrop-filter: blur(14px) saturate(165%);
	box-shadow: var(--trbc-shadow-1);
}

.trbc-ph__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--trbc-ph-brand);
}

/* ---------- title ---------- */
.trbc-ph__title {
	font-family: var(--trbc-ph-face);
	font-size: var(--trbc-text-hero);
	line-height: var(--trbc-leading-tight);
	font-weight: var(--trbc-weight-bold);
	letter-spacing: var(--trbc-tracking-display);
	color: var(--trbc-ph-ink);
	margin: 0 0 var(--trbc-space-3);
	text-wrap: balance;
}

.trbc-ph__title--lockup {
	margin-bottom: 16px;
}

.trbc-ph__lockup {
	display: block;
	width: auto;
	height: auto;
	max-width: min(var(--trbc-ph-lockup), 78%);
	margin: 0 auto;
}

.trbc-ph--left .trbc-ph__lockup {
	margin-left: 0;
}

/* One supplied colourway has to survive both grounds. Multiply drops the
   white box a JPEG mark carries; it is a rescue, not a substitute for asking
   for a transparent PNG or an SVG. */
.trbc-ph__lockup--solo {
	mix-blend-mode: multiply;
}

/* Two colourways: pick by ground. The band is light where the type sits, so
   the light mark is the default and the dark one is for a dark override. */
.trbc-ph__lockup--dark {
	display: none;
}

/* ---------- supporting copy ---------- */
.trbc-ph__sub {
	font-size: clamp(15px, 1.7vw, 18px);
	line-height: var(--trbc-leading-normal);
	color: var(--trbc-ph-soft);
	margin: 0 auto;
	max-width: 52ch;
}

.trbc-ph--left .trbc-ph__sub {
	margin-left: 0;
}

/* ---------- actions ---------- */
.trbc-ph__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--trbc-space-2) var(--trbc-space-6);
	justify-content: center;
	align-items: center;
	margin: var(--trbc-space-6) 0 0;
}

.trbc-ph--left .trbc-ph__actions {
	justify-content: flex-start;
}

/* ---------- actions ----------
   Styling comes from css/buttons.css; only placement is this component's
   business. The bespoke rules that used to live here were actively harmful:
   the primary kept a 999px pill radius from before the button system existed
   while the secondary picked up the shared 8px, so the two buttons sitting
   side by side in the same header were different shapes — and the secondary
   still carried the "›" from its previous life as a text link. */

/* ---------- mobile ---------- */
/* Matches nav-modern's compact-header breakpoint: the bar is 64px tall below
   this width, so the pinned rail has to tuck under a shorter header. */
@media (max-width: 1199px) {
	.trbc-page-header {
		--trbc-ph-sticky-top: calc(var(--mn-admin-offset, 0px) + 64px);
	}
}

/* 768px, the standard tablet-portrait edge — was 780px, one of the near
   duplicates the token file exists to retire. */
@media (max-width: 768px) {
	.trbc-page-header {
		--trbc-ph-band: 280px;
	}

	.trbc-ph__body {
		padding-left: var(--trbc-space-5);
		padding-right: var(--trbc-space-5);
	}

	/* No rail padding override here — the max() above already collapses to the
	   minimum gutter once the viewport is narrower than the measure, and it
	   keeps the first item's text aligned with the content column at every
	   width. Hard-coding a value here re-broke that alignment on phones.

	   On a phone the two actions stack; full-width targets beat two
	   half-width ones sitting off-centre. */
	.trbc-ph__actions {
		flex-direction: column;
		align-items: stretch;
		gap: var(--trbc-space-2);
	}

	.trbc-ph--left .trbc-ph__actions {
		align-items: stretch;
	}

	.trbc-ph__actions .trbc-btn {
		width: 100%;
	}
}

/* Transitions are already neutralised by the token file, which zeroes the
   easing custom properties under this query; this keeps the guarantee for any
   rule that hard-codes a duration. */
@media (prefers-reduced-motion: reduce) {
	.trbc-ph__menu-item {
		transition: none;
	}
}