/* --------------------------------------------|
|                                              |
| Main navigation                              |
|                                              |
|-------------------------------------------- */

.nav {
	font-size: var(--font-main-navigation);
}

.nav--main {
	background-color: var(--color-light);
	padding: 20px;
}

.nav.nav--hamburger {
	display: none;
}

.menu--main {
	max-width: 1200px;
	position: relative;
	margin: 0 auto 0 auto;
}

.nav ul.level-first {
	display: flex;
	column-gap: 25px;
	justify-content: center;
	/*flex-wrap:nowrap;*/
}

@media screen and (max-width: 820px) {
	.nav ul.level-first {
		column-gap: 10px;
	}
}

.nav li.level-first {
	display: flex;
	align-items: center;
}

.nav li:hover > a {
	color: var(--color-accent);
}

.nav li.active:hover a::before {
	background-color: var(--color-accent);
}

.nav li.level-first > a {
	display: block;
}

.nav li.level-first.active > a {
	position: relative;
	color: var(--color-accent);
}

/*
.nav li.level-first.active > a::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -50%;
	height: 10px;
	width: 10px;
	background-color: var(--color-grey-light);
	border-radius: 50%;
	transform: translate(-50%, 0);
}
*/

/* --------------------------------------------|
| Main navigation - second level               |
|-------------------------------------------- */

.nav--main ul.level-second {
	position: absolute;
	left: 0;
	bottom: -112px;
	width: auto;
	transform: translateY(100%);
	display: flex;
	column-gap: 1px;
	justify-content: center;
	font-size: 15px;
	text-transform: uppercase;
}

.nav--main li.level-second {
	display: flex;
	align-items: center;
	position: relative;
	background-color: var(--color-accent);
	color: var(--color-light);
}

.nav--main li.level-second > a {
	white-space: nowrap;
	padding: 12px 10px 12px 10px;
}

.nav--main li.level-second:hover > a {
	color: var(--color-grey-light);
}

.nav--main li.level-second.active {
	opacity: 0.1;
}

/* --------------------------------------------|
|                                              |
| Sub navigation                               |
|                                              |
|-------------------------------------------- */

.menu--sub {
	display: flex;
	gap: 10px;
	justify-content: left;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

@media screen and (max-width: 650px) {
	.menu--sub {
		justify-content: center;
		margin-bottom: 30px;
	}
}

.menu--sub a {
	padding: 8px;
	color: white;
	background-color: var(--color-accent-light);
	font-weight: 700;
	font-size: 16rem;
	line-height: 1.4rem;
}

.menu--sub a:hover,
.menu--sub a.active {
	background-color: var(--color-accent-dark);
	color: white !important;
}

.icon--external {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: -5px;
}