/* Site Header
---------------------------------------------------------------------------------------------------- */

.site-header {
	background: var(--wp--preset--color--background);
	position: relative;

	.wrap {
		display: grid;
		grid-template-columns: 200px 1fr;
	}


	&__toggles {
		display: flex;
		flex-wrap: nowrap;
		justify-self: flex-end;

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

	@include media("<=mobile_menu") {
		max-height: 100vh;
		overflow-y: auto;
		overscroll-behavior-y: contain;
	}
}

.search-toggle,
.menu-toggle,
.favorite-toggle {
	background: transparent;
	border: none;
	box-shadow: none;
	cursor: pointer;
	line-height: 0;
	padding: 0;
	text-align: center;

	@include size( 44px );
	display: flex;
	align-items: center;
	justify-content: center;

	svg {
		@include size( 24px );
	}

	.close {
		display: none;
	}

	&.active {

		.close {
			display: inline;
		}

		.open {
			display: none;
		}
	}
}

/* Admin Bar
--------------------------------------------- */

@include media(">782px" ) {
	.admin-bar .site-container {
		padding-top: 32px;
	}
}

@include media("<=782px") {
	#wpadminbar {
		display: none !important;
	}
}

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

.nav-menu {

	& > * {
		line-height: 0;
	}

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

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

		a {
			border: none;
			color: var(--wp--preset--color--foreground);
			display: block;
			font-size: var(--wp--preset--font-size--small);
			position: relative;
			padding: var(--wp--custom--layout--padding);
			text-decoration: none;
		}

		&.menu-item-has-children > a {
			padding-right: calc( var(--wp--custom--layout--padding) + 6px );
		}

		&:hover > a {
		}

		&.current-menu-item > a,
		&.current-menu-ancestor > a {
		}
	}

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

		&:not(.expanded) .close,
		&.expanded .open {
			display: none;
		}
	}

	@include media(">mobile_menu") {

		.menu {
			display: flex;
			justify-content: flex-end;
		}

		.menu-item {

			&:hover,
			&:focus-within {

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

		.menu > .menu-item-has-children:hover > a {
			color: var(--wp--preset--color--foreground);
		}

		.sub-menu {
			background: var(--wp--preset--color--background);
			left: -9999px;
			opacity: 0;
			position: absolute;
			width: 215px;
			z-index: 99;

			.menu-item {
				float: none;

				&:hover > a {
				}
			}

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

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

		&.active {
			display: block;
			grid-column: 1 / -1;
		}

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

			svg {
				@include size( 18px );
			}

			&:not(.expanded) {
			}

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

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

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