/* Rijschool Lelly - Menu Navigation (offcanvas) */
.rl-menu,.rl-menu *,.rl-menu-panel,.rl-menu-panel *{box-sizing:border-box}

/* ============================================================
 * CSS VARIABLES (Elementor controls override these per instance)
 * ============================================================ */
.rl-menu{
	--rl-ez:cubic-bezier(0.19,1,0.22,1);
	--rl-panel-dur:600ms;
	/* Trigger */
	--rl-trig-text:#0d0d0d;
	--rl-trig-text-hover:#FF5A00;
	--rl-trig-text-open:#FF5A00;
	--rl-trig-bg:transparent;
	--rl-trig-bg-hover:rgba(255,90,0,0.08);
	--rl-trig-bg-open:rgba(255,90,0,0.12);
	--rl-trig-bar:currentColor;
	display:inline-flex;align-items:center;gap:16px;
	font-family:'Poppins',sans-serif;position:relative;line-height:1
}

.rl-menu-panel{
	--rl-ez:cubic-bezier(0.19,1,0.22,1);
	--rl-panel-dur:600ms;
	/* Panel chrome */
	--rl-drawer-bg:#0d0d0d;
	--rl-drawer-width:380px;
	--rl-overlay-bg:rgba(13,13,13,0.55);
	--rl-glow-1:rgba(255,103,0,0.22);
	--rl-glow-2:rgba(255,90,0,0.10);
	--rl-divider:rgba(255,255,255,0.06);
	/* Items */
	--rl-item-color:#fff;
	--rl-item-color-hover:#FF8533;
	--rl-item-color-current:#FF6700;
	--rl-accent:#FF5A00;
	/* Submenu */
	--rl-sub-color:rgba(255,255,255,0.7);
	--rl-sub-color-hover:#FF8533;
	--rl-sub-color-current:#FF6700;
	--rl-sub-border:rgba(255,103,0,0.25);
	--rl-sub-bg:rgba(255,255,255,0.02);
	/* Indicator (chevron) */
	--rl-ind-color:rgba(255,255,255,0.55);
	--rl-ind-bg:rgba(255,255,255,0.04);
	--rl-ind-border:rgba(255,255,255,0.08);
	--rl-ind-color-open:#FF6700;
	--rl-ind-bg-open:rgba(255,103,0,0.18);
	--rl-ind-border-open:rgba(255,103,0,0.45);
	/* Close */
	--rl-close-color:#fff;
	--rl-close-bg:rgba(255,255,255,0.04);
	--rl-close-border:rgba(255,255,255,0.1);
	--rl-close-bg-hover:rgba(255,103,0,0.14);
	--rl-close-border-hover:rgba(255,103,0,0.4);
	/* CTA */
	--rl-cta-1:#FF6700;
	--rl-cta-2:#FF5A00;
	--rl-cta-hover-1:#FF8533;
	--rl-cta-hover-2:#FF6700;
	--rl-cta-text:#fff;
	/* Footer text */
	--rl-footer-text:rgba(255,255,255,0.45);
	--rl-footer-link:#FF8533;
	--rl-footer-link-hover:#fff;
	font-family:'Poppins',sans-serif
}

