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

.main-nav-cont .navigation,
.secondary-nav-cont .navigation {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.navigation .nav-link {
	text-decoration: none;
	line-height: 1;
	color: inherit;
}

.main-nav-cont .navigation .nav-item-control.level-1 .nav-link,
.secondary-nav-cont .navigation .nav-item-control.level-1 .nav-link {
	position: relative;
	transition: color var(--transition);
}

.main-nav-cont .navigation .nav-item-control.level-1 .nav-link::before,
.secondary-nav-cont .navigation .nav-item-control.level-1 .nav-link::before {
	position: absolute;
	inset: auto 0 0 0;
	transform: translateY(7px);
	display: block;
	height: 3px;
	background: var(--yellow);
	content: '';
	pointer-events: none;
	opacity: 0;
	transition: transform var(--transition), opacity var(--transition);
}

.main-nav-cont .navigation .nav-item.level-1.open > .nav-item-control.level-1 .nav-link,
.secondary-nav-cont .navigation .nav-item.level-1.open > .nav-item-control.level-1 .nav-link {
	color: var(--yellow);
}

.main-nav-cont .navigation .nav-item.level-1.open > .nav-item-control.level-1 .nav-link::before,
.secondary-nav-cont .navigation .nav-item.level-1.open > .nav-item-control.level-1 .nav-link::before {
	transform: none;
	opacity: 1;
}

@media (hover: hover) {
	.main-nav-cont .navigation .nav-item.level-1 > .nav-item-control.level-1 .nav-link:hover,
	.secondary-nav-cont .navigation .nav-item.level-1 > .nav-item-control.level-1 .nav-link:hover {
		color: var(--yellow);
	}

	.main-nav-cont .navigation .nav-item.level-1 > .nav-item-control.level-1 .nav-link:hover::before,
	.secondary-nav-cont .navigation .nav-item.level-1 > .nav-item-control.level-1 .nav-link:hover::before {
		transform: none;
		opacity: 1;
	}
}

/*===============================*/
/*=====----- DROPDOWNS -----=====*/
/*===============================*/

.navigation .dropdown-toggle {
	transform: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--min-nav-item-height);
	aspect-ratio: 1;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	font-size: var(--text-lg);
	color: inherit;
	transition: transform var(--transition);
}

.main-nav-cont .navigation .dropdown-toggle,
.secondary-nav-cont .navigation .dropdown-toggle {
	transform: rotate(-90deg);
}

.main-nav-cont .navigation .nav-item-control.level-1 .dropdown-toggle,
.secondary-nav-cont .navigation .nav-item-control.level-1 .dropdown-toggle {
	display: none;
}

.main-nav-cont .navigation .dropdown-helper,
.secondary-nav-cont .navigation .dropdown-helper {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	transform: scaleX(0);
	display: none;
	width: 100%;
	height: 600%;
	opacity: 0;
	transform-origin: right center;
	transition: transform 300ms ease 200ms;
}

.main-nav-cont .navigation .nav-item.on-right .dropdown-helper,
.secondary-nav-cont .navigation .nav-item.on-right .dropdown-helper {
	transform-origin: left center;
}

.main-nav-cont .navigation .dropdown-menu,
.secondary-nav-cont .navigation .dropdown-menu {
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition), height var(--transition);
}

.main-nav-cont .navigation .dropdown-menu .dropdown-menu,
.secondary-nav-cont .navigation .dropdown-menu .dropdown-menu {
	position: absolute;
	inset: 0 0 auto auto;
	transform: translateX(100%);
}

.main-nav-cont .navigation .dropdown-menu .nav-item-control,
.secondary-nav-cont .navigation .dropdown-menu .nav-item-control {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
	background-color: transparent;
	color: inherit;
	transition: background-color var(--transition), color var(--transition);
}

.main-nav-cont .navigation .dropdown-menu.level-1 .nav-item-control,
.secondary-nav-cont .navigation .dropdown-menu.level-1 .nav-item-control {
	padding: 8px 38px;
}

