/* natUIve – Navigation */

@import 'natuive-setup';

nav {
	
	vertical-align: baseline;
	display: inline-block;

}

	nav ul {
	
		margin: 0;
		padding: 0;
		display: inline-block;
		width: auto;
	
	}
	
	nav a {
		
		position: relative;
		padding: 0 .5em 0 0;

	}
	
	nav a[href].active {
		
		text-decoration: none;
		opacity: .7;

	}
	
	nav li:last-child a {
		
		padding-right: 0;

	}
	
	nav li {
	
		display: inline;
	
	}

	nav li:first-child a {
		
		padding-left: 0;

	}
	
	nav li:last-child {

		margin-right: 0;

	}

	nav.sub a {
	
		font-size: .8em;
		line-height: $line-height-em/.8;
// 		line-height: var(--line-height);
		min-height: $line-height-em;
// 		min-height: var(--line-height-em);
		display: inline-block;
	
	}

	main nav ul {
	
		padding-left: 0;
	
	}

/* Checkbox trigger */

nav input.trigger, nav [for=nav-trigger] {
	
	display: none;
	
}

.trigger {
	
	cursor: pointer;
	
}

/* nav.drop */

nav.drop {
	
	position: relative;
	display: inline-block;

}

nav.drop * {
	
	box-sizing: border-box;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}

nav.drop ul {
	
	display: flex; // No space between top-level items
	flex-wrap: wrap;

}

nav.drop ul, nav.drop li {
	
	margin: 0;
	padding: 0;
	list-style: none;

} 

nav.drop ul li {
	
	display: inline-block;
	vertical-align: top;
	white-space: nowrap;
	position: relative;
// 	background: #fbfbfb;
	
}

nav.drop ul li b.sub {
	
	display: inline-block;
	padding: 1em;
	font-size: $font-size;
	font-size: 1rem;
// 	background: #fbfbfb;
	line-height: 1;
	margin-left: -.3em;
	mix-blend-mode: multiply;

}

nav.drop ul li li b.sub {
	
	display: inline-block;
	padding: 1em;
	font-size: $font-size;
	font-size: 1rem;
	background-color: #eee;
	padding-right: 1.5em;
	z-index: 3;
	mix-blend-mode: normal;

}
	
nav.drop ul li li b.sub:before {
	
	content: '';
	display: block;
	position: absolute;
	background-color: #eee;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;

}

nav.drop ul li li .trigger:checked ~ b.sub:before, .no-touch nav.drop ul li li:hover b.sub:before {
	
	background-color: #ddd;

}

nav.drop ul li li li b.sub {
	
	display: inline-block;
	padding: 1em;
	font-size: $font-size;
	font-size: 1rem;
	background-color: #ddd;

}

nav.drop ul li b.sub:after {
	
	content: '[]';
	background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll center center;
	color: transparent;

}

nav.drop ul li li b.sub:after {
	
	position: absolute;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==");
	right: 1em;

}

nav.drop ul li a {
	
	padding: 1em;
	display: inline-block;
	position: relative;
	font-size: $font-size;
	font-size: 1rem;
	line-height: 1;
	
}

nav.drop ul li a[href] {

	z-index: 5;
	width: calc(100% - 2.5em);

}

nav.drop ul li li a, nav.drop ul li .trigger:checked ~ a, nav.drop ul li .trigger:checked ~ b.sub {

	background: #eee;
	z-index: 1;
	color: #333;

}

nav.drop ul li li a[href], nav.drop ul li .trigger:checked ~ a[href] {
	
	z-index: 6;

}

nav.drop ul li li li a, nav.drop ul li li .trigger:checked ~ a, nav.drop ul li li .trigger:checked ~ b.sub, .no-touch nav.drop ul li li:hover, .no-touch nav.drop ul li li:hover a, nav.drop ul ul ul, .no-touch nav.drop ul li li:hover ul, .no-touch nav.drop ul li li:hover li {

	background: #ddd;

}

