/* faro-guscio.css — le riparazioni del guscio (index-5 / header base).
   GENERATO da tools/faro-shell.mjs: si modifica LI', non qui.
   Solo difetti oggettivi. Colori e spaziature stanno in faro.css. */

/* --- 1. Immagini con width/height dichiarati (CLS) ---------------------
   main.css ha `img{max-width:100%}` SENZA `height:auto`: con width e
   height scritti negli attributi (che ci vogliono, per il CLS) l'immagine
   ristretta si schiaccia. */
img { height: auto; }

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

/* --- 3. Le fasce scure senza fotografia --------------------------------
   `.bg-img`, `.cta-bg` e `.footer-bg` in main.css hanno
   position/size/repeat e NESSUN background-color: il tema conta sulla
   foto. Senza `data-background` dipinto (nessun JS, oppure fascia pigra
   non ancora entrata, oppure fotografia non ancora consegnata) resterebbero
   trasparenti e il testo bianco finirebbe su bianco. Il colore sta SOTTO
   l'eventuale foto (background-size:cover): si vede solo quando la foto
   manca. */
.bg-img,
.cta-bg,
.footer-bg {
  background-color: var(--tl-color-bg-1, #1C1C1D);
}

/* --- 4. Il pannello off-canvas chiuso non e' tabbabile -----------------
   Il tema lo trasla fuori schermo con transform: i suoi link restavano nel
   percorso di tabulazione, cioe' una decina di fermate invisibili prima
   del contenuto. */
.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 resta
   `no-js`: via il preloader (lo rimuove main.js, che non c'e'), via il
   tondo (il pannello non lo riempirebbe nessuno) e le voci tornano in
   testata come riga vera. Specificita' calcolata per battere
   `.header .primary-header-inner .header-menu-wrap ul{display:none}`
   senza !important.
   La testata del tema e' in POSIZIONE ASSOLUTA sopra la hero (main.css
   riga 640: `.header{position:absolute;top:0;z-index:99}`): con le voci
   in chiaro diventa piu' alta e, restando assoluta, finirebbe stampata
   sopra il titolo della hero. Senza JavaScript torna in flusso e prende
   un fondo pieno. */
.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) {
  .no-js .header { position: static; }
  .no-js .header .primary-header { background-color: #191919; }
  .no-js .header .primary-header-inner { flex-wrap: wrap; }
  .no-js .header .primary-header-inner .header-left-wrap { flex-wrap: wrap; width: 100%; }
  .no-js .primary-header-inner .header-left-wrap,
  .no-js .primary-header-inner .header-menu-wrap .mobile-menu-items { min-width: 0; }
  .no-js .primary-header-inner .header-menu-wrap { display: block; min-width: 0; flex: 1 0 100%; }
  .no-js .header .primary-header-inner .header-menu-wrap ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    overflow-x: auto;
    margin: 0;
    padding: .5rem 0;
  }
  .no-js .header .primary-header-inner .header-menu-wrap ul li { margin: 0; flex: 0 0 auto; }
  .no-js .header .primary-header-inner .header-menu-wrap ul li a {
    display: inline-block;
    padding: 11px 0;   /* 44px di bersaglio anche senza faro.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. `.slide-anim` e' proprio quello che veste la hero di
   index-5. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* NON si scrive «.fade-wrapper > *», ed e' una correzione MISURATA sul
     guscio che alpi e studior si portano dietro: main.js:1409-1412 mette
     opacity:0 SOLO sui «.fade-top» dentro un «.fade-wrapper», mentre il
     selettore largo colpiva anche «.counter-text» — figlio diretto della
     counter-section — che e' la FILIGRANA della sezione e che il tema
     tiene a opacity .13. Riportata a 1 diventava una scritta grigia alta
     230px in mezzo ai numeri invece di un'ombra: opacity computata 1
     sulla nostra pagina contro 0,13 sul demo, a moto ridotto. Qui si
     elencano le classi che GSAP tocca davvero. */
  .slide-anim, .fade-top, [data-text-animation], [data-animation] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}

/* --- 7. Senza JavaScript la hero di index-5 non si vede ----------------
   `.slide-anim` non ha regole in main.css: e' GSAP (main.js) a metterla
   `opacity:0` e a rivelarla. Se lo script non arriva o muore, l'H1 —
   cioe' il messaggio principale della pagina — resta invisibile per
   sempre. Sul ramo .no-js si apre tutto da subito. */
.no-js .slide-anim,
.no-js .fade-top,
.no-js [data-animation],
.no-js [data-text-animation] {
  opacity: 1;
  transform: none;
  visibility: visible;
}