/**
 * ----------------------------------------------------------------------------------------
 * Wooptima | Megamenu
 * ----------------------------------------------------------------------------------------
 * Top-level links (.wa-header__nav), the full-width panel and its content.
 * ----------------------------------------------------------------------------------------
 */

.wa-megamenu {
	--wa-megamenu-gap: var(--space-xxl);
	--wa-megamenu-offset: var(--space-xs); /* Space between the link and the header bottom edge */
	--wa-megamenu-img-size: 4.5rem;
	--wa-megamenu-transition: .3s cubic-bezier(0.28, 0.75, 0.22, 0.95);
	--wa-megamenu-shadow: 3px 3px 30px rgb(189 213 213 / 40%);
}

/* Panel is positioned against the whole header block (full width) */
.wa-header:has(.wa-megamenu) {
	position: relative;
}

.wa-megamenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wa-megamenu__list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wa-megamenu-gap);
}

.wa-megamenu__item {
	position: static;
}

/* Top-level link */
.wa-header__nav {
	display: flex;
	flex-direction: row;
	gap: var(--space-xs);
	align-items: center;
	position: relative;
	padding: var(--space-xs) var(--space-s);
	transition: background-color .2s ease-in-out;
}

/* Hover and open panel give the link a white background */
.wa-header__nav:hover,
.wa-megamenu:not(.wa-megamenu--js) .wa-megamenu__item--has-children:hover > .wa-header__nav,
.wa-megamenu:not(.wa-megamenu--js) .wa-megamenu__item--has-children:focus-within > .wa-header__nav,
.wa-megamenu__item--is-open > .wa-header__nav {
	background-color: var(--white);
}

/* Open panel - white background runs down to the panel, so the link reads as an open tab */
.wa-megamenu:not(.wa-megamenu--js) .wa-megamenu__item--has-children:hover > .wa-header__nav::after,
.wa-megamenu:not(.wa-megamenu--js) .wa-megamenu__item--has-children:focus-within > .wa-header__nav::after,
.wa-megamenu__item--is-open > .wa-header__nav::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1000; /* Above the panel, covers the subpixel seam */
	height: calc(var(--wa-megamenu-offset) + 1px);
	background-color: var(--white);
}

.wa-header__nav img {
	width: var(--wa-megamenu-img-size);
	height: var(--wa-megamenu-img-size);
	min-width: var(--wa-megamenu-img-size);
	min-height: var(--wa-megamenu-img-size);
	transition: .2s all ease-in-out;
}

.wa-header__nav span {
	font-weight: 700;
	font-size: var(--text-l);
	color: var(--base);
	transition: .2s all ease-in-out;
}

/* Hover, current page, active ancestor and open panel keep the label highlighted */
.wa-header__nav:hover span,
.wa-header__nav[aria-current="page"] span,
.wa-megamenu__item--is-active > .wa-header__nav span,
.wa-megamenu__item--is-open > .wa-header__nav span {
	color: var(--primary-dark);
}

/* Image zoom only on interaction, not on the current page */
.wa-header__nav:hover img,
.wa-megamenu__item--is-open > .wa-header__nav img {
	transform: scale(1.03);
}

/* Panel */
.wa-megamenu__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: var(--white);
	box-shadow: var(--wa-megamenu-shadow);
	visibility: hidden;
	opacity: 0;
	clip-path: inset(0 0 100% 0);
	transition: clip-path var(--wa-megamenu-transition), opacity var(--wa-megamenu-transition), visibility 0s linear .3s;
}

/* Hover bridge over the header bottom padding, so the panel does not close on the way down */
.wa-megamenu__panel::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	height: var(--wa-megamenu-offset);
}

.wa-megamenu:not(.wa-megamenu--js) .wa-megamenu__item--has-children:hover > .wa-megamenu__panel,
.wa-megamenu:not(.wa-megamenu--js) .wa-megamenu__item--has-children:focus-within > .wa-megamenu__panel,
.wa-megamenu__item--is-open > .wa-megamenu__panel {
	visibility: visible;
	opacity: 1;
	clip-path: inset(0 0 -5rem 0); /* Keep the bottom shadow visible */
	transition: clip-path var(--wa-megamenu-transition), opacity var(--wa-megamenu-transition), visibility 0s;
}

.wa-megamenu__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-l);
	width: min(100% - var(--gutter) * 2, var(--wa-page-container-width)); /* Aligned with the header content, gutter on narrow viewports */
	margin-inline: auto;
	padding: var(--space-l) 0 var(--space-s);
}

.wa-megamenu__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
	gap: var(--space-l);
}

/* Child (2nd level) - same look as the top-level links */
.wa-megamenu__child {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.wa-megamenu__child-link {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-xs);
}

.wa-megamenu__child-img {
	width: calc(var(--wa-megamenu-img-size) * 0.85);
	height: calc(var(--wa-megamenu-img-size) * 0.85);
	min-width: calc(var(--wa-megamenu-img-size) * 0.85);
	min-height: vcalc(var(--wa-megamenu-img-size) * 0.85);
	object-fit: contain;
	transition: .2s all ease-in-out;
}

.wa-megamenu__child-label {
	font-weight: 700;
	font-size: calc(var(--text-l) * 0.9);
	color: var(--base);
	transition: .2s all ease-in-out;
}

.wa-megamenu__child-link:hover .wa-megamenu__child-img,
.wa-megamenu__child--is-active > .wa-megamenu__child-link .wa-megamenu__child-img {
	transform: scale(1.03);
}

.wa-megamenu__child-link:hover .wa-megamenu__child-label,
.wa-megamenu__child--is-active > .wa-megamenu__child-link .wa-megamenu__child-label {
	color: var(--primary-dark);
}

/* Grandchildren (3rd level) - text links aligned with the child label */
.wa-megamenu__sublist {
	display: flex;
	flex-direction: column;
	gap: calc(var(--space-xs) * .5);
	padding-left: calc(var(--wa-megamenu-img-size) + var(--space-xs)) !important;
}

.wa-megamenu__sublink {
	color: var(--base);
	transition: .2s all ease-in-out;
}

.wa-megamenu__sublink:hover,
.wa-megamenu__subitem--is-active > .wa-megamenu__sublink {
	color: var(--primary-dark);
}

/* Show all */
.wa-megamenu__footer {
	display: flex;
	justify-content: flex-end;
	padding-top: var(--space-s);
	border-top: 1px solid var(--primary);
}

.wa-megamenu__all {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--space-xs) * .5);
	font-weight: 700;
	color: var(--base);
	transition: .2s all ease-in-out;
}

.wa-megamenu__all::after {
	content: "";
	width: .7rem;
	height: 1.2rem;
	background-color: currentColor;
	-webkit-mask: url(../../../assets/icons/arrow-right.svg) center / contain no-repeat;
	mask: url(../../../assets/icons/arrow-right.svg) center / contain no-repeat;
	transition: .2s all ease-in-out;
}

.wa-megamenu__all:hover {
	color: var(--primary-dark);
}

.wa-megamenu__all:hover::after {
	transform: translateX(.3rem);
}

@media (prefers-reduced-motion: reduce) {

	.wa-megamenu__panel,
	.wa-megamenu__item--is-open > .wa-megamenu__panel {
		transition: none;
	}
}