/* ============================================================
   Generation AI Academy — personalizzazioni oltre l'export Webflow
   Caricato DOPO i CSS di Webflow, così vince sulle loro regole.
   Per tornare all'aspetto originale basta togliere questo file
   e rimettere l'icona Lottie nelle pagine.
   ============================================================ */

/* Il gradiente del brand: lo stesso di .gradient-text nei titoli */
:root {
  --gaa-gradient: linear-gradient(
    71deg,
    var(--secondary-color),
    var(--primary-color) 43%,
    var(--primary-color) 52%,
    #51fd7a
  );
}

/* ------------------------------------------------------------
   MENU MOBILE
   Sotto i 991px Webflow sostituisce la barra di navigazione con
   il pulsante a tre righe. Qui sotto viene rivestito con gli
   elementi del design system: pillole come i pulsanti del sito
   e il gradiente viola-blu-verde dei titoli.

   Nota sui raggi: i token --border-radius--NN si rimpiccioliscono
   da soli su mobile (il "24" vale 16px). Usiamo il token, non il
   numero fisso, così restiamo agganciati al design system.
   ------------------------------------------------------------ */
@media screen and (max-width: 991px) {

  /* ---------- Pulsante a tre righe ---------- */
  .hamburger-icon-block {
    width: 44px;                 /* area di tocco comoda da dito */
    height: 44px;
    padding: 0;
    border-radius: var(--_project-font---border-radius--16);
    background-color: var(--neutral-02);
    position: relative;          /* aggancio per centrare l'icona */
    transition: background-color .25s ease;
  }
  .hamburger-icon-block.w--open {
    background-image: var(--gaa-gradient);
    background-color: transparent;
  }

  /* Centratura in assoluto: Webflow impone display:block sul
     pulsante con una regola più forte, quindi il flex non basta. */
  .gaa-burger {
    width: 20px;
    height: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .gaa-burger span {
    background-color: var(--neutral-04);
    border-radius: 2px;
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1),
                opacity .2s ease,
                background-color .25s ease;
  }
  .gaa-burger span:nth-child(1) { top: 0; }
  .gaa-burger span:nth-child(2) { top: 6px; }
  .gaa-burger span:nth-child(3) { top: 12px; }

  /* Aperto: le tre righe diventano una X bianca sul gradiente */
  .w--open .gaa-burger span { background-color: var(--neutral-01); }
  .w--open .gaa-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .w--open .gaa-burger span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
  .w--open .gaa-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* ---------- Pannello del menu ---------- */
  .menu-item-list {
    background-color: var(--neutral-01);
    border: 1px solid var(--neutral-02);
    border-radius: var(--_project-font---border-radius--24);
    box-shadow: 0 18px 44px rgba(13, 23, 20, .13);
    grid-row-gap: 2px;
    margin-top: 0;
    padding: 8px;
    overflow: visible;
  }

  /* Via le righine divisorie: basta la spaziatura a separare */
  .menu-item {
    background-color: transparent;
    border: 0;
    border-radius: var(--_project-font---border-radius--100);
  }

  /* Voci a pillola, come i pulsanti del sito */
  .nav-item {
    grid-column-gap: 12px;
    border-radius: var(--_project-font---border-radius--100);
    align-items: center;
    padding: 14px 18px;
    transition: background-color .2s ease;
  }

  /* Pallino col gradiente del brand, sempre visibile: su mobile
     non esiste il passaggio del mouse, quindi il colore del brand
     deve vedersi da subito, non solo al tocco. */
  .nav-item:before {
    content: "";
    background-image: var(--gaa-gradient);
    border-radius: 50%;
    flex: none;
    width: 7px;
    height: 7px;
    opacity: .4;
    transition: opacity .2s ease, transform .2s ease;
  }

  /* Al tocco: pillola col viola del brand e testo BIANCO.

     Qui prima c'era il testo col gradiente, come nei titoli. Non
     funzionava: un'interazione di Webflow dipinge la pillola di
     --primary-color (#3c28f9), e il gradiente attraversa proprio
     quel colore nel suo tratto centrale. Testo e sfondo finivano
     identici, contrasto 1:1, e la parola si bucava nel mezzo
     ("IL CAL NDARIO"). Il gradiente resta dov'e' leggibile: nei
     titoli su fondo chiaro e nel pallino a riposo.

     Il bianco su #3c28f9 da' un contrasto di 7.3:1 - oltre il 4.5:1
     richiesto dalle WCAG AA, e sopra il 7:1 della AAA. E' anche la
     stessa coppia usata dai pulsanti pieni del sito.

     Lo sfondo lo dichiariamo anche noi, non solo l'interazione: se
     quella non parte (JS lento o non caricato) la pillola resta
     comunque viola e il testo bianco resta leggibile. Se invece
     parte, dipinge lo stesso colore e non si nota alcun salto. */
  .nav-item:active {
    background-color: var(--primary-color);
  }
  .nav-item:active:before {
    opacity: 1;
    transform: scale(1.25);
    background-image: none;
    background-color: var(--neutral-01);
  }
  .nav-item:active p {
    background-image: none;
    color: var(--neutral-01);
    -webkit-text-fill-color: var(--neutral-01);
  }

  /* Lo stesso al passaggio del mouse, ma solo dove il mouse
     esiste davvero: sui telefoni l'effetto resterebbe attaccato. */
  @media (hover: hover) {
    .nav-item:hover { background-color: var(--primary-color); }
    .nav-item:hover:before {
      opacity: 1;
      transform: scale(1.25);
      background-image: none;
      background-color: var(--neutral-01);
    }
    .nav-item:hover p {
      background-image: none;
      color: var(--neutral-01);
      -webkit-text-fill-color: var(--neutral-01);
    }
  }

  /* Accessibilità: bordo visibile per chi naviga da tastiera */
  .nav-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
  }
}

