/* ===========================================================================
   header-classic-bar — sticky site header with a no-JS mobile drawer
   ---------------------------------------------------------------------------
   Scope: .vbs-header-classic-bar
   Depends on: css/tokens.css, css/base.css

   The mobile menu is a <details>/<summary> disclosure rather than a scripted
   toggle. That buys keyboard support, focus handling and correct semantics for
   free, and the header keeps working if the theme's JS fails to load — which
   for a site header is the difference between "a bug" and "no navigation".
   ========================================================================= */

.vbs-header-classic-bar {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--vb-surface);
	border-block-end: var(--vb-border-hair) solid var(--vb-color-rule);
}

.vbs-header-classic-bar__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-block-size: 4.5rem;
}

/* --- brand ---------------------------------------------------------------- */
.vbs-header-classic-bar__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-inline-end: auto;
	color: var(--vb-color-ink);
	font-family: var(--vb-font-display);
	font-weight: var(--vb-weight-heading);
	font-size: var(--vb-fs-h3);
	letter-spacing: var(--vb-ls-h3);
}
.vbs-header-classic-bar__mark { inline-size: 1.75rem; block-size: 1.75rem; flex: none; color: var(--vb-color-accent); }

/* --- desktop nav ----------------------------------------------------------
   Hidden below the breakpoint; the disclosure takes over there. */
.vbs-header-classic-bar__nav { display: none; }
.vbs-header-classic-bar__list { display: flex; align-items: center; gap: 1.75rem; }
.vbs-header-classic-bar__link {
	position: relative;
	font-size: var(--vb-fs-small);
	font-weight: var(--vb-weight-strong);
	color: var(--vb-color-ink-soft);
	padding-block: 0.5rem;
	transition: color var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-header-classic-bar__link:hover { color: var(--vb-color-ink); }

/* Underline grows from the centre on hover and stays put for the current page. */
.vbs-header-classic-bar__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);
	transition: transform var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-header-classic-bar__link:hover::after,
.vbs-header-classic-bar__link[aria-current="page"]::after { transform: scaleX(1); }
.vbs-header-classic-bar__link[aria-current="page"] { color: var(--vb-color-ink); }

.vbs-header-classic-bar__actions { display: none; align-items: center; gap: 0.75rem; }

/* --- mobile disclosure ----------------------------------------------------- */
.vbs-header-classic-bar__disclosure { margin-inline-start: auto; }
.vbs-header-classic-bar__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.9rem;
	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);
}
.vbs-header-classic-bar__toggle::-webkit-details-marker { display: none; }

/* Two bars that cross into an X when the disclosure opens. */
.vbs-header-classic-bar__burger { inline-size: 1.125rem; block-size: 0.75rem; position: relative; flex: none; }
.vbs-header-classic-bar__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-classic-bar__burger span:first-child { inset-block-start: 0; }
.vbs-header-classic-bar__burger span:last-child  { inset-block-end: 0; }
.vbs-header-classic-bar__disclosure[open] .vbs-header-classic-bar__burger span:first-child { transform: translateY(5px) rotate(45deg); }
.vbs-header-classic-bar__disclosure[open] .vbs-header-classic-bar__burger span:last-child  { transform: translateY(-5px) rotate(-45deg); }

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

@media (min-width: 62rem) {
	.vbs-header-classic-bar__nav,
	.vbs-header-classic-bar__actions { display: flex; }
	.vbs-header-classic-bar__disclosure { display: none; }
	.vbs-header-classic-bar__brand { margin-inline-end: 0; }
	.vbs-header-classic-bar__nav { margin-inline: auto; }
}