.rl-menu-header-logo img,.rl-menu-header-logo svg{display:block;height:auto;max-width:140px}
.rl-menu-header-logo a{display:inline-block;text-decoration:none !important;color:#0d0d0d}
.rl-menu-header-logo .rl-menu-logo-text{font-family:'Poppins',sans-serif !important;font-size:18px !important;font-weight:800 !important;letter-spacing:-0.3px;color:#0d0d0d !important;text-decoration:none !important}

/* ============================================================
 * TRIGGER
 * ============================================================ */
.rl-menu-trigger{
	display:inline-flex;align-items:center;gap:10px;
	background:var(--rl-trig-bg);border:0;cursor:pointer;
	padding:8px 14px;border-radius:10px;
	font-family:'Poppins',sans-serif !important;font-size:13px !important;font-weight:600 !important;
	color:var(--rl-trig-text) !important;
	transition:color .3s var(--rl-ez),background .3s var(--rl-ez),transform .3s var(--rl-ez);
	text-transform:none;text-shadow:none
}
.rl-menu-trigger:hover{background:var(--rl-trig-bg-hover);color:var(--rl-trig-text-hover) !important}
.rl-menu-trigger.is-open{background:var(--rl-trig-bg-open);color:var(--rl-trig-text-open) !important}

.rl-menu-trigger__bars{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:22px;height:14px;position:relative}
.rl-menu-trigger__bars .__bar{display:block;width:100%;height:2px;background:var(--rl-trig-bar);border-radius:2px;transform-origin:center;transition:transform .45s var(--rl-ez),opacity .3s var(--rl-ez),background .3s var(--rl-ez)}

/* X animation (3 bars) */
.rl-menu-trigger[data-bar-count="3"].is-open .__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.rl-menu-trigger[data-bar-count="3"].is-open .__bar:nth-child(2){opacity:0;transform:scale(0)}
.rl-menu-trigger[data-bar-count="3"].is-open .__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* X animation (2 bars) */
.rl-menu-trigger[data-bar-count="2"].is-open .__bar:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.rl-menu-trigger[data-bar-count="2"].is-open .__bar:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* X animation (4 bars) */
.rl-menu-trigger[data-bar-count="4"].is-open .__bar:nth-child(1){opacity:0}
.rl-menu-trigger[data-bar-count="4"].is-open .__bar:nth-child(4){opacity:0}
.rl-menu-trigger[data-bar-count="4"].is-open .__bar:nth-child(2){transform:translateY(3.5px) rotate(45deg)}
.rl-menu-trigger[data-bar-count="4"].is-open .__bar:nth-child(3){transform:translateY(-3.5px) rotate(-45deg)}

/* Custom icon mode */
.rl-menu-trigger__icon{display:inline-flex;align-items:center;justify-content:center;line-height:0}
.rl-menu-trigger__icon i,.rl-menu-trigger__icon svg{display:inline-block;width:1em;height:1em;font-size:20px;color:inherit;fill:currentColor;stroke:currentColor}
.rl-menu-trigger__icon svg{stroke-width:1.8;fill:none}

/* ============================================================
 * OFFCANVAS PANEL
 * ============================================================ */
.rl-menu-panel{position:fixed;inset:0;z-index:99999999;pointer-events:none;visibility:hidden}
.rl-menu-panel.is-open{pointer-events:auto;visibility:visible}

.rl-menu-overlay{
	position:absolute;inset:0;
	background:var(--rl-overlay-bg);
	backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
	opacity:0;transition:opacity var(--rl-panel-dur) var(--rl-ez);cursor:pointer
}
.rl-menu-panel.is-open .rl-menu-overlay{opacity:1}

.rl-menu-drawer{
	position:absolute;top:0;bottom:0;width:var(--rl-drawer-width);max-width:100vw;
	background:var(--rl-drawer-bg);
	box-shadow:-30px 0 80px rgba(0,0,0,0.45);
	display:flex;flex-direction:column;overflow:hidden;
	color:var(--rl-item-color);
	transition:transform var(--rl-panel-dur) var(--rl-ez)
}
.rl-menu-panel[data-direction="right"] .rl-menu-drawer{right:0;transform:translateX(100%)}
.rl-menu-panel[data-direction="left"]  .rl-menu-drawer{left:0;transform:translateX(-100%)}
.rl-menu-panel.is-open .rl-menu-drawer{transform:translateX(0)}

.rl-menu-drawer::before{content:'';position:absolute;top:-150px;right:-100px;width:340px;height:340px;background:radial-gradient(circle,var(--rl-glow-1) 0%,transparent 70%);border-radius:50%;pointer-events:none;z-index:0}
.rl-menu-drawer::after{content:'';position:absolute;bottom:-120px;left:-80px;width:260px;height:260px;background:radial-gradient(circle,var(--rl-glow-2) 0%,transparent 70%);border-radius:50%;pointer-events:none;z-index:0}
.rl-menu-drawer>*{position:relative;z-index:1}

/* ============================================================
 * PANEL HEADER
 * ============================================================ */
.rl-menu-drawer__header{
	display:flex;align-items:center;justify-content:space-between;
	padding:22px 26px;
	border-bottom:1px solid var(--rl-divider)
}
.rl-menu-panel-logo{display:inline-flex;align-items:center}
.rl-menu-panel-logo img,.rl-menu-panel-logo svg{display:block;height:auto;max-width:130px;max-height:36px}
.rl-menu-panel-logo .rl-menu-logo-text{font-family:'Poppins',sans-serif !important;font-size:18px !important;font-weight:800 !important;letter-spacing:-0.3px;color:var(--rl-item-color) !important;text-decoration:none !important}
.rl-menu-panel-logo a{text-decoration:none !important;color:var(--rl-item-color);display:inline-flex}

.rl-menu-close{
	width:38px;height:38px;
	display:inline-flex;align-items:center;justify-content:center;
	border:1px solid var(--rl-close-border);
	background:var(--rl-close-bg);
	color:var(--rl-close-color);cursor:pointer;border-radius:50%;
	transition:background .25s var(--rl-ez),transform .35s var(--rl-ez),border-color .25s var(--rl-ez);
	flex-shrink:0;padding:0
}
.rl-menu-close:hover{background:var(--rl-close-bg-hover);border-color:var(--rl-close-border-hover);transform:rotate(90deg)}
.rl-menu-close svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}

/* ============================================================
 * MENU LIST
 * ============================================================ */
.rl-menu-drawer__body{flex:1;min-height:0;overflow-y:auto;padding:10px 0 8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.1) transparent}
.rl-menu-drawer__body::-webkit-scrollbar{width:6px}
.rl-menu-drawer__body::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:3px}

