/* ==========================================================================
   DVA Mobile Menu — fullscreen overlay menu + animated hamburger toggles
   Huisstijl: crème #FFFBF5 · leisteen #2E4456 · koraal #E7866D · dusty #9FB3BD
   ========================================================================== */

.dva-mm {
	--dva-toggle-size: 30px;
	--dva-toggle-color: #2E4456;
	--dva-toggle-color-open: #2E4456;
	--dva-toggle-color-hover: #E7866D;
	--dva-panel-bg: #FFFBF5;
	--dva-link-color: #2E4456;
	--dva-link-accent: #E7866D;
	--dva-number-color: #9FB3BD;
	--dva-cta-bg: #F09A84;
	--dva-cta-bg-hover: #E7866D;
	--dva-cta-text: #FFFFFF;
	--dva-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
	--dva-ease-inout: cubic-bezier(0.77, 0, 0.175, 1);
	--dva-ease-spring: cubic-bezier(0.68, -0.45, 0.265, 1.45);
	position: relative;
	display: inline-flex;
}

/* Vangnet: Elementor 4 laadt de responsive hidden-* regels niet altijd.
   Zelfde breakpoints als Elementor standaard (mobile ≤767, tablet 768–1024). */
@media (max-width: 767px) {
	.elementor-hidden-mobile { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-hidden-tablet { display: none !important; }
}

@media (min-width: 1025px) {
	.elementor-hidden-desktop { display: none !important; }
}

/* Widget-wrapper: lijn het icoon uit aan de rechterkant van zijn kolom. */
.elementor-widget-dva-mobile-menu,
.elementor-widget-dva-mobile-menu .elementor-widget-container {
	display: flex;
	justify-content: flex-end;
	flex-shrink: 0;
}

.dva-mm,
.dva-mm__toggle {
	flex-shrink: 0;
}

html.dva-mm-lock,
html.dva-mm-lock body {
	overflow: hidden !important;
	overscroll-behavior: none;
}

/* --------------------------------------------------------------- Toggle */

.dva-mm__toggle,
.dva-mm__toggle:hover,
.dva-mm__toggle:focus,
.dva-mm__toggle:active {
	/* Volledige reset zodat thema/kit-knopstijlen (koraal pill) niet doorlekken. */
	appearance: none;
	-webkit-appearance: none;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	color: var(--dva-toggle-color);
	min-height: 0;
	min-width: 0;
	padding: 8px !important;
}

.dva-mm__toggle {
	position: relative;
	z-index: 1002;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.dva-mm__toggle:focus-visible {
	outline: 2px solid var(--dva-link-accent);
	outline-offset: 3px;
	border-radius: 6px;
}

.dva-mm__icon {
	position: relative;
	display: block;
	width: var(--dva-toggle-size);
	height: calc(var(--dva-toggle-size) * 0.62);
	transition: transform 0.5s var(--dva-ease-inout);
}

.dva-mm__line {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--dva-toggle-color);
	transition:
		transform 0.42s var(--dva-ease-smooth),
		opacity 0.3s ease,
		width 0.42s var(--dva-ease-smooth),
		background 0.25s ease,
		top 0.42s var(--dva-ease-smooth);
}

.dva-mm__line--1 { top: 0; }
.dva-mm__line--2 { top: calc(50% - 1px); }
.dva-mm__line--3 { top: calc(100% - 2px); }

.dva-mm__toggle:hover .dva-mm__line {
	background: var(--dva-toggle-color-hover);
}

.dva-mm.is-open .dva-mm__line {
	background: var(--dva-toggle-color-open);
}

.dva-mm.is-open .dva-mm__toggle:hover .dva-mm__line {
	background: var(--dva-toggle-color-hover);
}

/* Tekstlabel (menu ↔ sluit) */

.dva-mm__label {
	position: relative;
	overflow: hidden;
	display: block;
	height: 1.3em;
	font-family: "DM Sans", sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dva-toggle-color);
	transition: color 0.25s ease;
}

.dva-mm__toggle:hover .dva-mm__label { color: var(--dva-toggle-color-hover); }
.dva-mm.is-open .dva-mm__label { color: var(--dva-toggle-color-open); }

