:root {
	--wvw-header-height: 80px;
}

/* WP core already outputs the skip-link hide/reveal-on-focus mechanics for block themes; this only aligns its focus-state colors with the brand palette. */
.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--dark-blue);
}

.site-header {
	position: relative;
	background-color: var(--wp--preset--color--white);
	box-shadow: 0 1px 0 0 rgba(10, 48, 82, 0.08);
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header__inner {
	min-height: var(--wvw-header-height);
	flex-wrap: nowrap;
}

.site-header__logo {
	display: block;
	margin: 0;
}

.site-header__logo img {
	display: block;
	height: auto;
}

.site-header__logo--wordmark {
	display: none;
}

.site-header__logo--icon {
	display: block;
	width: 59px;
}

body.home .site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	background-color: transparent;
	box-shadow: none;
}

/* The admin toolbar is position:fixed too, so it doesn't push our own fixed header down the
   way it pushes normal in-flow content — offset to match WP core's own admin-bar bump values. */
body.home.admin-bar .site-header {
	top: 32px;
}

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

body.home .site-header:not(.is-scrolled) .site-header__logo--wordmark {
	display: block;
	width: 176px;
}

body.home .site-header:not(.is-scrolled) .site-header__logo--icon {
	display: none;
}

/* Figma: the transparent/home header sits top-aligned (the wordmark is taller than the 80px
   bar and overhangs its bottom edge); the solid/default header stays vertically centered. */
body.home .site-header:not(.is-scrolled) .site-header__inner {
	align-items: flex-start;
	padding-top: 1.5rem;
}

body.home .site-header.is-scrolled {
	background-color: var(--wp--preset--color--white);
	box-shadow: 0 1px 0 0 rgba(10, 48, 82, 0.08);
}

/* No "display" here on purpose — core already sets display:flex by default and hides the
   button above 600px via its own @media rule. Redeclaring display here would tie that rule's
   specificity and (since we load after core) win, leaving the button visible at desktop sizes. */
.site-header__nav .wp-block-navigation__responsive-container-open,
.site-header__nav .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}

.site-header__nav .wp-block-navigation-item {
	position: relative;
}

.site-header__nav .wp-block-navigation-item + .wp-block-navigation-item {
	margin-left: 1.5rem;
}

/* Height matches Figma's diagonal tick within the 80px nav bar (top/bottom inset ~28.75%/28.52%
   of the header height => ~34px), not an arbitrary value. */
.site-header__nav .wp-block-navigation-item + .wp-block-navigation-item::before {
	content: "";
	position: absolute;
	left: -0.9rem;
	top: 50%;
	width: 1px;
	height: 34px;
	background-color: var(--wp--preset--color--gold);
	transform: translateY(-50%) rotate(25deg);
}

/* Figma: divider is white on the transparent/home header, gold on the solid/default one. */
body.home .site-header:not(.is-scrolled) .site-header__nav .wp-block-navigation-item + .wp-block-navigation-item::before {
	background-color: var(--wp--preset--color--white);
}

/* Mirrors core's own 600px responsive-menu breakpoint (wp-includes/blocks/navigation/style.css)
   so this stays in sync with when the drawer, rather than the horizontal row, is showing. */
@media (max-width: 599px) {
	.site-header__nav .wp-block-navigation__responsive-container-content {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.site-header__nav .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.site-header__nav .wp-block-navigation-item + .wp-block-navigation-item {
		margin-left: 0;
	}

	.site-header__nav .wp-block-navigation-item + .wp-block-navigation-item::before {
		display: none;
	}
}

/* Fixed header on home breaks post-content's :first-child margin/padding reset upstream. */
body.home .wp-block-post-content {
	margin-block-start: 0;
	padding-top: 0;
}