/* ============================================================================
   Site Header — sticky nav, brand lockup, mobile drawer
   ============================================================================ */

/* Offset in-page anchor jumps so the sticky header never covers section tops. */
html {
	scroll-padding-top: calc(var(--header-height) + var(--space-4));
	scroll-behavior: smooth;
}

/* When the WordPress admin bar is present, nudge the sticky header below it. */
.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	background: color-mix(in srgb, var(--bg-page) 88%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: var(--border-hairline) solid transparent;
	transition: border-color var(--dur-base) var(--ease-standard),
		background-color var(--dur-base) var(--ease-standard);
}

.site-header.is-scrolled {
	border-bottom-color: var(--border-default);
	background: color-mix(in srgb, var(--bg-page) 94%, transparent);
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	min-block-size: var(--header-height);
}

/* ---- Brand lockup -------------------------------------------------------- */
.brand-lockup {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	text-decoration: none;
	color: var(--color-ink);
}

.brand-mark {
	display: inline-flex;
	inline-size: 40px;
	block-size: 40px;
	color: var(--color-ink);
}

.brand-mark svg {
	inline-size: 100%;
	block-size: 100%;
}

.brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.brand-name {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: 1.4rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-ink);
}

.brand-tagline {
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: 0.6rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-top: 3px;
}

/* Custom logo (when set) */
.site-branding .custom-logo {
	block-size: auto;
	max-block-size: 48px;
	inline-size: auto;
}

/* ---- Primary navigation -------------------------------------------------- */
.primary-navigation {
	display: flex;
	align-items: center;
}

.primary-menu {
	display: flex;
	align-items: center;
	gap: clamp(var(--space-4), 2.4vw, var(--space-7));
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-menu a {
	position: relative;
	display: inline-block;
	padding-block: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--fs-caption);
	font-weight: var(--fw-medium);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-graphite);
	transition: color var(--dur-fast) var(--ease-standard);
}

.primary-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	inline-size: 0;
	block-size: var(--border-thick);
	background: var(--accent);
	transition: inline-size var(--dur-base) var(--ease-out);
}

.primary-menu a:hover,
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a {
	color: var(--color-ink);
}

.primary-menu a:hover::after,
.primary-menu .current-menu-item > a::after,
.primary-menu .current_page_item > a::after {
	inline-size: 100%;
}

/* ---- Header actions ------------------------------------------------------ */
.header-actions {
	display: flex;
	align-items: center;
}

.header-cta .btn-arrow {
	transition: transform var(--dur-base) var(--ease-out);
}

.header-cta:hover .btn-arrow {
	transform: translateX(3px);
}

/* ---- Mobile toggle ------------------------------------------------------- */
.mobile-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	background: transparent;
	border: var(--border-hairline) solid var(--border-default);
	border-radius: var(--radius-sm);
	cursor: pointer;
	color: var(--color-ink);
}

.menu-toggle-icon {
	display: inline-flex;
	flex-direction: column;
	gap: 5px;
}

.menu-toggle-icon .icon-bar {
	display: block;
	inline-size: 20px;
	block-size: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--dur-base) var(--ease-standard),
		opacity var(--dur-fast) var(--ease-standard);
}

.is-nav-open .mobile-menu-toggle .icon-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.is-nav-open .mobile-menu-toggle .icon-bar:nth-child(2) {
	opacity: 0;
}
.is-nav-open .mobile-menu-toggle .icon-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ---- Responsive: collapse nav < lg -------------------------------------- */
@media (max-width: 1023px) {
	.mobile-menu-toggle {
		display: inline-flex;
		order: 3;
	}

	.header-actions {
		display: none;
	}

	.primary-navigation {
		position: fixed;
		inset: var(--header-height) 0 0 0;
		z-index: var(--z-modal);
		display: block;
		padding: var(--space-7) var(--gutter);
		background: var(--bg-page);
		border-top: var(--border-hairline) solid var(--border-default);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--dur-slow) var(--ease-out),
			visibility var(--dur-slow) var(--ease-out);
		overflow-y: auto;
	}

	.is-nav-open .primary-navigation {
		transform: translateX(0);
		visibility: visible;
	}

	.primary-menu {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-2);
	}

	.primary-menu a {
		display: block;
		padding-block: var(--space-4);
		font-size: var(--fs-h4);
		border-bottom: var(--border-hairline) solid var(--border-default);
	}

	.primary-menu a::after {
		display: none;
	}

	body.nav-locked {
		overflow: hidden;
	}
}

@media (max-width: 480px) {
	.brand-tagline {
		font-size: 0.55rem;
		letter-spacing: 0.22em;
	}
}