/* =========================================================
   Servetje.nl — Header
   ========================================================= */

/* Storefront zet zelf overflow-x:hidden op zowel body als .site (#page) —
   elke overflow anders dan "visible" op een voorouder breekt
   position:sticky. Zonder deze override loopt de header dus niet mee
   bij het scrollen. */
body,
.site {
	overflow-x: visible;
}

/* Anker-navigatie (menu Inspiratie/Vormgeving/Productie/Prijzen, die via
   servetje_legacy_anchor_redirects() naar #inspiratie/#ontwerphulp/etc.
   doorsturen) sprong zonder dit de sectietitel precies onder de sticky
   header - de browser scrolt de sectie namelijk tot exact de bovenkant
   van het scherm, waar de header dan overheen viel. scroll-padding-top
   houdt op elke pagina rekening met de header-hoogte (78px desktop,
   64px vanaf de mobiele header-breedte hieronder). */
html {
	scroll-padding-top: 98px;
}

@media (max-width: 900px) {
	html {
		scroll-padding-top: 84px;
	}
}

.servetje-header {
	/* position:sticky moet op dit buitenste element staan, niet op
	   .servetje-header__bar erbinnen: die had precies dezelfde hoogte
	   als zijn ouder, waardoor sticky geen ruimte had om te "werken" en
	   de balk gewoon met de pagina meescrolde. */
	position: sticky;
	top: 0;
	z-index: 999;
	background: transparent;
	padding: 0;
	border: 0;
	box-shadow: none;
	margin-bottom: 0;
}

/* Storefront heeft op de homepage een regel met 4 klassen in het selector
   (".home.page:not(.page-template-template-homepage) .site-header") die
   ~68px margin-bottom toevoegt — dat gaf een lelijke witte kloof tussen de
   header en de hero eronder. Die specificiteit is met normale selectors
   niet te overtreffen zonder dezelfde arms race aan te gaan; !important
   is hier de duidelijkste, meest onderhoudbare oplossing. */
.home .servetje-header {
	margin-bottom: 0 !important;
}

.servetje-header__bar {
	background: var(--servetje-blue);
	transition: box-shadow 0.2s ease, padding 0.2s ease;
}

.servetje-header.is-scrolled .servetje-header__bar {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.servetje-header__inner {
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 24px;
	/* Vaste hoogte (i.p.v. min-height) zodat het logo — dat zelf hoger is
	   dan de balk — er onderuit kan hangen in plaats van de hele balk op
	   te rekken. overflow op de voorouders staat op visible, dus het
	   overhangende stuk blijft gewoon zichtbaar. */
	height: 78px;
}

/* --- Branding / logo block ------------------------------------------- */

.servetje-branding {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	display: flex;
}

.servetje-header__logo-block {
	/* logo-header.png bevat de golvende onderrand al als onderdeel van de
	   illustratie zelf (wit vlak + transparante golf eronder) — geen
	   handmatige clip-path meer nodig, dat gaf eerder afsnijding van de
	   tekst "Snel gedrukt!" omdat de gok niet exact overeenkwam met de
	   echte vorm van het bestand. */
	position: relative;
	top: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

/* #masthead erbij zodat dit wint van Storefront's eigen
   ".site-header .custom-logo-link img{width:100%;max-width:210px}" — die
   regel heeft 2 klassen en won daardoor eerder van onze 1-klasse selector,
   waardoor de breedte werd platgedrukt en de verhouding scheeftrok. */
#masthead .servetje-header__logo-block img {
	/* Bewust net iets groter dan de balk (78px) zodat de golvende
	   onderrand van het logo er een klein stukje onderuit steekt. */
	height: 122px;
	width: auto;
	max-width: none;
	display: block;
}

/* Bestelpagina: LOGO_servetje.nl_V2 heeft geen wit golf-kaartje ingebakken
   (transparante achtergrond, lichtblauw/wit) — dat zou raar hangen over de
   gewone witte pagina-achtergrond eronder. Daarom hier gewoon netjes
   verticaal gecentreerd binnen de balk, zonder overhang. */
.servetje-header__logo-block--alt {
	align-items: center;
}

#masthead .servetje-header__logo-block--alt img {
	height: 58px;
	width: auto;
	max-width: none;
	display: block;
}

/* Twee logo's naast elkaar in de markup, CSS bepaalt welke zichtbaar is
   — geen device-detectie nodig, en geen flits van het verkeerde logo bij
   het laden. Standaard (desktop) staat het mobiele logo uit. */
.servetje-header__logo-mobile-only {
	display: none;
}

.servetje-logo-text-link {
	text-decoration: none;
}

.servetje-logo-text {
	font-size: 22px;
	font-weight: 700;
	color: var(--servetje-blue);
	white-space: nowrap;
}

/* --- Primary navigation --------------------------------------------- */

.servetje-main-navigation {
	flex-grow: 1;
	display: flex;
	justify-content: flex-end;
}

.servetje-main-navigation__list {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.servetje-main-navigation__list .menu-item > a,
.servetje-main-navigation__list li > a {
	position: relative;
	display: block;
	padding: 10px 14px;
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 6px;
	white-space: nowrap;
}

.servetje-main-navigation__list li > a:hover,
.servetje-main-navigation__list li > a:focus {
	background: rgba(255, 255, 255, 0.15);
}

/* Onderbalkje dat aangeeft bij welke sectie van de pagina je bent —
   wordt aan/uit gezet door de scrollspy in header.js. */
.servetje-main-navigation__list li > a::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background: #ffffff;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.2s ease;
}

.servetje-main-navigation__list li > a.is-active::after {
	transform: scaleX(1);
}