/* ------------------------------------------------------------
   DOMANDE FREQUENTI

   Le risposte vengono chiuse da webflow.js, che pesa 890 KB.
   Finche' non e' pronto, la pagina mostra tutte le risposte aperte
   e le schede alte ~570px invece di 85px, poi collassano di colpo:
   su una connessione lenta quel "lampo" si vede bene.
   Chiudendole gia' da CSS il problema sparisce.

   La regola vale SOLO a risposta chiusa. Webflow aggiunge w--open
   quando si apre: senza :not(.w--open) le risposte non si
   aprirebbero piu', perche' aprendo Webflow toglie l'altezza che
   aveva scritto sull'elemento e questa regola le richiuderebbe.

   Niente !important: durante l'animazione l'altezza scritta
   sull'elemento da Webflow deve poter vincere su questa regola.
   ------------------------------------------------------------ */
.faq-answer:not(.w--open) {
  height: 0;
}

/* ------------------------------------------------------------
   DOMANDE FREQUENTI - spazi verticali

   .single-faq e .faq-answer dichiarano white-space: pre-wrap, e con
   pre-wrap i rientri del sorgente HTML smettono di essere invisibili:
   l'indentazione fra </p>, </div> e </nav> diventa righe vere, e nei
   contenitori flex i nodi di soli spazi diventano elementi flex a
   tutti gli effetti. Misurato a 1440px: 113px di vuoto sopra il testo
   e 113px sotto, invece dei ~30px voluti.

   Quel vuoto nasce dalla formattazione del file, non dal contenuto:
   e' la ragione per cui l'ingombro non si puo' governare dai padding
   finche' pre-wrap resta acceso. Spegnendolo lo spazio torna a
   dipendere solo dai padding, quindi e' identico su ogni risposta a
   prescindere da quanto e' lunga.

   Si puo' spegnere senza perdere nulla: nessuno dei 60 paragrafi
   delle FAQ (home + 3 landing) usa a capo nel sorgente: il testo va a
   capo da solo e dove serve una riga vuota c'e' un <br>, che non
   dipende da pre-wrap. Resta invece word-break: keep-all, che e' un
   altro meccanismo e non c'entra con gli spazi verticali.
   ------------------------------------------------------------ */
.single-faq,
.single-faq .faq-question,
.single-faq .faq-answer,
.single-faq .faq-answer-area {
  white-space: normal;
}

/* Stacco domanda -> risposta pari al padding della scheda, cosi' il
   testo ha lo stesso respiro sopra e sotto e il riquadro risulta
   otticamente centrato. La variabile segue i breakpoint da sola
   (28px desktop, 20px sotto i 991px), quindi niente numeri fissi. */
