.menu-header {
	transition: height 0.5s ease-in-out;
	height: auto;
	overflow: hidden;

	@media (width > 1000px) {
		/* biome-ignore lint/complexity/noImportantStyles: in case initial use was in mobile and the inline style is still there that JS added */
		height: auto !important;
		overflow: visible;
	}

	ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}

	li {
		display: block;
		transition-duration: 0.5s;

		@media (width > 1000px) {
			display: inline-block;
		}
	}
}

.menu-header__list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
	position: relative;
	height: 100%;

	@media (width > 1000px) {
		flex-direction: row;
		gap: var(--spacing-3);
		padding-block-start: 0;

		> li:first-child > .sub-menu {
			left: 22px;
			right: auto;
		}

		> li:nth-child(2) > .sub-menu {
			left: 0;
			right: auto;
		}
	}

	> li.menu-item-has-children {
		@media (width > 1000px) {
			position: relative;
		}

		> a::after {
			content: url(../../images/chevron-blue.svg);
			height: 24px;
			width: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
				border-radius: var(--btn-radius);
			background-color: var(--white);
			color: var(--blue-300);

			@media (width > 1000px) {
				content: url(../../images/chevron.svg);
				margin-left: 5px;
				position: relative;
				top: -2px;
				height: auto;
				width: auto;
				border-radius: 0;
				color: inherit;
				background-color: transparent;
			}
		}
	}

	> li {
		@media (width > 1000px) {
			/* so hover works on dropdowns slowly. */
			padding-block-end: var(--spacing-3);
		}
	}

	li.menu-header__parent-link {
		a {
			background-color: transparent;
			font-weight: 600;

			&:hover,
			&:focus-visible {
				color: var(--blue-250);
				background-color: transparent;
			}
		}

		@media (width > 1000px) {
			display: none;
		}
	}

	li a {
		text-decoration: none;
		transition: 0.3s all;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: var(--gray-400);
		font-size: var(--step--0);
		white-space: nowrap;
		border-radius: 6px;
		background: var(--blue-50);
		padding: var(--spacing-5);

		&:hover,
		&:focus {
			background-color: var(--blue-250);
			color: var(--white);
		}

		@media (width > 1000px) {
			border-radius: var(--btn-radius);
			font-weight: 600;
			font-size: var(--step--1);
			padding: var(--spacing-10) var(--spacing-5);
			color: var(--white);
			background-color: transparent;
		}

		@media (width > 1200px) {
			padding: var(--spacing-10);
		}
	}

	li.current_page_item > a,
	> li.current-menu-ancestor > a {
		color: var(--white);
		background-color: var(--blue-250);

		&:hover,
		&:focus {
			background-color: var(--blue-300);
			color: var(--white);
		}
	}

	li li {
		display: block;
		margin: 0;
	}

	/* biome-ignore lint: Isn't an issue. */
	li li a {
		font-weight: normal;
		font-size: 1rem;
		color: var(--gray-400);
		font-family: var(--font-body);
		display: block;
		padding: var(--spacing-5) var(--spacing-10);
		margin: 0;

		@media (width > 1000px) {
			color: var(--gray-100);
		}
	}

	li li a:hover,
	li li a:focus {
		@media (width > 1000px) {
			color: var(--white);
		}
	}

	/* biome-ignore lint: Isn't an issue. */
	li li li a {
		&::before {
			content: '– ';
			margin-right: var(--spacing-3);
			color: var(--white);
		}
	}

	> li > .sub-menu {
		overflow: hidden;
		transition: left 0.3s ease-in-out;
		z-index: 10;
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(100% + var(--spacing-10));
		width: 100%;
		background-color: var(--white);
		flex-direction: column;
		gap: var(--spacing-3);

		@media (width > 1000px) {
			display: none;
			overflow: visible;
			flex-direction: column;
			gap: var(--spacing-3);
			visibility: hidden;
			opacity: 0;
			max-height: 99999px;
			position: absolute;
			transition: opacity 0.5s ease;
			left: auto;
			right: 0;
			top: 100%;
			min-width: 375px;
			padding: var(--spacing-3);
			bottom: auto;
			border-radius: 0 0 var(--border-radius) var(--border-radius);
			background-color: rgba(0, 0, 0, 0.2);
			backdrop-filter: blur(16px);
		 -webkit-backdrop-filter: blur(16px);
			border: 1px solid rgba(255, 255, 255, 0.30);
			width: auto;

			> li:not(.menu-header__parent-link) {
				display: flex;
				flex-direction: column;
				gap: var(--spacing-3);
			}
		}

		.sub-menu {
			margin-bottom: 0;

			@media (width > 1000px) {
				visibility: visible;
				opacity: 1;
				position: static;
				display: flex;
				padding: 0;
				max-height: 99999px;
			}
		}
	}

	> li > .sub-menu--active {
		left: 0;
	}

	@media (width > 1000px) {
		li:hover > .sub-menu,
		li:focus-within > .sub-menu {
			visibility: visible;
			opacity: 1;
			display: flex;
			max-height: 99999px;

			.sub-menu {
				display: block;
			}
		}

		> li.js-menu-item-right > .sub-menu {
			left: auto;
			right: 0;
		}
	}
}

.menu-header__back-btn {
	text-align: start;
	align-self: start;
	padding: var(--spacing-5);

	@media (width > 1000px) {
		display: none;
	}
}