/* Navigation
---------------------------------------------------------------------------------------------------- */

.nav-menu {

	& > * {
		line-height: 0;
	}

	ul {
		clear: both;
		line-height: 1;
		margin: 0;
		width: 100%;
	}

	.menu-item {
		list-style: none;
		position: relative;

		a {
			border: none;
			color: $base-color;
			display: block;
			font-size: 16px;
			font-weight: 400;
			line-height: 22px;
			padding: 13px 18px;
			position: relative;
			text-decoration: none;
		}

		&:hover > a {
			background: $grey_2;
		}

		&.current-menu-item > a,
		&.current-menu-ancestor > a {
			color: $highlight;
		}
	}

	.submenu-expand {
		@include button-reset;
		position: absolute;
		line-height: 0;
		top: 50%;
		transform: translateY(-50%);
		right: 7px;

		svg {
			fill: $grey_7;
		}
	}

	.nav-secondary {
		.menu-item.search {
			@include media("<=mobile_menu") {
				padding: 4px 16px 16px;
			}
			@include media(">mobile_menu") {
				margin: 5px 0 0 8px;

				.search-field {
					padding-top: 8px;
					padding-bottom: 8px;
					width: 268px;
				}
			}
		}
	}

	.nav-primary {

		.menu-item.search {
			line-height: 0;

			button {
				padding: 12px;
			}

			@include media("<=mobile_menu") {
				display: none;
			}
		}
	}

	@include media(">mobile_menu") {
		float: right;
		width: calc( 100% - #{$menu_width} );
		display: flex;
		flex-flow: column-reverse nowrap;

		.nav-primary,
		.nav-secondary {
			display: flex;
			justify-content: flex-end;
		}

		.nav-primary + .nav-secondary {
			margin-bottom: 16px;
		}


		.menu {
			display: inline-block;
			width: auto;
		}

		.menu-item {
			float: left;

			&:hover {

				& > .sub-menu {
					left: auto;
					opacity: 1;
				}
			}
		}

		.sub-menu {
			background: $grey_2;
			left: -9999px;
			opacity: 0;
			position: absolute;
			width: 215px;
			z-index: 99;

			.menu-item {
				float: none;

				&:hover > a {
					background: $grey_3;
				}
			}

			.sub-menu {
				margin: -48px 0 0 215px;
			}
		}
	}

	@include media("<=mobile_menu") {
		display: none;

		&.active {
			background: $grey_3;
			border-top: 1px solid $border-color;
			display: block;
			margin: 0 -48px;
			max-width: calc( 100% + 96px );
		}

		.menu > .menu-item > a {
			padding: 11px 18px;
		}

		.submenu-expand {
			top: 0;
			right: 0;
			transform: none;
			@include icon-position( 44px );

			svg {
				@include icon-position( 12px );
			}

			&:not(.expanded) {
				transform: rotate(180deg);
			}

			&.expanded {

				& + .sub-menu {
					display: block;
				}
			}
		}

		.sub-menu {
			display: none;
			padding-left: 8px;
		}
	}
}

/* Toggles
--------------------------------------------- */

.search-toggle,
.menu-toggle {

	@include button-reset;
	line-height: 0;
	text-align: center;

	.close {
		display: none;
	}

	&:hover,
	&.active {
		background: $grey_3;
	}

	&.active {

		.close {
			display: inline;
		}

		.open {
			display: none;
		}
	}
}

.site-header .wrap {
	@include media("<=mobile_menu") {
		padding: 0 48px;
	}

	& > .menu-toggle,
	& > .search-toggle {
		position: absolute;
		top: 0;
		width: 48px;
		height: 48px;

		@include media(">mobile_menu") {
			display: none;
		}
	}

	& > .menu-toggle {
		left: 0;
	}

	& > .search-toggle {
		right: 0;
	}
}

/* Header Search
--------------------------------------------- */

.header-search {
	background: $grey_3;
	overflow: hidden;
	padding: 16px;
	width: 100%;

	@include media(">=tablet") {
		position: absolute;
		bottom: -82px;
		right: 0;

		.search-form {
			margin: 0 auto;
		}
	}

	@include media("<=mobile_menu") {
		margin: 0 -48px;
		width: calc( 100% + 96px );
	}

	&:not(.active) {
		display: none;
	}
}
