/*
 * Site header. Desktop: name and tagline left, controls right on one row
 * that never wraps. Stays at the top of the screen on every page; core.js
 * publishes its height as --header-height for the sidebar and anchor links.
 * The compact layout is in compact.css.
 */

.site-header {
	position: sticky;
	top: var(--admin-bar);
	z-index: 30;
	background: var(--header-glow), var(--header-bg);
	border-bottom: 1px solid var(--hairline);
}

.site-header__inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding-top: 30px;
	padding-bottom: 26px;
}

.site-brand {
	/*
	 * Optical alignment: letters have built-in space before their left edge
	 * (side bearing). Manrope's "B" at 800 has 0.070em; its "L" at 500 has
	 * 0.080em. The title is shifted so the two inked edges line up exactly
	 * at every size. If the site name or tagline starts with a different
	 * letter, update these two numbers (docs/ARCHITECTURE.md explains how
	 * to measure them).
	 */
	--title-bearing: .07;
	--tagline-bearing: .08;
	--tagline-size: 20px;
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}
.site-brand__avatar { display: none; }

.site-title {
	margin: 0 0 0 calc(var(--tagline-size) * var(--tagline-bearing) - 1em * var(--title-bearing));
	font-size: clamp(40px, 4.5vw, 64px);
	font-weight: var(--weight-display);
	line-height: 1;
	letter-spacing: var(--tracking-display);
	white-space: nowrap;
}
.site-tagline {
	margin-top: 10px;
	color: var(--accent);
	font-size: var(--tagline-size);
	font-weight: 500;
}

.site-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	gap: 22px;
	margin-left: auto;
	padding-bottom: 4px;
}

.primary-nav__list {
	display: flex;
	gap: 22px;
	list-style: none;
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
}
.primary-nav a { display: inline-block; padding: 2px 0; transition: color var(--speed); }
.primary-nav a:focus-visible { outline-offset: 4px; border-radius: 4px; }
.primary-nav a:active { color: var(--accent); opacity: .7; }
.primary-nav .current-menu-item > a { color: var(--accent); }

.menu-button { display: none; }
.menu-button .icon--close,
.menu-button[aria-expanded="true"] .icon--menu { display: none; }
.menu-button[aria-expanded="true"] .icon--close { display: block; }

.updates { position: relative; }
.updates__toggle .icon { transition: transform var(--speed); }
.updates__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

/* 3px reading-progress line along the bottom edge (posts). */
.reading-progress {
	position: absolute;
	inset: auto 0 -1px;
	height: 3px;
	pointer-events: none;
}
.reading-progress__bar {
	display: block;
	height: 100%;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left center;
}

@media (hover: hover) {
	.primary-nav a:hover {
		color: var(--accent);
		text-decoration: underline;
		text-underline-offset: 5px;
		text-decoration-thickness: 1px;
	}
}