/**
 * Header en hoofdnavigatie
 */

.bw-header {
	position: sticky;
	top: 0;
	z-index: var(--bw-z-header);
	background-color: var(--bw-white);
	border-block-end: 1px solid var(--bw-border);
}

.bw-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bw-space-md);
	min-height: var(--bw-header-height);
}

.bw-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--bw-midnight);
	padding-block: var(--bw-space-2xs);
}

.bw-header__logo svg {
	width: auto;
	height: clamp(2.5rem, 4.5vw, 3.25rem);
}

/* ---------------------------------------------------------------
 * Navigatie — desktop
 * ------------------------------------------------------------ */
.bw-nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	flex: 1;
	justify-content: flex-end;
}

.bw-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 1.5vw, 1.75rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bw-nav__item {
	position: relative;
}

.bw-nav__link {
	display: inline-block;
	padding-block: var(--bw-space-2xs);
	font-size: var(--bw-text-sm);
	text-decoration: none;
	white-space: nowrap;
}

/* Een menu-item dat alleen groepeert is een knop, geen link. Hij ziet
   eruit als de andere items, want voor de bezoeker is het verschil
   alleen dat er een submenu openklapt in plaats van een pagina laadt. */
.bw-nav__link--toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--bw-text-sm);
	color: inherit;
	cursor: pointer;
}

/* Het streepje onder het item hoort bij de tekst, niet bij de hele knop:
   anders komt het naast het pijltje te staan in plaats van eronder. */
.bw-nav__link--toggle::after {
	content: none;
}

.bw-nav__label::after {
	content: "";
	display: block;
	height: 2px;
	margin-block-start: 2px;
	background-color: var(--bw-caramel);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--bw-duration) var(--bw-ease);
}

.bw-nav__link--toggle:hover .bw-nav__label::after,
.bw-nav__item.is-current > .bw-nav__link--toggle .bw-nav__label::after {
	transform: scaleX(1);
}

.bw-nav__chevron {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	transition: rotate var(--bw-duration) var(--bw-ease);
}

.bw-nav__link--toggle[aria-expanded="true"] .bw-nav__chevron {
	rotate: 180deg;
}

.bw-nav__link::after {
	content: "";
	display: block;
	height: 2px;
	margin-block-start: 2px;
	background-color: var(--bw-caramel);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--bw-duration) var(--bw-ease);
}

.bw-nav__link:hover::after,
.bw-nav__item.is-current > .bw-nav__link::after {
	transform: scaleX(1);
}

.bw-nav__item--has-children {
	display: flex;
	align-items: center;
	gap: 2px;
}

.bw-nav__submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--bw-radius-sm);
	background: none;
	cursor: pointer;
	color: inherit;
}

.bw-nav__submenu-toggle .bw-icon {
	width: 1.1rem;
	height: 1.1rem;
	transition: transform var(--bw-duration) var(--bw-ease);
}

.bw-nav__submenu-toggle[aria-expanded="true"] .bw-icon {
	transform: rotate(180deg);
}

.bw-nav__submenu {
	position: absolute;
	top: calc(100% + 0.75rem);
	left: -1rem;
	display: none;
	min-width: 14rem;
	padding: var(--bw-space-2xs);
	margin: 0;
	list-style: none;
	background-color: var(--bw-white);
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius);
	box-shadow: var(--bw-shadow);
}

/* Op het data-attribuut en niet op de klasse: het bedieningselement is
   soms een los pijltje naast een link, en soms het menu-item zelf. Beide
   dragen data-bw-submenu-toggle, dus deze regel blijft kloppen. */
.bw-nav__item--has-children:has([data-bw-submenu-toggle][aria-expanded="true"]) .bw-nav__submenu {
	display: block;
}

/* Kopjes binnen een uitklapmenu, met hun eigen lijstje eronder. */
.bw-nav__subgroup + .bw-nav__subgroup {
	margin-block-start: var(--bw-space-2xs);
	padding-block-start: var(--bw-space-2xs);
	border-block-start: 1px solid var(--bw-border);
}

.bw-nav__subheading {
	display: block;
	padding: var(--bw-space-2xs) var(--bw-space-xs) 0;
	font-size: var(--bw-text-xs, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bw-text-muted);
}

.bw-nav__sublist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bw-nav__sublink {
	display: block;
	padding: var(--bw-space-2xs) var(--bw-space-xs);
	border-radius: var(--bw-radius-sm);
	font-size: var(--bw-text-sm);
	text-decoration: none;
}

.bw-nav__sublink:hover {
	background-color: var(--bw-oat);
}

/* ---------------------------------------------------------------
 * Acties rechts
 * ------------------------------------------------------------ */
.bw-nav__actions {
	display: flex;
	align-items: center;
	gap: var(--bw-space-xs);
}

.bw-nav__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--bw-radius-sm);
	background: none;
	color: inherit;
	cursor: pointer;
}

.bw-nav__icon-btn:hover {
	background-color: var(--bw-oat);
}

.bw-nav__login {
	display: inline-flex;
	align-items: center;
	/* Hoogte tot boven de 24px van WCAG 2.2 2.5.8; de link stond op 25px
	   maar zonder eigen ruimte eromheen. */
	min-height: 2.75rem;
	padding-inline: var(--bw-space-2xs);
	gap: var(--bw-space-3xs);
	font-size: var(--bw-text-sm);
	text-decoration: none;
	white-space: nowrap;
}

