/*	==========================================================================
	INDIE.WEB NAV STYLES
	========================================================================== */

/*	NAV GENERAL ---------- */

nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

nav li {
	position: relative;
	margin: 0;
}

nav a {
	display: block;
}

nav li ul li {
	height: auto;
	overflow: hidden;
}

nav li ul a {
	line-height: 0px;
	transition:
		line-height 0.5s ease 0.5s,
		color 0.25s ease !important /* color included because only a single transition property can exist for an element; this overrides CSS Transitions section in main.css */
	;
}

nav li:hover > ul > li > a,
nav li:focus-within > ul > li > a,
nav li:active > ul > li > a,
nav li.parent.selected > ul > li > a,
nav li.selected > a {
/*	line-height: ; Set in main.css */
	transition:
		line-height 0.5s ease 0.5s,
		color 0.25s ease !important /* color included because only a single transition property can exist for an element; this overrides CSS Transitions section in main.css */
	;
}

nav li:focus,
#nav-main-container #phone-nav-ext {
	box-shadow: none !important; /* override base.css */
}

nav .has-children > a:after {
	content: '❯';
	display: inline-block;
	padding: 0 7.5px;

	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	transition: transform 0.5s, -webkit-transform 0.5s;
}

nav .has-children:hover > a:after,
nav .has-children:focus > a:after,
nav li.has-children.parent.selected > a:after {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	transition: transform 0.5s, -webkit-transform 0.5s;
}

/*	Sub-Nav Collapse Prevention --- */

nav .sub-nav-collapse-prevention {
	position: absolute;
	left: 0;
	width: 100%;
	visibility: hidden;
}

nav li:hover > ul > .sub-nav-collapse-prevention {
	height: 100vh;
	visibility: visible;
}


/*	NAV MAIN ---------- */

/*	CONTAINER ------ */

#nav-main-container {
	position: fixed;
	z-index: 100; /* ensure Main Nav is displayed in front of Banner */
	-webkit-backface-visibility: hidden; /* provides backwards compatibility for fixed position elements mobile devices */
	top: 0;
	width: 100%;

	display: flex;
	align-items: center;
}


/*	LOGO ------ */

#logo {
	max-width: 300px;
	height: 100%;
	white-space: nowrap;
	text-decoration: none;
}

#logo .vert-center > * {
	height: 100%;
}

#logo .vert-center > * > * {
	width: auto;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}


/*	NAV ------ */

#nav-main li ul:hover {
	z-index: 10; /* still required? */
}


/*	RESPONSIVE NAV --- */

#nav-toggle {
	display: none;
}

#nav-icon {
	position: absolute;
	top: 50%;
	background: none !important;
	vertical-align: top;

	-webkit-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}

#nav-icon span {
	display: inline-block;
	width: 100%;
	height: 3px;

	-webkit-transform: translateX(0%) translateY(-50%);
	transform: translateX(0%) translateY(-50%);

	transition: background-color 0.3s;
}

#nav-icon span:before,
#nav-icon span:after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	right: 0;
	transition: top .3s, background-color 0.3s, -webkit-transform .3s;
	transition: top .3s, background-color 0.3s, transform .3s;
	transition: top .3s, background-color 0.3s, transform .3s, -webkit-transform .3s;
}

#nav-icon span:before {
	top: -7px;
}

#nav-icon span:after {
	top: 7px;
}

#nav-toggle:checked ~ #nav-icon span {
	background-color: rgba(255, 255, 255, 0) !important;
}

#nav-toggle:checked ~ #nav-icon span:before {
	top: 0;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}

#nav-toggle:checked ~ #nav-icon span:after {
	top: 0;
	-webkit-transform: rotate(225deg);
	transform: rotate(225deg);
}


/*	==========================================================================
	INDIE.WEB BASE MEDIA QUERIES
	==========================================================================	*/

/*	Screen Sizes 240px and smaller ---------- */
@media only screen 
and (max-width : 240px) {
	
	/*	NAV MAIN ---------- */

	/*	CONTAINER, LOGO, NAV ------ */
	
	#nav-main-container,
	#logo,
	#nav-main {
		padding: 7.5px;
	}


	/*	NAV ------ */

	#nav-main {	
		min-width: 35px; /* combined (width: 20px) + ( (padding: 7.5px) x 2 ) */	
	}

	#nav-main div > ul {
		padding: 0 15px;
	}

	#nav-main li ul {
		padding-left: 15px;
	}


	/*	RESPONSIVE NAV --- */

	#nav-icon {
		right: 15px;
		width: 20px;
	}
	
	#nav-icon span {
		height: 2px;
	}
	
	#nav-icon span:before {
		top: -6px;
	}
	
	#nav-icon span:after {
		top: 6px;
	}

}


