/* ------------------------------------------------------------------ Topbar */
.topbar {
	background: var(--kleur-topbar-bg, var(--kleur-primair));
	color: var(--kleur-topbar-tekst);
	font-size: 0.875rem;
}

/*
 * Het eerste item blijft links staan; de rest schuift naar rechts, tot
 * tegen de social-iconen aan.
 */
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ruimte-s) var(--ruimte-m);
	min-height: var(--topbar-hoogte);
}

.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }

.topbar__items {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ruimte-s) var(--ruimte-m);
	list-style: none;
	margin: 0;
	padding: 0;
}
.topbar__item:first-child { margin-inline-end: auto; }

.topbar__link { display: inline-flex; align-items: center; gap: 0.4rem; }
.topbar__icoon { flex: none; }

/* ------------------------------------------------------------------ Socials */
.socials { display: flex; align-items: center; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }

.socials__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.socials__link:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-1px); }
.socials__link img { width: 20px; height: 20px; }
.socials__icoon { display: block; }
.socials__letter { font-weight: 700; font-size: 0.85rem; line-height: 1; }

.socials--footer .socials__link { background: rgba(255, 255, 255, 0.12); }

/* In de topbar staan de iconen kaal, zonder rondje eromheen. */
.socials--topbar .socials__link { width: auto; height: auto; background: none; }
.socials--topbar .socials__link:hover { background: none; color: var(--kleur-secundair); }
.socials--topbar { gap: 0.9rem; }

/* ------------------------------------------------------------------ Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--kleur-header-bg);
	color: var(--kleur-header-tekst);
	box-shadow: var(--schaduw);
}

.header__inner {
	display: flex;
	align-items: center;
	gap: var(--ruimte-m);
	min-height: var(--header-hoogte);
}

.header__logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.header__logo img { height: var(--logo-hoogte, 70px); width: auto; max-height: var(--logo-hoogte, 70px); }
/*
 * Boven aan de pagina staat het logo uitvergroot: het begint op dezelfde
 * hoogte als anders en valt met de onderste helft over de gele rand heen.
 * Zodra de bezoeker scrollt krimpt het terug in de header.
 *
 * Het is een transform vanuit de linkerbovenhoek, dus de header zelf blijft
 * even hoog en er is geen layout shift.
 */
.header__logo--groot {
	transform-origin: top left;
	transform: scale( var( --logo-schaal, 1 ) );
	transition: transform 0.4s cubic-bezier( 0.22, 0.61, 0.36, 1 );
	will-change: transform;
}

body.is-gescrold .header__logo--groot { transform: none; }

@media ( max-width: 1024px ) {
	.header__logo--groot { transform: scale( var( --logo-schaal-klein, 1 ) ); }
	body.is-gescrold .header__logo--groot { transform: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.header__logo--groot { transition: none; }
}

/*
 * Het logo schommelt bij hover heen en weer, alsof het aan een spijker hangt:
 * het draaipunt zit bovenaan in het midden, dus de bovenkant blijft staan.
 * Alleen transform, dus geen layout shift en geen herberekening van de pagina.
 */
:root {
	--logo-schommel-hoek: 4deg;   /* hoe ver hij uitslaat */
	--logo-schommel-duur: 1.6s;   /* één keer heen en terug */
}

.header__logo img {
	transform-origin: 50% 0;
}

.header__logo:hover img,
.header__logo:focus-visible img {
	animation: kwdv-logo-schommel var(--logo-schommel-duur) ease-in-out infinite;
}

@keyframes kwdv-logo-schommel {
	0%,
	100% { transform: rotate(0deg); }
	25%  { transform: rotate(var(--logo-schommel-hoek)); }
	75%  { transform: rotate(calc(var(--logo-schommel-hoek) * -1)); }
}

@media (prefers-reduced-motion: reduce) {
	.header__logo:hover img,
	.header__logo:focus-visible img { animation: none; }
}

.header__naam { font-family: var(--font-kop); font-size: 1.4rem; color: var(--kleur-primair); }

/* Menu in het midden, logo links en de acties rechts. */
.header__nav { margin-inline: auto; }

.menu { display: flex; align-items: center; gap: var(--ruimte-m); list-style: none; margin: 0; padding: 0; }
.menu a {
	display: block;
	padding: 0.5rem 0;
	text-decoration: none;
	color: var(--kleur-header-tekst);
	font-weight: 500;
	font-size: 1rem;
	text-transform: none;
	letter-spacing: normal;
}
.menu a:hover,
.menu .current-menu-item > a,
.menu .current-menu-ancestor > a { color: var(--kleur-primair); }

/* Submenu */
.menu li { position: relative; }
.menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
	min-width: 240px;
	padding: 0.5rem 0;
	margin: 0;
	list-style: none;
	background: var(--kleur-wit);
	box-shadow: var(--schaduw);
	border-radius: var(--radius);
}
.menu li:hover > .sub-menu,
.menu li:focus-within > .sub-menu { display: block; }
.menu .sub-menu a { padding: 0.5rem 1rem; text-transform: none; font-weight: 500; font-size: 0.95rem; }

