/* Schenk Recycling – mobiel menu (sjabloon "Menu mobiel"). Rij heeft class schenk-mm. */
.schenk-mm {
	--mm-navy: #0c2340;
	--mm-teal: #00c7b1;
	--mm-blauw: #006ba6;
	--mm-grijs: #6b7280;
	--mm-lijn: #e6e8ec;
	--mm-pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	color: var(--mm-navy);
}
.schenk-mm.fl-row .fl-col > .fl-col-content {
	padding: 18px 22px 40px;
}

/* Logo + sluitknop van de off-canvas op één regel */
.schenk-mm.fl-row .schenk-mm-logo.fl-module {
	margin: 0 56px 12px 0;
}
.schenk-mm .schenk-mm-logo img {
	width: 210px;
	max-width: 100%;
	height: auto;
}
.pp-offcanvas-content:has(.schenk-mm) .pp-offcanvas-header {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 5;
	background: transparent;
}

/* Sliding menu */
.schenk-mm .schenk-mm-nav .pp-sliding-menus,
.schenk-mm .schenk-mm-nav .pp-sliding-menus .pp-slide-menu-sub-menu {
	background: #fff;
}
.schenk-mm .schenk-mm-nav .pp-sliding-menus .pp-slide-menu-item {
	border-bottom: 1px solid var(--mm-lijn);
	border-color: var(--mm-lijn);
}
/* Submenu boven de hoofdregels leggen (de pijltjes met mask vormen anders een eigen laag die erdoorheen schijnt) */
.schenk-mm .schenk-mm-nav .pp-sliding-menus .pp-slide-menu-sub-menu {
	z-index: 2;
}
.schenk-mm .schenk-mm-nav .pp-sliding-menus .pp-slide-menu-item-link {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 56px;
	padding: 12px 0;
	background: transparent;
	color: var(--mm-navy);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}
.schenk-mm .schenk-mm-nav .pp-sliding-menus .pp-slide-menu__menu > .pp-slide-menu-item > .pp-slide-menu-item-link {
	min-height: 0;
	padding: 16px 0;
}
.schenk-mm .schenk-mm-nav .pp-sliding-menus .pp-slide-menu-item-link:hover,
.schenk-mm .schenk-mm-nav .pp-sliding-menus .pp-slide-menu-item-link:focus {
	background: transparent;
	color: var(--mm-navy);
}

/* "Contact" heeft class knop (oranje knop in het desktopmenu, met !important-regels in custom.css): hier gewoon een menuregel */
.schenk-mm .schenk-mm-nav .pp-sliding-menus .pp-slide-menu__menu > li.knop > a.pp-slide-menu-item-link {
	margin: 0;
	padding: 16px 4px 16px 0 !important;
	min-height: 0 !important;
	border: 0;
	border-radius: 0 !important;
	background: transparent;
	box-shadow: none;
	color: var(--mm-navy) !important;
}

/* Pijl rechts (submenu openen) en terug-pijl */
.schenk-mm .schenk-mm-nav .pp-sliding-menus .pp-slide-menu-arrow {
	align-self: stretch;
	padding: 0 4px 0 20px;
	border: 0 !important;
	background: transparent;
	color: var(--mm-teal);
}
.schenk-mm .schenk-mm-nav .pp-sliding-menus .pp-slide-menu-arrow svg {
	display: none;
}
.schenk-mm .schenk-mm-nav .pp-sliding-menus .pp-slide-menu-arrow > span::before,
.schenk-mm .schenk-mm-nav .pp-sliding-menus .pp-slide-menu__menu > .pp-slide-menu-item:not(.pp-slide-menu-item-has-children) > .pp-slide-menu-item-link::after {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--mm-pijl) center / contain no-repeat;
	mask: var(--mm-pijl) center / contain no-repeat;
}
.schenk-mm .schenk-mm-nav .pp-sliding-menus .pp-slide-menu__menu > .pp-slide-menu-item:not(.pp-slide-menu-item-has-children) > .pp-slide-menu-item-link {
	padding-right: 4px;
}
.schenk-mm .schenk-mm-nav .pp-sliding-menus .pp-slide-menu__menu > .pp-slide-menu-item:not(.pp-slide-menu-item-has-children) > .pp-slide-menu-item-link::after {
	margin-left: auto;
	color: var(--mm-teal);
}
.schenk-mm .schenk-mm-nav .pp-sliding-menus .pp-slide-menu-back > .pp-slide-menu-arrow {
	padding: 0 8px 0 0;
}
.schenk-mm .schenk-mm-nav .pp-sliding-menus .pp-slide-menu-back > .pp-slide-menu-arrow > span::before {
	transform: rotate(180deg);
}
.schenk-mm .schenk-mm-nav .pp-sliding-menus .pp-slide-menu-back > .pp-slide-menu-item-link {
	color: var(--mm-teal);
	font-weight: 700;
}

/* Hoofditems: zeshoek-pictogram, titel en subregel */
.schenk-mm .schenk-mm-icoon {
	flex: 0 0 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 54px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 56'%3E%3Cpath d='M26 3 48 15.5v25L26 53 4 40.5v-25z' fill='%23e8f1f8' stroke='%23e8f1f8' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	color: var(--mm-navy);
}
.schenk-mm .schenk-mm-icoon svg {
	width: 24px;
	height: 24px;
}
.schenk-mm .schenk-mm-tekst {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.schenk-mm .schenk-mm-titel {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--mm-navy);
}
.schenk-mm .schenk-mm-sub {
	margin-top: 3px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--mm-grijs);
}

