/*
 * The title band of every inner page, root .smh-page-header (design A "Living Network", 2026-10-01; was the paper
 * letterhead band). Used by parts/page-header.html (page.html), inline with the same classes by home / index /
 * archive / category (Insights), search, single (--narrow), single-smh_service (--service), single-smh_person,
 * page-legal (--legal) and 404 (--404).
 * A petrol band lit from the network side, layers back to front: the card's network texture (.smh-net::before, the
 * LCP element, preloaded by functions.php), the living network (.smh-net-layer, injected by theme/smh/inc/wp7.php:
 * lines that draw in once from the edges, square nodes that light on arrival, a breathing hub light, three pulses of
 * light into the hubs), a shade that protects the text side (::after), then the content: breadcrumbs, the framed H1
 * (.smh-frame-title--dark --load, frame-title.css) and the lead.
 * Performance (mid-range phone): pulses and minor lines are CSS transform/opacity only, paused off screen
 * (assets/js/inner.js .is-off), dropped below 600 px, on slow devices (html.smh-lite) and under reduced motion.
 * Physical sides only where the identity is physical (the lit side and the network sit opposite the text: left in
 * Arabic, right in English). Chromium 114 (container query units 105+); tokens + rgb() light values.
 */

.smh-page-header {
	--smh-ph-lit-x: 24%;
	--smh-ph-shade-dir: 270deg;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: calc(var(--smh-ph-offset, 0px) + clamp(3rem, 6.5vw, 6.5rem)) clamp(3.5rem, 7vw, 7rem);
	border: 0;
	color: var(--smh-white);
	background-color: var(--smh-petrol-deep);
	background-image:
		radial-gradient(58% 95% at var(--smh-ph-lit-x) 55%, rgb(44 132 156 / 0.42) 0%, rgb(30 110 132 / 0.16) 42%, rgb(25 100 120 / 0) 72%),
		var(--smh-grad-cover);
}
html:not([dir="rtl"]) .smh-page-header { --smh-ph-lit-x: 76%; --smh-ph-shade-dir: 90deg; }
/* The header is fixed and transparent over the first dark band of a page (header.css, base.css section 2): the band
   carries .smh-under-header and starts its content below the bar. */
.smh-page-header.smh-under-header { --smh-ph-offset: var(--smh-hdr, 0px); }

/* Far plane: the card's network lines, dark, as on the printed card back. */
.smh-page-header.smh-net::before {
	opacity: 0.2035;
	top: 0;
	height: auto;
	-webkit-mask-image: none;
	mask-image: none;
}
/* Shade: text side protection + top and bottom depth. */
.smh-page-header::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(var(--smh-ph-shade-dir), rgb(7 38 48 / 0.5) 0%, rgb(7 38 48 / 0.16) 42%, rgb(7 38 48 / 0) 62%),
		linear-gradient(180deg, rgb(6 34 43 / 0.32) 0%, rgb(6 34 43 / 0) 26%, rgb(6 34 43 / 0) 64%, rgb(6 30 38 / 0.42) 100%);
}

/* ---------- content ---------- */
.smh-page-header :where(h1, h2, h3, p, a:not(.wp-element-button)) { color: inherit; }
.smh-page-header .smh-page-header__inner > *,
.smh-page-header.smh-page-header--narrow > *:not(.smh-net-layer) { margin-block: 0; }
.smh-page-header .smh-page-header__inner > * { max-inline-size: 52rem; }
.smh-page-header .smh-page-header__inner > * + *,
.smh-page-header.smh-page-header--narrow > * + * { margin-block-start: var(--wp--preset--spacing--40); }
.smh-page-header .smh-page-header__inner > .smh-breadcrumbs + *,
.smh-page-header.smh-page-header--narrow > .smh-breadcrumbs + * { margin-block-start: var(--wp--preset--spacing--50); }
.smh-page-header .smh-page-header__inner > .smh-frame-title + * { margin-block-start: var(--wp--preset--spacing--60); }

.smh-page-header__title,
.smh-page-header .smh-frame-title > .wp-block-heading,
.smh-page-header .smh-frame-title > .wp-block-post-title {
	margin: 0;
	font-size: clamp(2.375rem, 4.6vw, 4.25rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--smh-white);
	text-wrap: balance;
	text-shadow: 0 2px 30px rgb(4 26 33 / 0.35);
}
html[lang|="en"] .smh-page-header__title,
html[lang|="en"] .smh-page-header .smh-frame-title > * { line-height: 1.15; }

.smh-page-header__lead,
.smh-page-header__lead p,
.smh-page-header .wp-block-post-excerpt__excerpt {
	margin: 0;
	max-inline-size: 38em;
	font-size: clamp(1.0625rem, 1.32vw, 1.21875rem);
	line-height: 1.95;
	color: var(--smh-mist);
}
html[lang|="en"] .smh-page-header__lead,
html[lang|="en"] .smh-page-header__lead p { line-height: var(--smh-lh-normal); }

/* Breadcrumbs (smh/breadcrumbs block): small, mist, first in the band. */
.smh-page-header .smh-breadcrumbs {
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--smh-lh-relaxed);
	color: rgb(220 230 233 / 0.78);
}
.smh-page-header .smh-breadcrumbs a { padding-block: 0.6rem; color: rgb(220 230 233 / 0.86); text-decoration: none; }
.smh-page-header .smh-breadcrumbs a:hover { color: var(--smh-white); text-decoration: underline; }
.smh-page-header .smh-breadcrumbs .breadcrumb_last { color: var(--smh-white); }
.smh-page-header :where(a, button, input, summary):focus-visible { outline-color: var(--smh-white); }

