/*
 * Mega menu (tavola XD "MEGAMENù") — grafica dei pannelli del menu principale.
 *
 * Markup dal walker wbg_megamenu_navwalker (templates-custom/menu/
 * primary_nav_transparent/): il pannello resta un .dropdown-menu dentro
 * .btn-group, aperto/chiuso dall'hover jQuery del tema (common.js -> .show).
 * Enqueue in private.php dopo core.css/restyle.css. Solo front-end.
 *
 * Misure ricavate dal JSON della tavola (artboard 1920, contenuto 1512) e
 * riportate al container del sito (1140) con fattore ~0.75:
 *   titolo colonna  Montserrat Bold 24  -> 1.125rem/700 nero
 *   tagline         Montserrat Bold 17  -> .8rem/700 verde #227c26
 *   descrizione     Montserrat Med. 19  -> .9rem/500 nero
 *   lista collezioni Montserrat Med. 19 -> .9rem/500 #171616, uppercase
 *   foto pannello 430x470 (28,5% del container), thumb colonna 189x170.
 * Con foto laterale le colonne stanno a 2 per riga (AZIENDA 2x2, TECNO 2x1).
 *
 * Posizionamento: position:fixed con top:auto = "static position" del
 * pannello (subito sotto la voce di menu, il btn-group e' d-block), mentre
 * left/right:0 lo estendono a tutta la viewport -> pannello full-bleed senza
 * toccare i position degli antenati (la .w-100.position-relative della nav
 * ancora anche .search-box: meglio non cambiarla). Essendo l'header fisso,
 * la static position resta corretta anche a pagina scrollata.
 */

@media (min-width: 992px) {

	/* Il tema da' opacity:.9 a OGNI .navbar (velo del menu): il pannello,
	   discendente di due navbar annidate, verrebbe mostrato a ~0.81 e il
	   contenuto pagina traspare. L'opacita' non si puo' annullare nei figli:
	   la portiamo a 1 sull'intera catena solo MENTRE un pannello e' aperto. */
	.navbar:has(.wbg-megamenu.show) {
		opacity: 1;
	}

	.navbar-nav li.wbg-mm .wbg-megamenu {
		position: fixed;
		top: auto;
		left: 0;
		right: 0;
		margin: 0;
		border: 0;
		border-radius: 0;
		/* ponte trasparente sul gap tra fondo voce e pannello: e' parte del
		   pannello (discendente del li) -> l'hover non si interrompe
		   attraversandolo. background-clip lo tiene trasparente. */
		border-top: 0.85rem solid transparent;
		background-clip: padding-box;
		background-color: #fff;
		box-shadow: 0 22px 34px -16px rgba(0, 0, 0, 0.28);
		padding: 4rem 0 3.4rem; /* aria sopra i titoli come in tavola */
		text-align: left;
		text-transform: none;
		/* schermi bassi: il pannello scrolla invece di uscire dallo schermo */
		max-height: calc(100vh - 150px);
		overflow-y: auto;
	}

	.wbg-mm-inner {
		display: flex;
		align-items: stretch;
		gap: 3.5rem; /* XD: 78px tra foto e prima colonna (~59 al 75%) */
	}

	/* foto laterale del pannello (campo immagine sulla voce di primo livello);
	   display:flex + img flex:1 = la foto riempie l'altezza delle colonne
	   (height:100% su flex item stretchato non e' affidabile) */
	.wbg-mm-media {
		flex: 0 0 28.5%; /* XD: 430/1512 */
		max-width: 28.5%;
		display: flex;
	}

	.wbg-mm-media img {
		width: 100%;
		flex: 1;
		min-height: 0;
		max-height: 355px; /* XD: 470px al 75% */
		object-fit: cover;
	}

	.wbg-mm-cols {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		align-items: flex-start;
		gap: 2.25rem;
	}

	/* pannelli con foto (AZIENDA, TECNOLOGIA): colonne a 2 per riga */
	.wbg-mm-has-media .wbg-mm-cols {
		flex-wrap: wrap;
		column-gap: 2.75rem;
		row-gap: 3rem;
	}

	.wbg-mm-has-media .wbg-mm-col {
		flex: 0 0 calc(50% - 1.375rem);
	}

	.wbg-mm-col {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 2.5rem; /* spazio tra voci accodate (mm_stack, es. Toppers/Federe) */
	}

	.wbg-mm-desc {
		color: #000;            /* XD: Montserrat Medium nero */
		font-weight: 500;
		font-size: 0.9rem;      /* XD 19px */
		line-height: 1.45;
		margin: 0;
	}

	.wbg-mm-img {
		width: calc(100% - 20px); /* quadrata, lato ~20px < larghezza colonna */
		aspect-ratio: 1 / 1;    /* altezza = larghezza */
		height: auto;
		object-fit: cover;
		display: block;
		margin: 1.2rem 0 1.3rem; /* XD: ~30px sopra e sotto la thumb */
	}

	.wbg-mm-list {
		margin: 1.2rem 0 0;     /* XD: ~30px tra titolo e lista */
	}

	.wbg-mm-list li {
		margin-bottom: 0.65rem;
	}
}

