/*
 * Cobra Groeninzicht - mobiel menu (hamburger).
 *
 * Werkt zonder JavaScript: een verborgen checkbox (.lytbox-nav_control) opent en sluit het
 * menu. Het menu schuift van rechts in beeld; de hamburger wordt een kruisje.
 * Overgezet uit de Customizer (8 oktober 2026).
 */

/* ----------------------------------------------------------------- knop */

/* Kleuren van de hamburger en het kruisje pas je hier aan. */
.lytbox-button {
	--hamburger-color: #000;
	--close-x-color: #000;

	display: block;
	position: relative;
	z-index: 101;
	height: 18px;
	cursor: pointer;
}

/* Elementor-sjabloon van het menu over de volle breedte.
   Let op: 23537 is het ID van dat sjabloon. Wordt het sjabloon opnieuw gemaakt, dan
   hier het nieuwe ID invullen. */
.elementor-23537 {
	width: 100%;
}

/* ----------------------------------------------------------------- menu */

/* Het menu staat buiten beeld rechts, over het hele scherm. */
.lytbox-navigation {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	transform: translateX(100%);
	transition: transform 0.2s;
}

/* De checkbox zelf is onzichtbaar. */
.lytbox-nav_control {
	position: absolute;
	left: -9999px;
	width: 100%;
	clip: rect(0, 0, 0, 0);
}

/* Aangevinkt: menu schuift in beeld. */
.lytbox-nav_control:checked ~ .lytbox-navigation {
	opacity: 1;
	transform: translateX(0);
	transition: transform 0.3s, opacity 0.3s;
}

/* ------------------------------------------------------------ hamburger */

/* Drie streepjes van 24px, 6px uit elkaar. */
.lytbox-button .hamburguer {
	position: relative;
}

.lytbox-button .hamburguer span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--hamburger-color);
	transform-origin: 50% 50%;
	transition: all 0.1s 0.2s ease, transform 0.2s ease;
}

.lytbox-button .hamburguer span:nth-child(2) {
	transform: translate(0, 6px);
}

.lytbox-button .hamburguer span:nth-child(3) {
	transform: translate(0, 12px);
}

/* ------------------------------------------------------------- kruisje */

/* Menu open: het bovenste streepje verdwijnt, de andere twee kruisen. */
.lytbox-nav_control:checked ~ .lytbox-button .hamburguer {
	transition: all 0.1s 0s ease;
}

.lytbox-nav_control:checked ~ .lytbox-button .hamburguer span {
	background: var(--close-x-color);
	transition: all 0.1s ease, transform 0.1s 0.2s ease;
}

.lytbox-nav_control:checked ~ .lytbox-button .hamburguer span:first-child {
	opacity: 0;
}

.lytbox-nav_control:checked ~ .lytbox-button .hamburguer span:nth-child(2) {
	transform: translate(0, 6px) rotate(45deg);
}

.lytbox-nav_control:checked ~ .lytbox-button .hamburguer span:nth-child(3) {
	transform: translate(0, 4px) rotate(-45deg);
}