/* ============================================================
 * Page header — unified interior page banner
 *
 * Minimal KDL band that replaces the legacy .entry-header /
 * .page-header / .application-hero treatments. Breadcrumb (or
 * eyebrow) above a left-aligned title with optional description,
 * closed by a 2px red rule.
 * ========================================================= */
.page-header {
	position: relative;
	background: var(--kdl-gray-50, #f4f6f8);
	border-top: 0;
	border-bottom: 0;
	color: var(--kdl-text-strong, #0a0d11);
	margin: 0;
	/* Horizontal padding lives on `.page-header__inner` so it matches
	 * `.wrap`. A touch more room below than above: the description sits
	 * on the rule otherwise. */
	padding: clamp(24px, 3vw, 36px) 0 clamp(28px, 3.4vw, 40px);
	text-align: left;
	text-shadow: none;
}

/* The rule under the header is a 4px heat bar: dull red, cherry, copper,
 * orange (--upton-heat-bar). Forced colours get a solid rule instead. */
.page-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: var(--upton-heat-bar, var(--kdl-accent-500, #CE2029));
	pointer-events: none;
}

@media (forced-colors: active) {
	.page-header {
		border-bottom: 3px solid CanvasText;
	}

	.page-header::after {
		display: none;
	}
}

/* Match the shared 1320px container pattern used by .wrap, .upton-catalog,
 * and .site-header-bar so the header title aligns vertically with the nav,
 * footer, and body content on every viewport width. */
.page-header__inner {
	margin: 0 auto;
	max-width: 1320px;
	padding: 0 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	text-align: left;
}

/* Breadcrumb / eyebrow — Lilex 12px uppercase in KDL muted ink, led by the
 * red pilot light (.kdl-eyebrow::before, cards.css). */
.page-header__eyebrow,
.page-header__breadcrumbs {
	font-family: var(--kdl-font-mono, Lilex, monospace);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kdl-gray-500, #444c56);
	margin: 0;
	line-height: 1.4;
}

.page-header__breadcrumbs {
	display: flex;
	align-items: flex-start;
}

/* The pilot light sits on the first line when the trail wraps. */
.page-header__breadcrumbs::before {
	margin-top: 0.45em;
}

/* Strip legacy #breadcrumbs chrome when it sits inside our header */
.page-header__breadcrumbs #breadcrumbs {
	margin: 0;
	padding: 0;
	background: none;
}
.page-header__breadcrumbs #breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.page-header__breadcrumbs #breadcrumbs li {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
}
.page-header__breadcrumbs #breadcrumbs li::after {
	content: "›";
	content: "›" / ""; /* Visible separator, skipped by screen readers. */
	margin-left: 10px;
	color: var(--kdl-gray-400, #6c7682);
}
.page-header__breadcrumbs #breadcrumbs li:last-child::after,
.page-header__breadcrumbs #breadcrumbs li.current-page::after {
	content: none;
}
.page-header__breadcrumbs #breadcrumbs a {
	color: inherit;
	text-decoration: none;
}
.page-header__breadcrumbs #breadcrumbs a:hover,
.page-header__breadcrumbs #breadcrumbs a:focus-visible {
	color: var(--kdl-text-strong, #14181d);
	text-decoration: underline;
	text-decoration-color: var(--kdl-copper-500, #c2632a);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.page-header__breadcrumbs #breadcrumbs .current-page {
	color: var(--kdl-text-strong, #14181d);
}

/* Title — IBM Plex Sans, generous but smaller than the hero */
.page-header__title {
	font-family: var(--kdl-font-sans, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--kdl-text-strong, #0a0d11);
	margin: 0;
	max-width: 920px;
	text-align: left;
	text-shadow: none;
}

/* Optional description — kept short, slightly muted */
.page-header__description {
	font-size: clamp(15px, 1.25vw, 17px);
	line-height: 1.5;
	color: var(--kdl-text-default, #3f4751);
	margin: 0;
	max-width: 720px;
	text-align: left;
}

/* The gap between the red rule and the page body is set once, as
 * --upton-page-top: on #primary for the content templates (style.css), and
 * here for the templates that open with a catalog shell or a section. */
.page-header + .upton-catalog,
.page-header + .upton-section {
	padding-top: var(--upton-page-top);
}

/* Tighten on small screens — the breadcrumb wraps to a second line if needed */
@media (max-width: 600px) {
	.page-header__inner {
		gap: 10px;
	}
}