/*	Screen Sizes 240px and larger ---------- */
@media only screen 
and (min-width : 240px) {
	
	/*	NAV MAIN ---------- */

	/*	LOGO, PHONE ------ */
	
	#logo,
	#phone-nav-ext {
		padding: 0 15px;
	}

}


/*	Screen Sizes 240px - 320px ---------- */
@media only screen 
and (min-width : 240px)
and (max-width : 320px) {

	/*	NAV MAIN ---------- */

	/*	NAV ------ */

	#nav-main {	
		min-width: 52px; /* combined (width: 22px) + ( (padding: 15px) x 2 ) */	
	}


	/*	RESPONSIVE NAV --- */
	
	#nav-icon {
		right: 30px;
		width: 22px;
	}
	
	#nav-icon span {
		height: 2px;
	}
	
	#nav-icon span:before {
		top: -6px;
	}
	
	#nav-icon span:after {
		top: 6px;
	}
	
}


/*	Screen Sizes 240px - 800px ---------- */
@media only screen 
and (min-width : 240px)
and (max-width : 800px) {
	
	/*	NAV MAIN ---------- */

	/*	CONTAINER ------ */

	#nav-main-container {
		padding: 15px;
	}


	/*	NAV ------ */

	#nav-main div > ul {
		padding-left: 30px;
		padding-right: 30px;
	}

	#nav-main li ul {
		padding-left: 30px;
	}

}


/*	Screen Sizes 320px and smaller ---------- */
@media only screen 
and (max-width : 320px) {

	/*	NAV MAIN ---------- */

	/*	CONTAINER ------ */
	
	#nav-main-container a {
		font-size: 0.875em;
	}


	/*	NAV ------ */

	#nav-main > div > ul > li > a,
	#nav-main li:hover > ul > li > a {
		line-height: 40px;
	}

}


/*	Screen Sizes 320px - 640px ---------- */
@media only screen
and (min-width : 320px)
and (max-width : 640px) {
	
	/*	NAV MAIN ---------- */

	/*	NAV ------ */
	
	#nav-main > div > ul > li > a,
	#nav-main li:hover > ul > li > a {
		line-height: 45px;
	}

}


/*	Screen Sizes 320px - 800px ---------- */
@media only screen
and (min-width : 320px)
and (max-width : 800px) {
	
	/*	NAV MAIN ---------- */

	/*	NAV ------ */

	#nav-main {	
		min-width: 55px; /* combined (width: 25px) + ( (padding: 7.5px) x 2 ) */	
	}


	/*	RESPONSIVE NAV --- */
	
	#nav-icon {
		right: 30px;
		width: 25px;
	}
	
	#nav-icon span {
		height: 3px;
	}
	
	#nav-icon span:before {
		top: -7px;
	}
	
	#nav-icon span:after {
		top: 7px;
	}

}


/*	Screen Sizes 400px and smaller ---------- */
@media only screen 
and (max-width : 400px) {

	/*	NAV MAIN ---------- */

	/*	LOGO, NAV ------ */

	#logo,
	#nav-main {
		width: 50%;
	}
	
}


/*	Screen Sizes 560px and smaller ---------- */
@media only screen 
and (max-width : 560px) {

	/*	NAV MAIN ---------- */

	/*	CONTAINER ------ */

	#nav-main-container {
		height: 60px;
	}


	/*	NAV ------ */

	/*	RESPONSIVE NAV --- */

	#nav-collapse {
		top: 60px;
	}

	#nav-collapse > ul {
		padding-bottom: 60px;
	}
	
}


/*	Screen Sizes 560px - 800px ---------- */
@media only screen
and (min-width : 560px)
and (max-width : 800px) {

	/*	NAV MAIN ---------- */

	/*	CONTAINER ------ */

	#nav-main-container {
		height: 75px;
	}


	/*	NAV ------ */

	/*	RESPONSIVE NAV --- */

	#nav-collapse {
		top: 75px;
	}

	#nav-collapse > ul {
		padding-bottom: 75px;
	}

}


/*	Screen Sizes 640px and smaller ---------- */
@media only screen 
and (max-width : 640px) {

	/*	NAV MAIN ---------- */
	
	/*	NAV ------ */
	
	#nav-main {
		flex: 1; /* still required? */
	}
	
}


/*	Screen Sizes 640px - 800px ---------- */
@media only screen
and (min-width : 640px)
and (max-width : 800px) {

	/*	NAV MAIN ---------- */
	
	/*	NAV ------ */
	
	#nav-main {
		width: auto; /* still required? */
	}
	#nav-main li a {
		font-size: 1.25rem;
	}

	#nav-main > div > ul > li > a,
	#nav-main li:hover > ul > li > a {
		line-height: 60px;
	}
	
}


