/*
 * 09, de header.
 *
 * Hoort bij inc/09-header.php. Het mobiele deel (de lade) heeft zijn eigen
 * opmaak in 07-menu-mobiel.css, de icoontjes in 08-winkelwagen.css.
 *
 * De maten komen één op één van de header die nu in Elementor staat, gemeten op
 * 9 september 2026 bij een venster van 1440:
 *
 *   logo            150 bij 42
 *   bovenste rij    11 px, 600, 1 px letterruimte, hoofdletters
 *   onderste rij    13 px, 400, 1 px letterruimte, hoofdletters
 *   beide rijen     regelhoogte 20, 20 px links en rechts van elke link
 *   ertussen        5 px
 *   icoontjes       16 px, 16 px ertussen
 *
 * De kleuren en de letters staan bovenaan als variabelen die naar de tokens in
 * style.css wijzen. Voor De Hamstraat hoeft dus alleen style.css mee.
 *
 * Het breekpunt is 1024 pixels, gelijk aan dat van het mobiele menu.
 */

.swipe-hd {
	--hd-tekst: var(--swipe-tekst, #111);
	--hd-zacht: var(--swipe-zacht, rgba(0, 0, 0, .58));
	--hd-wit: var(--swipe-wit, #fefdfa);
	--hd-logo: var(--swipe-hd-logo, 42px);
	--hd-logo-smal: var(--swipe-hd-logo-smal, 32px);
	--hd-rij: var(--swipe-hd-rij, 20px);
	--hd-ruimte: var(--swipe-hd-ruimte, 20px);

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	font-family: inherit;
	color: var(--hd-tekst);
}

.swipe-hd,
.swipe-hd *,
.swipe-hd *::before,
.swipe-hd *::after {
	box-sizing: border-box;
}

/* Een widget in een Elementor-container is standaard zo breed als zijn inhoud.
   Voor een header is dat verkeerd: die hoort de hele balk te vullen, anders
   staat alles samengedrukt links en blijft er rechts een gat staan. Dit trekt
   de widget over de volle breedte, zodat er in Elementor niets ingesteld hoeft
   te worden. */
.elementor-widget-shortcode:has(.swipe-hd),
.elementor-shortcode:has(.swipe-hd) {
	width: 100%;
	flex: 1 1 auto;
}


/* --- Logo ----------------------------------------------------------------- */

.swipe-hd__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 0;
	text-decoration: none;
	color: inherit;
}

.swipe-hd__logo img,
.swipe-hd__logo svg {
	display: block;
	width: auto;
	height: var(--hd-logo);
}

.swipe-hd__logo-tekst {
	font-size: 28px;
	line-height: 1;
}


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

/* Ze staan onder elkaar en allebei rechts uitgelijnd, zoals nu.

   Het blok pakt de ruimte tussen het logo en de icoontjes; de twee rijen
   lijnen daarbinnen rechts uit. In Elementor stond de breedte van dit blok met
   de hand op 821 pixels, waardoor de rijen 22 pixels verder van de icoontjes
   eindigden dan hier. Dat verschil is niet nagebouwd: een vast getal breekt
   zodra er een menu-item bijkomt of de site smaller wordt. */
.swipe-hd__midden {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 1 auto;
	min-width: 0;
}

.swipe-hd__lijst {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
}

.swipe-hd__item {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* De a. ervoor is nodig: de Elementor-kit zet met `.elementor-kit-x a` een
   bruine linkkleur neer, en die is sterker dan een losse klasse. Zonder dit
   worden de menulinks bruin in plaats van zwart. */
.swipe-hd a.swipe-hd__link,
.swipe-hd__link {
	display: block;
	padding: 0 var(--hd-ruimte);
	color: var(--hd-tekst);
	letter-spacing: 1px;
	line-height: var(--hd-rij);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.swipe-hd__rij--boven .swipe-hd__link {
	font-size: 11px;
	font-weight: 600;
}

.swipe-hd__rij--onder .swipe-hd__link {
	font-size: 13px;
	font-weight: 400;
}

.swipe-hd__link:hover,
.swipe-hd__link:focus {
	color: var(--hd-tekst);
	opacity: .6;
}


/* De regel die alleen een beheerder ziet, als er geen menu gekozen is. */
.swipe-hd__hint {
	display: block;
	padding: 4px 0;
	color: var(--hd-zacht);
	font-size: 11px;
	line-height: 1.4;
	text-align: right;
}


/* --- Het uitklapmenu ------------------------------------------------------
   Opent bij hover en zodra de focus in het item staat, dus ook met het
   toetsenbord. Geen schaduw en geen randje: het onderscheid komt van de
   vulling, net als bij de rest van deze site.
   -------------------------------------------------------------------- */

.swipe-hd__sub {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	min-width: 100%;
	margin: 0;
	padding: 6px 0;
	background: var(--hd-wit);
	list-style: none;
}

/* Het laatste item staat tegen de rechterrand; zijn menu klapt dus naar links
   open in plaats van naar rechts buiten beeld. */
.swipe-hd__item:last-child .swipe-hd__sub {
	left: auto;
	right: 0;
}

.swipe-hd__item:hover > .swipe-hd__sub,
.swipe-hd__item:focus-within > .swipe-hd__sub {
	display: block;
}

.swipe-hd__sub li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.swipe-hd a.swipe-hd__sublink,
.swipe-hd__sublink {
	display: block;
	padding: 4px 12px;
	color: var(--hd-zacht);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.5;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
}

.swipe-hd__sublink:hover,
.swipe-hd__sublink:focus {
	color: var(--hd-tekst);
}

/* Een derde niveau, mocht het menu ooit dieper worden: gewoon eronder, iets
   ingesprongen. Beter dan een tweede uitklapmenu naast het eerste. */
.swipe-hd__sub .swipe-hd__sub {
	display: block;
	position: static;
	padding: 0 0 0 12px;
}


/* --- Rechts: de icoontjes en de hamburger --------------------------------- */

.swipe-hd__rechts {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
}

/* De icoontjes hebben zelf 8 px lucht rondom, voor het tikdoel. Daardoor raakt
   het klikvlak van het laatste icoon de rand van de container en staat de
   tekening er 8 pixels vandaan, precies zoals nu. */
.swipe-hd__iconen {
	display: flex;
	align-items: center;
}


/* --- Smal scherm ----------------------------------------------------------
   De twee rijen verdwijnen; daarvoor in de plaats komt de lade van
   07-menu-mobiel.php, met dezelfde twee menu's erin. Het logo wordt kleiner,
   de icoontjes blijven staan en de hamburger komt er rechts naast.
   -------------------------------------------------------------------- */

@media (max-width: 1024px) {

	.swipe-hd__midden {
		display: none;
	}

	.swipe-hd__logo img,
	.swipe-hd__logo svg {
		height: var(--hd-logo-smal);
	}

	.swipe-hd__rechts {
		gap: 8px;
	}

	.swipe-hd__iconen {
		margin: 0;
	}
}

/* Op een telefoon is het woord "Menu" naast de streepjes te veel van het goede
   naast drie icoontjes: dan alleen de streepjes. */
@media (max-width: 480px) {

	.swipe-hd .swipe-mm__hamburger-tekst {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.swipe-hd__rechts {
		gap: 2px;
	}
}