@media (max-width: 767px)
{
	#navbar-hoofdmenu{
		position: fixed;
		z-index: 10000;
		top: 0;
		right: -100%;
		width: 100%;
		height: 100dvh;
		margin: 0;
		padding: 0;
		overflow-x: hidden;
		overflow-y: auto;
		background: var(--beige_50);
		transition: right 0.3s ease-in-out;
	}

	#navbar-hoofdmenu:has(#hoofdmenu.openChild){
		overflow-y: hidden;
	}

	#navbar-hoofdmenu.collapse{
		display: block;
	}

	#navbar-hoofdmenu.showmenu{
		right: 0;
	}

	button#trigger-overlay{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 3.4rem;
		height: 3.4rem;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: var(--blauw_100);
		outline: none;
	}

	button#trigger-overlay .navbar-toggler-icon{
		width: 2.4rem;
		height: 2.4rem;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 6H21M3 12H21M3 18H21' stroke='%23001B72' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
		background-size: 2.4rem 2.4rem;
	}

	#navbar-hoofdmenu .navbar-toggler{
		position: absolute;
		z-index: 50;
		top: 3.8rem;
		right: 3rem;
		width: 3.4rem;
		height: 3.4rem;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	#navbar-hoofdmenu .navbar-toggler-icon{
		width: 2.4rem;
		height: 2.4rem;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 5L19 19M19 5L5 19' stroke='%23001B72' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
		background-size: 2.4rem 2.4rem;
	}

	#hoofdmenu{
		display: block;
		position: static;
		width: 100%;
		height: auto;
		margin: 0 !important;
		padding: 10rem 3rem 4rem;
		overflow-y: auto;
		overflow-x: hidden;
		background: var(--beige_50);
		border-radius: 0;
		box-sizing: border-box;
		transition: transform 0.3s ease-in-out;
	}

	#hoofdmenu > li,
	#hoofdmenu li ul li{
		position: static;
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
		text-align: left;
	}

	#hoofdmenu > li + li{
		border-top: 0.1rem solid var(--beige_100);
	}

	#hoofdmenu li a{
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 6.2rem;
		padding: 0;
		color: var(--blauw_100) !important;
		background: transparent;
		font-size: 1.8rem;
		font-weight: 500;
		line-height: 1.2;
		text-decoration: none !important;
		text-shadow: none;
		white-space: normal;
		transition: color 0.3s ease;
	}

	#hoofdmenu li a:is(:hover, :focus-visible),
	#hoofdmenu li.current-menu-item > a,
	#hoofdmenu li.current-menu-parent > a,
	#hoofdmenu li.current-menu-ancestor > a{
		color: var(--oranje) !important;
	}

	#hoofdmenu li.menu-item-has-children > a{
		gap: 1.5rem;
	}

	#hoofdmenu li.menu-item-has-children > a:after{
		content: "\f105" !important;
		margin-left: auto;
		color: var(--blauw_100);
		font-family: 'Font Awesome 6 Pro';
		font-size: 1.8rem;
		font-weight: 400;
		line-height: 1;
		transition: transform 0.3s ease;
	}

	#hoofdmenu > li.open > ul,
	#hoofdmenu li > ul > li.open > ul{
		transform: translateX(0);
	}

	#hoofdmenu li > ul{
		position: absolute !important;
		top: 0;
		left: 0 !important;
		z-index: 2;
		display: block !important;
		width: 100%;
		min-height: 100dvh;
		height: 100dvh;
		max-height: 100dvh;
		margin: 0;
		padding: 10rem 3rem 4rem;
		overflow-y: auto;
		list-style: none;
		background: var(--beige_50);
		box-shadow: none;
		box-sizing: border-box;
		transform: translateX(100%);
		transition: transform 0.3s ease-in-out;
	}

	#hoofdmenu li.open > ul{
		min-height: 100dvh;
		height: 100dvh;
		max-height: 100dvh;
		padding-top: 10rem;
		padding-bottom: 4rem;
		overflow-y: auto;
	}

	#hoofdmenu li > ul > li.menu-item-has-children > ul{
		z-index: 3;
		padding-left: 3rem !important;
		background: var(--beige_50);
	}

	#hoofdmenu li ul li:not(.submenu-back-button) + li{
		border-top: 0.1rem solid var(--beige_100);
	}

	#hoofdmenu li ul li:not(.submenu-back-button) a{
		min-height: 7.2rem;
		padding: 1.8rem 0;
		border: 0 !important;
		color: var(--blauw_100) !important;
	}

	#hoofdmenu .submenu-card{
		display: grid;
		grid-template-columns: 3.4rem minmax(0, 1fr);
		gap: 1.6rem;
		align-items: start;
		width: 100%;
		color: var(--blauw_100);
	}

	#hoofdmenu .submenu-card--no-icon{
		grid-template-columns: minmax(0, 1fr);
	}

	#hoofdmenu .submenu-card-icon{
		display: flex;
		align-items: flex-start;
		justify-content: center;
		padding-top: 0.6rem;
	}

	#hoofdmenu .submenu-card-icon img{
		display: block;
		width: auto;
		max-width: 3.4rem;
		height: auto;
		max-height: 3.4rem;
	}

	#hoofdmenu .submenu-card-content{
		display: flex;
		flex-direction: column;
		gap: 0.8rem;
		min-width: 0;
	}

	#hoofdmenu .submenu-card-title{
		display: block;
		color: var(--blauw_100);
		font-family: "Instrument Serif";
		font-size: clamp(3rem, 2.429rem + 1.786vw, 3.4rem);
		font-weight: 400;
		line-height: 1.05;
		white-space: normal;
	}

	#hoofdmenu .submenu-card-description{
		display: block;
		color: var(--blauw_100);
		font-size: 1.5rem;
		font-weight: 500;
		line-height: 1.35;
		white-space: normal;
	}

	#hoofdmenu .submenu-card-content{
		transition: transform 0.3s ease;
	}

	#hoofdmenu li ul li a:is(:hover, :focus-visible) .submenu-card-content{
		transform: translateX(0.5rem);
	}

	#hoofdmenu .submenu-back-button{
		display: block;
		margin: 0 0 0;
		border-bottom: 0;
	}

	#hoofdmenu button,
	#hoofdmenu button:focus{
		display: inline-flex;
		align-items: center;
		gap: 1rem;
		width: auto;
		min-height: 4.4rem;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--oranje);
		box-shadow: none;
		font-size: 1.6rem;
		font-weight: 500;
		line-height: 1.3;
		text-align: left;
		outline: none;
	}

	#hoofdmenu button i{
		margin-right: 0;
		color: var(--oranje);
	}

	.submenu-back-button i:before{
		content: "\f104";
	}

	.openChild > li > a{
		opacity: 0;
		pointer-events: none;
	}

	#hoofdmenu.openChild{
		height: 100dvh;
		min-height: 100dvh;
		overflow: hidden;
	}

	#navbar-hoofdmenu .topmenu-mobile-nav{
		display: block;
		width: calc(100% - 6rem);
		margin: 0 3rem 4rem;
		padding: 3rem 0 0;
		border-top: 0.1rem solid var(--beige_100);
	}

	#hoofdmenu.openChild ~ .topmenu-mobile-nav{
		display: none;
	}

	#navbar-hoofdmenu .topmenu--mobile{
		display: flex;
		flex-direction: column;
		gap: 1.6rem;
		width: 100%;
		padding: 0;
		margin: 0;
		list-style: none;
	}

	#navbar-hoofdmenu .topmenu--mobile li{
		width: 100%;
		margin: 0;
	}

	#navbar-hoofdmenu .topmenu--mobile a{
		display: block;
		width: 100%;
		padding: 0;
		color: var(--blauw_100);
		font-size: 1.6rem;
		font-weight: 500;
		line-height: 1.3;
		text-decoration: none;
		white-space: normal;
	}

	#navbar-hoofdmenu .topmenu--mobile a:is(:hover, :focus-visible),
	#navbar-hoofdmenu .topmenu--mobile .current-menu-item > a,
	#navbar-hoofdmenu .topmenu--mobile .current-menu-parent > a,
	#navbar-hoofdmenu .topmenu--mobile .current-menu-ancestor > a{
		color: var(--oranje);
	}

	.showmenu-bg{
		position: fixed;
		top: 0;
		right: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.45);
		opacity: 0;
		transition: background 0.3s ease-in-out;
	}

	.menu_backdrop,
	.menu_backdrop.is-visible{
		display: none !important;
	}

	body{
		position: relative;
	}

	body.collapsed{
		overflow: hidden;
	}
}