/* Approdo · moduli Pro di header e footer (caricato solo se almeno uno è attivo). */

/* ---------- Pannelli: stato nascosto ---------- */
.ap-offcanvas[hidden], .ap-search[hidden] { display: none !important; }
html.ap-scroll-locked, html.ap-scroll-locked body { overflow: hidden; }

/* ---------- Elementi extra del costruttore ---------- */
.ap-divider { display: inline-block; flex: none; width: 1px; height: 1.6em; background: currentColor; opacity: .3; align-self: center; }
.ap-button--outline { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.ap-button--outline:hover { background: var(--ap-heading); color: #fff; box-shadow: inset 0 0 0 1.5px var(--ap-heading); }
.ap-footer .ap-button--outline:hover { background: #fff; color: var(--ap-footer-bg); box-shadow: inset 0 0 0 1.5px #fff; }
.ap-account { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-size: 15px; white-space: nowrap; }
.ap-account:hover .ap-account__text { text-decoration: underline; }
.ap-builder-widgets { display: flex; align-items: center; gap: 18px; min-width: 0; }
.ap-builder-widgets .widget { margin: 0; }
.ap-builder-widgets .widget-title { font-size: 1rem; margin: 0 0 4px; }
.ap-builder-widgets p { margin: 0; }
.ap-offcanvas-toggle { display: inline-flex; align-items: center; gap: 10px; }
.ap-offcanvas-toggle__label { font-size: 14px; font-weight: 500; letter-spacing: .4px; }
@media (max-width: 1024px) {
	/* Senza la visibilità per dispositivo questi elementi restano solo su desktop, come il testo libero. */
	.ap-header--builder:not(.ap-header--devices) .ap-builder-widgets,
	.ap-header--builder:not(.ap-header--devices) .ap-button-2,
	.ap-header--builder:not(.ap-header--devices) .ap-divider { display: none; }
	.ap-account--both .ap-account__text { display: none; }
}

/* ---------- Visibilità per dispositivo (tablet ≤ 1024 px, mobile ≤ 767 px) ---------- */
.ap-el { display: contents; }
@media (min-width: 1025px) { .ap-hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .ap-hide-tablet { display: none !important; } }
@media (max-width: 767px) { .ap-hide-mobile { display: none !important; } }

/* ---------- Pannello a scomparsa (menu mobile laterale o a schermo intero) ---------- */
.ap-offcanvas { position: fixed; inset: 0; top: var(--ap-admin-bar); z-index: 1000; }
.ap-offcanvas__backdrop { position: absolute; inset: 0; background: rgba(20, 22, 24, .5); opacity: 0; transition: opacity .35s ease; }
.ap-offcanvas__panel {
	position: absolute; top: 0; bottom: 0; right: 0; width: min(var(--ap-offcanvas-w, 360px), 88vw);
	display: flex; flex-direction: column; gap: 8px; padding: 18px 28px 40px; overflow-y: auto; overscroll-behavior: contain;
	background: var(--ap-offcanvas-bg, var(--ap-header-bg)); color: var(--ap-offcanvas-fg, var(--ap-header-fg));
	box-shadow: 0 0 60px -20px rgba(0, 0, 0, .45); transform: translateX(100%); transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.ap-offcanvas--left .ap-offcanvas__panel { right: auto; left: 0; transform: translateX(-100%); }
.ap-offcanvas--full .ap-offcanvas__panel { left: 0; width: auto; transform: none; opacity: 0; transition: opacity .35s ease; box-shadow: none; }
.ap-offcanvas.is-open .ap-offcanvas__backdrop { opacity: 1; }
.ap-offcanvas.is-open .ap-offcanvas__panel { transform: none; opacity: 1; }
.ap-offcanvas__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; }
.ap-offcanvas__close { margin-left: auto; margin-right: -8px; }
.ap-offcanvas__brand { display: inline-flex; align-items: center; min-width: 0; color: inherit; text-decoration: none; }
.ap-offcanvas__logo { display: block; width: var(--ap-offcanvas-logo-w, 120px); max-width: 100%; height: auto; max-height: 64px; object-fit: contain; object-position: left center; }
.ap-offcanvas__name { font-family: var(--ap-font-head); font-size: 1.35rem; line-height: 1.1; }
.ap-offcanvas__nav ul:where(:not(.ap-mega-panel *)) { list-style: none; margin: 0; padding: 0; }
.ap-offcanvas__nav a:where(:not(.ap-mega-panel *)) { display: block; padding: 12px 0; color: inherit; text-decoration: none; font-family: var(--ap-font-head); font-size: 1.45rem; line-height: 1.25; border-bottom: 1px solid rgba(127, 127, 127, .2); }
.ap-offcanvas__nav a:where(:not(.ap-mega-panel *)):hover, .ap-offcanvas__nav .current-menu-item > a { text-decoration: underline; text-underline-offset: 5px; }
/* Voce attiva: sottolineatura piena e testo più deciso (nessun colore in più, il contrasto resta quello del pannello). */
.ap-offcanvas__nav .current-menu-item > a, .ap-offcanvas__nav .current-menu-ancestor > a { font-weight: 600; text-decoration-thickness: 2px; }
.ap-offcanvas__nav .sub-menu { margin: 4px 0 10px 2px; padding-left: 16px; border-left: 1px solid rgba(127, 127, 127, .3); }
.ap-offcanvas__nav .sub-menu a { font-family: var(--ap-font-body); font-size: 1.05rem; padding: 9px 0; border-bottom: 0; }
/* Zona di tocco di almeno 44 px: la colonna flessibile tiene testo e descrizione uno sotto l'altro. */
.ap-offcanvas__nav .sub-menu a:where(:not(.ap-mega-panel *)) { display: flex; flex-direction: column; justify-content: center; min-height: 44px; }
.ap-offcanvas__nav .ap-menu-desc { color: inherit; opacity: .75; }
.ap-offcanvas__widgets { margin-top: 28px; font-size: 15px; }
.ap-offcanvas__widgets a { color: inherit; }
.ap-offcanvas--full .ap-offcanvas__nav, .ap-offcanvas--full .ap-offcanvas__widgets { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }
/* Centrato in verticale, ma scorrevole se il menu è lungo. */
.ap-offcanvas--full .ap-offcanvas__nav { margin-top: auto; }
.ap-offcanvas--full .ap-offcanvas__panel > :last-child { margin-bottom: auto; }
.ap-offcanvas--full .ap-offcanvas__nav a:where(:not(.ap-mega-panel *)) { font-size: clamp(1.6rem, 6vw, 2.4rem); border-bottom: 0; padding: 10px 0; }
.ap-offcanvas--full .ap-offcanvas__nav .sub-menu { padding-left: 0; margin-left: 0; border-left: 0; }

/* Fisarmonica: il separatore della voce continua sotto il pulsante. */
.ap-offcanvas__nav > ul > li.ap-sub-acc { column-gap: 0; }
.ap-offcanvas__nav > ul > li.ap-sub-acc > .ap-sub-toggle--sub { align-self: stretch; height: auto; min-height: 44px; margin-right: 0; border-radius: 0; border-bottom: 1px solid rgba(127, 127, 127, .2); }
.ap-offcanvas--full .ap-offcanvas__nav li.ap-sub-acc { justify-content: center; }
.ap-offcanvas--full .ap-offcanvas__nav li.ap-sub-acc > a { flex: 0 1 auto; }
.ap-offcanvas--full .ap-offcanvas__nav li.ap-sub-acc > .ap-sub-toggle--sub { align-self: center; border-bottom: 0; border-radius: 50%; min-height: 0; height: 44px; margin: 0 0 0 6px; }

/* Fondo del pannello: pulsante dell'header, social e area widget "Menu mobile". */
.ap-offcanvas__foot { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; font-size: 15px; }
.ap-offcanvas__foot .ap-offcanvas__widgets { margin-top: 0; width: 100%; }
.ap-offcanvas__foot .widget + .widget { margin-top: 18px; }
.ap-offcanvas__foot .widget-title { font-size: 1rem; margin: 0 0 6px; color: inherit; }
.ap-offcanvas__foot p { margin: 0 0 .6em; }
.ap-offcanvas__cta { align-self: stretch; text-align: center; }
/* Selettore lingua nel pannello; sugli smartphone, con tre lingue o più, sostituisce quello dell'header (che uscirebbe dallo schermo). */
.ap-offcanvas__lang:not(:has(li)) { display: none; }
.ap-offcanvas__lang .approdo-lang ul { flex-wrap: wrap; }
@media (max-width: 600px) { body:has(.ap-offcanvas__lang li) .ap-header__end > .approdo-lang:has(li:nth-child(3)) { display: none; } }
.ap-offcanvas__foot .ap-social a { width: 44px; height: 44px; opacity: 1; }
.ap-offcanvas--full .ap-offcanvas__foot { margin-top: 32px; align-items: center; width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }
.ap-offcanvas--full .ap-offcanvas__cta { align-self: center; }

/* Smartphone e tablet: larghezza in percentuale (Personalizza › Menu mobile, predefinita 80%). */
@media (max-width: 1024px) {
	.ap-offcanvas--left .ap-offcanvas__panel, .ap-offcanvas--right .ap-offcanvas__panel { width: var(--ap-offcanvas-mw, min(var(--ap-offcanvas-w, 360px), 88vw)); }
}
@media (prefers-reduced-motion: reduce) {
	.ap-offcanvas__panel, .ap-offcanvas__backdrop, .ap-search--full { transition: none; }
}
.ap-offcanvas--full .ap-offcanvas__nav .sub-menu a { font-size: 1.1rem; }

/* ---------- Ricerca a schermo intero ---------- */
.ap-search--full {
	position: fixed; inset: 0; top: var(--ap-admin-bar); z-index: 1000; display: flex; align-items: center; padding: 0; border: 0;
	background: var(--ap-header-bg); color: var(--ap-header-fg); opacity: 0; transition: opacity .3s ease;
}
.ap-search--full.is-open { opacity: 1; }
.ap-search--full .ap-search__inner { max-width: 960px; }
.ap-search--full input[type="search"] { font-size: clamp(1.4rem, 4vw, 2.4rem); font-family: var(--ap-font-head); color: inherit; background: transparent; border: 0; border-bottom: 2px solid currentColor; border-radius: 0; padding: .35em 0; }
.ap-search--full .ap-search__close { position: absolute; top: 20px; right: 20px; }

/* ---------- Ricerca che copre l'header ---------- */
.ap-search--cover { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; padding: 0; border: 0; background: var(--ap-header-bg); color: var(--ap-header-fg); }
.ap-header.is-scrolled .ap-search--cover { background: var(--ap-sticky-bg); }
.ap-search--cover .ap-search__inner { display: flex; align-items: center; gap: 12px; }
.ap-search--cover form { flex: 1; }
.ap-search--cover input[type="search"] { background: transparent; color: inherit; border-color: currentColor; }
.ap-search__inner form { flex: 1; }
.ap-search__inner form label { flex: 1; }
.ap-search--full .ap-search__inner { display: flex; align-items: center; }

/* ---------- Colori e tipografia di header e footer ---------- */
@media (min-width: 1025px) {
	.ap-header .ap-nav > ul > li > a { font-size: var(--ap-menu-fs, 15px); font-weight: var(--ap-menu-fw, 500); text-transform: var(--ap-menu-tt, none); letter-spacing: var(--ap-menu-ls, 0px); }
}
.ap-header .ap-nav > ul > li > a, .ap-header .ap-account, .ap-header .approdo-lang a, .ap-header .ap-builder-html a { color: var(--ap-hlink, inherit); }
.ap-header .ap-nav > ul > li > a:hover, .ap-header .ap-nav > ul > li.current-menu-item > a, .ap-header .ap-account:hover, .ap-header .approdo-lang a:hover, .ap-header .ap-builder-html a:hover { color: var(--ap-hlink-hover, var(--ap-hlink, inherit)); }
/* Sopra la foto (header trasparente non ancora fisso) comanda il colore dell'header trasparente. */
.ap-transparent-header .ap-header:not(.is-scrolled) .ap-nav > ul > li > a, .ap-transparent-header .ap-header:not(.is-scrolled) .ap-account, .ap-transparent-header .ap-header:not(.is-scrolled) .approdo-lang a { color: inherit; }
.ap-header--builder .ap-row--top { background: var(--ap-hrow-top-bg, transparent); color: var(--ap-hrow-top-fg, inherit); }
.ap-header--builder .ap-row--bottom { background: var(--ap-hrow-bottom-bg, transparent); color: var(--ap-hrow-bottom-fg, inherit); }
.ap-footer a:not(.ap-button) { color: var(--ap-flink, inherit); }
.ap-footer a:not(.ap-button):hover { color: var(--ap-flink-hover, var(--ap-flink, inherit)); }
.ap-footer--builder .ap-row--bottom { background: var(--ap-fbar-bg, transparent); color: var(--ap-fbar-fg, inherit); border-top-color: var(--ap-fbar-border, rgba(255, 255, 255, .12)); }
.ap-footer__bottom { color: var(--ap-fbar-fg, inherit); border-top-color: var(--ap-fbar-border, rgba(255, 255, 255, .12)); background: var(--ap-fbar-bg, transparent); box-shadow: 0 0 0 100vmax var(--ap-fbar-bg, transparent); clip-path: inset(0 -100vmax); }