/* "Direct contact" */
.schenk-mm.fl-row .schenk-mm-label.fl-module {
	margin: 26px 0 12px;
}
.schenk-mm .schenk-mm-label p,
.schenk-mm .schenk-mm-label .fl-rich-text {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mm-grijs);
}

/* Bellen / WhatsApp */
.schenk-mm .schenk-mm-knoppen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.schenk-mm .schenk-mm-knop {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 14px 10px 14px 12px;
	border-radius: 10px;
	color: #fff;
	text-decoration: none;
	transition: filter .2s;
}
.schenk-mm .schenk-mm-knop:hover,
.schenk-mm .schenk-mm-knop:focus {
	color: #fff;
	text-decoration: none;
	filter: brightness(.92);
}
.schenk-mm .schenk-mm-knop--bellen {
	background: var(--mm-blauw);
}
.schenk-mm .schenk-mm-knop--whatsapp {
	background: var(--mm-teal);
}
.schenk-mm .schenk-mm-knop__icoon {
	flex: 0 0 auto;
	display: inline-flex;
	font-size: 22px;
	line-height: 1;
}
.schenk-mm .schenk-mm-knop__icoon svg {
	width: 22px;
	height: 22px;
}
.schenk-mm .schenk-mm-knop__tekst {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}
.schenk-mm .schenk-mm-knop__tekst strong {
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
}
.schenk-mm .schenk-mm-knop__tekst span {
	font-size: 13px;
	opacity: .92;
	white-space: nowrap;
}
.schenk-mm .schenk-mm-knop::after {
	content: "";
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	margin-left: auto;
	background: currentColor;
	-webkit-mask: var(--mm-pijl) center / contain no-repeat;
	mask: var(--mm-pijl) center / contain no-repeat;
}

/* Openingstijden + route */
.schenk-mm.fl-row .schenk-mm-info.fl-module {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin: 22px 0 0;
}
.schenk-mm .schenk-mm-info > .fl-module + .fl-module {
	padding-left: 16px;
	border-left: 1px solid var(--mm-lijn);
}
.schenk-mm .schenk-mm-tijd,
.schenk-mm .schenk-mm-route {
	min-width: 0;
}
.schenk-mm .schenk-mm-tijd .fl-module-content,
.schenk-mm .schenk-mm-tijd > .schenk-ot,
.schenk-mm .schenk-mm-route a {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--mm-navy);
	text-decoration: none;
}
.schenk-mm .schenk-mm-tijd .fl-module-content::before {
	content: "";
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	background: var(--mm-grijs);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.schenk-mm .schenk-mm-tijd .schenk-ot {
	margin: 0;
}
.schenk-mm .schenk-mm-tijd .schenk-ot__tekst,
.schenk-mm .schenk-mm-route .schenk-mm-info__tekst {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}
.schenk-mm .schenk-mm-tijd .schenk-ot__label,
.schenk-mm .schenk-mm-route strong {
	font-size: 14px;
	font-weight: 700;
	color: var(--mm-navy);
}
.schenk-mm .schenk-mm-tijd .schenk-ot__detail,
.schenk-mm .schenk-mm-route .schenk-mm-info__tekst span {
	font-size: 14px;
	font-weight: 400;
	color: var(--mm-grijs);
}
.schenk-mm .schenk-mm-route .schenk-mm-info__icoon {
	flex: 0 0 24px;
	display: inline-flex;
	color: var(--mm-grijs);
}

/* Smalle telefoons: knoppen compacter, zodat "WhatsApp" en het nummer op één regel blijven */
@media (max-width: 400px) {
	.schenk-mm.fl-row .fl-col > .fl-col-content {
		padding-left: 18px;
		padding-right: 18px;
	}
	.schenk-mm .schenk-mm-knoppen {
		gap: 10px;
	}
	.schenk-mm .schenk-mm-nav .pp-sliding-menus .pp-slide-menu-item-link {
		gap: 14px;
	}
	.schenk-mm .schenk-mm-sub {
		font-size: 13px;
	}
	.schenk-mm .schenk-mm-tijd .schenk-ot__label,
	.schenk-mm .schenk-mm-route strong,
	.schenk-mm .schenk-mm-tijd .schenk-ot__detail,
	.schenk-mm .schenk-mm-route .schenk-mm-info__tekst span {
		font-size: 13px;
	}
	.schenk-mm .schenk-mm-tijd .fl-module-content,
	.schenk-mm .schenk-mm-route a {
		gap: 8px;
	}
	.schenk-mm .schenk-mm-info > .fl-module + .fl-module {
		padding-left: 12px;
	}
	.schenk-mm .schenk-mm-knop__tekst strong {
		font-size: 15px;
	}
	.schenk-mm .schenk-mm-knop__tekst span {
		font-size: 12px;
	}
	.schenk-mm .schenk-mm-knop__icoon,
	.schenk-mm .schenk-mm-knop__icoon svg {
		font-size: 20px;
		width: 20px;
		height: 20px;
	}
}
@media (max-width: 350px) {
	.schenk-mm .schenk-mm-knop::after {
		display: none;
	}
}