nav.drop ul ul li {
	
	display: block;
	background: #eee;

}

.no-touch nav.drop ul ul li, .no-touch nav.drop ul ul li:first-child {
	
	position: relative;
	
}

.no-touch nav.drop ul ul li input.trigger, input.trigger ~ input[type=reset], input.trigger.burger, form#level1, form#level2 {
	
	display: none;
	z-index: 5;
	
}

nav.drop input:checked ~ input[type=reset], nav.drop input.trigger {
	
	display: block;

}

nav.drop ul ul {
	
	visibility: hidden;		
	position: absolute;
	display: block;
	
}

nav.drop input.trigger:checked ~ ul, .no-touch nav.drop ul ul li:hover ul, nav.drop input.trigger:checked ~ div, .no-touch nav.drop ul ul li:hover div { /* Not '+', because the form reset button stands between them; Touch first, Desktop second */
	
	visibility: visible;
	z-index: 4;
	
}

nav.drop input.trigger:checked ~ ul {
	
	z-index: 6;
	
}

nav.drop input.trigger:not(.burger):not(:checked) ~ ul input.trigger:checked ~ ul, nav.drop input.trigger:not(.burger):not(:checked) ~ div input.trigger:checked ~ div {
	
	visibility: hidden;
	
}

nav.drop ul ul ul {
	
	display: inline-block;
	vertical-align: top;
	left: 100%;
	top: 0;
	width: auto;
	
}

.no-touch nav.drop ul ul ul {
	
	opacity: 0;
	top: 0;
	transition: 0.2s .4s;
	
}

.no-touch nav.drop ul ul li:hover ul {
	
	visibility: visible;
	opacity: 1;
	transition-delay: 0.2s;
	
}

nav.drop ul ul ul li, input.trigger:checked ~ input[type=reset] {
	
	display: block;
	padding: 0;
	background: #ddd;
	
}

input.trigger, input.trigger ~ input[type=reset] {
	
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 3em;
	border: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	-webkit-appearance: none;
	border-radius: 0;
	z-index: 5;
	padding: 0;

}

@media screen and (max-width: $screen-narrow) {

		nav li {
			
			margin: 0;

		}
		
		header nav.sub li a {
			
			padding: .5em 0;

		}
		
	nav.drop, header > nav {
		
		width: 100%;
		min-height: 2em;
		text-align: left;
		display: inline-block;
		position: relative;

	}
	
	nav.drop:before, header > nav:before {
		
		content: '🍔';
	
	}
	
	nav.drop ul li {
		
		display: block;

	}
	
	nav.drop ul li a {
		
		white-space: normal;
		display: block;

	}
	
	nav.drop input.trigger:checked ~ ul ul, nav.drop input.trigger:checked ~ div ul {
		
		width: 100%;
		position: relative;
		left: 0;

	}
	
	.no-touch nav.drop ul ul ul {
		
		opacity: 1;
		
	}
	
	.no-touch nav.drop ul ul li {
		
		position: relative;

	}
	
	nav.drop ul li b.sub {
		
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;

	}
	
	header nav.drop ul li a {
		
		width: 80%;
		width: calc(100% - 2.5em);

	}

	nav.drop ul li li li a {
		
		width: 100%;

	}

	input.trigger.burger {
		
		display: inline-block;
		width: 2em;
		height: 2em;
		
	}

	input.trigger.burger ~ ul, nav.drop ul ul, nav.drop ul .trigger:not(:checked) ~ ul, .no-touch nav.drop ul li:hover .trigger:not(:checked) ~ ul, input.trigger.burger ~ div, nav.drop ul .trigger:not(:checked) ~ div, .no-touch nav.drop ul li:hover .trigger:not(:checked) ~ div {
		
		display: none;
		
	}

	input.trigger.burger:checked ~ ul, nav.drop ul .trigger:checked ~ ul, input.trigger.burger:checked ~ div, nav.drop ul .trigger:checked ~ div, .no-touch nav.drop ul ul li input.trigger {
		
		display: block;
		
	}

}
