/**
 * header-scroll.css — transparent header on load, solid on scroll
 *
 * .sp-header carries the "Navy (Header)" background preset (has-navy-background-color),
 * which WP core renders as `background-color: var(--wp--preset--color--navy) !important`
 * with specificity (0,1,0). The two rules below use 2- and 3-class selectors so they
 * win on specificity alone, independent of stylesheet load order.
 */

.sp-header {
	transition: background-color 0.3s ease, padding 0.3s ease;
}

.sp-header.has-navy-background-color {
	background-color: transparent !important;
}

.sp-header.has-navy-background-color.is-scrolled {
	background-color: var(--wp--preset--color--navy) !important;
}

/*
 * Shrink on scroll like the template (≥992px): 27px padding + 39px logo
 * (93px) at the top, 15px + 34px (64px) once scrolled. !important because
 * the top-state padding is inline in the template part markup.
 */
.sp-header.is-scrolled {
	padding-top: 0.9375rem !important;
	padding-bottom: 0.9375rem !important;
}

.sp-header .wp-block-site-logo img {
	max-height: 39px;
	width: auto;
	transition: max-height 0.5s ease;
}

.sp-header.is-scrolled .wp-block-site-logo img {
	max-height: 34px;
}

/*
 * Fallback: pages whose content does not start with a full-bleed cover
 * would show white nav text on white background — keep the header solid
 * there from the start.
 */
body:not(.is-front-page):not(:has(.wp-site-blocks > .wp-block-cover)):has(.entry-content > :first-child:not(.wp-block-cover)) .sp-header.has-navy-background-color {
	background-color: var(--wp--preset--color--navy) !important;
}

/* The template shows no submenu chevron — the dropdown still opens on hover. */
.sp-header .wp-block-navigation__submenu-icon {
	display: none;
}

/* Active menu item — the template highlights it in accent blue. */
.sp-header .wp-block-navigation-item.current-menu-item > a,
.sp-header .wp-block-navigation-item.current-menu-ancestor > a {
	color: var(--wp--preset--color--accent);
}

/*
 * Raise the burger breakpoint. Core collapses the navigation block at
 * 600px; between 600px and ~900px the horizontal menu wraps over the
 * logo. Mirror core's mobile rules up to 899px instead.
 */
@media (max-width: 899px) {
	.sp-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.sp-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}