/*
 * Site header, desktop navigation and mobile navigation panel.
 *
 * Without JavaScript the mobile menu is rendered as a plain list under the
 * bar; navigation.js adds html.js, which turns it into a toggled panel.
 */

body {
	--vx-admin-bar: 0px;
}

body.admin-bar {
	--vx-admin-bar: 32px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--vx-admin-bar: 46px;
	}
}

.site-header {
	position: sticky;
	top: var(--vx-admin-bar);
	z-index: var(--vx-z-header);
	/* Solid background: a backdrop-filter here would become the containing
	   block for the position:fixed mobile panel and clip it to the header. */
	background: var(--vx-color-surface);
	border-bottom: 1px solid var(--vx-color-border);
}

/* The WordPress admin bar is not fixed on narrow screens, so don't offset. */
@media (max-width: 600px) {
	body.admin-bar .site-header {
		top: 0;
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--vx-space-4);
	min-height: var(--vx-header-height);
}

/* Branding --------------------------------------------------------------- */

.site-branding {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin-right: auto;
}

.site-branding .custom-logo-link {
	display: block;
	border-radius: var(--vx-radius-sm);
}

/* The official logo is a stacked lockup (mark over wordmark), so it needs
   most of the bar's height to stay legible. Never stretched or cropped. */
.site-branding .custom-logo {
	width: auto;
	height: auto;
	max-height: calc(var(--vx-header-height) - 1rem);
}

@media (max-width: 639px) {
	.site-branding .custom-logo {
		max-height: 3rem;
	}
}

.vx-wordmark {
	display: inline-flex;
	flex-direction: column;
	color: var(--vx-color-text);
	text-decoration: none;
	line-height: 1;
	border-radius: var(--vx-radius-sm);
}

.vx-wordmark:hover {
	color: var(--vx-color-text);
}

.vx-wordmark__name {
	font-size: 1.5rem;
	font-weight: var(--vx-weight-extrabold);
	letter-spacing: -0.03em;
}

.vx-wordmark__tagline {
	margin-top: 4px;
	color: var(--vx-color-text-muted);
	font-size: 0.6875rem;
	font-weight: var(--vx-weight-medium);
	letter-spacing: 0.01em;
}

.site-header .vx-wordmark__tagline {
	display: none;
}

/* Header CTA -------------------------------------------------------------- */

.site-header__cta {
	flex-shrink: 0;
}

/* Sign in / My Dashboard: beside the CTA on wide screens, in the panel below. */
.site-header__account {
	display: none;
	flex-shrink: 0;
	color: var(--vx-color-text);
	font-weight: var(--vx-weight-semibold);
	text-decoration: none;
}

.site-header__account:hover {
	color: var(--vx-color-primary);
}

@media (min-width: 1024px) {
	.site-header__account {
		display: inline-flex;
	}
}

.primary-nav__cta .vx-btn + .vx-btn {
	margin-top: var(--vx-space-3);
}

@media (max-width: 1023px) {
	.site-header__cta {
		min-height: 2.5rem;
		padding-inline: var(--vx-space-4);
		font-size: var(--vx-text-small);
	}
}

/* Toggle ----------------------------------------------------------------- */

.nav-toggle {
	display: none;
	place-items: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: calc(-1 * var(--vx-space-2));
	padding: 0;
	border: 0;
	border-radius: var(--vx-radius-md);
	background: transparent;
	color: var(--vx-color-text);
}

.nav-toggle:hover {
	background: var(--vx-color-surface-alt);
}

.nav-toggle:focus-visible {
	outline: none;
	box-shadow: var(--vx-focus-ring);
}

.nav-toggle .vx-icon {
	width: 1.5rem;
	height: 1.5rem;
}

.nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
	display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
	display: block;
}

/* Navigation list (shared) --------------------------------------------- */

.primary-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav__list a {
	display: block;
	color: var(--vx-color-text);
	font-size: var(--vx-text-nav);
	font-weight: var(--vx-weight-medium);
	text-decoration: none;
	transition: color var(--vx-transition), background-color var(--vx-transition);
}

.primary-nav__list a:hover,
.primary-nav__list .current-menu-item > a,
.primary-nav__list .current-menu-ancestor > a,
.primary-nav__list .current_page_parent > a,
.primary-nav__list a[aria-current="page"] {
	color: var(--vx-color-primary);
}