.dva-mm__label-open,
.dva-mm__label-close {
	display: block;
	transition: transform 0.45s var(--dva-ease-inout), opacity 0.3s ease;
}

.dva-mm__label-close {
	position: absolute;
	inset: 0;
	transform: translateY(110%);
	opacity: 0;
}

.dva-mm.is-open .dva-mm__label-open { transform: translateY(-110%); opacity: 0; }
.dva-mm.is-open .dva-mm__label-close { transform: translateY(0); opacity: 1; }

/* ------------------------------------------------ Variant 1: Minimal Duo
   2 lijnen (onderste korter), springt veerkrachtig naar een X. */

.dva-mm--style-minimal .dva-mm__line { transition-timing-function: var(--dva-ease-spring); }
.dva-mm--style-minimal .dva-mm__line--1 { top: 22%; }
.dva-mm--style-minimal .dva-mm__line--2 { display: none; }
.dva-mm--style-minimal .dva-mm__line--3 { top: calc(78% - 2px); width: 62%; }

.dva-mm--style-minimal .dva-mm__toggle:hover .dva-mm__line--3 { width: 100%; }

.dva-mm--style-minimal.is-open .dva-mm__line--1 {
	top: calc(50% - 1px);
	transform: rotate(45deg);
}

.dva-mm--style-minimal.is-open .dva-mm__line--3 {
	top: calc(50% - 1px);
	width: 100%;
	transform: rotate(-45deg);
}

/* ------------------------------------------------ Variant 2: Slide & Twist
   Buitenste lijnen glijden naar het midden en draaien; middelste glijdt weg. */

.dva-mm--style-slide.is-open .dva-mm__line--1 {
	top: calc(50% - 1px);
	transform: rotate(45deg);
}

.dva-mm--style-slide.is-open .dva-mm__line--2 {
	transform: translateX(-10px);
	opacity: 0;
}

.dva-mm--style-slide.is-open .dva-mm__line--3 {
	top: calc(50% - 1px);
	transform: rotate(-45deg);
}

/* ------------------------------------------------ Variant 3: Spin
   Het hele icoon draait 225° terwijl de lijnen naar een X morphen. */

.dva-mm--style-spin.is-open .dva-mm__icon {
	transform: rotate(225deg);
}

.dva-mm--style-spin.is-open .dva-mm__line--1 {
	top: calc(50% - 1px);
	transform: rotate(90deg);
}

.dva-mm--style-spin.is-open .dva-mm__line--2 { opacity: 0; }

.dva-mm--style-spin.is-open .dva-mm__line--3 {
	top: calc(50% - 1px);
	transform: rotate(0deg);
}

/* ------------------------------------------------ Variant 4: Squeeze
   Twee stappen: eerst samenknijpen, dan draaien naar X (en omgekeerd terug). */

.dva-mm--style-squeeze .dva-mm__line {
	transition:
		top 0.2s 0.2s var(--dva-ease-smooth),
		transform 0.2s var(--dva-ease-smooth),
		opacity 0.15s 0.2s ease,
		background 0.25s ease;
}

.dva-mm--style-squeeze.is-open .dva-mm__line {
	transition:
		top 0.2s var(--dva-ease-smooth),
		transform 0.2s 0.2s var(--dva-ease-smooth),
		opacity 0.15s ease,
		background 0.25s ease;
}

.dva-mm--style-squeeze.is-open .dva-mm__line--1 {
	top: calc(50% - 1px);
	transform: rotate(45deg);
}

.dva-mm--style-squeeze.is-open .dva-mm__line--2 { opacity: 0; }

.dva-mm--style-squeeze.is-open .dva-mm__line--3 {
	top: calc(50% - 1px);
	transform: rotate(-45deg);
}

/* ------------------------------------------------ Variant 5: Arrow
   Vouwt naar een terug-pijl (←) — “ga terug naar de pagina”. */

.dva-mm--style-arrow .dva-mm__line--1,
.dva-mm--style-arrow .dva-mm__line--3 {
	transform-origin: left center;
}

