/*
 * Approdo · pannelli del mega menu (template di Elementor o Layout nelle voci di primo livello).
 * Caricato solo se nella pagina c'è almeno un pannello. JavaScript in assets/js/mega-menu.js.
 * --ap-mega-mode: "panel" (pannello a tutta larghezza) o "accordion" (fisarmonica, su mobile):
 * il JavaScript legge questa variabile, così CSS e script decidono sempre allo stesso modo.
 * Il widget "Menu Approdo" di Approdo Kit ([data-approdo-menu]) ha stile e script propri: :where(:not(…))
 * lo esclude senza cambiare la specificità delle regole.
 */

/* ---------- Voce con pannello ---------- */
li.ap-mega--panel:where(:not([data-approdo-menu] *)) { --ap-mega-mode: panel; position: relative; display: flex; flex-wrap: wrap; align-items: center; column-gap: 2px; }
.ap-nav li.ap-mega.ap-mega--panel:where(:not([data-approdo-menu] *)) { position: relative; }
li.ap-mega.ap-mega--panel > .sub-menu:where(:not([data-approdo-menu] *)) { display: none; }

.ap-sub-toggle:where(:not([data-approdo-menu] *)) {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 28px; height: 28px; margin: 0 -6px 0 0; padding: 0; border: 0; border-radius: 50%;
	background: transparent; color: inherit; font: inherit; line-height: 1; cursor: pointer; box-shadow: none;
	transition: background-color .2s ease;
}
.ap-sub-toggle:hover:where(:not([data-approdo-menu] *)) { background: transparent; color: inherit; transform: none; }
@media (hover: hover) { .ap-sub-toggle:where(:not([data-approdo-menu] *)):hover { background: rgba(127, 127, 127, .14); } }
.ap-sub-toggle:focus-visible:where(:not([data-approdo-menu] *)) { outline: 2px solid currentColor; outline-offset: 2px; }
.ap-sub-toggle__icon:where(:not([data-approdo-menu] *)) { display: block; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.ap-sub-toggle[aria-expanded="true"] .ap-sub-toggle__icon:where(:not([data-approdo-menu] *)) { transform: rotate(180deg); }

/* ---------- Menu a tendina accanto ai pannelli (desktop) ----------
 * Con i pannelli nella pagina, le voci di primo livello con un menu a tendina normale mostrano la stessa
 * freccia (il pulsante della fisarmonica, altrimenti nascosto su desktop) e righe chiare come le liste dei pannelli. */
@media (min-width: 1025px) {
	.ap-nav > ul > li.ap-sub-acc:where(:not([data-approdo-menu] *)) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 2px; }
	.ap-nav > ul > li.ap-sub-acc > button.ap-sub-toggle--sub:where(:not([data-approdo-menu] *)) { display: inline-flex; width: 28px; height: 28px; margin: 0 -6px 0 0; border-radius: 50%; }
	.ap-nav > ul > li.ap-sub-acc > .ap-sub-toggle--sub .ap-sub-toggle__icon:where(:not([data-approdo-menu] *)) { width: 14px; height: 14px; }
	.ap-nav > ul > li.ap-sub-acc:hover > .ap-sub-toggle--sub .ap-sub-toggle__icon:where(:not([data-approdo-menu] *)),
	.ap-nav > ul > li.ap-sub-acc:focus-within > .ap-sub-toggle--sub .ap-sub-toggle__icon:where(:not([data-approdo-menu] *)) { transform: rotate(180deg); }
	.ap-nav > ul > li.ap-sub-acc.is-expanded > .sub-menu:where(:not([data-approdo-menu] *)) { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	.ap-nav > ul > li.ap-sub-acc.ap-mega.is-expanded > .sub-menu:where(:not([data-approdo-menu] *)) { transform: translate(-50%, 0); }
	.ap-nav > ul > li.ap-sub-acc:not(.ap-mega) > .sub-menu > li:where(:not([data-approdo-menu] *)) + li { border-top: 1px solid var(--ap-border, rgba(127, 127, 127, .2)); }
	.ap-nav > ul > li.ap-sub-acc:not(.ap-mega) > .sub-menu a:where(:not([data-approdo-menu] *)) { padding: 10px 0; }
}

/* ---------- Pannello a tutta larghezza (desktop) ---------- */
/* Posizione e larghezza le calcola lo script (sotto l'header, qualunque sia il contenitore). */
.ap-mega-panel:where(:not([data-approdo-menu] *)) {
	position: fixed; z-index: 990; top: var(--ap-mega-top, 0px); left: var(--ap-mega-left, 0px); width: var(--ap-mega-width, 100vw);
	max-height: calc(100vh - var(--ap-mega-vtop, 0px) - 16px); max-height: calc(100dvh - var(--ap-mega-vtop, 0px) - 16px);
	overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
	background: var(--ap-mega-bg, var(--ap-menu-bg, var(--ap-bg, #fff)));
	color: var(--ap-mega-fg, var(--ap-text, #333));
	border-top: 1px solid var(--ap-border, rgba(0, 0, 0, .08));
	box-shadow: 0 34px 50px -34px rgba(15, 20, 25, .32);
	font-family: var(--ap-font-body, inherit); font-size: var(--ap-fs, 16px); font-weight: 400; line-height: var(--ap-lh, 1.6);
	letter-spacing: normal; text-align: start; text-transform: none; white-space: normal;
	opacity: 0; visibility: hidden; transform: translateY(-10px);
	transition: opacity .3s ease, transform .45s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .45s;
}
li.is-panel-open > .ap-mega-panel:where(:not([data-approdo-menu] *)) { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* Passando da un pannello all'altro il nuovo compare senza ripartire dall'animazione. */
.ap-mega-panel.is-instant:where(:not([data-approdo-menu] *)) { transition: none; }
.ap-mega-panel__content:where(:not([data-approdo-menu] *)) { padding-top: 36px; padding-bottom: 40px; }
.ap-mega-panel > .elementor:where(:not([data-approdo-menu] *)) { width: 100%; }
/* "Ponte" invisibile tra la voce e il pannello: il mouse ci passa sopra senza chiuderlo. */
li.ap-mega--panel.is-panel-open:where(:not([data-approdo-menu] *))::after { content: ""; position: absolute; left: -10px; right: -10px; top: 100%; height: var(--ap-mega-gap, 0px); }

/* Header del tema trasparente: con il pannello aperto diventa pieno, come quando è fisso. */
.ap-transparent-header .ap-header.ap-mega-open:where(:not([data-approdo-menu] *)) { background: var(--ap-sticky-bg); color: var(--ap-sticky-fg, var(--ap-header-fg)); border-bottom-color: transparent; }
.ap-transparent-header .ap-header.ap-mega-open .ap-logo--transparent:where(:not([data-approdo-menu] *)) { opacity: 0; }
.ap-transparent-header .ap-header.ap-mega-open .ap-brand:has(.ap-logo--transparent) .ap-logo--main:where(:not([data-approdo-menu] *)) { opacity: 1; }

/* ---------- Fisarmonica (menu del tema su tablet e smartphone, menu a scomparsa, .ap-mega-accordion) ---------- */
.ap-offcanvas__nav li.ap-mega--panel:where(:not([data-approdo-menu] *)), .ap-mega-accordion li.ap-mega--panel:where(:not([data-approdo-menu] *)) { --ap-mega-mode: accordion; }
.ap-offcanvas__nav li.ap-mega--panel > a:where(:not([data-approdo-menu] *)), .ap-mega-accordion li.ap-mega--panel > a:where(:not([data-approdo-menu] *)) { flex: 1 1 0; min-width: 0; }
.ap-offcanvas__nav li.ap-mega--panel > .ap-sub-toggle:where(:not([data-approdo-menu] *)), .ap-mega-accordion li.ap-mega--panel > .ap-sub-toggle:where(:not([data-approdo-menu] *)) { width: 44px; height: 44px; margin-right: -10px; }
.ap-offcanvas__nav li.ap-mega--panel > .ap-sub-toggle .ap-sub-toggle__icon:where(:not([data-approdo-menu] *)), .ap-mega-accordion li.ap-mega--panel > .ap-sub-toggle .ap-sub-toggle__icon:where(:not([data-approdo-menu] *)) { width: 18px; height: 18px; }
.ap-offcanvas__nav li.ap-mega.ap-mega--panel.is-expanded > .sub-menu:where(:not([data-approdo-menu] *)), .ap-mega-accordion li.ap-mega.ap-mega--panel.is-expanded > .sub-menu:where(:not([data-approdo-menu] *)) { display: block; flex: 0 0 100%; }
.ap-offcanvas__nav .ap-mega-panel:where(:not([data-approdo-menu] *)), .ap-mega-accordion .ap-mega-panel:where(:not([data-approdo-menu] *)) {
	position: static; flex: 0 0 100%; width: auto; max-height: none; overflow: visible; z-index: auto;
	background: transparent; color: inherit; border: 0; box-shadow: none; padding: 4px 0 14px;
	opacity: 1; visibility: visible; transform: none; transition: none;
}
.ap-offcanvas__nav li.ap-mega--panel:where(:not([data-approdo-menu] *)) { column-gap: 0; }
.ap-offcanvas__nav li.ap-mega--panel > .ap-sub-toggle:where(:not([data-approdo-menu] *)) { margin-right: 0; align-self: stretch; height: auto; min-height: 44px; border-radius: 0; border-bottom: 1px solid rgba(127, 127, 127, .2); }
.ap-offcanvas--full .ap-offcanvas__nav li.ap-mega--panel:where(:not([data-approdo-menu] *)) { justify-content: center; }
.ap-offcanvas--full .ap-offcanvas__nav li.ap-mega--panel > a:where(:not([data-approdo-menu] *)) { flex: 0 1 auto; }
.ap-offcanvas--full .ap-offcanvas__nav li.ap-mega--panel > .ap-sub-toggle:where(:not([data-approdo-menu] *)) { align-self: center; border-bottom: 0; border-radius: 50%; min-height: 0; height: 44px; margin: 0 0 0 6px; }

@media (max-width: 1024px) {
	.ap-nav li.ap-mega--panel:where(:not([data-approdo-menu] *)) { --ap-mega-mode: accordion; }
	.ap-nav li.ap-mega--panel > a:where(:not([data-approdo-menu] *)) { flex: 1 1 0; min-width: 0; }
	.ap-nav li.ap-mega--panel > .ap-sub-toggle:where(:not([data-approdo-menu] *)) { width: 44px; height: 44px; margin-right: -10px; }
	.ap-nav li.ap-mega--panel > .ap-sub-toggle .ap-sub-toggle__icon:where(:not([data-approdo-menu] *)) { width: 18px; height: 18px; }
	.ap-nav li.ap-mega.ap-mega--panel.is-expanded > .sub-menu:where(:not([data-approdo-menu] *)) { display: block; flex: 0 0 100%; }
	.ap-nav .ap-mega-panel:where(:not([data-approdo-menu] *)) {
		position: static; flex: 0 0 100%; width: auto; max-height: none; overflow: visible; z-index: auto;
		background: transparent; color: inherit; border: 0; box-shadow: none; padding: 4px 0 14px;
		opacity: 1; visibility: visible; transform: none; transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ap-mega-panel:where(:not([data-approdo-menu] *)), .ap-sub-toggle__icon:where(:not([data-approdo-menu] *)) { transition: none; }
	.ap-mega-panel:where(:not([data-approdo-menu] *)) { transform: none; }
}