/* ===========================================================================
   header-framed-rule — a drawn frame, interrupted by the name
   ---------------------------------------------------------------------------
   Scope: .vbs-header-framed-rule
   Depends on: css/tokens.css, css/base.css

   The header is a rectangle of hairline, inset from the page, and the wordmark
   sits ON its top edge with the rule broken around it — the printed device a
   fieldset legend borrows, and one of the few pieces of chrome that reads as
   drawn rather than assembled.

   The break is not a gap in the border. It is the wordmark painting
   --vb-surface behind itself and standing on the line, which is the sanctioned
   use of that token: something that has to BE the section's ground rather than
   sit on it. A literal gap would need to know the wordmark's width, and would
   go wrong the first time a client's name is longer than the one it was
   measured against.

   The frame is deliberately more air than content. Emptiness inside a drawn
   box is the composition; filling it with a tagline or an address would turn a
   device into a container.
   ========================================================================= */

.vbs-header-framed-rule {
	background-color: var(--vb-surface);
}

.vbs-header-framed-rule__inner {
	padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2rem);
}

.vbs-header-framed-rule__frame {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.5rem;
	min-block-size: 5.5rem;
	padding-inline: clamp(1.25rem, 3vw, 2.25rem);
	border: var(--vb-border-hair) solid var(--vb-color-rule);
}

/* Standing on the top edge, painting the ground behind itself. */
.vbs-header-framed-rule__brand {
	position: relative;
	display: flex;
	align-items: center;
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	justify-self: start;
	min-inline-size: 0;
	min-block-size: 2.75rem;
	transform: translateY(-50%);
	padding-inline: 0.75rem;
	margin-inline-start: -0.75rem;
	background-color: var(--vb-surface);
	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;
	max-inline-size: 100%;
	overflow: clip;
	text-overflow: ellipsis;
}

/* --- nav ------------------------------------------------------------------ */
.vbs-header-framed-rule__nav {
	grid-column: 1 / -1;
	grid-row: 2;
	border-block-start: var(--vb-border-hair) solid var(--vb-color-rule);
	padding-block-start: 0.35rem;
}
.vbs-header-framed-rule__list { display: grid; }
.vbs-header-framed-rule__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	padding-block: 0.4rem;
	font-size: var(--vb-fs-small);
	letter-spacing: 0.05em;
	color: var(--vb-color-ink-soft);
	transition: color var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-header-framed-rule__link:hover,
.vbs-header-framed-rule__link[aria-current="page"] { color: var(--vb-color-ink); }

/* The same hairline the frame is drawn with — the whole header is one weight
   of line, and a heavier underline here would break that. */
.vbs-header-framed-rule__link::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	block-size: var(--vb-border-hair);
	background-color: var(--vb-color-ink);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-header-framed-rule__link:hover::after,
.vbs-header-framed-rule__link[aria-current="page"]::after { transform: scaleX(1); }

/* --- the trigger ----------------------------------------------------------
   Two rules at the frame's own weight, so the mark is drawn with the same pen
   as everything around it. */
.vbs-header-framed-rule__toggle {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	background-color: transparent;
	border: 0;
	cursor: pointer;
	color: var(--vb-color-ink);
}
.vbs-header-framed-rule__rules {
	--vbs-bar: var(--vb-border-hair);
	--vbs-gap: 0.55rem;
	display: grid;
	gap: var(--vbs-gap);
	inline-size: 1.75rem;
}
.vbs-header-framed-rule__rules > span {
	display: block;
	block-size: var(--vbs-bar);
	background-color: currentColor;
	transition: transform var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-header-framed-rule__toggle[aria-expanded="true"] .vbs-header-framed-rule__rules > span:nth-child(1) {
	transform: translateY(calc((var(--vbs-bar) + var(--vbs-gap)) / 2)) rotate(-45deg);
}
.vbs-header-framed-rule__toggle[aria-expanded="true"] .vbs-header-framed-rule__rules > span:nth-child(2) {
	transform: translateY(calc(-1 * (var(--vbs-bar) + var(--vbs-gap)) / 2)) rotate(45deg);
}

@media (max-width: 51.9375rem) {
	.vb-menu-js .vbs-header-framed-rule[data-vb-menu-ready]:not([data-vb-menu-open])
		.vbs-header-framed-rule__nav { display: none; }
}

@media (min-width: 52rem) {
	.vbs-header-framed-rule__nav {
		grid-column: 2;
		grid-row: 1;
		display: block;
		padding-block-start: 0;
		border-block-start: 0;
	}
	.vbs-header-framed-rule__list { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); }
	.vbs-header-framed-rule__link { min-block-size: 0; }
	.vbs-header-framed-rule__toggle { display: none; }
	.vbs-header-framed-rule__brand { font-size: var(--vb-fs-display-2); }
}