.primary-nav__list .current-menu-item > a,
.primary-nav__list a[aria-current="page"] {
	font-weight: var(--vx-weight-semibold);
}

.primary-nav__list .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Desktop ---------------------------------------------------------------- */

@media (min-width: 1024px) {
	.site-header__inner {
		gap: var(--vx-space-8);
	}

	.primary-nav {
		margin-left: auto;
	}

	.primary-nav__list {
		display: flex;
		align-items: center;
		gap: clamp(1.25rem, 0.5rem + 1.6vw, 2.25rem);
	}

	.primary-nav__list > li {
		position: relative;
	}

	.primary-nav__list > li > a {
		position: relative;
		padding-block: var(--vx-space-2);
		white-space: nowrap;
	}

	.primary-nav__list > li > a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -2px;
		height: 2px;
		border-radius: 2px;
		background: var(--vx-color-primary);
		transform: scaleX(0);
		transition: transform var(--vx-transition);
	}

	.primary-nav__list > .current-menu-item > a::after,
	.primary-nav__list > li > a[aria-current="page"]::after {
		transform: scaleX(1);
	}

	/* Optional second level: revealed on hover and keyboard focus. */
	.primary-nav__list .sub-menu {
		position: absolute;
		top: 100%;
		left: calc(-1 * var(--vx-space-4));
		min-width: 14rem;
		padding: var(--vx-space-2);
		border: 1px solid var(--vx-color-border);
		border-radius: var(--vx-radius-md);
		background: var(--vx-color-surface);
		box-shadow: var(--vx-shadow-md);
		opacity: 0;
		visibility: hidden;
		transform: translateY(4px);
		transition: opacity var(--vx-transition), transform var(--vx-transition), visibility var(--vx-transition);
	}

	.primary-nav__list li:hover > .sub-menu,
	.primary-nav__list li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.primary-nav__list .sub-menu a {
		padding: var(--vx-space-2) var(--vx-space-3);
		border-radius: var(--vx-radius-sm);
	}

	.primary-nav__list .sub-menu a:hover {
		background: var(--vx-color-primary-lighter);
	}
}

/* Mobile and tablet ------------------------------------------------------ */

@media (max-width: 1023px) {
	/* No-JS fallback: list wraps underneath the bar. */
	.site-header__inner {
		flex-wrap: wrap;
	}

	.primary-nav {
		order: 10;
		flex-basis: 100%;
		padding-bottom: var(--vx-space-4);
	}

	.primary-nav__list a {
		padding: var(--vx-space-3) 0;
		font-size: 1.0625rem;
	}

	.primary-nav__list .sub-menu {
		padding-left: var(--vx-space-4);
	}

	/* Enhanced: toggled panel. */
	.js .nav-toggle {
		display: grid;
	}

	.js .site-header__inner {
		flex-wrap: nowrap;
	}

	.js .primary-nav {
		position: fixed;
		top: calc(var(--vx-header-height) + var(--vx-admin-bar));
		left: 0;
		right: 0;
		bottom: 0;
		z-index: var(--vx-z-overlay);
		display: none;
		flex-direction: column;
		padding: var(--vx-space-4) var(--vx-gutter) calc(var(--vx-space-8) + env(safe-area-inset-bottom));
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--vx-color-surface);
		border-top: 1px solid var(--vx-color-border);
	}

	.js.vx-nav-open .primary-nav {
		display: flex;
		animation: vx-nav-in var(--vx-duration) var(--vx-ease);
	}

	.js .primary-nav__list > li {
		border-bottom: 1px solid var(--vx-color-border);
	}

	.js .primary-nav__list a {
		padding: var(--vx-space-4) var(--vx-space-2);
		border-radius: var(--vx-radius-sm);
	}

	.js .primary-nav__list a:hover {
		background: var(--vx-color-primary-lighter);
	}

	.primary-nav__cta {
		margin-top: var(--vx-space-6);
	}

	/* Body scroll lock while the panel is open. */
	html.vx-nav-open,
	html.vx-nav-open body {
		overflow: hidden;
	}
}

@media (min-width: 1024px) {
	.primary-nav__cta {
		display: none;
	}
}

@keyframes vx-nav-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

@media (max-width: 359px) {
	.site-header__cta {
		display: none;
	}
}