.dva-mm--style-arrow.is-open .dva-mm__icon {
	transform: rotate(-180deg);
}

.dva-mm--style-arrow.is-open .dva-mm__line--1 {
	width: 55%;
	transform: translate(1px, 1px) rotate(40deg);
}

.dva-mm--style-arrow.is-open .dva-mm__line--3 {
	width: 55%;
	transform: translate(1px, -1px) rotate(-40deg);
}

/* --------------------------------------------------------------- Panel */

.dva-mm__panel {
	position: fixed;
	inset: 0;
	z-index: 1001;
	overflow: hidden;
	background: var(--dva-panel-bg);
	visibility: hidden;
	pointer-events: none;
}

.dva-mm.is-open .dva-mm__panel {
	visibility: visible;
	pointer-events: auto;
}

.dva-mm__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 36px;
	height: 100%;
	padding: max(96px, 18vh) clamp(28px, 8vw, 64px) 48px;
	overflow-y: auto;
}

/* Ademende achtergrondvorm */

.dva-mm__breath {
	position: absolute;
	right: -18%;
	bottom: -12%;
	z-index: 0;
	width: 75vmin;
	height: 75vmin;
	border-radius: 50%;
	background: radial-gradient(
		circle at 32% 32%,
		rgba(159, 179, 189, 0.38),
		rgba(240, 154, 132, 0.22) 55%,
		rgba(255, 251, 245, 0) 74%
	);
	filter: blur(34px);
	animation: dva-breath 7s ease-in-out infinite;
	pointer-events: none;
}

@keyframes dva-breath {
	0%, 100% { transform: scale(1) translateY(0); }
	50% { transform: scale(1.14) translateY(-2%); }
}

/* Navigatielinks */

.dva-mm__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: dva-item;
}

.dva-mm__list > li {
	counter-increment: dva-item;
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.dva-mm.is-open .dva-mm__list > li {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.55s var(--dva-ease-smooth) calc(0.22s + var(--dva-i, 0) * 0.07s),
		transform 0.55s var(--dva-ease-smooth) calc(0.22s + var(--dva-i, 0) * 0.07s);
}

.dva-mm__list > li:nth-child(1) { --dva-i: 0; }
.dva-mm__list > li:nth-child(2) { --dva-i: 1; }
.dva-mm__list > li:nth-child(3) { --dva-i: 2; }
.dva-mm__list > li:nth-child(4) { --dva-i: 3; }
.dva-mm__list > li:nth-child(5) { --dva-i: 4; }
.dva-mm__list > li:nth-child(6) { --dva-i: 5; }
.dva-mm__list > li:nth-child(7) { --dva-i: 6; }
.dva-mm__list > li:nth-child(8) { --dva-i: 7; }

.dva-mm__list > li > a {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: 14px;
	padding: 7px 0;
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(30px, 7.5vw, 42px);
	font-weight: 500;
	line-height: 1.18;
	color: var(--dva-link-color);
	text-decoration: none;
	transition: color 0.25s ease, transform 0.35s var(--dva-ease-smooth);
}

.dva-mm__list > li > a::before {
	content: counter(dva-item, decimal-leading-zero);
	font-family: "DM Sans", sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--dva-number-color);
	transition: color 0.25s ease;
}

.dva-mm--no-numbers .dva-mm__list > li > a::before {
	content: none;
}

.dva-mm__list > li > a:hover,
.dva-mm__list > li > a:focus-visible {
	color: var(--dva-link-accent);
	font-style: italic;
	transform: translateX(8px);
}

.dva-mm__list > li.current-menu-item > a,
.dva-mm__list > li.current_page_item > a {
	color: var(--dva-link-accent);
}

.dva-mm__list > li.current-menu-item > a::before,
.dva-mm__list > li.current_page_item > a::before {
	color: var(--dva-link-accent);
}

/* Submenu (indien aanwezig) */

.dva-mm__list .sub-menu {
	list-style: none;
	margin: 2px 0 8px;
	padding: 0 0 0 38px;
}