.faq-answer-area {
  padding-top: var(--_project-font---all-padding--tm-padding);
}

/* ------------------------------------------------------------
   TESTO COL GRADIENTE - lettere tonde tagliate ai bordi

   .gradient-text colora le parole con background-clip: text: il
   gradiente viene ritagliato dalla forma dei glifi. Il ritaglio pero'
   usa la scatola di sfondo dello span, che e' larga esattamente
   quanto l'avanzamento del testo. Le lettere tonde disegnano un filo
   oltre quell'avanzamento (l'overshoot tipografico, che serve a farle
   sembrare alte quanto le lettere dritte): quel filo cade fuori dalla
   scatola e viene tagliato via.

   Misurato su "impara l'AI facendo": bordo destro della scatola e del
   testo coincidenti, margine 0.00px, e la "o" finale risultava rasata
   sul fianco destro.

   Allarghiamo la scatola di 0.08em per lato e togliamo altrettanto
   con un margine negativo: lo sfondo ha spazio per l'overshoot, ma
   la posizione del testo non cambia di un pixel, quindi il punto
   fermo dopo lo span resta dov'era. Il gradiente si distende su una
   scatola appena piu' larga: differenza non percepibile.
   ------------------------------------------------------------ */
.gradient-text {
  padding-left: .08em;
  margin-left: -.08em;
  padding-right: .08em;
  margin-right: -.08em;
}

/* ------------------------------------------------------------
   LE PRIME SCHERMATE SI ADATTANO ALLO SCHERMO

   Il problema: l'altezza dei primi due blocchi dipende dalla
   LARGHEZZA della finestra, mai dalla sua altezza. L'immagine
   della hero ha proporzione 5:6 su meta' colonna, il video del
   blocco "Una nuova Generazione" ha proporzione 2:1 su tutta la
   colonna: entrambi hanno quindi un'altezza fissa, decisa dalla
   larghezza del contenitore.

   Misurato, con la hero alta sempre 810px:
     1280x800  -> ne avanzano   38px: si intravede la sezione dopo
     1440x900  -> ne avanzano   90px
     1920x1080 -> ne avanzano  270px
   e su un portatile piu' basso di 810px la hero viene tagliata.

   E' questo che fa "sbucare" pezzi degli elementi di sotto: non
   un margine sbagliato, ma due blocchi che non sanno quanto e'
   alto lo schermo.

   Qui sotto lo diciamo loro. Solo da 992px in su: sotto quella
   soglia il layout e' impilato, la hero e' piu' alta dello
   schermo per forza di cose e forzarla lo schiaccerebbe.

   Usiamo svh (small viewport height) e non vh: sui telefoni vh
   conta anche la fascia delle barre del browser, che compaiono e
   scompaiono scorrendo, e il blocco si metterebbe a sobbalzare.
   La riga con vh resta prima come riserva per i browser vecchi.
   ------------------------------------------------------------ */
@media screen and (min-width: 992px) {

  /* --- Prima schermata: la hero --- */

  .hero-section.section-padding {
    min-height: 100vh;
    min-height: 100svh;
  }

  /* Il contenitore e' gia' flex con align-items: center, quindi
     dandogli l'altezza dello schermo i contenuti si centrano da
     soli invece di restare appesi in alto. */
  .hero-content-wrapper-lp-01 {
    min-height: calc(100vh - var(--_project-font---all-padding--left-right));
    min-height: calc(100svh - var(--_project-font---all-padding--left-right));
  }

  /* L'immagine riempie l'altezza rimasta invece di seguire la
     propria proporzione. Il video interno ha object-fit: cover,
     quindi si adatta senza deformarsi: cambia solo quanto se ne
     vede ai lati. */
  .hero-image-01 {
    aspect-ratio: auto;
    height: calc(100vh - var(--_project-font---all-padding--left-right));
    height: calc(100svh - var(--_project-font---all-padding--left-right));
  }

  /* --- Seconda schermata: "Una nuova Generazione" --- */

  /* Lo spazio utile e' lo schermo meno il bordo alto della
     sezione che lo contiene (--padding-top-bottom, 120px). */
  .about-content-area.alt-version {
    min-height: calc(100vh - var(--_project-font---all-padding--padding-top-bottom));
    min-height: calc(100svh - var(--_project-font---all-padding--padding-top-bottom));
    justify-content: center;
  }

  /* Il video si restringe quando lo schermo e' basso, invece di
     far debordare il blocco. Il conto dentro clamp() e':
        schermo - 120 (bordo alto) - 80 (stacco) - 245 (testo)
     cioe' 445px, che e' tutto cio' che sta sotto il video.
     Sopra i 500px non cresce: e' la sua misura naturale, e piu'
     grande perderebbe l'inquadratura. Sotto i 280px non scende:
     serve a restare riconoscibile su schermi molto bassi. */
  .about-hero-image {
    aspect-ratio: auto;
    height: clamp(280px, calc(100vh - 445px), 500px);
    height: clamp(280px, calc(100svh - 445px), 500px);
  }
}

