/*===============================*/
/*=====----- MAIN MENU -----=====*/
/*===============================*/

.main-nav-container .navigation,
.secondary-nav-container .navigation,
.footer-nav-container .navigation {
	&,
	.dropdown-inner {
		display: flex;
		flex-direction: column;
	}

	.nav-item-control {
		display: flex;
		align-items: center;
		min-height: 2rem;
	}

	.nav-link {
		font-family: var(--font-body);
		font-weight: var(--font-weight-medium);
		font-size: var(--text-base);
		line-height: var(--leading-none);
		text-decoration: none;
	}

	.dropdown-toggle {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2rem;
		aspect-ratio: 1;
		flex-shrink: 0;
		padding: 0;
		margin: 0;
		font-size: 0.625rem;
		line-height: var(--leading-none);
		background: none;
		border: none;
		border-radius: 0;

		&::before,
		&::after {
			font: var(--fa-font-solid);
			transition: opacity var(--transition-appendix);
		}

		&::before {
			content: '\2b';
		}

		&::after {
			position: absolute;
			inset: 50% auto auto 50%;
			translate: -50% -50%;
			content: '\f068';
			opacity: 0;
		}

		&.open {
			&::before {
				opacity: 0;
			}
	
			&::after {
				opacity: 1;
			}
		}
	}

	.dropdown-menu {
		height: 0;
		padding-left: var(--space-5);
		opacity: 0;
		visibility: hidden;
		overflow: hidden;
		transition:
			height var(--transition-appendix),
			opacity var(--transition-appendix),
			visibility var(--transition-appendix);

		&:not(.open),
		&:not(.open) * {
			pointer-events: none;
		}

		&.open {
			opacity: 1;
			visibility: visible;
		}
	}
}

.main-nav-container .navigation,
.secondary-nav-container .navigation {
	.icon {
		display: none;
	}

	.nav-link {
		color: var(--gray);
	}

	.dropdown-toggle {
		color: var(--red);
	}
}

/*----- main nav -----*/

.main-nav-container .navigation {
	gap: 1px;

	.nav-item-control.level-1 {
		min-height: 2.5rem;
	}

	.nav-link.level-1 {
		font-size: var(--text-lg);
		font-weight: var(--font-weight-bold);
		text-transform: uppercase;
		color: var(--gray-dark);
	}

	.dropdown-toggle.level-1 {
		width: 2.5rem;
		font-size: var(--text-sm);
	}
}

/*----- bottom nav -----*/

.footer-nav-container .navigation {
	.dropdown-toggle,
	.nav-link {
		color: var(--white);
	}

	.nav-link:has(.icon) {
		display: inline-flex;
		align-items: baseline;
		gap: 10px;
	}

	.icon {
		color: var(--blue-light);
	}

	*:focus-visible {
		outline-color: var(--white);
	}
}

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

@media (min-width: 64em) {
	.main-nav-container .navigation,
	.secondary-nav-container .navigation {
		.dropdown-menu {
			position: absolute;
			inset: 0 0 auto auto;
			width: calc(50% - 50px);
		}
		
		.dropdown-menu .dropdown-menu {
			position: static;
			width: 100%;
		}
		
		.dropdown-inner {
			gap: 6px;
		}
	}

	.secondary-nav-container .navigation {
		.nav-link.level-1 {
			font-size: 1.0625rem;
		}

		.dropdown-toggle.level-1 {
			font-size: var(--text-xs);
		}
	}
}

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

.navigation-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: center;

	.item,
	.nav-link {
		font-size: var(--text-base);
		line-height: var(--leading-none);
	}

	.nav-link {
		font-family: var(--font-body);
		font-weight: var(--font-weight-medium);
		text-decoration: none;
		color: var(--white);
	}

	@media (min-width: 64em) {
		align-items: start;
		gap: 13px;
		text-align: left;
	}
}