.dva-mm__list .sub-menu a {
	display: inline-block;
	padding: 4px 0;
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: var(--dva-link-color);
	text-decoration: none;
	opacity: 0.75;
	transition: color 0.25s ease, opacity 0.25s ease;
}

.dva-mm__list .sub-menu a:hover {
	color: var(--dva-link-accent);
	opacity: 1;
}

/* CTA en voettekst */

.dva-mm__cta-wrap,
.dva-mm__footer {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.dva-mm.is-open .dva-mm__cta-wrap {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.55s var(--dva-ease-smooth) 0.62s, transform 0.55s var(--dva-ease-smooth) 0.62s;
}

.dva-mm.is-open .dva-mm__footer {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.55s var(--dva-ease-smooth) 0.7s, transform 0.55s var(--dva-ease-smooth) 0.7s;
}

/* Extra specificiteit: de kit-regel `.elementor-kit-X a` wint anders van één klasse. */
.dva-mm .dva-mm__cta,
.dva-mm .dva-mm__cta:visited {
	color: var(--dva-cta-text);
}

.dva-mm__cta {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 50px;
	background: var(--dva-cta-bg);
	color: var(--dva-cta-text);
	font-family: "DM Sans", sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background 0.25s ease, transform 0.3s var(--dva-ease-smooth);
}

.dva-mm .dva-mm__cta:hover {
	background: var(--dva-cta-bg-hover);
	color: var(--dva-cta-text);
	transform: translateY(-2px);
}

.dva-mm__footer {
	font-family: "DM Sans", sans-serif;
	font-size: 13px;
	letter-spacing: 0.05em;
	color: var(--dva-number-color);
}

.dva-mm .dva-mm__footer a { color: inherit; }

/* ------------------------------------------------ Panel animatie: reveal
   Cirkel opent vanuit de positie van de knop (JS zet --dva-mx / --dva-my). */

.dva-mm--anim-reveal .dva-mm__panel {
	clip-path: circle(0px at var(--dva-mx, calc(100% - 44px)) var(--dva-my, 38px));
	transition:
		clip-path 0.65s var(--dva-ease-inout),
		visibility 0s 0.65s;
}

.dva-mm--anim-reveal.is-open .dva-mm__panel {
	clip-path: circle(150% at var(--dva-mx, calc(100% - 44px)) var(--dva-my, 38px));
	transition: clip-path 0.7s var(--dva-ease-inout);
}

/* ------------------------------------------------ Panel animatie: drawer */

.dva-mm--anim-drawer .dva-mm__panel {
	transform: translateX(102%);
	transition:
		transform 0.55s var(--dva-ease-inout),
		visibility 0s 0.55s;
	box-shadow: -30px 0 60px rgba(46, 68, 86, 0.12);
}

.dva-mm--anim-drawer.is-open .dva-mm__panel {
	transform: translateX(0);
	transition: transform 0.6s var(--dva-ease-inout);
}

/* ------------------------------------------------ Panel animatie: curtain */

.dva-mm--anim-curtain .dva-mm__panel {
	transform: translateY(-102%);
	border-radius: 0 0 40px 40px;
	transition:
		transform 0.55s var(--dva-ease-inout),
		border-radius 0.4s ease,
		visibility 0s 0.55s;
}

.dva-mm--anim-curtain.is-open .dva-mm__panel {
	transform: translateY(0);
	border-radius: 0;
	transition: transform 0.6s var(--dva-ease-inout), border-radius 0.5s ease 0.3s;
}

/* ------------------------------------------------ Panel animatie: fade */

.dva-mm--anim-fade .dva-mm__panel {
	opacity: 0;
	transform: scale(1.05);
	transition:
		opacity 0.4s ease,
		transform 0.45s var(--dva-ease-smooth),
		visibility 0s 0.45s;
}

.dva-mm--anim-fade.is-open .dva-mm__panel {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.45s ease, transform 0.5s var(--dva-ease-smooth);
}

/* ------------------------------------------------ Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.dva-mm *,
	.dva-mm *::before {
		transition-duration: 0.01s !important;
		transition-delay: 0s !important;
		animation: none !important;
	}
}