/* ------------------------------------------------------------
   ANCORE - niente bordo del fuoco sulla sezione di arrivo

   js/custom.js sposta il fuoco sulla sezione appena raggiunta,
   come faceva Webflow, perche' chi naviga da tastiera riprenda
   da li'. Il browser pero' disegna il bordo del fuoco attorno
   all'elemento, e qui gli elementi sono sezioni alte fino a
   1912px: si vedeva un rettangolo attorno a mezza pagina.

   Spegnerlo e' sicuro: la sezione e' un contenitore, non un
   comando. Il bordo torna a vedersi appena il fuoco arriva su
   un link o un pulsante veri, che e' dove serve davvero.
   ------------------------------------------------------------ */
.gaa-ancora-a-fuoco:focus {
  outline: none;
}

/* ------------------------------------------------------------
   MOBILE - aria fra i testi

   Sul telefono molte coppie titolo/testo hanno stacco ZERO: non
   e' una scelta, e' che quei contenitori non dichiarano nessuno
   spazio e la scala del progetto parte da 16px, un passo troppo
   grosso per una coppia titolo-sottotitolo. Cosi' sono rimasti
   attaccati.

   Misurato a 390px, stacco fra i due blocchi di testo:
      0px  "Corso AI Essentials" -> "Impara le basi..."
      0px  titolo scheda corso -> descrizione della scheda
      0px  nome coordinatore -> ruolo
      0px  titolo del calendario -> testo
      0px  titolo "modalita'" -> testo
      8px  titolo della scheda "Approccio pratico" -> testo
     16px  titolo di sezione -> paragrafo

   Sotto si aggiungono tre gradini, uno per tipo di coppia. Non
   tocchiamo le griglie strette del calendario (le lettere dei
   giorni, i contenitori di servizio): li' lo zero e' voluto e
   dare aria sfalserebbe le colonne.

   Solo fino a 767px: e' la soglia Webflow del telefono. Da 768
   in su il layout ha gia' il suo respiro.
   ------------------------------------------------------------ */
@media screen and (max-width: 767px) {

  /* Coppie che oggi stanno a zero: titolo e sua riga di seguito.
     10px e' poco piu' di mezza interlinea del testo piccolo
     (23.8px): si legge come "due righe dello stesso discorso",
     non come due blocchi separati. */
  .courses-section-title-02 > div,
  .coordinatore-content-dektop,
  .coordinatore-content-mobile,
  .calendar-title-container,
  .modalita-title {
    grid-row-gap: 10px;
    row-gap: 10px;
    display: flex;
    flex-direction: column;
  }

  /* Il titolo della scheda corso e la sua descrizione: qui il
     gap e' dichiarato a 0, quindi va riscritto. */
  .courses-image-title {
    grid-row-gap: 10px;
    row-gap: 10px;
  }

  /* Coppie gia' staccate di 8px: portate a 14, circa mezza
     interlinea del titolo che le precede. */
  .process-card-text,
  .courses-price-area {
    grid-row-gap: 14px;
    row-gap: 14px;
  }

  /* Titolo di sezione e suo paragrafo: sono blocchi diversi e
     devono leggersi come tali. Usiamo il gradino successivo
     della scala del progetto invece di un numero nostro.

     Il token si rimpicciolisce da solo sul piccolo, come i raggi
     dei bordi piu' sopra: --spacing--24 vale 24px a schermo
     pieno e 20px sul telefono. Quindi qui lo stacco passa da 16
     a 20px - misurato, non dedotto - e resta agganciato al
     design system se un domani la scala cambia. */
  .hero-content-area-alt,
  .section-title,
  .process-title-area {
    grid-row-gap: var(--_project-font---spacing--24);
    row-gap: var(--_project-font---spacing--24);
  }
}

