// ---------------------- Main Nav

// the nav element
.navmain {}

// the top-level ul
.navmain__links,
.navmain__links ul { // and any child ul 
	list-style-type: none; 
	margin: 0;
	padding: 0;
}

.navmain__links li {
	display: inline-block; 
	float: left; // the float keeps them flush
	margin: $main-nav-li-margin;

	&:last-of-type {
		margin-right: 0;
	}

}
.navmain__links a {
	display: block;  
	color: $main-nav-color; 
	padding: $main-nav-button-pad; 
	text-decoration: none; 
	white-space: nowrap;
	font-size: $main-nav-font-size;
	line-height: $main-nav-line-height;
	text-transform: $main-nav-text-transform;

	background-color: transparent;
	background-image: url('/assets/img/nav-icon.png');
	background-position: left 50%;
	background-repeat: no-repeat;

	&:hover,
	&:active,
	&:focus {
		background-color: transparent;
		color: $main-nav-color-hover; 
	}

}

.navmain__links li:last-of-type a {
	padding-right: 0;
}

// ----------- the sub-menus

.navmain__links li {
	position: relative;
}

.navmain__links li ul {
	display: none;  
	position: absolute;
	top: 100%;
	left: 0px; 
}

.navmain__links li ul li {
	float: left; 
	width: auto;  
	border-top: 1px solid $main-nav-sub-color; 
	text-align: left; 
}

// sub-menu colors
.navmain__links ul a {  
	color: $main-nav-sub-color; 
	padding: $main-nav-button-pad; 
	background-image: none;
	background-color: $main-nav-sub-bg; 

	&:hover,
	&:active,
	&:focus {
		background-color: $main-nav-sub-bg-hover;
		color: $main-nav-sub-color-hover; 
	}

}

// no top margin on the first menu item of the sub-subs 
.navmain__links li ul li:first-child, 
.navmain__links li ul li ul li:first-child {
	border-top: none; 
}

.navmain__links li ul a {}

.navmain__links li ul ul {
	top: 0;
	left: 100%;
}

.navmain__links li:hover > ul {
	display: block; 
}

/*
Keep all sub-menu items consistent (and variable width), 
so they'll assume the width of the widest link. 
This requires responsible content management (don't write long links)
*/
.navmain__links,
.navmain__links ul { width: auto; }

.navmain__links li ul li,
.navmain__links li ul li ul li { 
	width: 100%;
}

/*
We only go two levels deep. That's enough for a menu system. 
I think any more is overkill, and sloppy UI. 
Put the sub-page links in the appropriate section. 
Give the second-level menus a left border
*/

.navmain__links li ul li ul { 
	margin-left: 0px; 
}

// ----------- /the sub-menus

// ----------- the mobile nav trigger

.mmenu-trigger__holder {
	display: none;
}

/* set up these styles in _responsive.scss

.mmenu-trigger__holder {
	padding: $main-nav-mobile-button-pad;
	background-color: $main-nav-bg;
	color: $main-nav-color;
	cursor: pointer; 
	@extend .cf;

	&:hover { 
		background-color: $main-nav-bg-hover; 
		color: $main-nav-color-hover; 
	}

}

*/

// ----------- /the mobile nav trigger