.main-nav-cont .navigation .dropdown-menu .nav-link,
.secondary-nav-cont .navigation .dropdown-menu .nav-link {
	flex-grow: 1;
	font-family: var(--sofia);
	font-weight: var(--font-weight-med);
	font-size: 1.0625rem;
	text-transform: none;
}

/*----- active dropdown -----*/

.main-nav-cont .navigation .dropdown-menu.open,
.secondary-nav-cont .navigation .dropdown-menu.open {
	opacity: 1;
	pointer-events: all;
}

.main-nav-cont .navigation .dropdown-menu .nav-item.open > .nav-item-control,
.secondary-nav-cont .navigation .dropdown-menu .nav-item.open > .nav-item-control {
	background-color: rgba(10, 60, 78, 0.23);
	color: var(--yellow);
}

/*----- media queries -----*/

@media (hover: hover) {
	.main-nav-cont .navigation .dropdown-menu .nav-item-control:hover,
	.secondary-nav-cont .navigation .dropdown-menu .nav-item-control:hover {
		background-color: rgba(10, 60, 78, 0.23);
		color: var(--yellow);
	}

	.main-nav-cont .navigation .dropdown-menu .nav-item-control:hover + .dropdown-helper,
	.secondary-nav-cont .navigation .dropdown-menu .nav-item-control:hover + .dropdown-helper {
		transform: scaleX(1);
		transition: none;
	}
}

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

.mobile-menu {
	--min-nav-item-height: 32px;
}

