/* =========================================================================
   TZ Tuinen — Mobiel Menu
   Modern slide-in menu dat het Divi mobiele menu vervangt en overschrijft.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. HUISSTIJL / KLEUREN  →  pas hier (en alleen hier) de kleuren aan.
   Overgenomen uit het TZ Tuinen-logo: bosgroen / groen / salie.
   ------------------------------------------------------------------------- */
:root {
	--tz-mm-bg:          #1c3b22;            /* drawer-achtergrond (bosgroen)      */
	--tz-mm-bg-2:        #24492b;            /* iets lichter groen vlak / hover    */
	--tz-mm-bg-deep:     #142b19;            /* onderkant gradient                 */
	--tz-mm-text:        #f4f8ec;            /* hoofdtekst (warm wit)              */
	--tz-mm-muted:       rgba(244,248,236,.60);/* subtekst / submenu               */
	--tz-mm-accent:      #d6e5ba;            /* accent (salie)                     */
	--tz-mm-green:       #6a8d4d;            /* merk-groen                         */
	--tz-mm-accent-text: #16301c;            /* tekst óp het accent                */
	--tz-mm-line:        rgba(214,229,186,.16);/* scheidingslijnen                 */
	--tz-mm-overlay:     rgba(10,22,13,.55); /* backdrop achter de drawer          */
	--tz-mm-width:       min(92vw, 440px);   /* breedte van de drawer              */
	--tz-mm-radius:      16px;
	--tz-mm-ease:        cubic-bezier(.22,.61,.36,1);
	--tz-mm-font:        "Montserrat", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* -------------------------------------------------------------------------
   2. DIVI MOBIEL MENU UITZETTEN (alleen wanneer onze JS klaar is).
   ------------------------------------------------------------------------- */
@media (max-width: 980px) {
	html.tz-mm-ready .et_pb_menu .et_mobile_nav_menu,
	html.tz-mm-ready .et_mobile_nav_menu,
	html.tz-mm-ready .et_pb_menu .mobile_nav,
	html.tz-mm-ready .mobile_menu_bar,
	html.tz-mm-ready ul.et_mobile_menu {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}
}

/* -------------------------------------------------------------------------
   3. HAMBURGER-KNOP
   ------------------------------------------------------------------------- */
.tz-mm-toggle {
	display: none;
	position: relative;
	z-index: 5;
	margin-left: auto;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	transition: background-color .2s ease;
}
.tz-mm-toggle:hover,
.tz-mm-toggle:focus-visible { background: rgba(106,141,77,.14); }
.tz-mm-toggle:focus-visible { outline: 2px solid var(--tz-mm-green); outline-offset: 2px; }

.tz-mm-toggle span {
	display: block;
	width: 27px;                /* drie gelijke strepen */
	height: 2.5px;
	border-radius: 3px;
	background: currentColor;   /* erft de menukleur van het thema (groen) */
	transition: transform .32s var(--tz-mm-ease), opacity .2s ease;
}
.tz-mm-toggle.is-active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.tz-mm-toggle.is-active span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.tz-mm-toggle.is-active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 980px) {
	html.tz-mm-ready .tz-mm-toggle { display: flex; }
}

/* -------------------------------------------------------------------------
   4. OVERLAY
   ------------------------------------------------------------------------- */
.tz-mm-overlay {
	position: fixed;
	inset: 0;
	z-index: 999998;
	background: var(--tz-mm-overlay);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease, visibility 0s linear .35s;
}
.tz-mm-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .35s ease;
}

/* -------------------------------------------------------------------------
   5. DRAWER
   ------------------------------------------------------------------------- */
.tz-mm-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 999999;
	width: var(--tz-mm-width);
	max-width: 100%;
	height: 100%;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--tz-mm-bg);
	background-image:
		radial-gradient(120% 80% at 100% 0%, var(--tz-mm-bg-2) 0%, transparent 55%),
		linear-gradient(180deg, var(--tz-mm-bg) 0%, var(--tz-mm-bg-deep) 100%);
	color: var(--tz-mm-text);
	font-family: var(--tz-mm-font);
	box-shadow: -22px 0 60px rgba(0,0,0,.45);
	transform: translateX(100%);
	transition: transform .42s var(--tz-mm-ease);
	will-change: transform;
	overscroll-behavior: contain;
}
.tz-mm-drawer.is-open { transform: translateX(0); }
.tz-mm-drawer * { box-sizing: border-box; }
.tz-mm-drawer a { text-decoration: none; }

.tz-mm-head, .tz-mm-body, .tz-mm-foot { position: relative; z-index: 1; }

/* 5a. Kop van de drawer (alleen sluitknop, rechts uitgelijnd) */
.tz-mm-head {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding: 20px 22px;
	border-bottom: 1px solid var(--tz-mm-line);
	flex: 0 0 auto;
}

.tz-mm-close {
	flex: 0 0 auto;
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0;
	border: 1px solid var(--tz-mm-line);
	border-radius: 50%;
	background: transparent;
	color: var(--tz-mm-text);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, transform .3s var(--tz-mm-ease);
}
.tz-mm-close:hover { background: var(--tz-mm-bg-2); border-color: var(--tz-mm-accent); transform: rotate(90deg); }
.tz-mm-close:focus-visible { outline: 2px solid var(--tz-mm-accent); outline-offset: 2px; }
.tz-mm-close svg { width: 20px; height: 20px; }