.rl-menu-nav,.rl-menu-nav ul{list-style:none !important;margin:0 !important;padding:0 !important}
.rl-menu-nav>li,.rl-menu-nav ul>li{margin:0 !important;list-style:none !important}
.rl-menu-nav>li::before,.rl-menu-nav>li::marker,.rl-menu-nav ul>li::before,.rl-menu-nav ul>li::marker{content:none !important;display:none !important}

.rl-menu-nav>li>a{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	padding:14px 26px;
	text-decoration:none !important;
	font-family:'Poppins',sans-serif !important;font-size:16px !important;font-weight:600 !important;line-height:1.2 !important;
	color:var(--rl-item-color) !important;
	position:relative;
	transition:color .35s var(--rl-ez),background .35s var(--rl-ez);
	text-shadow:none
}
.rl-menu-txt{display:inline-flex;align-items:center;gap:12px;flex:1;transition:transform .4s var(--rl-ez)}
.rl-menu-txt::before{
	content:'';width:0;height:2px;
	background:var(--rl-accent);
	transition:width .45s var(--rl-ez),margin-right .45s var(--rl-ez),opacity .3s var(--rl-ez);
	opacity:0;flex-shrink:0;margin-right:-12px;border-radius:2px
}
.rl-menu-nav>li>a:hover .rl-menu-txt{transform:translateX(6px)}
.rl-menu-nav>li>a:hover .rl-menu-txt::before{width:18px;opacity:1;margin-right:0}
.rl-menu-nav>li>a:hover{color:var(--rl-item-color-hover) !important}
.rl-menu-nav>li.is-current>a .rl-menu-txt::before{width:24px;opacity:1;margin-right:0}
.rl-menu-nav>li.is-current>a{color:var(--rl-item-color-current) !important}

/* Submenu indicator (chevron) */
.rl-menu-indicator{
	width:30px;height:30px;border-radius:50%;
	display:inline-flex;align-items:center;justify-content:center;
	background:var(--rl-ind-bg);border:1px solid var(--rl-ind-border);
	color:var(--rl-ind-color);cursor:pointer;flex-shrink:0;padding:0;
	transition:transform .4s var(--rl-ez),background .25s var(--rl-ez),color .25s var(--rl-ez),border-color .25s var(--rl-ez)
}
.rl-menu-indicator svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rl-menu-indicator:hover{background:var(--rl-ind-bg-open);border-color:var(--rl-ind-border-open);color:var(--rl-ind-color-open)}
.rl-menu-nav li.is-open>a>.rl-menu-indicator{transform:rotate(180deg);background:var(--rl-ind-bg-open);color:var(--rl-ind-color-open);border-color:var(--rl-ind-border-open)}

