/* ==========================================================================
   Site header — sticky positioning, transparent homepage state, CTA button
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
}

/* Inner-page header: always solid, subtle separation from content below. */
.site-header--solid {
	background-color: #ffffff;
	border-bottom: 1px solid var( --wp--preset--color--border );
}

/* Homepage header: transparent + white text until scrolled past the hero,
   then solidifies to match the inner-page header exactly. */
.site-header--transparent {
	background-color: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.site-header--transparent.is-scrolled {
	background-color: #ffffff;
	border-bottom-color: var( --wp--preset--color--border );
}

.site-header--transparent .site-header__logo-light {
	display: block;
}
.site-header--transparent .site-header__logo-standard {
	display: none;
}
.site-header--transparent.is-scrolled .site-header__logo-light {
	display: none;
}
.site-header--transparent.is-scrolled .site-header__logo-standard {
	display: block;
}

/* Nav text swaps from white to navy once the transparent header solidifies. */
.site-header--transparent .wp-block-navigation:not(.cta-button) {
	color: var( --wp--preset--color--on-dark );
}
.site-header--transparent.is-scrolled .wp-block-navigation {
	color: var( --wp--preset--color--text-primary );
}

@media ( prefers-reduced-motion: reduce ) {
	.site-header--transparent {
		transition: none;
	}
}

/* ==========================================================================
   Navigation items
   ========================================================================== */

/* Nav links use a plain colour shift on hover rather than the underline
   used for body-copy links — underlines read as visual clutter in a nav
   bar; the colour change alone is sufficient wayfinding feedback here. */
.wp-block-navigation-item > a:not(.wp-block-navigation-item__content.cta-button) {
	text-decoration: none !important;
}
.wp-block-navigation-item > a:hover {
	color: var( --wp--preset--color--red-700 );
}

/* Last nav item — the Contact CTA — always renders as the primary button,
   regardless of header variant (explicit requirement: CTA stays primary
   red even on the white-text homepage header). */
.wp-block-navigation-item.cta-button > a {
	background-color: var( --wp--preset--color--red-600 );
	color: var( --wp--preset--color--on-dark ) !important;
	padding: var( --wp--preset--spacing--xs ) var( --wp--preset--spacing--sm );
	border-radius: 4px;
	text-decoration: none !important;
}
.wp-block-navigation-item.cta-button > a:hover {
	background-color: var( --wp--preset--color--red-700 );
	color: var( --wp--preset--color--on-dark ) !important;
}