/* =========================================================================
   Mega menu — Impreza (UpSolution) / idevax.com
   Alleen CSS. Plak in Impreza > Theme Options > Custom CSS, of in style.css
   van je child theme.

   Voorwaarden:
   1. Het top-level menu-item heeft de CSS-klasse  mega-menu
      (staat al op "Applications", menu-item-3774).
   2. Zet Theme Options > Menu > dropdown-animatie op "fade" (niet "height").
      De height-animatie zet inline styles op de  en die winnen van CSS.

   Selectors volgen de echte Impreza-markup: .w-nav-list.level_2 / .level_3,
   NIET .sub-menu (die klasse bestaat in dit thema niet).
   Alles is gescoped op .type_desktop, zodat het mobiele accordeon van
   Impreza — inclusief de bestaande .w-nav-arrow toggle — onaangeroerd blijft.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Paneel over de volle breedte van de menubalk
   ------------------------------------------------------------------------- */

.w-nav.type_desktop .w-nav-list.level_1 {
	position: relative;
}

.w-nav.type_desktop .mega-menu.w-nav-item.level_1 {
	position: static;
}

.w-nav.type_desktop .mega-menu > .w-nav-list.level_2 {
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;

	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem 2.5rem;
	align-items: start;

	padding: 2rem !important;
}

/* -------------------------------------------------------------------------
   2. Derde niveau uitklappen tot een lijstje onder de kolomkop
   ------------------------------------------------------------------------- */

.w-nav.type_desktop .mega-menu .w-nav-list.level_3 {
	position: static !important;
	display: block !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: .4rem 0 0 !important;
	padding: 0 !important;

	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;

	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	transition: none !important;
	pointer-events: auto !important;
}

/* -------------------------------------------------------------------------
   3. Typografie binnen het paneel
   ------------------------------------------------------------------------- */

/* Kolomkop */
.w-nav.type_desktop .mega-menu > .w-nav-list.level_2 > .w-nav-item > .w-nav-anchor.level_2 {
	font-weight: 600;
}

/* De pijltjes bij de kolomkoppen zijn overbodig zodra niveau 3 openstaat.
   Dit haalt meteen de klikbare toggle weg die het paneel kon dichtklappen. */
.w-nav.type_desktop .mega-menu .w-nav-anchor.level_2 .w-nav-arrow {
	display: none !important;
}

.w-nav.type_desktop .mega-menu .w-nav-anchor.level_3 {
	padding-top: .25rem !important;
	padding-bottom: .25rem !important;
	font-weight: 400;
}

/* -------------------------------------------------------------------------
   4. OPTIONEEL — alleen nodig als je de height-animatie NIET kunt uitzetten.
      Werkt het paneel hierna permanent open te staan? Haal dit blok weg.
   ------------------------------------------------------------------------- */

/*
.w-nav.type_desktop .mega-menu > .w-nav-list.level_2,
.w-nav.type_desktop .mega-menu .w-nav-list.level_3 {
	height: auto !important;
	overflow: visible !important;
}
*/