/* page.html: the body starts right under the band. */
.smh-page > .smh-page-header-part { margin-block: 0; }
.smh-page > .smh-page-header-part + .smh-page__content { margin-block-start: 0; }

/* ---------- the living network layer (inc/wp7.php smh_wp7_net_layer) ---------- */
.smh-net-layer {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	container-type: size;
	color: var(--smh-mist);
}
html:not([dir="rtl"]) .smh-net-layer { transform: scaleX(-1); }
.smh-net-layer__frame {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	aspect-ratio: 1440 / 420;
	transform: translateY(-50%);
}
@supports (width: 1cqh) {
	.smh-net-layer__frame { width: max(100%, 100cqh * 3.4286); }
}
.smh-net-layer__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.smh-net-layer__line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.smh-net-layer__node {
	position: absolute;
	width: calc(4px + 3px * var(--s, 1));
	height: calc(4px + 3px * var(--s, 1));
	background: rgb(240 250 252 / 0.92);
	box-shadow: 0 0 12px 2px rgb(170 220 232 / 0.45);
	transform: translate(-50%, -50%);
}
.smh-net-layer__glow {
	position: absolute;
	width: clamp(220px, 26vw, 380px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(160 214 228 / 0.34), rgb(96 168 188 / 0.12) 48%, rgb(96 168 188 / 0));
	transform: translate(-50%, -50%);
}
.smh-net-layer__run { position: absolute; inset: 0; opacity: 0; }
.smh-net-layer__pulse {
	position: absolute;
	width: 64px;
	height: 2px;
	margin: -1px 0 0 -64px;
	transform-origin: 100% 50%;
	transform: rotate(var(--a, 0deg));
	background: linear-gradient(90deg, rgb(210 244 250 / 0), rgb(226 248 252 / 0.9));
}
.smh-net-layer__pulse::after {
	content: "";
	position: absolute;
	inset-block-start: -1.5px;
	right: -2px;
	width: 5px;
	height: 5px;
	background: var(--smh-white);
	box-shadow: 0 0 10px 3px rgb(190 236 246 / 0.7);
}

/* Panel variant (the closing CTA panel sheet): hubs at the inline end, quieter. */
.smh-net-layer--panel { opacity: 0.75; }

/* Motion: lines draw in from the edges, nodes light on arrival, the hub light breathes, pulses run into hubs. */
@media (prefers-reduced-motion: no-preference) {
	.smh-js .smh-net-layer__line { stroke-dashoffset: 1; animation: smh-net-draw 1.7s cubic-bezier(0.16, 1, 0.3, 1) calc(0.1s + var(--i, 0) * 0.07s) forwards; }
	.smh-js .smh-net-layer__node { animation: smh-net-node 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(1.1s + var(--i, 0) * 0.12s) both; }
	.smh-js .smh-net-layer__glow { animation: smh-net-glow 1.4s ease-out 1s both, smh-net-breathe 5.5s ease-in-out 2.4s infinite alternate; }
	.smh-js .smh-net-layer--band .smh-net-layer__run { animation: smh-net-run var(--dur, 8s) linear calc(var(--del, 2s) + 1.6s) infinite; will-change: transform, opacity; }
	.smh-net-layer.is-off *,
	.smh-tab-hidden .smh-net-layer * { animation-play-state: paused !important; }
}
@keyframes smh-net-draw { to { stroke-dashoffset: 0; } }
@keyframes smh-net-node { from { opacity: 0; transform: translate(-50%, -50%) scale(0); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes smh-net-glow { from { opacity: 0; } to { opacity: 1; } }
@keyframes smh-net-breathe { from { opacity: 1; } to { opacity: 0.62; } }
@keyframes smh-net-run {
	0% { opacity: 0; transform: translate(0, 0); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
	3% { opacity: 1; }
	27% { opacity: 1; transform: translate(var(--tx), var(--ty)); }
	31%, 100% { opacity: 0; transform: translate(var(--tx), var(--ty)); }
}
/* Lighter network on phones and slow devices; nothing that moves under reduced motion. */
@media (max-width: 599px) {
	.smh-net-layer .is-minor, .smh-net-layer__run { display: none; }
	.smh-net-layer--band { opacity: 0.7; }
}
.smh-lite .smh-net-layer__run { display: none; }
.smh-lite .smh-net-layer .is-minor { display: none; }
.smh-lite .smh-net-layer__glow { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
	.smh-net-layer__run { display: none; }
}

/* ---------- variants ---------- */
/* Narrow (an Insights article): the 720 reading column. */
.smh-page-header--narrow { padding-block-end: clamp(3rem, 6vw, 5.5rem); }
/* 404: a taller band, the whole message inside it. */
.smh-page-header--404 { padding-block-end: clamp(4.5rem, 9vw, 8.5rem); }

@media (max-width: 599px) {
	.smh-page-header { padding-block: calc(var(--smh-ph-offset, 0px) + 2.5rem) 3rem; }
}
@media print {
	.smh-page-header { background: none !important; color: #000; padding-block: 1rem; }
	.smh-page-header::after, .smh-net-layer { display: none !important; }
	.smh-page-header .smh-frame-title > * { color: #000 !important; text-shadow: none; }
}