/* natUIve – Navigation */

@import 'natuive-setup';

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

}

	nav ul {
	
		margin: 0;
		padding: 0;
		display: inline-block;
		width: auto;
		list-style: none;
	
	}
	
	@supports (--a: 1) {

		nav.scroll {
		
			max-width: 100%;
	
		}
			
		nav.scroll ul {
	
			white-space: nowrap;
		    overflow: auto;
		    max-width: 100%;
		    transform: translate3d(0, 0, 0); // Safari macOS bug fix when using scrollbars: Not working initially.
		    -webkit-overflow-scrolling: touch;
	
		}
	
		nav.scroll ul li {
	
		    padding: $line-height-em/2 0;
	
		}
	
	}

	nav a {
		
		position: relative;
		padding: 0 .5em 0 0;

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

	}
	
	nav a[href^='#'] {
		
		text-decoration: none;

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

	}

	nav ul li {
	
		margin: 0;
	
	}

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

	}
	
	nav li:last-child {

		margin-right: 0;

	}

	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;
	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;

}

[dir=rtl] nav.drop ul li b.sub {

	margin-left: 0;
	margin-right: -.3em;

}

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, html:not(.can-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: '▼';
	font-size: .5em;
/*
	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 {
	
	content: '▸';	
	font-size: 1em;
	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;

}

nav.drop ul li input ~ a[href] { /* Arrow space */

	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;
	text-decoration: underline;

}

nav.drop ul li li li a, nav.drop ul li li .trigger:checked ~ a, nav.drop ul li li .trigger:checked ~ b.sub, 
html:not(.can-touch) nav.drop ul li:hover, html:not(.can-touch) nav.drop ul li li:hover a,
nav.drop ul ul ul,
html:not(.can-touch) nav.drop ul li li:hover ul, html:not(.can-touch) nav.drop ul li li:hover li {

	background: #ddd;

}

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

}

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

html:not(.can-touch) nav.drop ul ul li input.trigger,
input.trigger ~ input[type=reset], 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 input.trigger:checked ~ ul, 
nav.drop ul input.trigger:checked ~ div,
nav.drop ul input.trigger:checked ~ ul input.trigger:checked ~ ul,
html:not(.can-touch) nav.drop ul li:hover ul,
html:not(.can-touch) nav.drop ul ul li:hover div
{

	visibility: visible;
	z-index: 6;

}

nav.drop ul ul, 
nav.drop ul ul input.trigger:checked ~ ul
{
	
	visibility: hidden;
	position: absolute;
	display: block;
	
}

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

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

html:not(.can-touch) nav.drop ul ul ul {
	
	opacity: 0;
	top: 0;
	transition: 0.2s .4s;
	
}

html:not(.can-touch) nav.drop ul ul li:hover ul/* , nav.drop ul input.trigger:checked ~ ul */ {
	
	visibility: visible;
	opacity: 1;
	transition-delay: 0.2s;
	z-index: 7;
	
}

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-max) {
	
	nav, nav ul {
		
		width: 100%;

	}

	nav:not(.scroll) ul li, nav li a { // Probably not needed for li
		
		margin: 0;
		display: block;

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

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

	}
	
	nav.drop ul li {
		
		display: block;
		width: 100%;

	}
	
	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;

	}
	
	nav.drop ul ul {
		
		position: relative;

	}
	
	html:not(.can-touch) nav.drop ul ul ul {
		
		opacity: 1;
		
	}
	
	html:not(.can-touch) nav.drop ul ul li {
		
		position: relative;

	}
	
	nav.drop ul li b.sub {
		
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		mix-blend-mode: initial;

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

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

	}

	@keyframes slidein {
		
		0% {
			
			transform: translate3d(-100%,0,0);
			
		} 
		100% {
			
			transform: translate3d(0,0,0);
			
		}

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

	nav.drop ul .trigger:checked ~ ul, nav.drop ul .trigger:checked ~ div, 
	html:not(.can-touch) nav.drop ul ul li input.trigger {
		
		display: block;
		animation: slidein .2s 1;
		will-change: transform;
		
	}
	
	nav.drop ul ul, nav.drop input.trigger ~ ul input.trigger:checked ~ ul {
		
		position: relative;
	
	}

}
