/* ==========================================================================
   Primary navigation style (Includes media queries for mobile)
   ========================================================================== */

.nav-toggle {
	display: none;
}

#nav {
	position: relative;
	width: 100%;
	z-index: 100;
	> a {
		display: none;
	}
}

header .menu,
header .primary-navigation {
	@include transition-duration(0.2s);
	@include transition-timing-function(ease-in);
	ul {
		float: right;
		border-left: 1px solid rgba(0,0,0,0.2);
		margin-bottom: 0;
	}
	li {
		position: relative;
		float: left;
		list-style: none;
		a {
			display: block;
			color: #fff;
			border-right: 1px solid rgba(0,0,0,0.2);
			opacity: 0.6;
			font-weight: normal;
			font-family: $header-font;
			padding: 0 20px 0 20px;
			@include adjust-leading-to(3);
			@include transition-duration(0.2s);
			@include transition-timing-function(ease-in);
		}	
		&:hover > a {
			background: rgba(0,0,0,0.2);
			opacity: 1;
		}
	}

	/* Second Level */

	li ul {
		position: absolute;
		display: none;
		left: 0;
		top: 100%;
		padding: 0;
		border: none;
		margin: 0;
		margin-left: -1px;
		li {
			background: rgba(0,0,0,0.8);
			border-bottom: 1px solid #444;
			a {
				width: 300px;
				color: #fff;
				line-height: rhythm(1.5);
				border-right: none;
			 	background:none;
				margin: 0;
				opacity: 0.8;
				padding: 0 $base-line-height;
				&:hover {
					background: $secondary-color;
				}
			}
			&:last-child {
				border-bottom: none;
				@include border-bottom-left-radius(5px);
				@include border-bottom-right-radius(5px);
				a:hover {
					@include border-bottom-left-radius(5px);
					@include border-bottom-right-radius(5px);
				}
			}
		}
	}
	li:hover {
		> ul {
			display: block;
		}
	}
	li ul ul {
		top: 0;
		left: 100%;
		margin-left: 0px;
	}
}

.social {
	float: right;
	@include adjust-leading-to(3);
	@include transition-duration(0.2s);
	@include transition-timing-function(ease-in);
	a {
		display: block;
		float: left;
		color: #999;
		text-align: center;
		border-right: 1px solid rgba(0,0,0,0.2);
		padding: 0 20px;
		@include adjust-font-size-to(24px, 3);
		@include transition-duration(0.2s);
		@include transition-timing-function(ease-in);
		&:hover {
			background: rgba(0,0,0,0.2);
			color: #fff;
		}
	}
}

@media only screen and ( max-width: 960px ) {

	.social {
		float: right;
		border-left: 1px solid rgba(0,0,0,0.2);
		border-bottom: 1px solid rgba(0,0,0,0.2);
	}

	.nav-toggle {
		position: absolute;
		display: block;
		float: left;
		color: #333;
		text-align: center;
		left: 0;
		.fa {
			display: inline-block;
			background: rgba(0,0,0,0.3);
			font-size: 25px;
			color: rgba(255,255,255,0.5);;
			width: 75px;
			@include adjust-leading-to(3);
			@include box-shadow(rgba(0,0,0,0.2) 0 0 5px);
			&:hover {
				color: #fff;
			}
		}
	}

	#page-wrapper-inner {
		position: relative;
		left: 0;
		width: 100%;
		@include transition-property(left);
		@include transition-duration(0.3s);
		@include transition-timing-function(ease);
	}

	#nav {
		clear: both;
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 80%;
		background: #333;
		z-index: 99999;
		text-shadow: 1px 1px #111;
		opacity: 0.4;
		@include box-shadow(rgba(0,0,0,0.3) 0 0 30px inset);
		@include translateX(-100%);
		@include transition-property(opacity);
		@include transition-duration(0.4s);
		@include transition-timing-function(ease);
		h3 {
			display: block;
			color: #999;
			border-top: 1px solid #444;
			padding: 0 15px;
			margin: 0;
			@include adjust-leading-to(1.5);
			@include background-image(linear-gradient(#333, #222));
		}
	}

	.show-nav {
		#page-wrapper-inner {
			position: relative;
			left: 80%;
		}
		#nav {
			opacity: 1;
			@include translateX(-100%);
		}
	}

	/* Vertical Main Menu styles for devices under 960px */
	
	header .menu,
	header .primary-navigation {
		ul {
			float: none;
			margin-bottom: 0;
			margin-left: 0;
		}
		li {
			position: relative;
			float: none;
			list-style: none;
			border-bottom: none;
			a {
				display: block;
				text-transform: none;
				color: #999;
				font-weight: normal;
				font-family: $header-font;
				border-top: 1px solid #444;
				border-bottom: 1px solid #222;
				padding: 0 15px;
				margin: 0;
				@include adjust-font-size-to(18px, 2);
			}	
		}

		/* Second Level */

		li ul {
			position: relative;
			display: block;
			left: auto;
			top: auto;
			padding: 0;
			background: none;
			margin: 0;
			margin-top: 0;
			@include box-shadow(none);
			li {
				background: none;
				border-bottom: none;
				border-top: none;
				a {
					width: 100%;
					color: #999;
					text-transform: none;
				 	background: none;
					padding: 0 15px 0 30px;
					margin: 0;
					@include adjust-leading-to(1.5);
					&:hover {
						color: #fff;
						background: $secondary-color;
					}
				}
				&:first-child {
					border-top: none;
				}
				&:last-child {
					border-bottom: none;
				}
				&.current-menu-item {
					a {
						color: #fff;
					}
				}
				&.current-menu-item:after {
					position: absolute;
					content: "\f005";
					top: 0;
					right: 15px;
					color: #fff;
					font-family: FontAwesome;
					@include adjust-leading-to(1.5);
				}
				&.menu-item-has-children:after {
					display: none;
				}
			}
			&:before {
				display: none;
			}
		}
		li:hover {
			> ul {
				display: block;
			}
		}
		li ul ul {
			top: auto;
			left: auto;
			margin-top: 0px;
			a {
				padding-left: 45px;
			}
		}
	}
}