/* alpi-guscio.css — le sei riparazioni del guscio.
   GENERATO da tools/alpi-shell.mjs: si modifica LI', non qui.
   Solo difetti oggettivi: senza queste righe qualcosa non funziona o non
   si legge. Colori, corpi e spaziature stanno in alpi.css, caricato dopo.
   Le motivazioni misurate sono nel commento di alpi-shell.mjs. */

/* --- 1. Immagini con width/height dichiarati (CLS) --------------- */
img { height: auto; }

/* --- 2. Il tondo del menu esiste solo dove il menu serve ---------
   Sopra i 992px le sette voci sono nella barra e il pannello off-canvas
   e' vuoto (meanmenu clona solo sotto la sua soglia): il tasto sparisce
   insieme al pannello che aprirebbe. 993 e non 992: e' la soglia del
   tema, e le due regole devono scattare insieme o resta una fascia in
   cui non si naviga. */
@media only screen and (min-width: 993px) {
  .header .primary-header-inner .header-right-wrap .sidebar-icon { display: none; }
}
/* WCAG 2.5.8: il tondo del tema e' 56x56, sopra il minimo. Qui si
   dichiara il minimo, non la misura: se un domani il tondo si stringe,
   il bersaglio resta. */
.eg-menu-toggle { min-width: 44px; min-height: 44px; }

/* --- 3. Le fasce scure senza fotografia -------------------------- */
.bg-img,
.cta-bg,
.footer-bg {
  background-color: var(--tl-color-bg-1, #1C1C1D);
}

/* --- 4. Il pannello off-canvas chiuso non e' tabbabile -----------
   visibility:hidden lo toglie dal percorso di tabulazione; il ritardo
   serve a farlo uscire di scena a scorrimento finito, mentre in apertura
   e' immediato (alpi-menu.js mette a fuoco il tasto di chiusura al frame
   successivo, e si mette a fuoco solo cio' che e' gia' visibile). */
.mobile-side-menu {
  visibility: hidden;
  transition: transform .5s ease, visibility 0s linear .5s;
}
.mobile-side-menu.is-open {
  visibility: visible;
  transition: transform .5s ease, visibility 0s;
}

/* --- 5. Senza JavaScript: niente attesa infinita, e un menu ------
   La classe `js` la scrive lo script in linea nella testa. Se non
   arriva resta `no-js`: il preloader non lo toglierebbe nessuno (lo
   rimuove main.js) e il pannello off-canvas non lo riempirebbe nessuno
   (lo riempie meanmenu), quindi il tondo sparisce e le sette voci
   tornano una riga di link veri in testata.
   La specificita' e' calcolata per battere
   `.header .primary-header-inner .header-menu-wrap ul{display:none}`
   del tema senza usare !important. */
.no-js .preloader { display: none; }
.no-js .header .primary-header-inner .header-right-wrap .sidebar-icon { display: none; }
@media only screen and (max-width: 992px) {
  /* La testata del tema e' in POSIZIONE ASSOLUTA sopra la hero
     (misurato: .header{position:absolute;top:0;z-index:99}). Con le sette
     voci in chiaro diventa alta il triplo e, restando assoluta, finiva
     STAMPATA SOPRA il titolo della hero — misurato a 390px con gli script
     spenti: le voci cadevano dentro «Impresa edile a Faenza».
     Senza JavaScript la testata torna in flusso e prende un fondo pieno:
     spinge la hero piu' in basso invece di coprirla. */
  .no-js .header { position: static; }
  .no-js .header .primary-header { background-color: #191919; }
  .no-js .header .primary-header-inner .header-left-wrap { flex-wrap: wrap; }
  /* il menu prende una riga tutta sua sotto il logo, o resta schiacciato
     accanto ad esso e le voci si incolonnano una per riga */
  .no-js .header .primary-header-inner .header-menu-wrap { flex: 1 0 100%; }
  .no-js .header .primary-header-inner .header-menu-wrap ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
  }
  .no-js .header .primary-header-inner .header-menu-wrap ul li {
    margin: 0;
  }
  .no-js .header .primary-header-inner .header-menu-wrap ul li a {
    display: inline-block;
    padding: 11px 0;   /* 44px di bersaglio anche senza alpi.css */
  }
}

/* --- 6. Moto ridotto ---------------------------------------------
   Riguarda la LEGGIBILITA', non l'effetto: senza queste righe, a moto
   ridotto, i blocchi che GSAP non ha ancora rivelato restano a
   opacity:0 per sempre. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .slide-anim, .fade-top, .fade-wrapper > *, [data-text-animation] {
    opacity: 1 !important;
    transform: none !important;
  }
}