/*
 * Mobiel menu (vervangt ShiftNav Pro).
 * Kleuren en lettertypen staan in style.css (blok "Shiftnav") en blijven van kracht,
 * want de ids en klassen zijn gelijk gebleven. Breekpunt: 980px.
 */

:root {
	--shiftnav-panel-width: min(calc(100vw - 48px), 600px);
	--shiftnav-toggle-bar-height: 84px;
}

/* Desktop: niets van het mobiele menu tonen */
#shiftnav-toggle-main,
#shiftnav-overlay,
.shiftnav {
	display: none;
}

@media only screen and (max-width: 979px) {

	/* Ruimte onder de vaste balk */
	body.shiftnav-disable-shift-body {
		padding-top: var(--shiftnav-toggle-bar-height);
	}

	body.shiftnav-lock.shiftnav-open {
		overflow: hidden;
	}

	/* ---------- Balk ---------- */
	#shiftnav-toggle-main {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: var(--shiftnav-toggle-bar-height);
		z-index: 500000;
		box-sizing: border-box;
		text-align: center;
		background: #fff;
	}

	body.admin-bar #shiftnav-toggle-main {
		top: var(--wp-admin--admin-bar--height, 46px);
	}

	/* Bij focus in een invoerveld (mobiel toetsenbord) meescrollen in plaats van vast (zie mk-script.js) */
	#shiftnav-toggle-main.input_active_header {
		position: absolute;
	}

	#shiftnav-toggle-main .shiftnav-toggle-burger {
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		z-index: 20;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		border: 0;
		background: transparent;
		color: inherit;
		cursor: pointer;
		font-family: inherit;
		line-height: 1;
		-webkit-tap-highlight-color: transparent;
	}

	#shiftnav-toggle-main .shiftnav-toggle-burger i {
		font-style: normal;
		line-height: 1;
	}

	/* Logo gecentreerd, klikken erdoorheen gaat naar de balk */
	#shiftnav-toggle-main .shiftnav-main-toggle-content {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
		text-align: center;
		pointer-events: none;
	}

	#shiftnav-toggle-main .shiftnav-main-toggle-content img {
		display: inline-block;
		width: auto;
		height: auto;
	}

	/* ---------- Overlay ---------- */
	#shiftnav-overlay {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 99999998;
		background: rgba(0, 0, 0, 0.4);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	}

	.shiftnav-open #shiftnav-overlay {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.3s ease;
	}

	/* ---------- Paneel ---------- */
	.shiftnav {
		display: block;
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		width: var(--shiftnav-panel-width);
		max-width: 100%;
		z-index: 99999999;
		box-sizing: border-box;
		background: #fff;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.3s ease, visibility 0s linear 0.3s;
		box-shadow: -2px 0 12px rgba(0, 0, 0, 0.2);
	}

	body.admin-bar .shiftnav {
		top: var(--wp-admin--admin-bar--height, 46px);
	}

	.shiftnav.shiftnav-open-target {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.3s ease;
	}

	.shiftnav,
	.shiftnav * {
		box-sizing: border-box;
	}

	.shiftnav:focus {
		outline: 0;
	}

	.shiftnav .shiftnav-inner {
		position: relative;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 20px;
	}

	.shiftnav .shiftnav-close {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 30;
		width: 56px;
		height: 56px;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: #000;
		font-size: 24px;
		line-height: 56px;
		text-align: center;
		cursor: pointer;
	}

	.shiftnav .shiftnav-close i {
		font-style: normal;
		line-height: inherit;
	}

	/* ---------- Menu ---------- */
	.shiftnav .shiftnav-nav {
		position: relative;
		display: block;
	}

	.shiftnav ul.shiftnav-menu,
	.shiftnav ul.shiftnav-menu ul.sub-menu {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.shiftnav ul.shiftnav-menu li.menu-item {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.shiftnav ul.shiftnav-menu li.menu-item > .shiftnav-target {
		display: block;
		padding: 15px 25px;
		line-height: 1.6em;
		text-decoration: none;
		transition: 0.2s all ease;
	}

	/* Uitklap-submenu's zijn niet nodig (menu is plat), maar worden wel netjes getoond */
	.shiftnav ul.shiftnav-menu ul.sub-menu {
		display: block;
	}

	.shiftnav a:focus-visible,
	#shiftnav-toggle-main button:focus-visible,
	.shiftnav .shiftnav-close:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: -2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.shiftnav,
	.shiftnav-overlay {
		transition: none !important;
	}
}