/* --- stili comuni (desktop e mobile) ------------------------------------ */

.wbg-mm-title {
	display: block;
	font-weight: 700;       /* XD: Montserrat Bold 24 */
	font-size: 1.125rem;
	color: #000;
	margin-bottom: 0.45rem;
}

.wbg-mm-title:hover {
	color: #227c26; /* verde della tavola XD */
	text-decoration: none;
}

/* Tagline verde: stesso corpo della descrizione sotto (doc Federica: "mettere
 * gli attuali sottotitoli verdi con lo stesso corpo del testo sotto, sempre
 * lasciandolo in bold"), e cliccabile come il titolo della colonna. */
.wbg-mm-tagline,
a.wbg-mm-tagline:link,
a.wbg-mm-tagline:visited {
	display: block;
	color: #227c26;         /* XD: Montserrat Bold 17 verde */
	font-weight: 700;
	font-size: 0.9rem;      /* = .wbg-mm-desc */
	line-height: 1.2;       /* interlinea piu' stretta: righe piu' vicine */
	margin-bottom: 0.9rem;
	text-decoration: none;
}

a.wbg-mm-tagline:hover,
a.wbg-mm-tagline:focus {
	color: #1b641e;
	text-decoration: underline;
}

/* Box foto della colonna: link alla stessa pagina del titolo. */
a.wbg-mm-imglink {
	display: block;
	text-decoration: none;
}

a.wbg-mm-imglink .wbg-mm-img {
	transition: opacity 0.2s ease;
}

a.wbg-mm-imglink:hover .wbg-mm-img {
	opacity: 0.85;
}

.wbg-mm-sublink {
	font-size: 0.9rem;      /* XD: Montserrat Medium 19 */
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #171616;
}

.wbg-mm-sublink:hover {
	color: #227c26;
	text-decoration: underline;
}

/* --- mobile: il pannello degrada a lista semplice ------------------------ */

@media (max-width: 991.98px) {

	/* come gli altri dropdown mobile (il walker padre aggiunge text-center,
	   il pannello no: lo centriamo qui) */
	.wbg-megamenu {
		text-align: center;
	}

	/* niente contenuti "editoriali" nel menu mobile: solo i link */
	.wbg-megamenu .wbg-mm-media,
	.wbg-megamenu .wbg-mm-tagline,
	.wbg-megamenu .wbg-mm-desc,
	.wbg-megamenu .wbg-mm-imglink,
	.wbg-megamenu .wbg-mm-img {
		display: none;
	}

	.wbg-mm-inner,
	.wbg-mm-cols,
	.wbg-mm-col,
	.wbg-mm-entry {
		display: block;
	}

	.wbg-mm-title {
		padding: 0.4rem 0;
		margin-bottom: 0;
		font-size: 1rem;
		font-weight: 500; /* come le altre voci del menu mobile (restyle.css) */
	}

	.wbg-mm-list {
		margin: 0 0 0.35rem;
	}

	.wbg-mm-list li {
		margin: 0.15rem 0;
	}

	.wbg-mm-sublink {
		display: block;
		padding: 0.15rem 0;
		font-size: 0.75rem;
	}
}