/* ------------------------------------------------------------
   BROCHURE NON ANCORA DISPONIBILE
   La brochure della prima edizione non si scarica piu' e quella
   della seconda non c'e' ancora. I pulsanti restano al loro
   posto - sono tre: hero, scheda laterale e barra fissa del
   telefono - ma spenti, con un badge che spiega perche'.

   Nota: i pulsanti hanno "overflow: hidden", quindi un badge
   messo fuori verrebbe tagliato. Sta percio' dentro, accanto
   all'etichetta, e la riga diventa flex per tenerli affiancati.

   L'opacita' 0.45 chiesta dal documento e' applicata al bordo e
   all'etichetta, non a tutto il pulsante: se sbiadisse anche il
   badge, l'unica parte che deve farsi leggere sparirebbe.
   ------------------------------------------------------------ */
.brochure-disabled {
  border-color: rgba(60, 40, 249, 0.45);
  cursor: default;
  pointer-events: none;
}

.brochure-disabled .button-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.brochure-disabled .button-text > p:not(.badge-novita) {
  opacity: 0.45;
}

/* Il badge: pillola viola, lo stesso viola dei titoli in
   gradiente, cosi' resta dentro la tavolozza del sito. */
.badge-novita {
  background-color: var(--secondary-color);
  color: #fff;
  border-radius: var(--_project-font---border-radius--58);
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   BANNER STATISTICHE DELLA PRIMA EDIZIONE
   Prende il posto della griglia delle classi sold out: finche'
   il nuovo calendario non esiste, al suo posto raccontiamo com'e'
   andata la prima edizione.
   ------------------------------------------------------------ */
.edizione-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--_project-font---spacing--24);
  width: 100%;
  padding: var(--_project-font---spacing--24) 0;
}

.edizione-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

