/**
 * LCP Core — hoofdmenu [lcp_menu] (blok 12, lcp-menu.php)
 *
 * Opbouw bij openen, naar voorbeeld van het origineel:
 *   1. drie lagen schuiven van rechts in, kort na elkaar (crème, surface,
 *      zwart), zodat je bij het openen een flits crème ziet
 *   2. de inhoud komt erachteraan, de links glijden één voor één omhoog
 * Bij sluiten gaat alles in één beweging terug, zonder vertraging.
 *
 *   Mobiel / tablet  < 1024 px   volledig scherm, sub-items klappen uit
 *                                onder How we serve
 *   Desktop          ≥ 1024 px   paneel van rechts (--lcp-menu-width),
 *                                pagina ernaast gedimd, sub-items in een
 *                                tweede kolom
 *
 * Bijstellen kan met de custom properties op .lcp-menu hieronder. Kleuren
 * volgen de Elementor Global Colors waar die een vast slot hebben (primary,
 * accent); Black en Surface zijn eigen globals met een willekeurig ID, dus
 * daar staan de hexwaarden als fallback.
 *
 * Alle staten staan op klassen die lcp-menu.js zet:
 *   .lcp-menu.is-open              menu open
 *   .lcp-menu__item.is-open        sub-menu open
 *   html.lcp-menu-open             pagina scrollt niet
 */