.header__acties { display: flex; align-items: center; gap: 0.75rem; flex: none; }

.header__zoekknop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--kleur-header-tekst);
	cursor: pointer;
}
.header__zoekknop:hover { background: rgba(0, 0, 0, 0.08); }

.header__knop--mobiel { display: none; }

.header__toggle { display: none; background: none; border: 0; padding: 0.5rem; cursor: pointer; }
.header__toggle-icon,
.header__toggle-icon::before,
.header__toggle-icon::after {
	display: block; width: 26px; height: 3px; background: var(--kleur-header-tekst); border-radius: 2px; content: "";
	transition: transform 0.2s ease;
}
.header__toggle-icon::before { transform: translateY(-8px); }
.header__toggle-icon::after { transform: translateY(5px); }

/* ------------------------------------------------------------------ Zoekbalk */
.zoekbalk { background: var(--kleur-licht); border-top: 1px solid var(--kleur-lijn); padding: var(--ruimte-s) 0; }
.search-form { display: flex; gap: 0.5rem; }
.search-form__field { flex: 1; }
.search-form__submit { display: inline-flex; align-items: center; justify-content: center; }

/* ------------------------------------------------------------------ Mobiel */
@media (max-width: 1024px) {
	.header__toggle { display: block; }
	.header__nav {
		display: none;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		background: var(--kleur-header-bg);
		padding: var(--ruimte-s) var(--container-padding) var(--ruimte-m);
		box-shadow: var(--schaduw);
		max-height: calc(100vh - var(--header-hoogte));
		overflow-y: auto;
	}
	.header__nav.is-open { display: block; }
	.menu { flex-direction: column; align-items: stretch; gap: 0; }
	.menu > li + li { border-top: 1px solid rgba(0, 0, 0, 0.12); }
	.menu a { padding: 0.85rem 0; }
	.menu .sub-menu { position: static; display: block; box-shadow: none; padding: 0 0 0.5rem 1rem; }
	.header__knop--desktop { display: none; }
	.header__knop--mobiel { display: block; margin-top: var(--ruimte-s); }
	.site-header { position: sticky; }
	.header__inner { position: relative; }
}

@media (max-width: 640px) {
	.topbar__item--desktop { display: none; }
	.topbar__inner { justify-content: center; }
	.topbar__items { justify-content: center; gap: 0.5rem 1rem; }
}

/* ------------------------------------------------------------ Account en wagen */
.header__kopknop {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	color: inherit;
	text-decoration: none;
}
.header__kopknop:hover { color: var(--kleur-accent); }

.kopknop__teller {
	position: absolute;
	top: -0.1rem;
	right: -0.1rem;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 0.25rem;
	border-radius: 999px;
	background: var(--kleur-accent);
	color: var(--kleur-wit);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.15rem;
	text-align: center;
}
.kopknop__teller:empty,
.kopknop__teller.is-leeg { display: none; }