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

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

	.dropdown-helper {
		display: none;
	}
}

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

/*----- general -----*/

.menu-navs .navigation {
	.nav-item-control,
	.nav-link {
		display: flex;
		align-items: center;
	}

	.nav-link {
		min-height: 2.5rem;
		font-size: 0.9375rem;
	}

	.dropdown-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		aspect-ratio: 1;
		flex-shrink: 0;
		padding: 0;
		margin: 0;
		font-size: var(--text-base);
		line-height: var(--leading-none);
		text-align: center;
		color: inherit;
		background: none;
		border: none;
		border-radius: 0;
	}

	.icon-toggle {
		position: relative;

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

		&::after {
			position: absolute;
			inset: 50% auto auto 50%;
			translate: -50% -50%;
			font: var(--fa-font-solid);
			content: '\f068';
			opacity: 0;
		}
	}

	.dropdown-menu {
		height: 0;
		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;
		}
	}

	.dropdown-inner {
		padding: 0 var(--space-5);
		
		&.level-1 {
			position: relative;
			z-index: 2;
			padding-top: var(--space-5);
			padding-bottom: var(--space-5);
			
			&::before {
				position: absolute;
				inset: var(--space-2) 0;
				display: block;
				content: '';
				background: rgba(171, 87, 68, 0.1);
				pointer-events: none;
			}
		}
	}

	/*----- open dropdown -----*/

	.nav-item.open > .nav-item-control .icon-toggle {
		&::before {
			opacity: 0;
		}

		&::after {
			opacity: 1;
		}
	}

	.dropdown-menu.open {
		opacity: 1;
		visibility: visible;
	}
}

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

.main-nav .navigation {
	.nav-link {
		font-family: var(--font-body);
		font-weight: var(--font-weight-semibold);
		
		&.level-1,
		&.level-4 {
			font-weight: var(--font-weight-medium);
		}

		&.level-1 {
			font-family: var(--font-display);
			font-size: 1.0625rem;
			letter-spacing: -0.09em;
			text-transform: uppercase;
		}
	}
}

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

.secondary-nav .navigation {
	.nav-link {
		font-family: var(--font-body);
		font-weight: var(--font-weight-semibold);
	}
}

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

@media (min-width: 64em) {
	.menu-navs .navigation {
		.nav-link {
			font-size: var(--text-base);
		}
	}

	.main-nav .navigation {
		.nav-link {
			&.level-1 {
				font-size: var(--text-lg);
			}

			&.level-4 {
				font-size: 0.9375rem;
			}
		}
	}
}

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

.navigation-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 14px;

	.nav-link {
		font-family: var(--font-body);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-sm);
	}

	@media (hover: hover) {
		.nav-link:hover {
			text-decoration: none;
		}
	}

	@media (min-width: 64em) {
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: start;
		gap: 7px;
	}
}