// Navigation Styling

.nav-jumper {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
}
#site-navigation {
	text-align: center;
	a {
		display: inline-block;
		text-decoration: none;
		color: var(--nav-link);
		&:hover {
			color: var(--nav-link-hover);
			background-color: rgba(0,0,0,0.02);
		}
	}

	ul ul {
		background-color: white;
		box-shadow: 0px 3px 12px -5px rgba(0,0,0,.3);
	}
	@media (min-width: 992px) {
		ul#primary-menu {
			display: inline-block;
			background-color: var(--nav-bg);
			.dropdown-arrow {
				display: none;
			}
			& > li {
				position: relative;
				float: left;
				& > a {
					padding: 0.5em 1em;
				}
				&.menu-item-has-children > a {
					&:after {
						position: relative;
						content: "\f347";
						font-family: "Dashicons";
						padding-left: 3px;
						top: 3px;
					}
				}
			}
			ul {
				flex-direction: column;
				text-transform: none;
				box-shadow: none;
				text-align: left;
				background-color: var(--nav-dd-bg);
				li {
					position: relative;
					float: none;
					display: block;
					margin: 0;
					a {
						padding: 1em;
					}
					&:hover > ul, &.focus > ul {
						left: 100%;
						@include transform(translateY(0px));
					}
					&.menu-item-has-children  > a:after {
						position: relative;
						content: "\f345";
						font-family: "Dashicons";
						float: right;
					}
				}
			}
			li:hover > ul {
				opacity: 1;
				@include transform(translateY(0px));
			}
		}
	}
}

button.menu-toggle {
	@include button();
	margin: auto;
	margin: 1em auto;
	cursor: pointer;
}

@media (max-width: 991px) {
	#site-navigation {
		.dropdown-arrow {
			cursor: pointer;
			margin: 3px 0 0 3px;
		}
		li {
			padding: 0.5em 0.8em;
			margin: 0;
			.dashicons {
				float: right;
			}
		}
		a {
			background: none;
		}
		ul {
			width: 300px;
			text-align: left;
			background-color: rgba(0,0,0,.03);
			ul {
				width: 100%;
				position: relative;
				opacity: 1;
				float: none;
				left: 0;
				box-shadow: none;
				background-color: rgba(221,221,221,.24);
				a {
					width: auto;
				}
			}
		}
	}
}