.bw-nav__login .bw-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.bw-nav__login:hover {
	text-decoration: underline;
	text-decoration-color: var(--bw-caramel);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

/* ---------------------------------------------------------------
 * Zoekpaneel
 * ------------------------------------------------------------ */
.bw-search-panel {
	border-block-start: 1px solid var(--bw-border);
	background-color: var(--bw-oat-tint);
	padding-block: var(--bw-space-md);
}

.bw-search-form {
	display: flex;
	gap: var(--bw-space-2xs);
	max-width: 34rem;
}

.bw-search-form input[type="search"] {
	flex: 1;
	/* Zonder min-width houdt een invoerveld in een flexrij zijn eigen
	   minimumbreedte aan en duwt het de rij breder dan het scherm. */
	min-width: 0;
	min-height: 3rem;
	padding: 0.6rem 1rem;
	border: 1px solid var(--bw-border-strong);
	border-radius: var(--bw-radius-sm);
	background: var(--bw-white);
}

/* ---------------------------------------------------------------
 * Mobiel
 * ------------------------------------------------------------ */
.bw-header__toggle {
	display: none;
	align-items: center;
	gap: var(--bw-space-2xs);
	padding: var(--bw-space-2xs) var(--bw-space-xs);
	border: 1px solid var(--bw-border-strong);
	border-radius: var(--bw-radius-sm);
	background: none;
	color: inherit;
	font-family: var(--bw-font-heading);
	font-size: var(--bw-text-sm);
	letter-spacing: var(--bw-tracking-caps);
	text-transform: uppercase;
	cursor: pointer;
	min-height: 2.75rem;
}

.bw-header__toggle-bars {
	display: grid;
	gap: 4px;
	width: 1.15rem;
}

.bw-header__toggle-bars span {
	display: block;
	height: 2px;
	background-color: currentColor;
	transition: transform var(--bw-duration) var(--bw-ease), opacity var(--bw-duration) var(--bw-ease);
}

.bw-header__toggle[aria-expanded="true"] .bw-header__toggle-bars span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.bw-header__toggle[aria-expanded="true"] .bw-header__toggle-bars span:nth-child(2) {
	opacity: 0;
}

.bw-header__toggle[aria-expanded="true"] .bw-header__toggle-bars span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 64rem) {
	.bw-header__toggle {
		display: inline-flex;
	}

	.bw-nav {
		position: fixed;
		inset: var(--bw-header-height) 0 0 0;
		z-index: var(--bw-z-overlay);
		display: none;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: var(--bw-space-lg);
		padding: var(--bw-space-lg) var(--bw-gutter) var(--bw-space-2xl);
		background-color: var(--bw-white);
		overflow-y: auto;
	}

	.bw-nav.is-open {
		display: flex;
	}

	.bw-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.bw-nav__item {
		border-block-end: 1px solid var(--bw-border);
	}

	.bw-nav__item--has-children {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.bw-nav__link {
		flex: 1;
		padding-block: var(--bw-space-sm);
		font-size: var(--bw-text-lg);
		font-family: var(--bw-font-heading);
	}

	.bw-nav__link::after {
		display: none;
	}

	.bw-nav__submenu-toggle {
		width: 2.75rem;
		height: 2.75rem;
	}

	.bw-nav__submenu {
		position: static;
		flex-basis: 100%;
		border: 0;
		box-shadow: none;
		padding: 0 0 var(--bw-space-2xs) var(--bw-space-sm);
		border-left: 2px solid var(--bw-caramel);
		margin-block-end: var(--bw-space-2xs);
	}

	.bw-nav__actions {
		flex-direction: column;
		align-items: stretch;
		gap: var(--bw-space-sm);
	}

	.bw-nav__actions .bw-btn {
		width: 100%;
	}

	.bw-nav__icon-btn {
		display: none;
	}

	.bw-nav__login {
		justify-content: center;
		min-height: 2.75rem;
	}
}

/* ---------------------------------------------------------------
 * Transparante header boven een doorlopende hero
 *
 * De hero schuift onder de header door, zodat het beeld tot de bovenrand
 * loopt en er geen witte balk tussen zit. Zodra de bezoeker scrollt krijgt
 * de header alsnog een achtergrond, want dan staat er gewone content
 * onder de navigatie.
 * ------------------------------------------------------------ */
.bw-header-over-hero .bw-header {
	background-color: transparent;
	border-block-end-color: transparent;
	transition:
		background-color var(--bw-duration) var(--bw-ease),
		border-color var(--bw-duration) var(--bw-ease),
		box-shadow var(--bw-duration) var(--bw-ease);
}

.bw-header.is-scrolled,
.bw-header-over-hero .bw-header.is-scrolled {
	background-color: var(--bw-white);
	border-block-end-color: var(--bw-border);
	box-shadow: var(--bw-shadow-sm);
}

/* Het mobiele menu vult het scherm en heeft dus altijd een eigen
   achtergrond nodig, ook als de header transparant is. */
.bw-header-over-hero .bw-header:has(.bw-nav.is-open),
.bw-header-over-hero .bw-header:has(.bw-search-panel:not([hidden])) {
	background-color: var(--bw-white);
	border-block-end-color: var(--bw-border);
}