/* Il numero usa il gradiente del brand, come i titoli. */
.edizione-stat-numero {
  background-image: var(--gaa-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Sul telefono quattro colonne diventano illeggibili: si
   impilano a due a due. */
@media screen and (max-width: 767px) {
  .edizione-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Contatti diretti al posto del modulo "Richiedi info". */
.contatti-diretti {
  gap: 8px;
}

.contatto-link {
  text-decoration: none;
}

/* Il banner statistiche e il suo testo di chiusura. */
.edizione-stats-wrapper {
  gap: var(--_project-font---spacing--24);
}

/* ------------------------------------------------------------
   HOME MULTI-CORSO — le due card dei corsi
   La home non e' piu' la landing di AI Essentials: presenta i
   due percorsi e lascia scegliere. Le card riusano i token
   della scheda corso (.courses-details-price) invece di
   inventare uno stile nuovo.
   ------------------------------------------------------------ */
.corsi-wrapper {
  display: flex;
  flex-flow: column;
  gap: var(--_project-font---spacing--40);
  width: 100%;
}

.corsi-griglia {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--_project-font---spacing--24);
  width: 100%;
}

.corso-card {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--_project-font---spacing--40);
  padding: var(--_project-font---all-padding--card-padding);
  border: 1px solid var(--neutral-02);
  border-radius: var(--_project-font---border-radius--32);
  background-color: var(--neutral-01);
}

/* Il prezzo e la sua postilla stanno sulla stessa riga, con la
   postilla allineata alla base della cifra. */
.corso-card-prezzo {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* Sul telefono le due card si impilano. */
@media screen and (max-width: 767px) {
  .corsi-griglia {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
   SEGNAPOSTO DEI CONTENUTI MANCANTI
   Riquadri tratteggiati per i contenuti non ancora consegnati.
   Devono sembrare dichiaratamente finti: un testo plausibile
   messo li' per "riempire" e' il modo migliore per ritrovarselo
   pubblicato per sbaglio.
   ------------------------------------------------------------ */
.segnaposto {
  display: flex;
  flex-flow: column;
  gap: 8px;
  width: 100%;
  padding: var(--_project-font---all-padding--card-padding);
  border: 2px dashed var(--secondary-color);
  border-radius: var(--_project-font---border-radius--32);
  background-color: var(--neutral-02);
}

.segnaposto-etichetta {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: var(--_project-font---border-radius--58);
  background-color: var(--secondary-color);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* Sulla pagina di un corso solo la scheda non va in griglia. */
.corso-card-singola {
  max-width: 560px;
}

/* ============================================================
   RESTYLING 09/2026 — TESTATA A PILLOLA FLOTTANTE (v2)

   La prima versione era una barra piena a tutta larghezza. La
   seconda iterazione di design la sostituisce con una pillola
   bianca che galleggia sopra il contenuto, staccata dal bordo.

   Sta FUORI dal flusso, come nel mockup: le pagine compensano con
   uno spazio in cima alla prima sezione (148px sul desktop, 100
   sul telefono). E' l'unico modo di avere il contenuto che scorre
   sotto la pillola, che e' il punto di una testata flottante.

   Uso "fixed" e non "sticky": sticky occuperebbe il suo spazio
   nel flusso e la pillola non galleggerebbe su niente.

   ATTENZIONE, l'errore in cui e' gia' cascato chi ha disegnato i
   mockup: non ancorare la pillola con "left: 50%" piu' una
   traslazione. Un elemento posizionato cosi' non puo' superare
   meta' della larghezza del contenitore, e le voci vanno a capo
   su se stesse ("La / filosofia"). Serve la fascia larga quanto
   lo schermo e la pillola centrata dentro.

   Lo scheletro resta quello di Webflow (.navbar .w-nav) perche'
   il pulsante a tre righe del telefono e' guidato da webflow.js.
   ============================================================ */
.header {
  position: fixed;
  top: 28px;
  left: 0;
  right: 0;
  bottom: auto;
  margin-top: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  padding: 0 40px;
  background-color: #0000;
  border-bottom: 0;
  pointer-events: none;
}

/* I contenitori intermedi dell'export non devono ne' allargare la
   pillola ne' stringerla: la pillola si dimensiona sul contenuto. */
.header .container,
.header .header-content-wrapper,
.header .navbar,
.header .nav-content-wrapper {
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
}

/* La pillola vera e propria. */
.flex-block-2 {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  height: 76px;
  padding: 0 20px 0 24px;
  border: 0;
  border-radius: var(--_project-font---border-radius--32);
  background-color: var(--neutral-01);
  box-shadow: 0 8px 40px #0000001f;
}

/* Quando c'e' l'invito all'azione il bordo destro si stringe. */
.flex-block-2.con-cta {
  padding-right: 14px;
}

.header-logo-link {
  flex: none;
  margin-right: 18px;
}

/* Sulle pagine corso, fra logo ed etichetta, una riga sottile. */
.header-separatore {
  flex: none;
  width: 1px;
  height: 28px;
  margin: 0 16px 0 0;
  background-color: var(--neutral-02);
}

/* Il nome del corso: dice su quale pagina sei, e NON e' un link.
   Serve perche' le due pagine corso hanno ancore con gli stessi
   nomi: senza, la testata non distingue una dall'altra. */
.header-etichetta-corso {
  flex: none;
  margin-right: 18px;
}

.menu-item-list {
  padding-left: 0;
  align-items: center;
  gap: 2px;
}

.nav-item {
  height: 44px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--_project-font---border-radius--100, 100px);
}

/* Le voci vanno in maiuscolo, come sul sito online. Il maiuscolo
   lo fa il CSS e non il testo scritto a mano: nel markup resta
   "La filosofia", che e' quello che leggono i lettori di schermo
   e che si puo' ancora cercare nella pagina.

   Riguarda solo le voci: l'etichetta del corso accanto al logo e'
   un nome proprio - AI Essentials, Pro Hospitality - e va lasciata
   com'e'. Lo stesso vale per l'invito all'azione. */
.nav-item p {
  text-transform: uppercase;
}

/* Una voce di due parole non deve mai andare a capo su se stessa. */
.nav-item,
.nav-cta,
.header-etichetta-corso {
  white-space: nowrap;
}

:root {
  --gaa-primary-tint: rgba(60, 40, 249, 0.1);
}

.nav-item.attivo {
  background-color: var(--gaa-primary-tint);
}

.nav-item.attivo p {
  color: var(--primary-color);
}

/* La voce profilata: sulla home multicorso e' l'unica azione, e
   deve restare neutra fra i due corsi. Un invito pieno
   privilegerebbe uno dei due, e non si puo' scegliere. */
.nav-item.enfasi {
  padding: 0 18px;
  margin-right: 6px;
  border: 1.5px solid var(--primary-color);
}

.nav-item.enfasi p {
  color: var(--primary-color);
}

.nav-cta {
  height: 52px;
  padding: 0 26px;
  margin-left: 18px;
  display: inline-flex;
  align-items: center;
  flex: none;
  border-radius: var(--_project-font---border-radius--58);
  background-color: var(--primary-color);
  text-decoration: none;
}

.nav-cta p {
  color: var(--neutral-01);
}

@media (hover: hover) {
  .nav-item:hover { background-color: var(--gaa-primary-tint); }
  .nav-item:hover p { color: var(--primary-color); }
  .nav-cta:hover { background-color: var(--primary-color-hover); }
}

.nav-item:focus-visible,
.nav-cta:focus-visible,
.header-logo-link:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Fra i 992 e i 1200px la pillola delle pagine corso non ci sta:
   logo, etichetta del corso, quattro voci in maiuscolo e l'invito
   all'azione sommano piu' della larghezza disponibile, e il logo
   finiva tagliato. Qui si stringe tutto quello che si puo'
   stringere senza toccare le misure dei comandi.

   L'etichetta del corso era sparita da qui finche' le voci erano
   a 16px semibold. Alleggerite a 14px medium la pillola si e'
   accorciata di quasi cento pixel, e l'etichetta ci sta di nuovo:
   rimessa, perche' e' la sola cosa che distingue le due pagine
   corso, che hanno ancore con gli stessi nomi. */
@media screen and (min-width: 992px) and (max-width: 1200px) {
  .header {
    padding: 0 16px;
  }
  .flex-block-2 {
    gap: 2px;
    padding: 0 12px 0 16px;
  }
  .header-logo-link {
    margin-right: 10px;
  }
  .header-logo {
    width: 140px;
  }
  .nav-item {
    padding: 0 11px;
  }
  .nav-item.enfasi {
    padding: 0 13px;
    margin-right: 4px;
  }
  .nav-cta {
    padding: 0 20px;
    margin-left: 10px;
  }
}

@media screen and (max-width: 991px) {
  .header {
    top: 16px;
    left: 16px;
    right: 16px;
    padding: 0;
    /* Webflow impone width: 100% sotto i 479px, che annulla i
       margini laterali e manda la pillola a sforare a destra.
       Con width: auto tornano a comandare left e right. */
    width: auto;
  }
  /* I contenitori intermedi hanno larghezza automatica: senza
     riportarli a tutta larghezza, il 100% della pillola vale
     quanto il suo contenuto e la barra resta stretta. */
  .header .container,
  .header .header-content-wrapper,
  .header .navbar,
  .header .nav-content-wrapper {
    width: 100%;
  }
  .flex-block-2 {
    width: 100%;
    height: 60px;
    padding: 0 8px 0 14px;
    border-radius: var(--_project-font---border-radius--24);
    justify-content: space-between;
  }
  .header-logo-link {
    margin-right: 0;
  }
  .nav-cta {
    display: none;
  }
}

/* ------------------------------------------------------------
   IL FUOCO DA TASTIERA SULLE DOMANDE FREQUENTI
   webflow.css mette "outline: 0" su .w-dropdown-toggle, che e'
   quello che sta sotto .faq-question. Risultato: chi naviga con
   la tastiera attraversava tutte e quindici le domande senza mai
   vedere dov'era.

   Sta qui e non nei fogli del restyling perche' il difetto e' di
   tutte le pagine, compresa la home del 1 ottobre che va online
   per prima. Non sposta nulla nell'impaginazione: si vede solo
   quando si arriva con il tasto di tabulazione.
   ------------------------------------------------------------ */
.faq-question:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: 4px;
}