/*
 * 07, mobiel menu.
 *
 * Hoort bij inc/07-menu-mobiel.php en assets/js/07-menu-mobiel.js.
 *
 * De kleuren en de maten staan bovenaan als variabelen. Ze wijzen naar de
 * tokens in style.css, met een terugval erachter voor het geval een site een
 * token niet kent. Voor De Hamstraat hoeft dus alleen style.css mee te
 * veranderen en dit bestand niet.
 *
 * Het breekpunt is 1024 pixels, gelijk aan de tablet-grens van Elementor. Een
 * media query kan geen variabele lezen, dus die maat staat hier als getal.
 */

.swipe-mm {
	--mm-tekst: var(--swipe-tekst, #111);
	--mm-lijn: var(--swipe-lijn, #e5e5e5);
	--mm-vlak: var(--swipe-vlak, #f4f2ed);
	--mm-wit: var(--swipe-wit, #fefdfa);
	--mm-zacht: var(--swipe-zacht, #6b6b6b);
	--mm-regel: var(--swipe-mm-regel, 16px);
	--mm-rand: var(--swipe-mm-rand, 16px);

	display: flex;
	align-items: center;
	font-family: inherit;
	color: var(--mm-tekst);
}

/* Een regel is 100 procent breed met 16 pixels padding. Zonder deze regel telt
   die padding erbovenop en steekt elke regel 32 pixels buiten de lade. */
.swipe-mm,
.swipe-mm *,
.swipe-mm *::before,
.swipe-mm *::after {
	box-sizing: border-box;
}

/* Op een breed scherm bestaat dit onderdeel niet: daar staat de header van
   Elementor, en die blijft zoals hij is. */
@media (min-width: 1025px) {

	.swipe-mm {
		display: none;
	}
}

.swipe-mm__icoon {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}

/* --- De hamburger ---------------------------------------------------------
   Alleen zichtbaar als het script draait: een knop die niets doet zou het menu
   onbereikbaar maken. Zonder script blijft de lijst gewoon uitgeklapt staan.
   -------------------------------------------------------------------- */

.swipe-mm__hamburger {
	display: none;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 4px;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.swipe-mm--js .swipe-mm__hamburger {
	display: inline-flex;
}

/* Elementor en Hello Elementor geven knoppen een eigen achtergrond en een
   vasthoudende hover-stand op een aanraakscherm. Die duwen we hier weg. */
.swipe-mm button:hover,
.swipe-mm button:focus,
.swipe-mm button:active {
	background: none;
	border: 0;
	box-shadow: none;
	color: inherit;
}

.swipe-mm__hamburger-tekst {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* Het kruisje verschijnt pas als de lade openstaat. */
.swipe-mm__hamburger .swipe-mm__icoon:last-of-type,
.swipe-mm__hamburger[aria-expanded="true"] .swipe-mm__icoon:first-of-type {
	display: none;
}

.swipe-mm__hamburger[aria-expanded="true"] .swipe-mm__icoon:last-of-type {
	display: block;
}


/* --- De lade --------------------------------------------------------------
   De lade hangt onder de header en vult de rest van het scherm. Het script zet
   --swipe-mm-lade-top op de onderrand van de header; die is sticky, dus die
   maat kan niet vast in de opmaak staan.
   -------------------------------------------------------------------- */

.swipe-mm--js .swipe-mm__lade {
	display: none;
	position: fixed;
	top: var(--swipe-mm-lade-top, 0px);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 950;
	background: var(--mm-wit);
}

.swipe-mm--js.is-open .swipe-mm__lade {
	display: block;
}

/* Zolang de lade openstaat scrollt de pagina eronder niet mee. Anders schuift
   de pagina onder het menu weg en sta je na het sluiten ergens anders. */
body.swipe-mm-lade-open {
	overflow: hidden;
}

/* Het venster waarin de lagen schuiven. Dit is het ankerpunt: elk paneel hangt
   hieraan en niet aan de lijst, zodat een paneel blijft staan waar het staat
   terwijl de lijst eronder gescrold is. */
.swipe-mm--js .swipe-mm__lagen {
	position: relative;
	height: 100%;
	overflow: hidden;
}

/* De eerste laag: het hele aanbod, met eigen scroll. */
.swipe-mm--js .swipe-mm__basis {
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 6px 0 24px;
}

/* Elk paneel dat inschuift. Buiten beeld tot het aan de beurt is; het schuift
   van rechts in en houdt zijn eigen scrollpositie. */
.swipe-mm--js .swipe-mm__laag {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 0 24px;
	background: var(--mm-wit);
	transform: translateX(100%);
	transition: transform .22s ease;
	visibility: hidden;
}

/* Een paneel binnen een paneel ligt erbovenop. */
.swipe-mm--js .swipe-mm__laag[data-diepte="2"] {
	z-index: 3;
}

.swipe-mm--js .swipe-mm__laag[data-diepte="3"] {
	z-index: 4;
}

.swipe-mm--js .swipe-mm__laag.is-in {
	transform: none;
	visibility: visible;
}


/* --- De regels ------------------------------------------------------------ */

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

/* Een tweede menu in dezelfde lade: een lijntje ertussen en een maat kleiner.
   De categorieën horen bovenaan, daar komen bezoekers voor. */
.swipe-mm__lijst--volgend {
	margin-top: 8px;
	padding-top: 6px;
	border-top: 1px solid var(--mm-lijn);
	font-size: 15px;
}

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

/* Elke regel is de volle breedte, naam links en pijl rechts. Minstens 50
   pixels hoog, ruim boven de 44 die een vinger nodig heeft. */
/* De a. erbij 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 regels in de lade bruin in plaats van zwart. */
.swipe-mm a.swipe-mm__link,
.swipe-mm__regel,
.swipe-mm__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 0 var(--mm-rand);
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--mm-tekst);
	font-family: inherit;
	font-size: var(--mm-regel);
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.swipe-mm__lijst--volgend .swipe-mm__regel,
.swipe-mm__lijst--volgend .swipe-mm__link {
	min-height: 46px;
	font-size: 15px;
}

.swipe-mm__naam {
	flex: 1 1 auto;
	min-width: 0;
}

.swipe-mm__regel .swipe-mm__icoon {
	width: 18px;
	height: 18px;
	color: var(--mm-zacht);
}

/* De extra .swipe-mm ervoor is nodig om boven de reset van Hello Elementor uit
   te komen. Die zet op elke button bij hover en focus een roze vlak met witte
   letters, en dat is sterker dan een losse klasse. */
.swipe-mm .swipe-mm__link:hover,
.swipe-mm .swipe-mm__link:focus,
.swipe-mm .swipe-mm__regel:hover,
.swipe-mm .swipe-mm__regel:focus,
.swipe-mm .swipe-mm__terug:hover,
.swipe-mm .swipe-mm__terug:focus {
	background: var(--mm-vlak);
	color: var(--mm-tekst);
}

/* De pagina waar de bezoeker nu is. */
.swipe-mm__link[aria-current="page"] {
	background: var(--mm-vlak);
}

.swipe-mm__hier {
	flex: 0 0 auto;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--mm-zacht);
	white-space: nowrap;
}


/* --- De kop van een paneel ------------------------------------------------
   Terug, en waar je bent, op één regel. De naam is meteen de link naar die
   categoriepagina, dus er staat geen tweede regel onder met bijna dezelfde
   tekst.
   -------------------------------------------------------------------- */

.swipe-mm__paneelkop {
	display: flex;
	align-items: center;
	gap: 6px;
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 4px var(--mm-rand) 6px 4px;
	background: var(--mm-wit);
	border-bottom: 1px solid var(--mm-lijn);
}

.swipe-mm__terug {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 6px;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--mm-zacht);
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.swipe-mm__terug .swipe-mm__icoon {
	width: 18px;
	height: 18px;
}

.swipe-mm__plek {
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: 44px;
	color: var(--mm-tekst);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
}

.swipe-mm a.swipe-mm__plek {
	color: var(--mm-tekst);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.swipe-mm__laag .swipe-mm__lijst {
	padding-top: 6px;
}


/* --- Zonder JavaScript ----------------------------------------------------
   Dan is er geen lade en geen hamburger: de lijsten staan gewoon onder elkaar
   en elke link werkt. Lang, maar niets is onbereikbaar.
   -------------------------------------------------------------------- */

.swipe-mm:not(.swipe-mm--js) .swipe-mm__regel {
	display: none;
}

.swipe-mm:not(.swipe-mm--js) .swipe-mm__terug {
	display: none;
}

.swipe-mm:not(.swipe-mm--js) {
	display: block;
	width: 100%;
}