/* ENEA HYDRA — mega menu (13/10/2026). Rosso della testata, testo bianco, Montserrat. */
:root{--sgmm-rosso:#b71c1c}

/* ---- computer: le voci in alto ---- */
.sgmm-li{position:relative}
.sgmm-tasto{position:absolute;left:0;bottom:-2px;width:1px;height:1px;padding:0;margin:0;border:0;overflow:hidden;clip:rect(0 0 0 0);background:transparent;color:#fff}
.sgmm-tasto:focus-visible{width:auto;height:auto;clip:auto;left:50%;transform:translateX(-50%);bottom:-6px;padding:2px 8px;border:1.5px solid #fff;border-radius:6px;background:var(--sgmm-rosso);font:700 12px/1.4 Montserrat,sans-serif;white-space:nowrap;z-index:5}
.sgmm-li.sgmm-su > .sgmm-a{text-decoration:underline;text-underline-offset:9px;text-decoration-thickness:2px}
@media (min-width:1025px) and (max-width:1366px){
  .elementor-element-0c19463 .elementor-nav-menu--main .elementor-item{font-size:15px!important}
}

/* ---- computer: i pannelli ---- */
.sgmm-pannelli{display:contents}
.sgmm[hidden]{display:none!important}
/* bordo in alto pieno (= bianco al 22% sul rosso): semitrasparente lasciava vedere la pagina sotto (utente 13/10) */
.sgmm{position:fixed;left:0;right:0;z-index:9990;max-height:calc(100vh - var(--sgmm-top,100px) - 16px);overflow:auto;background:var(--sgmm-rosso);color:#fff;border-top:1px solid #c74e4e;background-clip:border-box;box-shadow:0 18px 30px rgba(0,0,0,.18);font-family:Montserrat,sans-serif;animation:sgmm-in .14s ease-out}
@keyframes sgmm-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sgmm-in{max-width:1180px;margin:0 auto;padding:30px 24px 34px;display:grid;grid-template-columns:repeat(var(--sgmm-n,3),minmax(0,1fr)) 330px;gap:34px;align-items:start}
.sgmm .sgmm-h{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.sgmm-col ul{list-style:none;margin:0;padding:0}
.sgmm-col li{margin:0;border-bottom:1px solid rgba(255,255,255,.14)}
.sgmm-col li:last-child{border-bottom:0}
.sgmm-col li > a{display:block;padding:7px 0;color:#fff;font-size:16px;font-weight:600;line-height:1.35;text-decoration:none}
.sgmm-col li > a:hover,.sgmm-col li > a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.sgmm-col-adesso{min-width:0}
.sgmm-feat{display:block;color:#fff;text-decoration:none}
/* angoli a 8 px come le foto delle righe (utente 13/10: «più elegante»); il tema arrotonda le immagini, serve !important */
.sgmm-feat img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;border-radius:8px!important;background:#7a1010}
.sgmm-feat span{display:block;padding:12px 2px 0}
.sgmm-feat small{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.sgmm-feat b{display:block;font-size:19px;font-weight:800;line-height:1.25;margin-top:4px;color:#fff}
.sgmm-feat em{display:block;font-style:normal;font-size:13.5px;margin-top:4px;color:rgba(255,255,255,.85)}
.sgmm-feat:hover b{text-decoration:underline;text-underline-offset:4px}
.sgmm-enea{display:flex;flex-direction:column;gap:10px;padding:20px;border:1.5px solid rgba(255,255,255,.4);border-radius:14px;color:#fff;text-decoration:none}
.sgmm-enea img{width:72px;height:72px;border-radius:50%;background:#fff;object-fit:cover}
.sgmm-enea small{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.sgmm-enea b{font-size:20px;font-weight:800;color:#fff}
.sgmm-enea em{font-style:normal;font-size:14px;color:rgba(255,255,255,.9)}
.sgmm-enea-btn{align-self:flex-start;margin-top:4px;padding:9px 14px;border-radius:10px;background:#fff;color:var(--sgmm-rosso);font-weight:700;font-size:14px}

/* ---- «Cosa succede»: righe con foto (computer e telefono) ---- */
.sgmm-riga{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.2);color:#fff!important;text-decoration:none}
.sgmm-riga:last-child{border-bottom:0}
.sgmm-riga img{flex:none;width:52px;height:52px;border-radius:8px!important;object-fit:cover;background:rgba(0,0,0,.15)}
.sgmm-fr{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round}
.sgmm-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-family:Montserrat,sans-serif}
.sgmm-tx small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sgmm-tx b{font-size:15px;font-weight:700;line-height:1.25;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sgmm-tx em{font-style:normal;font-size:13px;color:rgba(255,255,255,.82)}
.sgmm-fr{flex:none;width:18px;height:18px;stroke-width:2;opacity:.8}
.sgmm-riga:hover b{text-decoration:underline;text-underline-offset:3px}
.sgmm-col-adesso .sgmm-cal{display:inline-block;margin-top:12px;color:#fff;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:4px}

/* ---- telefono: gruppi dentro le voci, «Cosa succede» sotto ---- */
.elementor-element-a7978b0 .sgmm-gruppo > span{display:block;padding:16px 0 4px 40px;font-family:Montserrat,sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.sgmm-adesso-m{padding:24px 0 6px;font-family:Montserrat,sans-serif}
.sgmm-adesso-m .sgmm-h{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.sgmm-adesso-m .sgmm-riga{padding:12px 0;gap:14px}
.sgmm-adesso-m .sgmm-riga img{width:64px;height:64px}
.sgmm-adesso-m .sgmm-tx b{font-size:15.5px}

/* menu aperto sul telefono: la barra in basso e il fumetto di Enea si tolgono */
body.sgmm-aperto #sg-dock-v23,body.sgmm-aperto #sg-enea-bubble{display:none!important}
/* il menu del telefono si apre con la casella #nav-control (widget HTML dell'header): basta lei */
body:has(#nav-control:checked) #sg-dock-v23,body:has(#nav-control:checked) #sg-enea-bubble{display:none!important}

@media (prefers-reduced-motion:reduce){.sgmm{animation:none}}
/* in fondo al menu del telefono: spazio per scorrere fino ai social senza la barra in basso sopra (richiesta utente 13/10) */
.lytbox-navigation [data-elementor-id="12903"]{padding-bottom:calc(130px + env(safe-area-inset-bottom,0px))!important}

/* Il menu del telefono e' la «lytbox» del CSS personalizzato di WordPress: pannello fisso alto 100vh con
   overflow:hidden e contenuto centrato in verticale. Piu' alto dello schermo (in orizzontale, o con una voce
   aperta) restava tagliato e la pagina si vedeva ai lati (utente 13/10: «stretto, inutilizzabile»).
   Ora scorre, parte dall'alto, il rosso prende tutto lo schermo e la colonna si allarga fino a 600 px. */
.lytbox-navigation{overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;align-items:flex-start!important;height:100vh;height:100dvh!important;background:var(--sgmm-rosso)}
.lytbox-navigation > [data-elementor-id="12903"]{width:100%;min-height:100%}
.lytbox-navigation [data-elementor-id="12903"] > .e-con{width:100%!important;max-width:none!important;min-height:100%}
.lytbox-navigation .elementor-element-627357c{width:min(600px,100%)!important;max-width:600px!important;margin-left:auto!important;margin-right:auto!important}
/* telefono in orizzontale: niente cornici (bordi di Elementor per quella larghezza), logo piu' piccolo, menu largo quanto la colonna */
@media (orientation:landscape) and (max-height:600px){
  .lytbox-navigation [data-elementor-id="12903"] .e-con,.lytbox-navigation .elementor-element-a7978b0{border:0!important}
  .lytbox-navigation .elementor-element-a7978b0{width:100%!important;max-width:100%!important;padding:0!important}
  .lytbox-navigation .elementor-element-44bcac8 img{max-height:96px!important;width:auto!important}
  .lytbox-navigation .elementor-element-627357c{padding-top:12px!important;gap:8px!important}
}

/* fisarmonica del telefono: la freccia gira, l'ingresso del menu e' piu' morbido */
.elementor-element-a7978b0 li.sgmm-li > a .sub-arrow{transition:transform .32s cubic-bezier(.22,.8,.24,1)}
.elementor-element-a7978b0 li.sgmm-li.sgmm-open > a .sub-arrow{transform:rotate(180deg)}
.lytbox-navigation{transition:transform .42s cubic-bezier(.22,.8,.24,1)!important}
.lytbox-nav_control:checked ~ .lytbox-navigation{transition:transform .42s cubic-bezier(.22,.8,.24,1),opacity .3s ease!important}
@media (prefers-reduced-motion:reduce){.lytbox-navigation,.elementor-element-a7978b0 li.sgmm-li > a .sub-arrow{transition:none!important}}

/* un trattino davanti a ogni link: si capisce subito cosa si tocca e cosa e' solo un
   titoletto di gruppo (utente 13/10) */
.sgmm-col li > a,.elementor-element-a7978b0 .sub-menu a.elementor-sub-item{display:flex!important;align-items:baseline;gap:10px}
.sgmm-col li > a::before,.elementor-element-a7978b0 .sub-menu a.elementor-sub-item::before{content:"";flex:none;width:10px;height:2px;border-radius:1px;background:rgba(255,255,255,.7);transform:translateY(-.32em)}
.sgmm-col li > a:hover::before,.elementor-element-a7978b0 .sub-menu a.elementor-sub-item:active::before{background:#fff;width:14px}