/**
 * `bd/page-header` styles — front end and editor canvas both (single
 * stylesheet, no separate editor-only rules needed for this block).
 *
 * Ships from the theme, not the plugin: per architecture.md §3.1/§3.2 the
 * theme owns markup and presentation. Enqueued automatically by
 * `first_block_stylesheets()` in `functions.php`, which globs
 * `assets/css/blocks/*.css` and loads each with a dependency on tokens.css
 * and site-chrome.css, on the front end and in the editor.
 *
 * Ported from `about.dc.html`/`industries.dc.html`'s inline-styled hero
 * `<section>` (see `blocks/page-header.php`'s docblock for the exact source
 * lines), re-expressed as class-based rules against `tokens.css`'s global
 * custom properties.
 */

.bd-page-header {
	position: relative;
	overflow: hidden;
	/*
	 * Indigo, not ink. With a background image the scrim covers this
	 * entirely, so it only shows on an image-less page header (Contact) —
	 * where the design draws a flat `var(--indigo)` panel, not near-black.
	 */
	background: var(--indigo, #023878);
	color: var(--text-on-dark, #fff);
	/*
	 * `.bd-page-header__inner` below already carries the design's own
	 * `164px … 96px`, so the `bd-spacing-*` chrome class this block also gets
	 * has to be neutralised — otherwise the two stack and every inner page's
	 * hero renders 128px taller than the mockup, with a band of empty scrim
	 * under the intro copy. Same reasoning as `.bd-hero` and `.bd-site-header`.
	 */
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/*
 * And, like the home hero, an opening page header runs *under* the fixed
 * header rather than starting below it — the export's `<body>` has no header
 * offset, so its 164px of top padding is measured from y=0 with the
 * translucent bar floating over the photograph. site-chrome.css offsets
 * `<body>` by 72px so ordinary pages are not hidden, so this gives it back.
 *
 * The second selector is the same opening header placed by a *template*
 * rather than a page (`/careers/`, each role, `/products/`, `/locations/`,
 * blog categories): it sits straight in `<main>`, missed the first rule, and
 * so carried 72px of extra space above its copy.
 */
.wp-block-post-content>.bd-page-header:first-child,
main>.bd-page-header:first-child {
	margin-top: -72px;
}

.bd-page-header__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

.bd-page-header__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
			rgba(1, 30, 69, 0.95) 0%,
			rgba(2, 56, 120, 0.82) 46%,
			rgba(17, 19, 24, 0.4) 100%);
}

.bd-page-header__inner {
	position: relative;
	max-width: var(--container-xl, 1320px);
	margin: 0 auto;
	padding: 164px var(--gutter, 1.5rem) 96px;
}

.bd-page-header__breadcrumb {
	font-size: var(--fs-sm);
	color: var(--text-on-dark-muted);
	margin: 0 0 22px;
}

.bd-page-header__breadcrumb a {
	color: var(--text-on-dark-muted);
	text-decoration: none;
}

.bd-page-header__breadcrumb a:hover,
.bd-page-header__breadcrumb a:focus-visible {
	color: #fff;
}

/* 4px, not the mockup's ~7px gap: Yoast's presenter pads the separator with a
   literal space on each side (`' ' . $separator . ' '`), worth ~3.5px at this
   size, and the mockup's own `&nbsp;/&nbsp;` is worth about the same again.
   4px + the word-space lands on the mockup; 8px overshot it by ~8px a gap. */
.bd-page-header__breadcrumb-sep {
	margin: 0 4px;
}

.bd-page-header__breadcrumb-current {
	color: #fff;
}

/* Yoast wraps the crumbs in one <span>; the nav's own rules cover type and
   colour, this just keeps the wrapper out of the layout's way. */
.bd-page-header__breadcrumb-list {
	display: inline;
}

.bd-page-header__eyebrow {
	font-size: var(--type-eyebrow-size, 0.75rem);
	font-weight: var(--type-eyebrow-weight, 700);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--first-blue-300, #4fa8d8);
	margin: 0 0 18px;
}

.bd-page-header__heading {
	color: #fff;
	font-size: var(--fs-6xl);
	font-weight: var(--fw-extrabold, 800);
	letter-spacing: var(--ls-tight);
	line-height: var(--lh-tight);
	margin: 0;
	max-width: 880px;
	/*
	 * `text-wrap: pretty` matters here — without it these h1s break badly at
	 * the wide end, "Metrology expertise, delivered end / to end." with one
	 * orphaned word — but it is no longer declared here: tokens.css sets it on
	 * every heading and paragraph site-wide. See its `base` section.
	 */
}

.bd-page-header__body {
	color: var(--text-on-dark-secondary);
	font-size: var(--fs-lg);
	line-height: var(--lh-relaxed);
	max-width: 680px;
	margin: 22px 0 0;
}

/*
 * Body copy arrives as `wpautop()`-generated paragraphs (see the block), so the
 * gap between them is a real margin rather than the full blank line
 * `white-space: pre-wrap` used to produce.
 */
.bd-page-header__body p {
	margin: 0;
}

.bd-page-header__body p + p {
	margin-top: var(--space-3);
}

/**
 * `--term`: the header of a `product_category` archive.
 *
 * Same markup, materially more text. An authored page header carries a short
 * phrase as its heading; this one carries the category's *description* — a full
 * sentence — with the category's whole intro paragraph beneath it. At
 * `--fs-6xl` that sentence ran to three deck-filling lines and pushed the
 * filter bar and the first row of products off the first screen entirely.
 *
 * Two steps down for the heading, one for the body. The paragraph also gets a
 * wider measure than the authored default: at 680px a ~60-word intro stacks
 * into a narrow column against a very wide heading, which reads as two
 * unrelated blocks rather than one header.
 *
 * See the `is_tax()` branch in blocks/page-header.php for where the class and
 * the copy come from.
 */
.bd-page-header--term .bd-page-header__heading {
	font-size: var(--fs-4xl);
	max-width: 940px;
}

.bd-page-header--term .bd-page-header__body {
	/*
	 * `--fs-base`, matching `.bd-products-catalog__intro`: this is the same
	 * category paragraph the catalog section head renders, and the two are seen
	 * one after the other when a visitor moves from `/products/` to
	 * `/products/{slug}/`. A step apart read as two different pieces of copy.
	 */
	font-size: var(--fs-base);
	max-width: 780px;
}

/**
 * Jump-link chips (batch-2 spec §4), ported from `services.dc.html`'s
 * `.fm-nav-chip`. White pills on the dark scrim, sitting under the body
 * paragraph. Only the Services page authors these; every other page's header
 * renders no `<nav>` at all.
 */
.bd-page-header__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 30px 0 0;
}

.bd-page-header__link {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 18px;
	/*
	 * Solid white pills, per `services.dc.html`'s `.fm-nav-chip` — they were
	 * translucent white-on-dark, which read as ghost outlines against the hero
	 * scrim instead of popping off it.
	 */
	background: var(--surface-page, #fff);
	color: var(--text-secondary);
	border: 1px solid var(--border-strong, #c4cdd6);
	border-radius: var(--radius-pill, 999px);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold, 600);
	text-decoration: none;
	white-space: nowrap;
	transition: background 150ms, border-color 150ms;
}

.bd-page-header__link:hover,
.bd-page-header__link:focus-visible {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.bd-placeholder {
	opacity: 0.6;
	font-style: italic;
}