/* --- Header actions: BTW toggle + Bestellen + mobile toggle --------- */

.servetje-header__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

.servetje-btw-toggle {
	display: inline-flex;
	background: rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	padding: 3px;
	gap: 2px;
}

.servetje-btw-btn {
	appearance: none;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--servetje-font);
	font-size: 13px;
	font-weight: 600;
	padding: 7px 14px;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.servetje-btw-btn:hover {
	color: #ffffff;
}

.servetje-btw-btn.is-active {
	background: #ffffff;
	color: var(--servetje-blue-dark);
}

.servetje-btn-bestellen {
	display: inline-flex;
	align-items: center;
	background: var(--servetje-orange);
	color: #ffffff;
	font-weight: 700;
	font-size: 15px;
	padding: 11px 22px;
	border-radius: 6px;
	text-decoration: none;
	white-space: nowrap;
}

.servetje-btn-bestellen:hover,
.servetje-btn-bestellen:focus {
	background: var(--servetje-orange-dark);
	color: #ffffff;
}

.servetje-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
}

.servetje-menu-toggle__bar {
	display: block;
	width: 24px;
	height: 2px;
	background: #ffffff;
	border-radius: 2px;
}

/* --- Responsive ------------------------------------------------------ */

@media (max-width: 900px) {
	/* Logo op mobiel: 122px hoogte (desktop) was hier nooit voor verkleind
	   — dat trok in z'n eentje de hele balk (en daarmee het "alles voelt
	   groot aan"-gevoel) veel te fors op. Zelfde maat als de al bestaande
	   alt-logo-variant elders in de site (bestelpagina), voor een
	   consistente, compacte mobiele header. */
	#masthead .servetje-header__logo-block img {
		height: 56px;
	}

	/* Op mobiel het aparte logo (Servetje.nl_LGO_0726_2) tonen i.p.v. het
	   hoofdlogo dat via de Customizer is ingesteld. */
	.servetje-header__logo-desktop-only {
		display: none;
	}

	.servetje-header__logo-mobile-only {
		display: flex;
		align-items: flex-start;
	}

	.servetje-header__inner {
		/* Op mobiel klapt het menu binnen deze rij open — de vaste hoogte
		   van desktop (die het logo laat overhangen) zou die uitklap dan
		   afknippen. */
		height: auto;
		min-height: 64px;
		flex-wrap: wrap;
		/* Regel 1 (logo — Bestellen-knop — hamburger) zelf uitlijnen i.p.v.
		   op de space-between van desktop leunen — bij 3 items op de rij
		   duwde space-between de Bestellen-knop naar het midden i.p.v.
		   hem netjes naast de hamburger te houden. */
		justify-content: flex-start;
		row-gap: 0;
		/* De basisregel erft "align-items:stretch" — daardoor werd de
		   Bestellen-knop (die zelf geen hoogte opgeeft) opgerekt tot de
		   volle 56px van het logo ernaast, precies het "voelt groot aan"
		   dat deze herziening juist moest oplossen. Knoppen/logo nu
		   gewoon verticaal gecentreerd op hun eigen hoogte. */
		align-items: center;
	}

	/* .servetje-header__actions bevatte BTW-toggle, Bestellen-knop én de
	   hamburger als één vaste groep. Daardoor kon de hamburger niet los
	   naast het logo op regel 1 gepositioneerd worden: die groep paste
	   als geheel niet meer naast het logo (net zo breed als de daarnaast
	   geforceerde volle-breedte navigatie), en viel terug naar een eigen,
	   links uitgelijnde 3e regel — ver van het logo, onder het
	   onzichtbare ingeklapte menu. display:contents "ontbindt" deze
	   wrapper zodat de 3 knoppen zich individueel met "order" langs het
	   logo en de navigatie kunnen voegen, zonder de HTML te hoeven
	   aanpassen. */
	.servetje-header__actions {
		display: contents;
	}

	.servetje-branding {
		order: 1;
	}

	/* Bestellen-knop + hamburger samen rechts op regel 1, naast het logo
	   — margin-left:auto op de eerste van dit duo trekt ze als groep naar
	   de rechterkant, terwijl het logo links blijft staan. */
	.servetje-btn-bestellen {
		order: 2;
		margin-left: auto;
		padding: 9px 16px;
		font-size: 14px;
	}

	.servetje-menu-toggle {
		order: 3;
		display: flex;
	}

	/* BTW-toggle en navigatie samen in het inklapbare gedeelte, ónder
	   regel 1 — beide verborgen tot de hamburger wordt aangetikt, zodat
	   de altijd-zichtbare header zo compact mogelijk blijft. */
	.servetje-btw-toggle {
		order: 4;
		flex-basis: 100%;
		justify-content: center;
		width: 100%;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.2s ease;
	}

	.servetje-header.is-menu-open .servetje-btw-toggle {
		max-height: 60px;
		margin-top: 12px;
	}

	.servetje-main-navigation {
		order: 5;
		flex-basis: 100%;
		justify-content: flex-start;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.2s ease;
	}

	.servetje-header.is-menu-open .servetje-main-navigation {
		max-height: 400px;
	}

	.servetje-main-navigation__list {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		padding: 10px 0 18px;
		gap: 0;
	}

	.servetje-main-navigation__list li > a {
		width: 100%;
	}
}

@media (max-width: 480px) {
	/* Groter tikdoel op mobiel (was ~30px hoog, onder de aanbevolen 44px) —
	   op desktop blijft de compactere maat staan, die past daar binnen de
	   vaste header-hoogte en is met een muis prima te bedienen. */
	.servetje-btw-btn {
		padding: 12px 16px;
	}
}