/* =============================================================
   BOT - mobiele header en menu
   Overschrijft de ElementsKit-navigatie uit header-template 113.
   Alles staat in media queries onder 1025px, want daar verschijnt
   het hamburgermenu (data-responsive-breakpoint="1024").
   De !important's zijn nodig omdat Elementor zijn eigen regels
   met vier klassen diep wegschrijft in post-113.css.
   ============================================================= */

/* De onderkant van het menu wordt door het script in het paneel gezet en
   hoort alleen bij de mobiele weergave. Boven 1024px staat daar de gewone
   horizontale navigatie, dus daar moet hij weg. */
.bot-mm-foot {
	display: none;
}

@media (max-width: 1024px) {

	/* ---------------------------------------------------------
	   1. De balk zelf: witte pil die blijft staan bij scrollen
	   --------------------------------------------------------- */

	.elementor-location-header {
		position: sticky;
		top: 0;
		z-index: 998;
	}

	.elementor-113 .elementor-element.elementor-element-23d5774e {
		--padding-top: 12px !important;
		--padding-right: 12px !important;
		--padding-bottom: 0 !important;
		--padding-left: 12px !important;
		transition: padding-top .3s ease;
	}

	body.bot-mh-scrolled .elementor-113 .elementor-element.elementor-element-23d5774e {
		--padding-top: 8px !important;
	}

	.elementor-113 .elementor-element.elementor-element-5bbabe14 {
		--align-items: center;
		--border-radius: 18px !important;
		--padding-top: 9px !important;
		--padding-right: 9px !important;
		--padding-bottom: 9px !important;
		--padding-left: 16px !important;
		position: relative;
		background-color: transparent !important;
		border: 1px solid rgba(35, 35, 91, .07);
		box-shadow: 0 4px 18px rgba(35, 35, 91, .10);
		transition: box-shadow .3s ease;
	}

	/* Het witte vlak van de balk zit op een pseudo-element en niet op de balk
	   zelf. Dat moet, want backdrop-filter maakt van een element het
	   referentiekader voor alles wat position:fixed is: met de waas op de balk
	   viel het menupaneel binnen de balk in plaats van over het scherm, en was
	   het na scrollen onvindbaar. Een pseudo-element is geen voorouder van het
	   paneel, dus daar speelt dat niet. */
	.elementor-113 .elementor-element.elementor-element-5bbabe14::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		border-radius: inherit;
		background-color: #FFFFFF;
		pointer-events: none;
		transition: background-color .3s ease;
	}

	/* Zodra de bezoeker scrolt wordt de balk iets doorzichtig en
	   legt hij een waas over de pagina eronder. */
	body.bot-mh-scrolled .elementor-113 .elementor-element.elementor-element-5bbabe14 {
		box-shadow: 0 8px 28px rgba(35, 35, 91, .16);
	}

	body.bot-mh-scrolled .elementor-113 .elementor-element.elementor-element-5bbabe14::before {
		background-color: rgba(255, 255, 255, .90);
		-webkit-backdrop-filter: blur(14px) saturate(150%);
		backdrop-filter: blur(14px) saturate(150%);
	}

	/* Logo links, hamburger rechts, allebei op hun natuurlijke breedte. */
	.elementor-113 .elementor-element.elementor-element-3c45a50b {
		--width: auto !important;
		flex: 1 1 auto;
		min-width: 0;
	}

	.elementor-113 .elementor-element.elementor-element-4ec2ad1e {
		--width: auto !important;
		flex: 0 0 auto;
	}

	.elementor-113 .elementor-element.elementor-element-29d8c156 {
		margin: 0 !important;
	}

	.elementor-113 .elementor-element.elementor-element-29d8c156 a,
	.elementor-113 .elementor-element.elementor-element-29d8c156 img {
		display: block;
	}

	.elementor-113 .elementor-element.elementor-element-29d8c156 img {
		width: auto !important;
		height: 40px;
		max-width: 100%;
	}

	/* ---------------------------------------------------------
	   2. De hamburgerknop
	   Het icoonlettertype van ElementsKit gaat eruit; de drie
	   streepjes worden getekend, zodat ze precies uitlijnen.
	   --------------------------------------------------------- */

	.elementor-113 .elementor-element.elementor-element-20353323 button.elementskit-menu-hamburger {
		position: relative;
		float: none !important;
		width: 48px !important;
		height: 48px;
		padding: 0 !important;
		border-radius: 15px !important;
		background-color: #E8770D !important;
		background-image: linear-gradient(#23235B, #23235B);
		background-repeat: no-repeat;
		background-size: 14px 2px;
		background-position: 14px center;
		box-shadow: 0 4px 12px rgba(232, 119, 13, .30);
		transition: transform .18s ease, box-shadow .25s ease;
	}

	.elementor-113 .elementor-element.elementor-element-20353323 button.elementskit-menu-hamburger:active {
		transform: scale(.94);
	}

	.elementor-113 .elementor-element.elementor-element-20353323 button.elementskit-menu-hamburger > .ekit-menu-icon {
		display: none !important;
	}

	.elementor-113 .elementor-element.elementor-element-20353323 button.elementskit-menu-hamburger::before,
	.elementor-113 .elementor-element.elementor-element-20353323 button.elementskit-menu-hamburger::after {
		content: "";
		position: absolute;
		left: 14px;
		width: 20px;
		height: 2px;
		border-radius: 2px;
		background-color: #23235B;
	}

	.elementor-113 .elementor-element.elementor-element-20353323 button.elementskit-menu-hamburger::before {
		top: 15px;
	}

	.elementor-113 .elementor-element.elementor-element-20353323 button.elementskit-menu-hamburger::after {
		bottom: 15px;
	}

	/* ---------------------------------------------------------
	   3. Het menupaneel
	   --------------------------------------------------------- */

	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-menu-container {
		position: fixed;
		top: 0 !important;
		left: 0 !important;
		right: auto;
		z-index: 1001;
		display: flex;
		flex-direction: column;
		/* Expliciet, want ElementsKit lijnt de inhoud onderaan uit; op een
		   kort scherm verdween de kop dan boven de rand. */
		justify-content: flex-start !important;
		align-items: stretch !important;
		height: 100% !important;
		height: 100dvh !important;
		max-width: none !important;
		border-radius: 0 !important;
		padding: calc(14px + env(safe-area-inset-top)) 22px calc(26px + env(safe-area-inset-bottom)) !important;
		background: linear-gradient(168deg, #2B2B70 0%, #23235B 45%, #1A1A45 100%) !important;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		visibility: hidden;
		transform: translateX(-101%);
		transition: transform .44s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .44s;
	}

	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-menu-container.active {
		visibility: visible;
		transform: none;
		transition: transform .44s cubic-bezier(.32, .72, 0, 1);
	}

	/* Zachte oranje gloed rechtsboven, puur voor diepte. */
	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-menu-container::before {
		content: "";
		position: absolute;
		right: -110px;
		bottom: 58%;
		width: 300px;
		height: 300px;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(232, 119, 13, .32) 0%, rgba(232, 119, 13, 0) 70%);
		pointer-events: none;
	}

	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-nav-identity-panel,
	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-navbar-nav,
	.elementor-113 .elementor-element.elementor-element-20353323 .bot-mm-foot {
		position: relative;
		z-index: 1;
	}

	/* Kop van het paneel: logo in wit + sluitknop. */
	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-nav-identity-panel {
		order: 0;
		flex: 0 0 auto;
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		padding: 2px 0 20px !important;
	}

	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-nav-logo {
		margin: 0 !important;
		padding: 0 !important;
	}

	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-nav-logo > img {
		display: block;
		width: auto !important;
		height: 36px !important;
		max-width: 220px !important;
		max-height: none !important;
		filter: brightness(0) invert(1);
	}

	.elementor-113 .elementor-element.elementor-element-20353323 button.elementskit-menu-close {
		position: relative;
		flex: 0 0 auto;
		width: 44px !important;
		height: 44px;
		margin: 0 !important;
		padding: 0 !important;
		border-radius: 50% !important;
		font-size: 0 !important;
		background-color: rgba(255, 255, 255, .09) !important;
		border: 1px solid rgba(255, 255, 255, .20) !important;
		transition: background-color .2s ease;
	}

	.elementor-113 .elementor-element.elementor-element-20353323 button.elementskit-menu-close:hover {
		background-color: rgba(255, 255, 255, .18) !important;
	}

	.elementor-113 .elementor-element.elementor-element-20353323 button.elementskit-menu-close::before,
	.elementor-113 .elementor-element.elementor-element-20353323 button.elementskit-menu-close::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 17px;
		height: 2px;
		margin: -1px 0 0 -8.5px;
		border-radius: 2px;
		background-color: #FFFFFF;
	}

	.elementor-113 .elementor-element.elementor-element-20353323 button.elementskit-menu-close::before {
		transform: rotate(45deg);
	}

	.elementor-113 .elementor-element.elementor-element-20353323 button.elementskit-menu-close::after {
		transform: rotate(-45deg);
	}

	/* ---------------------------------------------------------
	   4. De menu-items
	   --------------------------------------------------------- */

	/* ElementsKit geeft de lijst height:100% mee; die moet hier op auto,
	   anders vult hij het hele paneel en wordt de kop eruit geduwd. */
	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-navbar-nav {
		order: 1;
		flex: 0 0 auto;
		display: block !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border-top: 1px solid rgba(255, 255, 255, .13);
	}

	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-navbar-nav > li {
		display: block !important;
		border-bottom: 1px solid rgba(255, 255, 255, .13);
	}

	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-navbar-nav > li > a {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 21px 2px !important;
		color: #FFFFFF !important;
		font-family: "Merriweather Sans", sans-serif !important;
		font-size: 21px !important;
		font-weight: 800 !important;
		line-height: 1.15 !important;
		letter-spacing: .2px !important;
		text-transform: uppercase !important;
	}

	/* Pijltje rechts, rustig van kleur. */
	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-navbar-nav > li > a::after {
		content: "";
		flex: 0 0 auto;
		width: 8px;
		height: 8px;
		margin-right: 5px;
		border-top: 2px solid rgba(255, 255, 255, .38);
		border-right: 2px solid rgba(255, 255, 255, .38);
		transform: rotate(45deg);
		transition: transform .2s ease, border-color .2s ease;
	}

	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-navbar-nav > li > a:active::after {
		transform: rotate(45deg) translate(2px, -2px);
	}

	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-navbar-nav > li.current-menu-item > a,
	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-navbar-nav > li.current-menu-ancestor > a,
	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-navbar-nav > li.current_page_item > a {
		color: #E8770D !important;
	}

	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-navbar-nav > li.current-menu-item > a::after,
	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-navbar-nav > li.current-menu-ancestor > a::after,
	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-navbar-nav > li.current_page_item > a::after {
		border-color: #E8770D;
	}

	/* ---------------------------------------------------------
	   5. Onderkant van het paneel: één knop plus contactgegevens
	   --------------------------------------------------------- */

	.bot-mm-foot {
		order: 2;
		flex: 0 0 auto;
		margin-top: auto;
		padding-top: 28px;
		display: flex;
		flex-direction: column;
		gap: 22px;
	}

	/* Op een kort scherm is er geen ruimte om de onderkant weg te duwen, en
	   mag alles wat dichter op elkaar. */
	@media (max-height: 700px) {

		.bot-mm-foot {
			margin-top: 26px;
			padding-top: 22px;
			gap: 16px;
		}

		.bot-mm-foot a.bot-mm-cta {
			min-height: 50px;
		}

		.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-menu-container {
			padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
		}

		.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-nav-identity-panel {
			padding-bottom: 14px !important;
		}

		.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-nav-logo > img {
			height: 31px !important;
		}

		.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-navbar-nav > li > a {
			padding: 16px 2px !important;
			font-size: 19px !important;
		}
	}

	.bot-mm-foot a.bot-mm-cta {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 54px;
		padding: 0 22px;
		border-radius: 100px;
		background-color: #E8770D;
		color: #FFFFFF !important;
		font-family: "Merriweather Sans", sans-serif;
		font-size: 17px;
		font-weight: 800;
		letter-spacing: .4px;
		line-height: 1.1;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		box-shadow: 0 8px 20px rgba(232, 119, 13, .28);
		transition: transform .15s ease;
	}

	.bot-mm-foot a.bot-mm-cta:active {
		transform: translateY(1px);
	}

	.bot-mm-meta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}

	.bot-mm-contact {
		display: flex;
		flex-direction: column;
		gap: 4px;
		min-width: 0;
	}

	.bot-mm-contact a,
	.bot-mm-contact span {
		font-family: "Poppins", sans-serif;
		font-size: 13.5px;
		font-weight: 400;
		line-height: 1.5;
		color: rgba(255, 255, 255, .66) !important;
		text-decoration: none;
	}

	.bot-mm-contact a:hover {
		color: #FFFFFF !important;
	}

	.bot-mm-foot a.bot-mm-x {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, .08);
		border: 1px solid rgba(255, 255, 255, .18);
	}

	.bot-mm-foot a.bot-mm-x svg {
		width: 16px;
		height: 16px;
		fill: #FFFFFF;
	}

	/* ---------------------------------------------------------
	   6. Openen: items komen kort na elkaar binnen
	   --------------------------------------------------------- */

	@keyframes botMmIn {
		from {
			opacity: 0;
			transform: translateY(16px);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}

	.elementskit-menu-container.active .elementskit-nav-identity-panel,
	.elementskit-menu-container.active > .elementskit-navbar-nav > li,
	.elementskit-menu-container.active .bot-mm-foot > * {
		animation: botMmIn .55s cubic-bezier(.22, .68, .28, 1) backwards;
	}

	.elementskit-menu-container.active .elementskit-nav-identity-panel { animation-delay: .06s; }
	.elementskit-menu-container.active > .elementskit-navbar-nav > li:nth-child(1) { animation-delay: .12s; }
	.elementskit-menu-container.active > .elementskit-navbar-nav > li:nth-child(2) { animation-delay: .17s; }
	.elementskit-menu-container.active > .elementskit-navbar-nav > li:nth-child(3) { animation-delay: .22s; }
	.elementskit-menu-container.active > .elementskit-navbar-nav > li:nth-child(4) { animation-delay: .27s; }
	.elementskit-menu-container.active > .elementskit-navbar-nav > li:nth-child(5) { animation-delay: .32s; }
	.elementskit-menu-container.active > .elementskit-navbar-nav > li:nth-child(6) { animation-delay: .37s; }
	.elementskit-menu-container.active > .elementskit-navbar-nav > li:nth-child(7) { animation-delay: .42s; }
	.elementskit-menu-container.active > .elementskit-navbar-nav > li:nth-child(8) { animation-delay: .47s; }
	.elementskit-menu-container.active > .elementskit-navbar-nav > li:nth-child(9) { animation-delay: .52s; }
	.elementskit-menu-container.active > .elementskit-navbar-nav > li:nth-child(n+10) { animation-delay: .57s; }
	.elementskit-menu-container.active .bot-mm-foot > *:nth-child(1) { animation-delay: .46s; }
	.elementskit-menu-container.active .bot-mm-foot > *:nth-child(2) { animation-delay: .53s; }

	/* Bewust geen overflow:hidden op html of body zolang het menu open staat:
	   dat haalt de sticky balk uit zijn positie en dan springt de header weg.
	   Het paneel vult op een telefoon het hele scherm en heeft
	   overscroll-behavior:contain, dus de pagina eronder blijft vanzelf staan. */

	/* De donkere laag achter het paneel. */
	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-menu-overlay {
		z-index: 1000 !important;
		background-color: rgba(18, 18, 46, .58) !important;
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
	}
}

/* -------------------------------------------------------------
   Telefoon: paneel over de volle breedte, dus geen overlay nodig.
   ------------------------------------------------------------- */

@media (max-width: 767px) {

	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-menu-container {
		width: 100% !important;
	}

	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-menu-overlay {
		display: none !important;
	}

	.elementor-113 .elementor-element.elementor-element-29d8c156 img {
		height: 34px;
	}
}

/* -------------------------------------------------------------
   Tablet: het paneel blijft een lade van 420px met overlay.
   ------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {

	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-menu-container {
		width: 420px !important;
		box-shadow: 24px 0 60px rgba(18, 18, 46, .35);
	}

	.elementor-113 .elementor-element.elementor-element-20353323 .elementskit-navbar-nav > li > a {
		font-size: 22px !important;
	}
}

@media (prefers-reduced-motion: reduce) {

	.elementskit-menu-container,
	.elementskit-menu-container.active .elementskit-nav-identity-panel,
	.elementskit-menu-container.active > .elementskit-navbar-nav > li,
	.elementskit-menu-container.active .bot-mm-foot > * {
		animation: none !important;
		transition-duration: .01ms !important;
	}
}