/* Header
   ------
   De header staat vast bovenaan (position: fixed) en is standaard doorzichtig.
   Zodra de bezoeker scrollt krijgt <header> de class .lt-header-scrolled
   (zie assets/js/header-scroll.js): het logo krimpt en de balk krijgt de
   bruine achtergrond, zodat het lichte logo en het witte menu leesbaar
   blijven boven de lichte secties.

   Omdat de header fixed staat, verspringt de pagina-inhoud hier niet van. */

.elementor-location-header {
	--lt-header-logo-scrolled: 60px;
	--lt-header-padding-scrolled: 14px;
	--lt-header-bg: #301E0F; /* Fundament */
	--lt-header-transition: 0.3s ease;
}

.elementor-location-header > .e-con {
	transition: background-color var(--lt-header-transition);
}

.elementor-location-header .elementor-widget-image img,
.elementor-location-header > .e-con > .e-con-inner {
	transition: width var(--lt-header-transition),
	            padding-top var(--lt-header-transition),
	            padding-bottom var(--lt-header-transition);
}

/* body-prefix om de breedte die Elementor zelf op het logo zet te overschrijven. */
body .elementor-location-header.lt-header-scrolled .elementor-widget-image img {
	width: var(--lt-header-logo-scrolled);
}

body .elementor-location-header.lt-header-scrolled > .e-con {
	background-color: var(--lt-header-bg);
}

body .elementor-location-header.lt-header-scrolled > .e-con > .e-con-inner {
	padding-top: var(--lt-header-padding-scrolled);
	padding-bottom: var(--lt-header-padding-scrolled);
}

@media (prefers-reduced-motion: reduce) {
	.elementor-location-header > .e-con,
	.elementor-location-header .elementor-widget-image img,
	.elementor-location-header > .e-con > .e-con-inner {
		transition: none;
	}
}