/*	Screen Sizes 800px and smaller ---------- */
@media only screen 
and (max-width : 800px) {

	/*	NAV MAIN ---------- */
	
	/*	NAV ------ */

	#nav-main {
		order: 3; /* initial value 0 */
	}


	/*	RESPONSIVE NAV --- */
	
	#nav-icon {
		display: inline-block;
		height: 30px;
	}

	#nav-toggle:checked ~ #nav-icon {
		position: absolute;
		-webkit-backface-visibility: hidden; /* provides backwards compatibility for fixed position elements mobile devices */
		left: auto;
	}

	#nav-collapse {
		position: fixed;
		-webkit-backface-visibility: hidden; /* provides backwards compatibility for fixed position elements mobile devices */
		left: 0;
		width: 100%;
		height: 100%;
		max-height: 0;
		padding: 0;
		overflow: hidden;
		text-align: left;

		-webkit-transition: all .65s ease-in-out;
		transition: all .65s ease-in-out;
	}

	#nav-toggle:checked ~ #nav-collapse {
		max-height: 1200px;
		overflow: auto;
	}


	/*	PHONE ------ */

	#phone-nav-ext {
		display: none;
	}
	
}


/*	Screen Sizes 800px and larger ---------- */
@media only screen 
and (min-width : 800px) {

	/*	NAV MAIN ---------- */
	
	/*	CONTAINER ------ */

	#nav-main-container {
		height: 90px;
		padding: 0 15px;
	}


	/*	LOGO ------ */

	#logo > * {
		padding-top: 15px;
		padding-bottom: 15px;
	}


	/*	NAV ------ */

	#nav-main {
		position: relative;
		text-align: center;

		flex: auto;
		order: 2;
	}

	#nav-main div > ul {
		height: 90px;
		padding: 0;
		white-space: nowrap; /* prevent menu items from wrapping */
		font-size: 0; /* prevent white-space between li items (important when setting background-color) */
	}

	#nav-main div > ul > li {
		height: 90px;
		display: inline-block;
		padding: 0 15px;
		vertical-align: top;
	}

	#nav-main > div > ul > li > a {
		line-height: 90px;
	}

	#nav-main > div > ul > li > ul {
		position: absolute;
		top: 90px;
		left: 0;
		height: initial;
		min-width: 100%;
	}

	#nav-main li ul {
		padding: 0 30px;
	}

	#nav-main li ul li {
		display: block;
		text-align: left;
	}

	#nav-main li:hover > ul > li > a,
	#nav-main li:hover > ul > li > a,
	#nav-main li:focus-within > ul > li > a,
	#nav-main li:active > ul > li > a,
	#nav-main .sub-nav-collapse-prevention:hover ~ li > a,
	html.tabbing #nav-main li:focus-within > ul > li > a {
		line-height: 60px;
	}

	.sub-nav-box-shadow {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}


	/*	RESPONSIVE NAV --- */
	
	#nav-icon {
		display: none;
	}
	
	#nav-collapse {
		position: relative;
		width: auto;
		height: auto;
		max-height: none;
		overflow: visible;
		background: none !important;
		text-align: right;
	}


	/*	PHONE ------ */
	
	#phone-nav-ext {
		order: 3;
	}
	
}


/*	Screen Sizes 800px - 880px ---------- */
@media only screen 
and (min-width : 800px) 
and (max-width : 880px) {

	/*	NAV MAIN ---------- */
	
	/*	NAV ------ */
	
	#nav-main div > ul {
		padding: 0 2.5px /* ensure consistent space around first and last menu items */
	}

	#nav-main div li {
		padding: 0 12.5px;
	}

}


/*	Screen Sizes 800px - 1040px ---------- */
@media only screen 
and (min-width : 800px) 
and (max-width : 1040px) {

	/*	NAV MAIN ---------- */
	
	/*	CONTAINER ------ */

	#nav-main-container a {
		font-size: 0.875rem;
	}

}


/*	Screen Sizes 880px - 1040px ---------- */
@media only screen 
and (min-width : 880px) 
and (max-width : 1040px) {

	/*	NAV MAIN ---------- */
	
	/*	NAV ------ */
	
	#nav-main li {
		padding: 0 15px;
	}

}


/*	Screen Sizes 1040px and larger ---------- */
@media only screen 
and (min-width : 1040px) {

	/*	NAV MAIN ---------- */
	
	/*	NAV ------ */
	
	#nav-main-container a {
		font-size: 1.0rem;
	}

}


/*	Screen Sizes 1520px and larger ---------- */
@media only screen 
and (min-width : 1520px) {

	/*	NAV MAIN ---------- */
	
	/* 	CONTAINER ------ */
	
	#nav-main-container {
		padding: 0 30px;
	}

}