.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: max(24px, 1.875vw) 0;
	z-index: 999;
}

.site-header .site-branding {
	display: flex;
	grid-area: 1/1/1/span 3;
	position: absolute;
	top: 0%;
	transform: translateY(0%);
	left: 0;
	transition: var(--def-trans);
	margin-left: calc(var(--grid-margin) + (var(--grid-gap) * 2)); 
}

.site-header.scrolled .site-branding {
	display: flex;
	margin-left: var(--grid-gap);
}

.site-header .site-branding img {
	width: auto;
	height: max(48px, 6.09375vw);
	transition: var(--def-trans);
}

body:has(.home-intro) .site-header:not(.scrolled) .site-branding {
	top: max(32px, 3.4375vw);
}

body:has(.home-intro) .site-header:not(.scrolled) .site-branding img {
	height: max(64px, 9.21875vw);
}

.site-header.scrolled .site-branding img {
	height: max(48px, 3.25vw);
}

.site-header .main-nav {
	grid-area: 1/5/1/span 9;
	display: flex;
	justify-content: flex-end;
}

.site-header .main-nav .menu {
	display: flex;
	align-items: center;
	gap: 14px;
}

.site-header .main-nav .menu li a {
	display: block;
	font-size: var(--fs-20);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: .03em;
	white-space: nowrap;
	padding: .25em .75em;
	border: 1px solid currentColor;
	border-radius: 100vmin;
	background: var(--white);
}

.site-header .main-nav .menu li a:hover,
.site-header .main-nav .menu li.current-menu-item a,
.site-header .main-nav .menu li.active a {
	background: var(--orange);
}

.site-header .wpml-ls {
	grid-area: 1/14/1/14;
	align-self: center;
	justify-self: center;
	font-size: var(--fs-20);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: .03em;
}

@media (max-width: 1799.98px) {
	.site-header .main-nav {
		grid-area: 1/5/1/span 8;
	}

	.site-header .wpml-ls {
		grid-area: 1/13/1/13;
	}
}

@media (max-width: 1199.98px) {
	.site-header .wpml-ls {
		grid-area: 1/12/1/12;
	}

	.site-header .main-nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100dvh;
		background: var(--white);
		justify-content: center;
		transform: translateY(-100%);
		transition: var(--def-trans);
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr auto 1fr;
	}

	.site-header.toggled .main-nav {
		transform: translateY(0%);
	}

	.site-header .main-nav .menu {
    	grid-area: 2/1/2/1;
		flex-direction: column;
		justify-content: center;
	}
	
	.site-header .main-nav::after {
		content: "";
		display: block;
		grid-area: 3/1/3/1;
		background: var(--blue);
		aspect-ratio: 425/360;
		height: max(64px, 3.25vw);
		mask: url(../img/dolomitenconsult-logo-icon.svg) no-repeat center/contain;
		-webkit-mask: url(../img/dolomitenconsult-logo-icon.svg) no-repeat center/contain;
		justify-self: flex-end;
		align-self: flex-end;
		margin-right: var(--grid-gap);
		margin-bottom: var(--grid-gap);
	}

	.site-header .main-nav .menu li:not(.active) a:hover,
	.site-header .main-nav .menu li.current-menu-item:not(.active) a {
		background: var(--white);
	}

	.site-header .menu-toggle {
		grid-area: 1/13/1/13;
		display: block;
		width: max(44px, 2.1875vw);
		aspect-ratio: 5/4;
		align-self: center;
		justify-self: flex-end;
		z-index: 1;
		position: relative;
		background: var(--white);
		border-radius: 10px;
		padding: 12px 6px;
		border: 1px solid currentColor;
	}

	.site-header .menu-toggle .line {
		display: block;
		width: 70%;
		height: 2px;
		background: currentColor;
		position: absolute;
		top: 12px;
		left: 50%;
		transform: translateX(-50%);
		transition: var(--def-trans);
	}

	.site-header .menu-toggle .line.bottom-line {
		top: calc(100% - 12px);
	}
 
	.site-header.toggled .menu-toggle .line.top-line {
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%) rotate(45deg);
		transition-delay: .3s;
	}

	.site-header.toggled .menu-toggle .line.bottom-line {
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%) rotate(-45deg);
		transition-delay: .3s;
	}
	
	.site-header.scrolled .custom-logo-link {
		background: var(--blue);
		aspect-ratio: 425/360;
		height: max(48px, 3.25vw);
		mask: url(../img/dolomitenconsult-logo-icon.svg) no-repeat center/contain;
		-webkit-mask: url(../img/dolomitenconsult-logo-icon.svg) no-repeat center/contain;
	}

	.site-header.scrolled .site-branding img {
		display: none;
	}

	.site-header .wpml-ls {
		background: var(--white);
		border-radius: 10px;
		border: 1px solid currentColor;
		width: max(44px, 2.1875vw);
		aspect-ratio: 5/4;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}