/*=============================*/
/*=====----- GENERAL -----=====*/
/*=============================*/

.nav-item-control {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

.navigation a {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: var(--font-weight-bold);
	letter-spacing: .06rem;
	color: var(--white);
	line-height: 1.2;
	text-decoration: none !important;
	text-transform: uppercase;
}

:is(.mobile-nav, .desktop-nav .nav-block) .nav-item-control.level-1 {
	position: relative;
}

:is(.mobile-nav, .desktop-nav .nav-block) .nav-item-control.level-1 > * {
	position: relative;
	z-index: 2;
}

:is(.mobile-nav, .desktop-nav .nav-block) .nav-item-control.level-1::before {
	position: absolute;
	z-index: 1;
	display: none;
	background: var(--white);
	content: '';
	pointer-events: none;
}

.desktop-nav .nav-block .nav-item-control.level-1::before {
	top: 0;
	right: -14px;
	bottom: 0;
	left: -8px;
}

.mobile-nav .nav-item-control.level-1::before {
	top: 1px;
	right: -19px;
	bottom: 1px;
	left: -3px;
}

:is(.mobile-nav, .desktop-nav .nav-block) .nav-item.level-1.open > .nav-item-control::before {
	display: block;
}

:is(.mobile-nav, .desktop-nav .nav-block) .nav-item.level-1.open > .nav-item-control a {
	color: var(--citrus);
}

/*=====----- Dropdown Toggles -----=====*/

.dropdown-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--space-5);
	height: var(--space-5);
	background: none;
	border: none;
}

.dropdown-toggle .cross {
	position: relative;
	display: block;
	width: 10px;
	height: 10px;
	flex-shrink: 0;
}

.dropdown-toggle .cross::before,
.dropdown-toggle .cross::after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
	border-radius: 1px;
	background: var(--citrus);
	content: '';
}

.dropdown-toggle .cross::before {
	width: 100%;
	height: 2px;
}

.dropdown-toggle .cross::after {
	width: 2px;
	height: 100%;
	transition: transform .3s ease;
}

.dropdown-toggle.active .cross::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

/*=======================================*/
/*=====----- MOBILE HEADER NAV -----=====*/
/*=======================================*/

.mobile-nav .nav-container {
	position: relative;
	padding: var(--space-3) var(--space-4);
}

.mobile-nav .navigation a {
	padding: 4.5px 0;
	font-family: var(--font-body);
	font-weight: var(--font-weight-normal);
	font-size: 17px;
	letter-spacing: 0;
	text-transform: none;
}

.mobile-nav .dropdown-menu {
	padding-left: var(--space-2);
}

.mobile-nav .dropdown-menu .dropdown-menu {
	padding-left: 14px;
}

/*=====----- PRIMARY NAV -----=====*/

.mobile-nav .navigations > *:first-child .nav-container {
	padding-top: 18px;
	padding-bottom: var(--space-1);
}

.mobile-nav .navigations > *:first-child a {
	padding: 6.25px 0;
	font-size: var(--text-lg);
}

.mobile-nav .navigations > *:first-child .nav-item-control.level-1 {
	align-items: center;
}

.mobile-nav .navigations > *:first-child .nav-item-control.level-1 a {
	padding: 8.25px 0;
	font-family: var(--font-display);
	font-weight: var(--font-weight-bold);
	font-size: 23px;
	text-transform: uppercase;
}

.mobile-nav .navigations > *:first-child .nav-item-control.level-2 a {
	font-size: 23px;
}

.mobile-nav .navigations > *:first-child .dropdown-menu .dropdown-menu a {
	padding: 9px 0;
}

/*=====----- SECONDARY NAV -----=====*/

.mobile-nav .navigations > *:nth-child(2) .nav-container {
	padding-top: var(--space-1);
}

/*=====----- TERTIARY NAV -----=====*/

.mobile-nav .navigations > * + * + * .nav-container {
	padding-bottom: 22px;
}

.mobile-nav .navigations > * + * + * .nav-container::before {
	position: absolute;
	top: 0;
	right: 15px;
	left: 15px;
	display: block;
	height: 1px;
	background: var(--white);
	content: '';
}

/*========================================*/
/*=====----- DESKTOP HEADER NAV -----=====*/
/*========================================*/

.desktop-nav .nav-block .navigation a {
	padding: 3px 0;
	font-family: var(--font-body);
	font-weight: var(--font-weight-normal);
	font-size: 20px;
	letter-spacing: 0;
	text-transform: none;
}

.desktop-nav .dropdown-menu {
	height: auto !important;
}

.desktop-nav .nav-block .nav-item.level-1 {
	max-width: 46%;
}

.desktop-nav .nav-block .dropdown-menu.level-1 {
	position: absolute;
	top: 0;
	right: 0;
	left: 50%;
}

.desktop-nav .nav-block .dropdown-menu .dropdown-menu {
	padding-left: 14px;
}

/*=====----- MAIN NAV -----=====*/

.desktop-nav .navigations > *:first-child {
	margin-bottom: var(--space-3);
}

.desktop-nav .navigations > *:first-child .nav-item-control.level-1 {
	align-items: center;
}

.desktop-nav .navigations > *:first-child .nav-item-control.level-1::before {
	top: 2px;
	bottom: 2px;
}

.desktop-nav .navigations > *:first-child .nav-item-control.level-1 a {
	padding: 11.5px 0;
	font-family: var(--font-display);
	font-weight: var(--font-weight-bold);
	font-size: 27px;
	text-transform: uppercase;
}

.desktop-nav .navigations > *:first-child .nav-item-control.level-1 .dropdown-toggle .cross {
	width: 13px;
	height: 13px;
}

.desktop-nav .navigations > *:first-child .nav-item-control.level-2 a {
	padding: 5px 0;
	font-size: 24px;
}

.desktop-nav .navigations > *:first-child .dropdown-menu .dropdown-menu a {
	padding: var(--space-2) 0;
}

/*=====----- BOTTOM NAV -----=====*/

.desktop-nav .footer-nav .navigation-footer {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--space-3) 18px;
	padding: 18px 30px 19px 30px;
}

.desktop-nav .footer-nav .navigation-footer a {
	font-size: 17px;
}

/*=====----- ACTIVE DROPDOWN -----=====*/

.desktop-nav .dropdown-menu.open {
	display: block !important;
}

/*================================*/
/*=====----- FOOTER NAV -----=====*/
/*================================*/

.panel-footer .navigation a {
	padding: 6px 0;
	font-size: 15px;
}

/*===================================*/
/*=====----- MEDIA QUERIES -----=====*/
/*===================================*/

@media (hover: hover) {
	.dropdown-toggle:hover {
		background: none;
	}
}

@media (min-width: 90em) {
	/*=====----- HEADER DESKTOP NAV -----=====*/

	.desktop-nav .nav-block .nav-item.level-1 {
		max-width: 40%;
	}

	.desktop-nav .nav-block .dropdown-menu.level-1 {
		left: 48%;
	}
	
	.desktop-nav .footer-nav .navigation-footer {
		gap: var(--space-3) 28px;
		padding: 18px 55px 19px 55px;
	}

	/*=====----- FOOTER NAV -----=====*/

	.panel-footer .navigation a {
		padding: 6px 0;
		font-size: 17px;
	}
}