/**
 * Mobiel menu (tot en met 1024 px).
 *
 * Logo links, alle iconen rechts. Het menu vult het hele scherm: bovenin
 * "Menu" met rechts een rond kruisje, daaronder de hoofditems. Een item met
 * een submenu of megamenu krijgt rechts een chevron; aantikken schuift een
 * nieuw scherm over het vorige. Onder het menu staan de logo's uit de footer.
 *
 * Alle maten en kleuren staan in :root, dus je past ze op één plek aan.
 */

:root {
	--navm-bg: var(--kleur-wit, #fff);
	--navm-rand: rgba(0, 0, 0, 0.06);
	--navm-sluit-rand: rgba(0, 0, 0, 0.22);
	--navm-rij: 3.25rem;
	--navm-zijruimte: 1.25rem;
	--navm-duur: 0.25s;
	--navm-sluit: 2.5rem;
	--navm-logos-boven: 3.5rem;
	--navm-laag: 1100;
	--navm-icoon: 26px;          /* zoeken, account en winkelwagen in de header */
}

@media (max-width: 1024px) {

	/* ---------------------------------------------------------------------
	 * De header zelf: logo links, iconen rechts
	 * ------------------------------------------------------------------ */

	.header__inner {
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
	}

	.header__logo {
		margin-right: auto;
	}

	.header__acties {
		align-items: center;
		gap: 0.25rem;
		margin-left: auto;
	}

	/* De iconen iets groter dan op desktop: makkelijker aan te tikken. */
	.header__zoekknop svg,
	.header__kopknop svg {
		width: var(--navm-icoon);
		height: var(--navm-icoon);
	}

	/* ---------------------------------------------------------------------
	 * Het menu: schermvullend
	 * ------------------------------------------------------------------ */

	body.menu-actief {
		overflow: hidden;
	}

	/* De header heeft een eigen z-index en dus een eigen stapelcontext. Zolang
	   het menu openstaat tillen we die context omhoog, anders blijft het menu
	   onder de chatwolk en het kruisje liggen. */
	body.menu-actief .site-header {
		z-index: var(--navm-laag);
	}

	.header__inner .header__nav {
		position: fixed;
		inset: 0;
		height: 100dvh;
		max-height: none; /* header.css begrenst het menu anders tot onder de header */
		z-index: var(--navm-laag);
		overflow-x: hidden;
		overflow-y: auto;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0 0 2rem;
		border: 0;
		border-radius: 0;
		background: var(--navm-bg);
		box-shadow: none;
		-webkit-overflow-scrolling: touch;
	}

	/* Het menu bedekt ook de WordPress-balk van ingelogde beheerders. Die
	 balk scrolt op een telefoon mee, dus anders blijft er bovenin een strook
	 van de pagina zichtbaar. */
	.admin-bar .header__nav {
		top: 0;
	}

	body.menu-actief #wpadminbar {
		display: none;
	}

	.nav__kop {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		gap: 0.75rem;
		min-height: var(--navm-rij);
		padding: 0.75rem var(--navm-zijruimte);
		border-bottom: 1px solid var(--navm-rand);
		background: var(--navm-bg);
	}

	.nav__titel,
	.nav__paneeltitel {
		flex: 1 1 auto;
		font-size: 1.1rem;
		font-weight: 700;
	}

	.nav__terug {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		padding: 0.35rem 0;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		font-weight: 600;
		cursor: pointer;
	}

	.nav__sluit {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: var(--navm-sluit);
		height: var(--navm-sluit);
		margin-left: auto;
		padding: 0;
		border: 1px solid var(--navm-sluit-rand);
		border-radius: 50%;
		background: none;
		color: inherit;
		cursor: pointer;
	}

	.nav__sluit:hover,
	.nav__sluit:focus-visible {
		background: rgba(0, 0, 0, 0.05);
	}

	/* ---------------------------------------------------------------------
	 * De rijen
	 * ------------------------------------------------------------------ */

	.header__nav .menu--primair {
		display: block;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.header__nav .menu--primair > li > a,
	.header__nav .sub-menu > li > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		min-height: var(--navm-rij);
		padding: 0.5rem var(--navm-zijruimte);
		border-bottom: 1px solid var(--navm-rand);
		text-decoration: none;
	}

	.nav__chevron {
		flex: 0 0 auto;
		opacity: 0.55;
	}

	/* ---------------------------------------------------------------------
	 * Schuifschermen: submenu's, het megamenu en de groepspanelen
	 * ------------------------------------------------------------------ */

	.nav__paneel {
		position: fixed;
		inset: 0;
		height: 100dvh;
		z-index: calc(var(--navm-laag) + 1);
		display: block;
		overflow-x: hidden;
		overflow-y: auto;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0 0 2rem;
		border: 0;
		border-radius: 0;
		background: var(--navm-bg);
		box-shadow: none;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--navm-duur) ease, visibility var(--navm-duur);
	}

	.admin-bar .nav__paneel {
		top: 0;
	}

	/* Geen transform als het scherm openstaat: een element met transform wordt
	   het ankerpunt voor position: fixed, en dan zou het volgende scherm niet
	   over dit scherm heen vallen maar eronder beginnen. */
	.nav__paneel.is-open {
		transform: none;
		visibility: visible;
	}

	/* Het megamenu is op mobiel gewoon zo'n scherm. */
	.mega.nav__paneel .mega__binnen {
		display: block;
	}

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

	.header__nav .mega .mega__groep {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		width: 100%;
		min-height: var(--navm-rij);
		padding: 0.5rem var(--navm-zijruimte);
		border: 0;
		border-bottom: 1px solid var(--navm-rand);
		border-radius: 0;
		background: none;
		color: inherit;
		font: inherit;
		text-align: left;
		text-decoration: none;
		cursor: pointer;
	}

	.header__nav .mega .mega__groep .mega__pijl {
		display: none;
	}

	.mega__paneel {
		padding-bottom: 2rem;
	}

	.mega__paneel[hidden] {
		display: block;
	}

	.mega__inhoud,
	.mega__kolommen {
		display: block;
	}

	.mega__kolom {
		padding-top: 0.5rem;
	}

	.header__nav .mega__kop {
		margin: 0;
		padding: 0.9rem var(--navm-zijruimte) 0.35rem;
		font-weight: 700;
	}

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

	.mega__links li + li {
		margin: 0;
	}

	.header__nav .mega__links a {
		display: block;
		padding: 0.75rem var(--navm-zijruimte);
		border-bottom: 1px solid var(--navm-rand);
		text-decoration: none;
	}

	/* De promo-afbeelding laden we op mobiel niet: scheelt laadtijd. */
	.mega__promo {
		display: none;
	}

	.mega__knoppen {
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
		margin: 1.25rem var(--navm-zijruimte) 0;
		padding: 1.25rem 0 0;
		border-top: 1px solid var(--navm-rand);
	}

	.header__nav .mega .mega__knop {
		padding: var(--btn-padding, 0.85rem 1.75rem);
		text-align: center;
		white-space: normal;
	}

	/* ---------------------------------------------------------------------
	 * De logo's onder het menu
	 * ------------------------------------------------------------------ */

	/* Links gelijk met de menu-items, rechts gelijk met de chevrons. */
	.nav__logos-rij {
		list-style: none;
		margin-top: var(--navm-logos-boven);
		padding: 0 var(--navm-zijruimte);
	}

	.nav__logos {
		display: block;
		width: 100%;
	}

	.nav__logos img {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
	}
}

/*
 * iPhone (Safari): de bovenkant van het scherm valt onder de statusbalk en
 * het witte vervagingsvlak van Safari. Volledig vullende panelen (menu,
 * submenu, zoeken, winkelwagen, account) krijgen daarom bovenin wat extra
 * ruimte in hun eigen kleur, zodat de titel en het kruisje vrij staan.
 * @supports (-webkit-touch-callout: none) geldt alleen voor iOS.
 */
:root {
	--paneel-ios-boven: max(env(safe-area-inset-top, 0px), 3rem);
}

@supports (-webkit-touch-callout: none) {

	@media (max-width: 1024px) {

		.header__inner .header__nav,
		.nav__paneel {
			border-top: var(--paneel-ios-boven) solid transparent;
		}
	}

	@media (max-width: 767px) {

		.zoekflyout__paneel,
		.wagenflyout__paneel,
		.accountmenu__paneel {
			border-top: var(--paneel-ios-boven) solid transparent;
		}
	}
}

/* Op desktop bestaan de mobiele onderdelen niet. */
@media (min-width: 1025px) {

	.nav__kop,
	.nav__chevron,
	.nav__logos-rij {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.nav__paneel {
		transition: none;
	}
}