.mobile-menu .navigation {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.mobile-menu .navigation .nav-item-control {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	min-height: var(--min-nav-item-height);
	padding: 0 6px 0 20px;
	background-color: transparent;
	color: var(--off-white);
	transition: background-color var(--transition), color var(--transition);
}

.mobile-menu .navigation .nav-link {
	font-family: var(--sofia);
	font-weight: var(--font-weight-med);
	font-size: 1.0625rem;
}

/*----- primary nav -----*/

.mobile-navs > *:first-child .navigation .nav-item-control.level-1 .nav-link {
	font-weight: var(--font-weight-black);
	font-size: 1.5rem;
	text-transform: uppercase;
}

/*----- secondary nav -----*/

.mobile-navs > *:nth-child(2) .navigation {
	gap: 0;
}

.mobile-navs > *:nth-child(2) .navigation .nav-item-control.level-1 .nav-link {
	font-family: var(--typewriter);
	font-weight: normal;
	font-size: var(--text-lg);
}

/*----- tertiary nav -----*/

.mobile-navs > *:nth-child(n + 2) .navigation .nav-link {
	font-family: var(--typewriter);
	font-weight: normal;
	font-size: 0.9375rem;
}

.mobile-menu .navigation-footer {
	align-items: flex-start;
	padding: 0 20px;
	text-align: left;
}

/*----- dropdowns -----*/

.mobile-menu .dropdown-menu {
	display: none;
	flex-direction: column;
	gap: 3px;
	padding: 6px 0;
}

.mobile-menu .dropdown-menu .dropdown-menu .nav-item-control,
.mobile-navs > *:nth-child(2) .dropdown-menu .nav-item-control {
	padding-left: 46px;
}

.mobile-menu .dropdown-menu .dropdown-menu .dropdown-menu .nav-item-control,
.mobile-navs > *:nth-child(2) .dropdown-menu .dropdown-menu .nav-item-control {
	padding-left: 70px;
}

/*----- active dropdown -----*/

.mobile-menu .nav-item.open > .nav-item-control {
	color: var(--yellow);
}

.mobile-menu .dropdown-menu .nav-item.open > .nav-item-control {
	background-color: rgba(10, 60, 78, 0.23);
}

.mobile-menu .nav-item.open > .nav-item-control .dropdown-toggle {
	transform: rotateX(180deg);
}

.mobile-menu .dropdown-menu.open {
	display: flex;
}

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

.main-nav-cont .navigation {
	gap: 8px 16px;
}

.desktop-menu .dropdown-toggle {
	pointer-events: none;
	cursor: default;
}

.main-nav-cont .navigation .nav-link {
	font-family: var(--sofia);
	font-weight: var(--font-weight-black);
	font-size: 1.0625rem;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.main-nav-cont .navigation .nav-item-control.level-1 .nav-link {
	display: block;
	padding-bottom: 31px;
}

/*----- dropdowns -----*/

.main-nav-cont .navigation .dropdown-menu-cont {
	position: absolute;
	inset: 100% -60px auto auto;
	z-index: 10;
	transform: translateY(7px);
	display: grid;
	grid-template: auto / minmax(0, 9fr) minmax(0, 14fr);
	gap: 2px;
	width: calc(100vw - 60px);
	max-width: 1380px;
	min-height: 318px;
	opacity: 0;
	pointer-events: none;
	transition: transform var(--transition), opacity var(--transition);
}

.main-nav-cont .navigation .dropdown-menu-cont .header-cards {
	padding: 40px;
	background: rgba(10, 60, 78, 0.97);
}

.main-nav-cont .navigation .dropdowns {
	padding: 33px 0;
	background: rgba(57, 157, 157, 0.97);
}

.main-nav-cont .navigation .dropdown-menu {
	position: relative;
	width: 33.33%;
}

.main-nav-cont .navigation .dropdown-menu .dropdown-menu {
	width: 87%;
}

.main-nav-cont .navigation .dropdown-menu .dropdown-menu .nav-item-control {
	padding: 8px 22px;
}

/*----- active dropdown -----*/

.main-nav-cont .navigation .nav-item.open .dropdown-menu-cont {
	transform: none;
	opacity: 1;
	pointer-events: all;
}

/*=============================================*/
/*=====----- SECONDARY (top bar) NAV -----=====*/
/*=============================================*/

.secondary-nav-cont .navigation {
	gap: 0 16px;
}

.secondary-nav-cont .navigation .nav-item.level-1 {
	position: relative;
	z-index: 1;
}

.secondary-nav-cont .navigation .nav-item.level-1.open {
	z-index: 2;
}

.secondary-nav-cont .navigation .nav-link {
	font-family: var(--typewriter);
	font-weight: normal;
	font-size: var(--text-sm);
}

.secondary-nav-cont .navigation .nav-item-control.level-1 .nav-link {
	display: block;
	padding: 13px 0;
}

/*----- dropdowns -----*/

.secondary-nav-cont .navigation .dropdown-menu {
	position: absolute;
	inset: 100% auto 0 -24px;
	width: 267px;
	padding: 22px 0;
	background: var(--teal-dark);
	color: var(--off-white);
	opacity: 0;
	pointer-events: none;
}

.secondary-nav-cont .navigation .dropdown-menu.level-1 {
	transform: translateY(7px);
	transition: opacity var(--transition), transform var(--transition), height var(--transition);
}

.secondary-nav-cont .navigation .dropdown-menu .dropdown-menu {
	width: 227px;
}

/*----- active dropdown -----*/

.secondary-nav-cont .navigation .dropdown-menu.level-1.open {
	transform: none;
}

/*----- nav item on right -----*/

.secondary-nav-cont .navigation .nav-item.on-right .dropdown-menu {
	left: 50%;
	transform: translate(-50%, 7px);
}

.secondary-nav-cont .navigation .nav-item.on-right .dropdown-menu .dropdown-menu {
	inset: 0 1px 0 auto;
	transform: translateX(100%);
}

.secondary-nav-cont .navigation .nav-item.on-right .dropdown-menu.level-1.open {
	transform: translateX(-50%);
}

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

.navigation-footer {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	text-align: right;
	color: var(--off-white);
}

.navigation-footer .item {
	display: block;
}

.navigation-footer .nav-link {
	font-family: var(--typewriter);
	font-weight: normal;
	font-size: 0.875rem;
	line-height: 1;
	color: inherit;
	text-decoration: none;
}

/*----- media queries -----*/

@media (min-width: 64em) {
	.navigation-footer .nav-link {
		font-size: 0.9375rem;
	}
}