/*
 * Fixed header (spec §4.2). Solid by default; `.js .is-transparent` is the front-page top state (motion.js removes it
 * after 50px of scroll or while the menu is open). Without JavaScript the header stays solid, so it is never white on white.
 */
.site-header {
	position: fixed;
	top: 0;
	inset-inline: 0;
	z-index: 50;
	transition: all var(--duration-base) var(--ease-default);
	background-color: var(--color-white-95);
	-webkit-backdrop-filter: blur(var(--blur-sm));
	backdrop-filter: blur(var(--blur-sm));
	border-bottom: 1px solid var(--color-gray-100);
	--nav-color: var(--color-gray-700);
	--nav-hover: var(--color-brand-orange);
}
.js .site-header.is-transparent {
	background-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom-color: transparent;
	border-bottom-width: 0;
	--nav-color: var(--color-white-90);
	--nav-hover: var(--color-white);
}
.site-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-row);
}
.site-header__logo { flex-shrink: 0; }
.site-header__logo-img { height: calc(var(--spacing) * 10); width: auto; transition: opacity var(--duration-base) var(--ease-default); }
@media (min-width: 48rem) { .site-header__logo-img { height: calc(var(--spacing) * 12); } }
/* src swap is instant on the live site: show one of the two logos, never cross-fade. */
.site-header__logo-img--light { display: none; }
.js .site-header.is-transparent .site-header__logo-img--light { display: block; }
.js .site-header.is-transparent .site-header__logo-img--dark { display: none; }

.site-nav { display: none; align-items: center; gap: calc(var(--spacing) * 4); }
.site-nav__link {
	font-size: var(--text-sm);
	line-height: var(--text-sm-lh);
	font-weight: var(--font-weight-medium);
	color: var(--nav-color);
	white-space: nowrap; /* plan fix 4: no two-line "Over ons" at 1024 */
	transition: color var(--duration-fast) var(--ease-default);
}
.site-nav__link:hover { color: var(--nav-hover); }
.site-nav__link.is-active { color: var(--color-brand-orange); }

.site-header__actions { display: none; align-items: center; gap: calc(var(--spacing) * 4); }
.site-header__actions .btn { white-space: nowrap; }
.js .site-header.is-transparent .site-header__call { color: var(--color-white-90); }
.js .site-header.is-transparent .site-header__call:hover { color: var(--color-white); background-color: var(--color-white-10); }

.menu-toggle {
	display: inline-flex;
	padding: calc(var(--spacing) * 2);
	color: var(--color-gray-700);
	transition: color var(--duration-fast) var(--ease-default);
}
.js .site-header.is-transparent .menu-toggle { color: var(--color-white); }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

@media (min-width: 64rem) {
	.site-nav, .site-header__actions { display: flex; }
	.menu-toggle { display: none; }
}
/* Plan fix 4: 1024–1279 the gaps tighten from 16 to 12 so the row fits (live wrapped "Over ons" and the buttons). */
@media (min-width: 64rem) and (max-width: 79.999rem) {
	.site-nav, .site-header__actions { gap: calc(var(--spacing) * 3); }
}
@media (min-width: 80rem) {
	.site-nav { gap: calc(var(--spacing) * 6); }
}