/**
 * Biesbosch MuseumEiland - aanvullingen op main.css
 * The Pack - https://the-pack.nl
 *
 * Los bestand, zodat de oude build (gulp/node-sass) niet opnieuw hoeft.
 */

/* ==========================================================================
   NAVIGATIE - derde niveau (sub-submenu)
   ========================================================================== */

/* Knop tonen bij menu-items op dieper niveau die zelf kinderen hebben */
header nav .menu .sub-menu > li.menu-item-has-children > .container-xl > .sub-menu-trigger {
	display: block;
}

/* Geneste submenu's: dicht bij start, vloeiend open en dicht */
header nav .menu .sub-menu .sub-menu {
	height: 0;
	overflow: hidden;
	transition: height 0.2s ease-in-out;
	background-color: rgba(0, 0, 0, 0.12);
}

/* Inspringen, zodat het niveau zichtbaar is */
header nav .menu .sub-menu .sub-menu > li > .container-xl a {
	padding-left: 20px;
	font-weight: 400;
}

header nav .menu .sub-menu .sub-menu .sub-menu > li > .container-xl a {
	padding-left: 40px;
}

/* ==========================================================================
   HOMEPAGE SLIDER - video's
   ========================================================================== */

#homepage #slider li.has-video {
	overflow: hidden;
}

/* Video vult de slide, net als de achtergrondafbeelding (cover) */
#homepage #slider li .slide-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	pointer-events: none;
}

/* Tekst en knop boven de video en het verloop houden */
#homepage #slider li.has-video > div {
	position: relative;
	z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
	#homepage #slider li .slide-video {
		display: none;
	}
}

/* Zichtbare focus voor toetsenbordgebruikers */
header nav .menu .sub-menu-trigger:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}