/* Submenu */
.rl-menu-nav .sub-menu{
	max-height:0;overflow:hidden;
	transition:max-height .55s var(--rl-ez);
	background:var(--rl-sub-bg);
	border-left:2px solid var(--rl-sub-border);
	margin:0 26px 4px 26px !important;
	border-radius:0 8px 8px 0
}
.rl-menu-nav li.is-open>.sub-menu{max-height:1200px}
.rl-menu-nav .sub-menu>li>a{
	display:block;
	padding:11px 18px;
	font-family:'Poppins',sans-serif !important;font-size:13px !important;font-weight:500 !important;
	color:var(--rl-sub-color) !important;
	text-decoration:none !important;
	transition:color .25s var(--rl-ez),padding-left .3s var(--rl-ez);
	text-shadow:none
}
.rl-menu-nav .sub-menu>li>a:hover{color:var(--rl-sub-color-hover) !important;padding-left:24px}
.rl-menu-nav .sub-menu>li.is-current>a{color:var(--rl-sub-color-current) !important}

/* ============================================================
 * STAGGER ENTRANCE
 * ============================================================ */
.rl-menu-nav>li{opacity:0;transform:translateX(20px);transition:opacity .5s var(--rl-ez),transform .5s var(--rl-ez)}
.rl-menu-panel.is-open .rl-menu-nav>li{opacity:1;transform:translateX(0)}
.rl-menu-panel.is-open .rl-menu-nav>li:nth-child(1){transition-delay:.08s}
.rl-menu-panel.is-open .rl-menu-nav>li:nth-child(2){transition-delay:.13s}
.rl-menu-panel.is-open .rl-menu-nav>li:nth-child(3){transition-delay:.18s}
.rl-menu-panel.is-open .rl-menu-nav>li:nth-child(4){transition-delay:.23s}
.rl-menu-panel.is-open .rl-menu-nav>li:nth-child(5){transition-delay:.28s}
.rl-menu-panel.is-open .rl-menu-nav>li:nth-child(6){transition-delay:.33s}
.rl-menu-panel.is-open .rl-menu-nav>li:nth-child(7){transition-delay:.38s}
.rl-menu-panel.is-open .rl-menu-nav>li:nth-child(8){transition-delay:.43s}
.rl-menu-panel.is-open .rl-menu-nav>li:nth-child(n+9){transition-delay:.48s}

/* ============================================================
 * FOOTER (CTA + text)
 * ============================================================ */
.rl-menu-drawer__footer{
	padding:20px 26px 24px;
	border-top:1px solid var(--rl-divider);
	display:flex;flex-direction:column;gap:14px
}

.rl-menu-cta{
	position:relative;
	display:flex;align-items:center;justify-content:center;gap:10px;
	padding:14px 22px !important;
	background:linear-gradient(135deg,var(--rl-cta-1) 0%,var(--rl-cta-2) 100%) !important;
	border:none !important;border-radius:12px !important;
	font-family:'Poppins',sans-serif !important;font-size:14px !important;font-weight:700 !important;
	color:var(--rl-cta-text) !important;cursor:pointer;
	text-decoration:none !important;text-transform:none !important;text-shadow:none !important;
	overflow:hidden;
	transition:transform .3s var(--rl-ez),box-shadow .3s var(--rl-ez)
}
.rl-menu-cta::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--rl-cta-hover-1) 0%,var(--rl-cta-hover-2) 100%);opacity:0;transition:opacity .3s var(--rl-ez)}
.rl-menu-cta:hover::before{opacity:1}
.rl-menu-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(255,103,0,0.65)}
.rl-menu-cta>*{position:relative;z-index:2}
.rl-menu-cta-arrow{display:inline-block;transition:transform .3s var(--rl-ez)}
.rl-menu-cta:hover .rl-menu-cta-arrow{transform:translateX(4px)}

.rl-menu-footer-text{
	font-family:'Montserrat',sans-serif !important;
	font-size:12px !important;font-weight:400 !important;
	color:var(--rl-footer-text) !important;
	text-align:center;margin:0;line-height:1.45
}
.rl-menu-footer-text a{color:var(--rl-footer-link) !important;text-decoration:none !important;transition:color .2s var(--rl-ez)}
.rl-menu-footer-text a:hover{color:var(--rl-footer-link-hover) !important}

/* ============================================================
 * BODY SCROLL LOCK
 * ============================================================ */
body.rl-menu-open{overflow:hidden}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */
@media(max-width:480px){
	.rl-menu-drawer{width:88vw}
	.rl-menu-nav>li>a{padding:13px 22px;font-size:15px !important}
	.rl-menu-drawer__header{padding:18px 22px}
	.rl-menu-drawer__footer{padding:18px 22px 22px}
	.rl-menu-nav .sub-menu{margin:0 22px 4px 22px !important}
}
