/**
 * @file
 * Visual styles for menu.
 */

ul.menu {
	margin-left: 0; /* LTR */
	padding: 0;
	list-style: none outside;
	text-align: left; /* LTR */
}
[dir="rtl"] ul.menu {
	margin-right: 0;
	margin-left: 0;
	text-align: right;
}
.menu-item--expanded {
	list-style-type: circle;
	list-style-image: url(../../images/icons/menu-expanded.png);
}
.menu-item--collapsed {
	list-style-type: disc;
	list-style-image: url(../../images/icons/menu-collapsed.png); /* LTR */
}
[dir="rtl"] .menu-item--collapsed {
	list-style-image: url(../../images/icons/menu-collapsed-rtl.png);
}
.menu-item {
	padding: 0;
	line-height: 1;
	margin: 1em 0;
	letter-spacing: 0.05em;
}
ul.menu a.is-active {
	color: var(--blauw-donker);
}


#header .block-menu ul.menu{
	display: flex;
	flex-wrap: nowrap;
	font-size: 1.333em;
	align-items: center;
	margin: 0;
}
#header .block-menu ul.menu li.menu-item{
	flex: auto 1 1;
	color: var(--geel-basis);
	font-family: cruquius;
	letter-spacing: 0;
	margin: 0;
}
#header .block-menu ul.menu li.iconNav{
	flex: 2em 0 0;
	height: 1em;
}
#header .block-menu ul.menu li a:link,
#header .block-menu ul.menu li a:visited{
	color: var(--geel-basis);
	text-decoration: none;
	margin-left: var(--cruq-indent);
}
#header .block-menu ul.menu li a:hover{
	color: var(--blauw-basis);
}
#header .block-menu ul.menu li.iconNav a{
	width: 100%;
	height: 1em;
	text-indent: -9999em;
	overflow: hidden;
	display: block;
	background: transparent url(../../images/icons/english.svg) center right no-repeat;
	background-size: contain;
}
#header .block-menu ul.menu li.iconNav.translateBtn a{
	background-image: url(../../images/icons/english.svg);
}
#header .block-menu ul.menu li.iconNav.searchBtn,
#header .block-menu ul.menu li.iconNav.searchBtn a{
	height: 1.3em;
}
#header .block-menu ul.menu li.iconNav.searchBtn a{
	background-image: url(../../images/icons/search.svg);
}
#header .block-menu ul.menu li.iconNav.navBtn a{
	background-image: url(../../images/icons/hamburger.svg);
}

/**
 * MAIN NAV
 * */
.region-menu-container{
	position: absolute;
	top: 0;
	opacity: 0;
	left: -100%;
	width: 100%;
	height: 100svh;
	overflow: auto;
	background: var(--groen-basis);
	color: #fff;
	transition: opacity 0.5s ease-out 0s, left 0s 0.3s;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none;  /* IE 10+ */
	padding: 0 var(--gutter);
}
.region-menu-container::-webkit-scrollbar {
	background: transparent; /* Chrome/Safari/Webkit */
	width: 0px;
}
body.showNav .region-menu-container{
	left: 0;
	opacity: 1;
	transition: opacity 0.5s ease-out 0s, left 0s 0s;
}
.region-menu-container .inside{
	max-width: var(--page-width);
	margin: 0 auto;
	padding: 2em 0 12em;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 0 1rem;
	position: relative;
	min-height: 100%;
}
.region-menu-container .logo{
	display: block;
	margin: 0;
}
.region-menu-container .buttonRow{
	flex: 100% 0 0;
	display: flex;
	justify-content: flex-end;
	margin: 0 0 2rem;
}
.region-menu-container .buttonRow .closeBtn{
	font-size: 1.333rem;
	width: 1em;
	background: transparent url(../../images/icons/closeBtn.svg) center no-repeat;
	background-size: contain;
	text-indent: -9999em;
	overflow: hidden;
	display: block;
	cursor: pointer;
}
.region-menu-container .block-search{
	flex: 100% 0 0;
	margin: 0 0 2rem 0;
}
.region-menu-container .block-search h2{
	flex: auto 0 1;
	margin: 0;
}
.region-menu-container .block-search form{
	flex: auto 1 1;
	align-items: center;
	display: flex;
	align-items: center;
}
.region-menu-container .block-search form *{
	margin: 0;
}
.region-menu-container .block-search form .form-item{
	display: flex;
	align-items: center;
	flex: auto 1 1;
}
.region-menu-container .block-search form .form-item input{
	margin: 0 1rem 0 0;
	padding: 0;
	height: 2.35rem;
	border: 0;
	box-shadow: inset 7px 6px 0px #58604733;
	flex: auto 1 1;

}
.region-menu-container .block-search form label{
	font-size: 1.75em;
	font-family: cruquius;
	flex: 33.33% 0 0;
	letter-spacing: 0;
	margin-left: var(--cruq-indent);
}
.region-menu-container .block-search form .form-actions{
	flex: 25% 0 0;
}
.region-menu-container .block-search form .form-submit{
	display: block;
	background: var(--groen-donker);
	color: var(--groen-extreem-licht);
	font-family: cruquius;
	font-size: 1.75rem;
	height: 2.35rem;
	border: none;
	padding: 0 0.5em;
	width: 100%;
	letter-spacing: 0;
}
.region-menu-container #block-cruq2025-addresscruquiusmusem h2{
	display: none;
}
.region-menu-container .block-menu{
	flex: 20% 1 1;
	font-weight: 500;
	margin: 0;
}
.region-menu-container .block-menu h2{
	margin-top: 0;
	margin-bottom: 0.3em;
}
.region-menu-container .block-menu .menu{
	margin: 0;
}
.region-menu-container .block-menu .menu a:link,
.region-menu-container .block-menu .menu a:visited{
	text-decoration: none;
}
.region-menu-container .block-menu .menu a:hover,
.region-menu-container .block-menu .menu a:focus{
	color: var(--geel-basis);
}
.region-menu-container .block-cruqblocks-address-openinghours-cruq{
	position: absolute;
	bottom: 2em;
}
body.onlySearch.showNav .region-menu-container{
	height: auto;
}
body.onlySearch.showNav .region-menu-container .inside{
	padding: 2em 0;
}
body.onlySearch.showNav .region-menu-container .block-menu,
body.onlySearch.showNav .region-menu-container #block-cruq2025-addressenopeningstijdencruquiusmusem{
	display: none;
}


@media all and (max-width: 960px){
	#header #block-cruq2025-hoofdnavigatie.block-menu,
	.region-menu-container .buttonRow{
		margin-top: 0.5rem;
	}
	#header .block-menu ul.menu li:not(.navBtn, .searchBtn){
		display: none;
	}
	#header .block-menu ul.menu{
		justify-content: flex-end;
	}
	.region-menu-container .block-menu{
		flex: 100% 0 0;
		margin-bottom: 2em;
	}

	.region-menu-container .block-search form .form-item{
		flex-wrap: wrap;
	}
	.region-menu-container .block-search form label{
		flex: 100% 0 0;
	}
	.region-menu-container .block-search form .form-actions{
		margin-top: 2.6em;
	}
}