/* ===========================================================================
   header-centered-split — masthead header with the wordmark centred
   ---------------------------------------------------------------------------
   Scope: .vbs-header-centered-split
   Depends on: css/tokens.css, css/base.css

   The traditional publication masthead: nav split either side of a centred
   wordmark, hairlines above and below, a thin utility strip on top. Like the
   bar header, the mobile menu is a <details> disclosure so navigation survives
   a JS failure and is keyboard-operable by construction.
   ========================================================================= */

.vbs-header-centered-split {
	position: relative;
	background-color: var(--vb-surface);
	border-block-end: var(--vb-border-hair) solid var(--vb-color-rule);
}

/* --- utility strip -------------------------------------------------------- */
.vbs-header-centered-split__utility {
	border-block-end: var(--vb-border-hair) solid var(--vb-color-rule);
}
.vbs-header-centered-split__utility-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-block-size: 2.25rem;
}
.vbs-header-centered-split__utility-list { display: flex; gap: 1.25rem; }
.vbs-header-centered-split__utility-link {
	font-size: var(--vb-fs-small);
	color: var(--vb-color-mute);
	transition: color var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-header-centered-split__utility-link:hover { color: var(--vb-color-ink); }

/* Hide the utility strip on small screens — it's supporting information, and
   at that width the room is better spent on the wordmark. */
@media (max-width: 47.9375rem) {
	.vbs-header-centered-split__utility { display: none; }
}

/* --- masthead ------------------------------------------------------------- */
.vbs-header-centered-split__main {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-block-size: 5rem;
}

.vbs-header-centered-split__wordmark {
	font-family: var(--vb-font-display);
	font-weight: var(--vb-weight-display);
	font-size: var(--vb-fs-h1);
	line-height: 1;
	letter-spacing: var(--vb-ls-h1);
	text-transform: var(--vb-case-display);
	color: var(--vb-color-ink);
	white-space: nowrap;
	margin-inline: auto;
}
.vbs-header-centered-split__tagline {
	display: block;
	margin-block-start: 0.4rem;
	text-align: center;
	/* The wordmark above is nowrap — a name that breaks across lines is not a
	   wordmark — and this sits inside it, so it inherits that and cannot wrap.
	   A brand with wide eyebrow tracking then pushes the whole page sideways
	   on a phone. The tagline is prose; let it wrap. */
	white-space: normal;
}

.vbs-header-centered-split__nav { display: none; flex: 1; }
/* The list has to fill its nav, or justify-content has no free space to work
   with and the right-hand items bunch up against the wordmark. */
.vbs-header-centered-split__list { display: flex; flex: 1; gap: clamp(1rem, 2.5vw, 2.25rem); }
.vbs-header-centered-split__list--end { justify-content: flex-end; }

.vbs-header-centered-split__link {
	position: relative;
	font-size: var(--vb-fs-small);
	font-weight: var(--vb-weight-strong);
	color: var(--vb-color-ink-soft);
	padding-block: 0.4rem;
	white-space: nowrap;
	transition: color var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-header-centered-split__link:hover { color: var(--vb-color-ink); }
.vbs-header-centered-split__link::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	block-size: var(--vb-border-hair);
	background-color: var(--vb-color-accent);
	transform: scaleX(0);
	transform-origin: 50% 50%;
	transition: transform var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-header-centered-split__link:hover::after,
.vbs-header-centered-split__link[aria-current="page"]::after { transform: scaleX(1); }
.vbs-header-centered-split__link[aria-current="page"] { color: var(--vb-color-ink); }

/* --- mobile disclosure ---------------------------------------------------- */
.vbs-header-centered-split__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border: var(--vb-border-hair) solid var(--vb-color-rule);
	border-radius: var(--vb-radius-sm);
	cursor: pointer;
	list-style: none;
	font-size: var(--vb-fs-small);
	font-weight: var(--vb-weight-strong);
	color: var(--vb-color-ink);
	flex: none;
}
.vbs-header-centered-split__toggle::-webkit-details-marker { display: none; }
.vbs-header-centered-split__burger { inline-size: 1.05rem; block-size: 0.7rem; position: relative; flex: none; }
.vbs-header-centered-split__burger span {
	position: absolute;
	inset-inline: 0;
	block-size: 2px;
	background-color: currentColor;
	transition: transform var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-header-centered-split__burger span:first-child { inset-block-start: 0; }
.vbs-header-centered-split__burger span:last-child  { inset-block-end: 0; }
.vbs-header-centered-split__disclosure[open] .vbs-header-centered-split__burger span:first-child { transform: translateY(4px) rotate(45deg); }
.vbs-header-centered-split__disclosure[open] .vbs-header-centered-split__burger span:last-child  { transform: translateY(-5px) rotate(-45deg); }

.vbs-header-centered-split__panel {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	z-index: 20;
	background-color: var(--vb-surface);
	border-block-end: var(--vb-border-hair) solid var(--vb-color-rule);
	box-shadow: var(--vb-shadow-card);
	padding: 0.5rem var(--vb-gutter) 1.5rem;
}
.vbs-header-centered-split__panel-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 0.85rem;
	border-block-end: var(--vb-border-hair) solid var(--vb-color-rule);
	font-family: var(--vb-font-display);
	font-size: var(--vb-fs-h3);
	font-weight: var(--vb-weight-heading);
	color: var(--vb-color-ink);
}
.vbs-header-centered-split__panel-cta { margin-block-start: 1.25rem; display: flex; }
.vbs-header-centered-split__panel-cta > * { flex: 1; }

/* The split nav only makes sense once both halves have room. */
@media (min-width: 62rem) {
	.vbs-header-centered-split__nav { display: flex; }
	.vbs-header-centered-split__disclosure { display: none; }
	.vbs-header-centered-split__main { min-block-size: 6.5rem; }
}

/* --- narrow -----------------------------------------------------------------
   Keep the brand name on one line, using the next type step on phones. When
   generous brand typography leaves too little room beside it, the menu moves
   to a new line at the inline end. The disclosure stays in normal flow, so its
   panel still opens below the full masthead without covering either control. */
@media (max-width: 47.9375rem) {
	.vbs-header-centered-split__main {
		flex-wrap: wrap;
		justify-content: flex-end;
		padding-block: 0.5rem;
	}
	.vbs-header-centered-split__wordmark { font-size: var(--vb-fs-h2); }
}