/* 5c. Scrollbaar menu-gedeelte */
.tz-mm-body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 10px 0 8px;
}
.tz-mm-list { list-style: none; margin: 0; padding: 0; }

.tz-mm-item { position: relative; }

.tz-mm-row {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid var(--tz-mm-line);
}
.tz-mm-link {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 62px;
	padding: 14px 10px 14px 24px;
	color: var(--tz-mm-text);
	font-family: var(--tz-mm-font);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .005em;
	transition: color .22s ease, padding-left .28s var(--tz-mm-ease);
}
.tz-mm-link:hover,
.tz-mm-link:focus-visible { color: var(--tz-mm-accent); padding-left: 30px; }
.tz-mm-link:focus-visible { outline: none; }

/* volgnummer (01, 02, …) — modern accent */
.tz-mm-index {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--tz-mm-green);
	min-width: 22px;
	font-variant-numeric: tabular-nums;
	transition: color .22s ease;
}
.tz-mm-link:hover .tz-mm-index { color: var(--tz-mm-accent); }

/* actieve / huidige pagina */
.tz-mm-item.is-current > .tz-mm-row > .tz-mm-link { color: var(--tz-mm-accent); }
.tz-mm-item.is-current > .tz-mm-row { box-shadow: inset 4px 0 0 var(--tz-mm-accent); }

/* accordeon-knop */
.tz-mm-acc {
	flex: 0 0 auto;
	width: 60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--tz-mm-line);
	background: transparent;
	color: var(--tz-mm-muted);
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease;
}
.tz-mm-acc:hover { color: var(--tz-mm-accent); background: rgba(214,229,186,.06); }
.tz-mm-acc:focus-visible { outline: 2px solid var(--tz-mm-accent); outline-offset: -2px; }
.tz-mm-acc svg { width: 17px; height: 17px; transition: transform .32s var(--tz-mm-ease); }
.tz-mm-acc[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--tz-mm-accent); }

/* submenu */
.tz-mm-sub {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	background: rgba(0,0,0,.22);
	transition: max-height .36s var(--tz-mm-ease);
}
.tz-mm-sub .tz-mm-link {
	min-height: 50px;
	padding: 11px 10px 11px 40px;
	font-size: 15.5px;
	font-weight: 500;
	color: var(--tz-mm-muted);
}
.tz-mm-sub .tz-mm-link::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--tz-mm-green);
	flex: 0 0 auto;
}
.tz-mm-sub .tz-mm-link:hover { color: var(--tz-mm-text); padding-left: 44px; }
.tz-mm-sub .tz-mm-row { border-bottom: 1px solid rgba(214,229,186,.07); }
.tz-mm-sub .tz-mm-item:last-child .tz-mm-row { border-bottom: 0; }

/* -------------------------------------------------------------------------
   6. CONTACTBLOK (onderaan) met Phosphor-iconen
   ------------------------------------------------------------------------- */
.tz-mm-foot {
	flex: 0 0 auto;
	padding: 18px 22px calc(18px + env(safe-area-inset-bottom));
	/* subtiele gradient naar de onderkant */
	background: linear-gradient(to top, var(--tz-mm-bg-deep) 62%, rgba(20,43,25,.72) 100%);
	border-top: 1px solid var(--tz-mm-line);
}
.tz-mm-foot-label {
	display: block;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--tz-mm-accent);
	margin-bottom: 12px;
}
.tz-mm-contact { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.tz-mm-contact-row {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 7px 0;
	color: var(--tz-mm-text);
	font-family: "Lato", var(--tz-mm-font);
	font-size: 15px;
	font-weight: 500;
	transition: color .2s ease;
}
.tz-mm-contact-row:hover { color: var(--tz-mm-accent); }
.tz-mm-ic {
	flex: 0 0 auto;
	width: 38px; height: 38px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(214,229,186,.12);
	color: var(--tz-mm-accent);
	transition: background-color .2s ease, transform .2s ease;
}
.tz-mm-contact-row:hover .tz-mm-ic { background: rgba(214,229,186,.22); transform: translateY(-1px); }
.tz-mm-ic svg { width: 19px; height: 19px; fill: currentColor; }

/* CTA-knop */
.tz-mm-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 20px;
	border-radius: var(--tz-mm-radius);
	background: var(--tz-mm-accent);
	color: var(--tz-mm-accent-text);
	font-family: var(--tz-mm-font);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
	box-shadow: 0 8px 22px rgba(0,0,0,.25);
}
.tz-mm-cta:hover { background: #e6f1cf; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.32); }
.tz-mm-cta:focus-visible { outline: 2px solid var(--tz-mm-text); outline-offset: 2px; }
.tz-mm-cta svg { width: 18px; height: 18px; fill: currentColor; transition: transform .2s ease; }
.tz-mm-cta:hover svg { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   7. BODY-LOCK wanneer het menu open is
   ------------------------------------------------------------------------- */
html.tz-mm-locked,
html.tz-mm-locked body {
	overflow: hidden !important;
	touch-action: none;
}

/* -------------------------------------------------------------------------
   8. Toegankelijkheid: respecteer 'reduce motion'
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.tz-mm-drawer,
	.tz-mm-overlay,
	.tz-mm-sub,
	.tz-mm-acc svg,
	.tz-mm-toggle span,
	.tz-mm-close { transition-duration: .001ms !important; }
}