/* Mobile Navigation */

.site-nav {
	grid-column: 1 / -1;
	grid-row: 3;
	display: none;
	width: 100%;
	margin-top: 1rem;
}

.site-nav.is-open {
	display: block;
}

.site-nav__menu {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;

	font-size: var(--font-lg);
}

.site-nav__menu > li {
	width: 100%;
}

.site-nav__menu .menu-row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	width: 100%;
}

.site-nav__menu .menu-row > a {
	min-width: 0;
	padding: var(--space-xs) 0;
}

.site-nav__menu > li > .menu-row > .submenu-toggle {
	display: flex;
	justify-self: end;
}

.site-nav__menu > li > .sub-menu,
.site-nav__menu .sub-menu .sub-menu {
	position: static;
	display: none;

	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0 0 1rem 1rem;

	background: none;
	box-shadow: none;
	border: 0;
}

.site-nav__menu li.is-open > .sub-menu {
	display: block;
}

.site-nav__menu .menu-row > .submenu-toggle {
	display: flex;
}

/* Utility Navigation */

.site-header__utility-nav {
	grid-column: 1 / -1;
	grid-row: 1;

	display: grid;
	grid-template-columns: auto auto 1fr auto;
	align-items: center;
	gap: var(--space-sm);

	width: 100%;
	padding-top: 0;
}

.site-top-nav {
	grid-column: 1;
	grid-row: 1;
}

.site-top-nav__menu {
	flex-direction: row-reverse;
}

.site-search-link {
	grid-column: 2;
	grid-row: 1;
}

.site-language-switcher {
	grid-column: 4;
	grid-row: 1;
	justify-self: end;
}

.site-language-switcher::before {
	content: none;
}

/* Hamburger Menu */

.site-nav-toggle {
	display: inline-flex;
	grid-column: 2;
	grid-row: 2;
	justify-self: end;
	align-self: end;
	z-index: 2;
	margin-bottom: .9rem;
}

.hamburger {
	padding: 0.5rem;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.hamburger-box {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 41px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
	position: absolute;
	width: 40px;
	height: 3px;
	background: var(--color-text);
	transition: 
		transform 0.2s ease, 
		opacity 0.2s ease;
	content: "";
}

.hamburger-inner {
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.hamburger-inner::before {
	top: -16px;
	left: 0;
}

.hamburger-inner::after {
	top: 16px;
	left: 0;
}

.hamburger.is-active .hamburger-inner {
	transform: rotate(45deg);
}

.hamburger.is-active .hamburger-inner::before {
	transform: translateY(16px) rotate(90deg);
}

.hamburger.is-active .hamburger-inner::after {
	opacity: 0;
}

@media (max-width: 768px) {
	.site-header__utility-nav {
		display: none;
	}
}