.curated-nav-container {
	/*=============================*/
	/*=====----- GENERAL -----=====*/
	/*=============================*/

	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;

	.title {
		position: relative;
	}

	.nav-link {
		display: block;
		padding: 3px 0;
		font-family: var(--font-display);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-base);
		line-height: 1.2;
		letter-spacing: -0.08em;
		text-transform: uppercase;
		text-decoration: none;
		color: inherit;
		white-space: nowrap;
		border-bottom: 3px solid transparent;
		transition: border-bottom-color var(--transition-appendix);
	}

	.dropdown-toggle {
		position: absolute;
		inset: 50% auto auto 100%;
		translate: 0 -50%;
		padding: var(--space-1);
		margin: 0;
		font-size: var(--text-base);
		color: inherit;
		background: none;
		border: none;
		border-radius: 0;
		opacity: 0;
		visibility: hidden;
		transition:
			opacity var(--transition-appendix),
			visibility var(--transition-appendix);

		&::before {
			font: var(--fa-font-solid);
			content: '\f107';
			transition: rotate var(--transition-appendix);
		}
	}

	/*===================================*/
	/*=====----- DROPDOWN MENU -----=====*/
	/*===================================*/

	.dropdown {
		position: absolute;
		inset: calc(100% - 1px) 0 auto;
		z-index: -2;
		translate: 0 -100%;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: var(--space-10);
		padding: 44px 96px var(--space-8);
		color: var(--brown-tint);
		background-image:
			url('/includes/public/assets/shared/texture-light-brown-left.svg'),
			url('/includes/public/assets/shared/texture-light-brown-bottom-right.svg');
		background-repeat:
			no-repeat,
			no-repeat;
		background-position:
			left top,
			right bottom;
		background-size:
			auto 300px,
			auto 230px;
		background-color: var(--brown);
		opacity: 0;
		visibility: hidden;
		transition:
			translate var(--transition-appendix),
			opacity var(--transition-appendix),
			visibility var(--transition-appendix);
	}

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

	.links-col {
		order: -1;
		padding-bottom: var(--space-10);
		border-bottom: 1px solid var(--brown-tint);
	}

	.quick-links {
		display: block;
		columns: 2;
		column-gap: 66px;

		.link {
			display: block;
			max-width: max-content;
			margin-bottom: var(--space-6);
			font-size: var(--text-sm);
			letter-spacing: 0;
			text-transform: none;
		}
	}

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

	&:has(:focus-visible) {
		.nav-link {
			border-bottom-color: var(--salmon);
		}

		.dropdown-toggle {
			opacity: 1;
			visibility: visible;
			transition: none;
		}
	}
	
	&.active {
		.nav-link {
			border-bottom-color: var(--salmon);
		}

		.dropdown-toggle::before {
			rotate: x 180deg;
		}

		.dropdown {
			translate: 0 0;
			opacity: 1;
			visibility: visible;
		}
	}
	
	/*===================================*/
	/*=====----- MEDIA QUERIES -----=====*/
	/*===================================*/

	@media (hover: hover) {
		&:has(:hover) .nav-link {
			border-bottom-color: var(--salmon);
		}
	}

	@media (min-width: 80em) {
		.dropdown {
			--gap: 122px;

			grid-template-columns: repeat(2, minmax(0, 1fr));
			align-items: stretch;
			gap: var(--gap);
		}

		.links-col {
			position: relative;
			order: unset;
			padding: var(--space-5) 0;
			border: none;

			&::before {
				position: absolute;
				inset: 0 calc(100% + (var(--gap) / 2)) 0 auto;
				translate: 50% 0;
				display: block;
				width: 1px;
				content: '';
				background: var(--brown-tint);
				pointer-events: none;
			}
		}
	}

	@media (min-width: 90em) {
		.nav-link {
			font-size: var(--text-lg);
		}
	}
}