/* Mega menu style */

/* Show / Hide menu
========================================================================== */

@media (min-width: 1201px) {
	.mega-menu {
		display: block;
	}

	#toggle-hamburger {
		display: none;
	}

	.mega-menu-mobile {
		display: none;
	}

	/* Overlay */
	.mega-menu-overlay-desktop {
		opacity: 0;
		pointer-events: none;
	}
}

@media (max-width: 1200px) {
	.mega-menu {
		display: none;
	}

	#toggle-hamburger {
		display: flex;
	}

	.mega-menu-mobile {
		display: block;
	}

	/* Overlay */
	.mega-menu-overlay-mobile {
		top: 0;
		opacity: 1;
	}
}

/* Utility classes
========================================================================== */

/* Font sizes */

/* Spacings */

/* Desktop menu
========================================================================== */

/* Mega menu CTA */
header .menu .menu-cta {
	position: relative;
}

header .menu .menu-item.menu-cta a {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--xs) !important;
	background-color: var(--wp--preset--color--teal);
	border-radius: 10px;
	text-decoration: none;
}

.mega-menu .menu-item.mega-menu-column:has(.menu-cta) {
	padding: 0;
}

header .menu .menu-item .mega-menu-image-text::before {
	content: url("../images/icon-arrow-teal.svg");
	background: var(--wp--preset--color--dark-teal);
	color: var(--wp--preset--color--teal);
	width: 33px;
	height: 33px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	margin-right: var(--wp--preset--spacing--s);
	border-radius: 10px;
}

header .menu .menu-item .mega-menu-image-text {
	opacity: 1;
	position: relative;
	transform: none;
	top: 0;
	left: 0;
	background-color: var(--wp--preset--color--white);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
	border-radius: 10px;
	font-weight: 500;
	font-size: 14px;
}

header .menu .menu-item .mega-menu-image {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	height: 100%;
	padding: 0;
}

header .menu .menu-item .mega-menu-image img {
	object-fit: cover;
	border-radius: 10px;
}

header .mega-menu .menu-cta .mega-menu-image-overlay {
	display: none;
}

/* Sub menu - First level */

@media (min-width: 1201px) {
	.mega-menu-item > .sub-menu > .menu-item {
		margin-left: unset;
		margin-right: unset;
	}

	header .menu .menu-item.menu-label {
		opacity: 0.4;
	}

	header .menu .sub-menu > .menu-item:not(.menu-cta) :is(span, a) {
		padding-left: 0;
		padding-right: 0;
	}

	header .menu .menu-item.menu-label span {
		padding-bottom: var(--wp--preset--spacing--s);
		cursor: auto;
		display: block;
	}

	.sub-menu .menu-item a:hover {
		text-underline-position: under;
		text-decoration-skip-ink: none;
		cursor: pointer;
		text-decoration: underline;
	}

	.mega-menu .mega-menu-item > .sub-menu {
		padding: calc(var(--wp--preset--spacing--xl) / 2) var(--wp--preset--spacing--l);
	}

	.mega-menu-item.menu-item-has-children > .sub-menu {
		max-width: 100%;
	}

	.mega-menu .menu-item.mega-menu-column {
		max-width: calc(var(--wp--custom--maxwidth--default) / 3);
	}

	.mega-menu-item.menu-item-has-children .sub-menu:has(.mega-menu-column) {
		justify-content: center;
	}
}

/* Sub menu - Second level */

/* Mobile menu
========================================================================== */

.mega-menu-mobile .mega-menu-back .submenu-heading {
	font-size: var(--wp--preset--font-size--m);
}

header .mega-menu-mobile .menu .menu-item a,
header .mega-menu-mobile .menu .menu-item span {
	padding: 0;
}

header .mega-menu-mobile .menu .menu-item.menu-label span {
	opacity: 0.4;
	display: block;
}

header .mega-menu-mobile .menu .menu-item a:hover {
	text-decoration: underline;
}

/* header .mega-menu-mobile .menu .menu-item a:hover {
	background-color: transparent;
} */

header .mega-menu-mobile .menu > .menu-item > a,
header .mega-menu-mobile .menu > .menu-item > span,
header .mega-menu-mobile .menu > .menu-item.menu-item-has-children > :is(a, span) {
	padding: 0;
}

header .mega-menu-mobile .menu > .menu-item > a:hover,
header .mega-menu-mobile .menu > .menu-item > span:hover,
header .mega-menu-mobile .menu > .menu-item.is-open > :is(a, span) {
	background-color: transparent;
	border-radius: 0;
}