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

.navigation .nav-item-control {
	display: flex;
	align-items: center;
	gap: 7px;
}

.navigation .nav-link {
	font-family: var(--bebas);
	font-weight: bold;
	line-height: 1;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	text-decoration: none !important;
	color: var(--white);
	opacity: 1;
	transition:
		opacity var(--transition),
		color var(--transition);
}

.navigation .dropdown-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 23px;
	aspect-ratio: 1;
	background-color: transparent;
	border: 1px solid var(--white);
	border-radius: 50%;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: 12px;
	color: var(--white);
	opacity: 1;
	transition:
		opacity var(--transition),
		background-color var(--transition),
		border-color var(--transition);
}

.navigation .dropdown-toggle::before {
	content: '\f063';
}

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

.navigation .dropdown-menu {
	display: none;
	grid-template-columns: minmax(0, 1fr);
	gap: 17px;
	padding: 16px 0;
	margin: 14px 0;
	background: rgba(94, 150, 186, 0.35);
}

.navigation .dropdown-menu .dropdown-menu {
	padding: 18px 0;
	margin: 16px 0;
	background: rgba(94, 150, 186, 0.55);
}

.navigation .dropdown-menu.open {
	display: grid;
}

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

.header-nav-container .navigation {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.header-nav-container .navigation .nav-item-control {
	padding: 0 32px;
}

.header-nav-container .navigation .nav-link {
	font-family: var(--avenir-medium);
	font-weight: normal;
	font-size: 18px;
	letter-spacing: 0;
	text-transform: none;
}

/*----- secondary nav(s), level 1 nav items -----*/

.header-nav-container .navigation .nav-link.level-1 {
	font-family: var(--bebas);
	font-weight: var(--font-weight-medium);
	font-size: 29px;
	text-transform: uppercase;
}

/*----- primary nav, level 1 nav items -----*/

.header-nav-container .navs > *:first-child .navigation .nav-link.level-1 {
	font-weight: bold;
	font-size: 32px;
}

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

.header-nav-container .navigation .nav-item.open > .nav-item-control .nav-link,
.header-nav-container .navigation .nav-item.open > .nav-item-control .dropdown-toggle {
	opacity: 0.5;
}

.header-nav-container .navigation .nav-item.open > .nav-item-control.level-1 .nav-link,
.header-nav-container .navigation .nav-item.open > .nav-item-control.level-1 .dropdown-toggle {
	opacity: 1;
}

.header-nav-container .navigation .nav-item.open > .nav-item-control.level-1 .nav-link {
	color: var(--orange);
}

.header-nav-container .navigation .nav-item.open > .nav-item-control.level-1 .dropdown-toggle {
	background-color: var(--orange);
	border-color: var(--orange);
}

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

.navigation-footer {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.navigation-footer .nav-link {
	font-size: 26px;
}

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

@media (hover: hover) {
	.navigation .nav-link:hover {
		color: var(--orange);
	}
}

@media (min-width: 40em) {
	.navigation-footer {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 13px 20px;
	}
}

@media (min-width: 64em) {
	/*----- desktop nav -----*/

	.header-nav-container {
		--nav-width: 33.33%;
	}

	.header-nav-container .navigation {
		gap: 12px;
		width: calc(var(--nav-width) - 17px);
		padding: 8px 0;
	}

	.header-nav-container .navigation .nav-item-control {
		justify-content: space-between;
		gap: 12px;
		padding: 0;
	}

	.header-nav-container .navigation .nav-link {
		font-family: var(--bebas);
		font-weight: var(--font-weight-medium);
		font-size: 32px;
		letter-spacing: 0;
		text-transform: none;
	}

	.header-nav-container .navigation .dropdown-toggle {
		width: 32px;
		font-size: 16px;
		border: none;
		background: none;
	}

	.header-nav-container .navigation .dropdown-toggle::before {
		content: '\f061';
	}

	.header-nav-container .navs > * {
		margin-top: 32px;
	}

	.header-nav-container .navs > *:first-child {
		margin-top: 0;
	}

	/*----- secondary nav(s), level 1 nav items -----*/

	.header-nav-container .navigation .nav-item-control.level-1 .dropdown-toggle {
		border: 1px solid var(--white);
		background-color: transparent;
	}

	.header-nav-container .navigation .nav-link.level-1 {
		font-size: 32px;
		text-transform: uppercase;
	}

	/*----- primary nav, level 1 nav items -----*/

	.header-nav-container .navs > *:first-child .navigation .nav-link.level-1 {
		font-weight: bold;
		font-size: 40px;
	}

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

	.navigation .dropdown-menu,
	.navigation .dropdown-menu .dropdown-menu {
		background: none;
		padding: 0 0 40px;
		margin: 0;
	}

	.navigation .dropdown-menu {
		position: absolute;
		inset: 0 auto auto calc(var(--nav-width) + 17px);
		width: calc(var(--nav-width) - 17px);
	}

	.navigation .dropdown-menu .dropdown-menu {
		inset: 0 -34px auto auto;
		transform: translateX(100%);
		width: 100%;
	}

	/* dropdowns active */

	.header-nav-container .navigation .nav-item.open > .nav-item-control .nav-link,
	.header-nav-container .navigation .nav-item.open > .nav-item-control .dropdown-toggle {
		opacity: 1;
	}

	.header-nav-container .navigation .nav-item.open > .nav-item-control .nav-link,
	.header-nav-container .navigation .nav-item.open > .nav-item-control .dropdown-toggle {
		color: var(--orange);
	}
	
	.header-nav-container .navigation .nav-item.open > .nav-item-control.level-1 .dropdown-toggle {
		background-color: var(--orange);
		border-color: var(--orange);
		color: var(--white);
	}
}

@media (min-width: 75em) {
	/*----- desktop nav -----*/
	.header-nav-container {
		--nav-width: 215px;
	}

	.header-nav-container .navigation {
		width: var(--nav-width);
	}

	.navigation .dropdown-menu {
		left: calc(var(--nav-width) + 34px);
		width: var(--nav-width);
	}

	/*----- footer nav -----*/
	.navigation-footer {
		gap: 16px 30px;
	}
}