.lcp-menu {
	--lcp-menu-z: 9990;
	--lcp-menu-ease: cubic-bezier(0.65, 0.01, 0.05, 0.99);

	--lcp-menu-bg: var(--lcp-black, #1C1C1C);
	--lcp-menu-ink: var(--e-global-color-primary, #FFFFFF);
	--lcp-menu-layer-1: var(--e-global-color-accent, #FFFDDC);
	--lcp-menu-layer-2: var(--lcp-surface, #262626);

	/* Hover: crème vlak, zwarte tekst. */
	--lcp-menu-hover-bg: var(--e-global-color-accent, #FFFDDC);
	--lcp-menu-hover-ink: var(--lcp-black, #1C1C1C);

	/* Hoofditems op H2-schaal (32 → 56), sub-items op H4-schaal (20 → 28). */
	--lcp-menu-size: clamp(2rem, 1.4429rem + 2.2857vw, 3.5rem);
	--lcp-menu-sub-size: clamp(1.25rem, 1.0643rem + 0.7619vw, 1.75rem);

	/* Ruimte boven de lijst, zodat die niet onder de header begint. */
	--lcp-menu-top: clamp(6rem, 4.5rem + 5vw, 9rem);
	--lcp-menu-gutter: clamp(1.5rem, 0.5rem + 3vw, 4rem);

	/* Breedte van het paneel. Mobiel en tablet: volledig scherm. Desktop:
	   zie de media query hieronder. */
	--lcp-menu-width: 100%;

	/* Dimmen van de pagina naast het paneel (alleen zichtbaar op desktop). */
	--lcp-menu-overlay: rgba(0, 0, 0, 0.6);

	/* Kleur van de knop Menu / Close. Expliciet, want de Shortcode widget
	   erft anders de standaard tekstkleur van Hello Elementor (#333). */
	--lcp-menu-toggle-ink: var(--e-global-color-primary, #FFFFFF);
}

/* Desktop: een paneel dat van rechts inschuift in plaats van het hele
   scherm. 960 px bij 1440, de helft van het scherm daarboven, maximaal
   1440 px op een 4K scherm. */
@media (min-width: 1024px) {
	.lcp-menu {
		--lcp-menu-width: min(100%, clamp(60rem, 50vw, 90rem));
	}
}


/* =========================================================================
 * KNOP
 *
 * Hello Elementor en de Elementor-kit stylen elke <button> (rand, kleur,
 * achtergrond bij hover). Daarom elke staat expliciet en met twee classes:
 * .lcp-menu .lcp-menu__toggle weegt zwaarder dan .elementor-kit-x button.
 * ====================================================================== */

.lcp-menu .lcp-menu__toggle,
.lcp-menu .lcp-menu__toggle:hover,
.lcp-menu .lcp-menu__toggle:focus,
.lcp-menu .lcp-menu__toggle:active {
	position: relative;
	z-index: calc(var(--lcp-menu-z) + 1);
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	margin: 0;
	padding: 0.5em 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--lcp-menu-toggle-ink);
	cursor: pointer;

	/* Global font "Label" (slot accent), zelfde koppeling als de marquee en
	   de Let's Collab knop. Alle zes de instellingen volgen Label; de waarde
	   achter de komma is alleen een vangnet als de kit niet laadt. */
	font-family: var(--e-global-typography-accent-font-family, "Archivo Black"), sans-serif;
	font-size: var(--e-global-typography-accent-font-size, clamp(0.75rem, 0.7268rem + 0.0952vw, 0.8125rem));
	font-weight: var(--e-global-typography-accent-font-weight, 400);
	letter-spacing: var(--e-global-typography-accent-letter-spacing, 0.06em);
	line-height: var(--e-global-typography-accent-line-height, 1.15);
	text-transform: var(--e-global-typography-accent-text-transform, uppercase);
}

.lcp-menu .lcp-menu__toggle:focus-visible {
	outline: 2px solid var(--e-global-color-accent, #FFFDDC);
	outline-offset: 3px;
}

/* Menu ↔ Close: twee regels in een venster van één regel hoog. 1lh is
   precies één regelhoogte, wat Label ook instelt. */
.lcp-menu__toggle-text {
	display: block;
	height: 1lh;
	overflow: hidden;
}

.lcp-menu__toggle-text > span {
	display: block;
	transition: transform 0.7s var(--lcp-menu-ease);
}

.lcp-menu.is-open .lcp-menu__toggle-text > span {
	transform: translateY(-100%);
}

/* Plusje dat een kruisje wordt: 315° is 45° plus een volle slag. */
.lcp-menu__icon {
	position: relative;
	display: block;
	width: 1.1em;
	height: 1.1em;
	transition: transform 0.7s var(--lcp-menu-ease);
}

.lcp-menu__icon::before,
.lcp-menu__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: currentColor;
}

.lcp-menu__icon::before { width: 100%; height: 2px; }
.lcp-menu__icon::after  { width: 2px;  height: 100%; }

.lcp-menu.is-open .lcp-menu__icon {
	transform: rotate(315deg);
}


/* =========================================================================
 * PANEEL
 *
 * Gesloten: visibility hidden. Dat haalt alles erin ook uit de tabvolgorde
 * en uit de schermlezer, zonder hidden-attribuut en zonder display: none
 * (dan kan er niets animeren). De visibility schakelt pas om ná de
 * sluitanimatie, via de transition-delay.
 * ====================================================================== */

.lcp-menu__panel {
	position: fixed;
	inset: 0;
	z-index: var(--lcp-menu-z);
	visibility: hidden;
	pointer-events: none;
	color: var(--lcp-menu-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: visibility 0s linear 0.5s;
}

.lcp-menu.is-open .lcp-menu__panel {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

/* Gedimde pagina naast het paneel. Op mobiel ligt het paneel er volledig
   overheen, dus daar zie je dit niet. */
.lcp-menu__overlay {
	position: absolute;
	inset: 0;
	background: var(--lcp-menu-overlay);
	opacity: 0;
	transition: opacity 0.45s var(--lcp-menu-ease);
}

.lcp-menu.is-open .lcp-menu__overlay {
	opacity: 1;
}

.lcp-menu__layers {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--lcp-menu-width);
	overflow: hidden;
}

.lcp-menu__layer {
	position: absolute;
	inset: 0;
	transform: translateX(101%);
	transition: transform 0.45s var(--lcp-menu-ease);
}

.lcp-menu__layer:nth-child(1) { background: var(--lcp-menu-layer-1); }
.lcp-menu__layer:nth-child(2) { background: var(--lcp-menu-layer-2); }
.lcp-menu__layer:nth-child(3) { background: var(--lcp-menu-bg); }

.lcp-menu.is-open .lcp-menu__layer {
	transform: none;
	transition-duration: 0.575s;
	transition-delay: calc(var(--l) * 0.12s);
}

/* De inhoud wacht tot de lagen er grotendeels liggen. Zonder deze wachttijd
   staat een al open sub-menu even los over de pagina. */
.lcp-menu__scroll {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--lcp-menu-width);
	/* Lettergroottes op desktop rekenen tegen de breedte van het paneel
	   (cqi), niet tegen het scherm. Zo past HOW WE SERVE altijd in de
	   linkerkolom, hoe breed het scherm ook is. */
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--lcp-menu-top) var(--lcp-menu-gutter) var(--lcp-menu-gutter);
	box-sizing: border-box;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.lcp-menu.is-open .lcp-menu__scroll {
	opacity: 1;
	transition-delay: 0.3s;
}

.lcp-menu__nav {
	position: relative;
}

.lcp-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lcp-menu li {
	margin: 0;
	padding: 0;
}

/* Masker voor de onthulling: de link schuift van onder de rand omhoog. */
.lcp-menu__row {
	display: block;
	overflow: clip;
}


/* =========================================================================
 * LINKS
 * ====================================================================== */

.lcp-menu .lcp-menu__link,
.lcp-menu .lcp-menu__sublink {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	gap: 0.35em;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--lcp-menu-ink);
	cursor: pointer;
	font-family: var(--e-global-typography-primary-font-family, "Archivo Black"), sans-serif;
	font-weight: 400;
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
}

.lcp-menu .lcp-menu__link {
	padding: 0.1em 0.15em;
	font-size: var(--lcp-menu-size);
	line-height: 0.95;
	letter-spacing: -0.01em;
	transform: translateY(140%) rotate(10deg);
	transform-origin: left bottom;
	transition: transform 0.3s var(--lcp-menu-ease), color 0.25s ease;
}

.lcp-menu.is-open .lcp-menu__item > .lcp-menu__row > .lcp-menu__link {
	transform: none;
	transition:
		transform 0.7s var(--lcp-menu-ease) calc(0.35s + var(--i) * 0.05s),
		color 0.25s ease;
}

.lcp-menu .lcp-menu__sublink {
	padding: 0.2em 0.2em;
	font-size: var(--lcp-menu-sub-size);
	line-height: 1.1;
	letter-spacing: 0.01em;
	transform: translateY(110%);
	transition: transform 0.3s var(--lcp-menu-ease), color 0.25s ease;
}

.lcp-menu .lcp-menu__item.is-open .lcp-menu__sublink {
	transform: none;
	transition:
		transform 0.6s var(--lcp-menu-ease) calc(0.1s + var(--i) * 0.04s),
		color 0.25s ease;
}

/* Schreefaccent in een label: "The <em>Event</em> Edit". */
.lcp-menu .lcp-menu__label em {
	font-family: var(--lcp-accent-font, "Crimson Pro", "Minion Pro", Georgia, serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	font-size: 1.08em;
}

/* Hover: een crème vlak schuift van onder omhoog achter de tekst. Ook bij
   toetsenbordfocus, en dan als enige focusindicator: een outline zou door
   het masker van .lcp-menu__row worden afgesneden. */
.lcp-menu .lcp-menu__link::before,
.lcp-menu .lcp-menu__sublink::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--lcp-menu-hover-bg);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.35s var(--lcp-menu-ease);
}

.lcp-menu :is(.lcp-menu__link, .lcp-menu__sublink):focus-visible {
	outline: 2px solid var(--lcp-menu-hover-ink);
	outline-offset: -4px;
	color: var(--lcp-menu-hover-ink);
}

.lcp-menu :is(.lcp-menu__link, .lcp-menu__sublink):focus-visible::before {
	transform: scaleY(1);
}

/* Alleen met een muis: op touch blijft een hover anders hangen na de tik. */
@media (hover: hover) {
	.lcp-menu :is(.lcp-menu__link, .lcp-menu__sublink):hover {
		color: var(--lcp-menu-hover-ink);
		background: transparent;
	}

	.lcp-menu :is(.lcp-menu__link, .lcp-menu__sublink):hover::before {
		transform: scaleY(1);
	}
}

/* Huidige pagina: dunne onderstreping onder het label. */
.lcp-menu [aria-current="page"] .lcp-menu__label {
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.12em;
}

/* Pijltje bij How we serve: wijst naar beneden, en omhoog als het open is. */
.lcp-menu__chevron {
	flex: 0 0 auto;
	width: 0.28em;
	height: 0.28em;
	margin: -0.12em 0 0 0.15em;
	border-right: 0.08em solid currentColor;
	border-bottom: 0.08em solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.4s var(--lcp-menu-ease);
}

.lcp-menu .lcp-menu__item.is-open .lcp-menu__chevron {
	transform: translateY(0.12em) rotate(225deg);
}


/* =========================================================================
 * SUB-MENU — mobiel en tablet: uitklappen onder het hoofditem
 *
 * Hoogte animeren zonder te meten: een grid met één rij die van 0fr naar
 * 1fr gaat. De lijst erin moet overflow: hidden en min-height: 0 hebben.
 * ====================================================================== */

.lcp-menu__sub {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition:
		grid-template-rows 0.5s var(--lcp-menu-ease),
		visibility 0s linear 0.5s;
}

.lcp-menu__item.is-open > .lcp-menu__sub {
	grid-template-rows: 1fr;
	visibility: visible;
	transition-delay: 0s;
}

.lcp-menu__sublist {
	min-height: 0;
	overflow: hidden;
}

.lcp-menu__item.is-open .lcp-menu__sublist {
	padding: 0.4em 0 0.8em;
}


/* =========================================================================
 * DESKTOP — sub-items in een tweede kolom
 *
 * De lijst zakt naar de onderkant van het scherm (margin-top: auto; niet
 * justify-content, want dan wordt inhoud die niet past onbereikbaar). Het
 * sub-menu staat absoluut in de rechterhelft, onderaan gelijk met de lijst.
 * ====================================================================== */

@media (min-width: 1024px) {
	/* 5% van de paneelbreedte: 48 px bij een paneel van 960 px, 72 px bij
	   1440 px. Sub-items op ongeveer de helft. */
	.lcp-menu {
		--lcp-menu-size: clamp(2.5rem, 5cqi, 4.5rem);
		--lcp-menu-sub-size: clamp(1.125rem, 2.4cqi, 2rem);
	}

	.lcp-menu__nav {
		margin-top: auto;
	}

	.lcp-menu__list {
		width: 50%;
	}

	/* Onderkant gelijk met de onderkant van de lijst: de kolom groeit
	   omhoog, de ruimte die er is, en loopt nooit onder het scherm uit. */
	.lcp-menu__sub {
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 50%;
		display: block;
		padding-left: var(--lcp-menu-gutter);
		box-sizing: border-box;
		transition: visibility 0s linear 0.3s;
	}

	.lcp-menu__item.is-open > .lcp-menu__sub {
		transition-delay: 0s;
	}

	.lcp-menu__sublist,
	.lcp-menu__item.is-open .lcp-menu__sublist {
		overflow: visible;
		padding: 0;
	}

	/* Pijltje wijst naar rechts, naar de kolom. */
	.lcp-menu__chevron,
	.lcp-menu .lcp-menu__item.is-open .lcp-menu__chevron {
		transform: rotate(-45deg);
	}

	/* Het geopende item houdt zijn crème vlak, zodat zichtbaar blijft bij
	   welk item de rechterkolom hoort. */
	.lcp-menu .lcp-menu__item.is-open > .lcp-menu__row > .lcp-menu__subtoggle {
		color: var(--lcp-menu-hover-ink);
	}

	.lcp-menu .lcp-menu__item.is-open > .lcp-menu__row > .lcp-menu__subtoggle::before {
		transform: scaleY(1);
	}
}


/* =========================================================================
 * PAGINA
 * ====================================================================== */

/* Pagina scrollt niet onder het menu. scrollbar-gutter houdt de ruimte van
   de scrollbalk vast, anders verspringt de pagina een paar pixels. Wint
   van de overflow-x: clip bij de sticker (zelfde gewicht, later geladen). */
html.lcp-menu-open {
	overflow: hidden;
	scrollbar-gutter: stable;
}

/* Elementen in de header die boven het open menu moeten blijven, zoals het
   logo. Werkt alleen binnen dezelfde Elementor-container als het menu. */
html.lcp-menu-open .lcp-menu-above {
	position: relative;
	z-index: 9991;
}

/* Alleen zichtbaar voor beheerders: er is geen menu toegewezen. */
.lcp-menu__error {
	margin: 0;
	padding: 0.5rem 0.75rem;
	background: #FF7A6B;
	color: #1C1C1C;
	font-size: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
	.lcp-menu *,
	.lcp-menu *::before,
	.lcp-menu *::after {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
}