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

	li {
		display: block;
		transition-duration: 0.5s;
		margin: var(--spacing) 0;

		@media (width > 768px) {
			display: inline-block;
			margin: 0;
		}

		@media (width > 1280px) {
			margin: 0 var(--spacing-div2);
		}
	}
}

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

			> a::after {
				content: url(../../images/chevron.svg);
				margin-left: 5px;
				position: relative;
				top: -2px;
			}
		}
	}

	> li {
		position: relative;
	}

	li a {
		font-family: var(--font-heading);
		text-decoration: none;
		transition: 0.3s all;
		font-weight: bold;
		display: block;

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

		@media (width > 768px) {
			font-weight: normal;
			padding: var(--spacing-div2);
		}
	}

	li.current_page_item > a {
		color: var(--blue);

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

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

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

		@media (width > 768px) {
			color: var(--purple);
		}
	}

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

	/* biome-ignore lint: Isn't an issue. */
	li li li a {
		padding-left: 30px;
	}

	> li > .sub-menu {
		margin-bottom: var(--spacing);
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.8s ease-in-out;

		@media (width > 768px) {
			visibility: hidden;
			opacity: 0;
			max-height: 0;
			position: absolute;
			transition: opacity 0.5s ease;
			left: 0;
			background-color: var(--gray-light);
			padding: var(--spacing-div2) 0;
			margin: 0;
			min-width: 375px;
		}

		.sub-menu {
			margin-bottom: 0;

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

	> li > .sub-menu--active {
		max-height: 99999px;
	}

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

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

.menu-header__btn {
	cursor: pointer;
	padding: 10px;
	position: absolute;
	right: 0;
	top: -5px;
	font-size: 0;
	line-height: 0.5;

	&::after {
		content: "+";
		font-size: var(--h4);
	}

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

.menu-header__btn--expanded {
	&::after {
		content: "-";
	}
}