header {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
}
body.admin-bar header {
	top: 32px;
}

body.home header {
	position: fixed;
	background-color: transparent;
}

body:not(.home) header,
header:has(.ws-header--scrolled-down, .ws-header--nav-opened) {
	background-color: var(--ap-background-1) !important;
}

header:has(.ws-header--scrolled-down) {
	box-shadow: 0 0 10px rgb(0 0 0 / 3%);
}

.ws-elementor-widget-ws-header {
	padding: 25px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.ws-header__logo-link svg {
	width: 90px;
	height: 34px;
	fill: #000;
	transition: fill 0.2s ease;
}
body.home header:not(:has(.ws-header--scrolled-down, .ws-header--nav-opened)) .ws-header__logo-link svg {
	fill: var(--ap-background-1);
}

.ws-header__nav {
	display: flex;
	align-items: baseline;
	gap: 37px;
	justify-content: flex-end;
	list-style: none;
}

.ws-header__nav li a {
	color: var(--ap-background-1);
	font-family: "Plus Jakarta Sans";
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 135%;
	letter-spacing: -0.36px;
	text-decoration: none;
	transition:
		opacity 0.2s ease,
		color 0.2s ease;
}
body:not(.home) .ws-header__nav li a,
header:has(.ws-header--scrolled-down, .ws-header--nav-opened) .ws-header__nav li a {
	color: #000;
}

.ws-header__nav li a:hover {
	opacity: 0.7;
}

/* -------- */

.ws-header__burger {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	min-width: 25px;
	width: 25px;
	height: 17px;
	padding: 8px;
	cursor: pointer;
	box-sizing: content-box !important;
	transition: opacity 0.2s ease;

	&:hover {
		opacity: 0.7;
	}

	span {
		display: block;
		height: 1px;
		border-radius: 99px;
		background-color: var(--ap-background-1);
	}
}

:is(.ws-header--scrolled-down, .ws-header--nav-opened, body:not(.home)) .ws-header__burger span {
	background-color: #000;
}

.ws-header--nav-opened .ws-header__burger span {
	&:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	&:nth-child(2) {
		opacity: 0;
	}

	&:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}
}

/* ----- */

@media (max-width: 782px) {
	body.admin-bar header {
		top: 46px;
	}
}

@media (max-width: 767px) {
	.ws-elementor-widget-ws-header {
		justify-content: flex-start;
		padding-left: 18px !important;
		row-gap: 45px;
		flex-wrap: wrap;
	}

	.ws-header__burger {
		display: flex;
	}

	.ws-header__nav {
		opacity: 0;
		visibility: hidden;
		width: 0;
		flex-direction: column;
		position: absolute;

		li a {
			display: block;
			opacity: 0;
			transform: translateY(-20px);
			transition:
				opacity 0.2s ease-in,
				transform 0.2s ease-in;
		}
	}

	/* ---- */

	body:has(.ws-header--nav-opened) {
		overflow: hidden;
	}

	header:has(.ws-header--nav-opened) {
		position: fixed;
		background-color: var(--ap-background-1) !important;
		bottom: 0;
	}

	.ws-header--nav-opened {
		.ws-header__nav {
			opacity: 1;
			visibility: visible;
			position: static;
            width: 100%;

			li a {
				opacity: 1;
				transform: translateY(0);
				transition:
					opacity 0.3s ease-out calc(var(--transition-delay) + 0.2s),
					transform 0.3s ease-out calc(var(--transition-delay) + 0.2s);
			}
		}
	}
}

@media (max-width: 600px) {
	header:has(.ws-header--scrolled-down) {
		top: 0 !important;
	}
}
