/* =========================================================================
   La barra resta in alto anche se il sito ospite dice di no.

   Sul sito del cliente il tema mette `overflow-x: hidden` su <html> e <body>.
   È una riga innocua all'apparenza, ma un antenato con overflow diverso da
   `visible` **rompe position: sticky** di tutto quello che sta sotto: la barra
   scorreva via con la pagina. Da noi non succedeva, perché nel nostro WordPress
   quella regola non c'è — è esattamente il genere di cosa che si vede solo
   dentro il sito vero (trovato il 2026-08-05).

   `clip` taglia allo stesso modo ciò che sborda lateralmente, ma **non** crea
   il contenitore di scorrimento che manda in pezzi lo sticky. Si applica solo
   dove c'è una nostra barra, così le altre pagine del sito non cambiano.
   ========================================================================= */
html:has(.aef-nav),
body:has(.aef-nav) {
  overflow-x: clip;
}

/* Riserva per i browser senza :has(): la classe la mette nav.js */
html.aef-ha-nav,
body.aef-ha-nav {
  overflow-x: clip;
}

/* =========================================================================
   Alzati e Fattura — sezione 00 NAV STICKY
   Desktop 1440×114 · mobile 390×78. Valori dal file Figma.
   ========================================================================= */

.aef-nav,
.aef-nav *,
.aef-nav *::before,
.aef-nav *::after { box-sizing: border-box; }

.aef-nav {
  --ink: #030F0F;
  --green-bright: #00E27B;
  --muted: #C7D2CC;
  --orange: #FF5C1F;

  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 114px;
  padding: 20px 120px;
  /* Nel Figma il fondo è al 96%: lascia intravedere ciò che scorre sotto */
  background: rgba(3, 15, 15, 0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
  transition: box-shadow .25s ease, min-height .25s ease;
}

/* =========================================================================
   Perché la barra da sola non basta
   `position: sticky` vale solo dentro il proprio genitore. In Elementor il
   widget sta dentro due involucri alti esattamente quanto la barra: la barra
   si incolla a un contenitore che finisce subito, e in pratica non si incolla
   a niente — sparisce appena si scorre.
   La classe qui sotto la mette nav.js su tutti gli involucri fino al
   contenitore di primo livello, che è alto quanto la pagina. La regola con
   :has() ottiene lo stesso risultato anche senza JavaScript.
   ========================================================================= */
.aef-nav-host,
.elementor > .e-con:has(.aef-nav),
.elementor > .elementor-section:has(.aef-nav) {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Da amministratori la barra di WordPress resta sopra tutto: la nostra si
   ferma sotto, non sopra. Sotto i 782 px quella di WordPress scorre via. */
body.admin-bar .aef-nav-host,
body.admin-bar .elementor > .e-con:has(.aef-nav),
body.admin-bar .elementor > .elementor-section:has(.aef-nav) { top: 32px; }

@media (max-width: 782px) {
  body.admin-bar .aef-nav-host,
  body.admin-bar .elementor > .e-con:has(.aef-nav),
  body.admin-bar .elementor > .elementor-section:has(.aef-nav) { top: 0; }
}

/* Appena la pagina scorre, un filo d'ombra stacca la barra dal contenuto */
.aef-nav.is-stuck {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* ---------- Logo ---------- */
.aef-nav__brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
  text-decoration: none;
}

.aef-nav__logo {
  display: block;
  width: 228px;
  height: auto;
}

.aef-nav__edition {
  margin: 0;
  color: var(--green-bright);
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 2.4px;
  text-align: center;
}

/* ---------- Menu ---------- */
.aef-nav__menu {
  display: flex;
  align-items: center;
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aef-nav__link {
  position: relative;
  display: inline-block;
  padding: 2px 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  text-decoration: none;
  transition: color .2s ease;
}

/* Filo verde che si apre da sinistra al passaggio del mouse */
.aef-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--green-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.8,.3,1);
}

.aef-nav__link:hover,
.aef-nav__link:focus-visible { color: #FFFFFF; }

.aef-nav__link:hover::after,
.aef-nav__link:focus-visible::after { transform: scaleX(1); }

.aef-nav__link:focus-visible {
  outline: 2px solid var(--green-bright);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---------- Bottone ---------- */
.aef-nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 14px 26px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  background: var(--orange);
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: 0.3px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow:
    0 0 14px 1px rgba(255, 92, 31, 0.5),
    inset 0 1px 2px rgba(255, 255, 255, 0.28);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* Hover del componente «Button / CTA» del Figma. Il `color` va ridichiarato:
   senza, Elementor lo porta al suo #333366 per i link — vedi hero.css. */
.aef-nav__cta,
.aef-nav__cta:link,
.aef-nav__cta:visited { color: var(--ink); }

.aef-nav__cta:hover,
.aef-nav__cta:focus,
.aef-nav__cta:active {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.55);
  background: #FF7A45;
  color: var(--ink);
  box-shadow:
    0 0 26px 3px rgba(255, 122, 69, 0.75),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.aef-nav__cta:focus-visible {
  outline: 3px solid var(--green-bright);
  outline-offset: 3px;
}

/* Su telefono il Figma accorcia la scritta del bottone */
.aef-nav__cta-short { display: none; }

/* =========================================================================
   TABLET — non disegnato nel Figma: si stringe il passo, il menu resta
   ========================================================================= */
@media (max-width: 1180px) {
  .aef-nav { padding: 18px 40px; gap: 18px; }
  .aef-nav__menu { gap: 24px; }
  .aef-nav__link { font-size: 15px; }
  .aef-nav__logo { width: 190px; }
  .aef-nav__cta { padding: 12px 20px; font-size: 17px; }
}

/* =========================================================================
   TABLET STRETTO — sotto i 900 px il menu non ci sta

   Misurato: marchio 230 + cinque voci 312 + bottone 211, con gli stacchi,
   chiedono 829 px dentro una barra che a 768 px ne offre 688. Il bottone
   d'acquisto usciva dallo schermo e trascinava con sé tutta la pagina
   (61 px di scorrimento laterale a 768 px, cioè su ogni iPad verticale).

   Restano marchio e bottone, come nel frame telefono del Figma: la voce di
   menu che conta — «Acquista» — è il bottone stesso, e le altre ancore
   restano raggiungibili scorrendo. Sopra i 900 px il menu torna, con almeno
   33 px di stacco su entrambi i lati.
   ========================================================================= */
@media (max-width: 900px) {
  .aef-nav__menu { display: none; }
}

/* =========================================================================
   MOBILE — frame 390×78: barra più bassa, marchio e bottone rimpiccioliti
   ========================================================================= */
@media (max-width: 767px) {
  .aef-nav {
    min-height: 78px;
    padding: 16px 24px;
    gap: 12px;
  }

  .aef-nav__logo { width: 140px; }

  .aef-nav__edition {
    font-size: 9px;
    line-height: 13px;
    letter-spacing: 1.6px;
  }

  /* Il menu è già nascosto dalla fascia dei 900 px, qui sopra. */

  .aef-nav__cta {
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 16px;
  }

  .aef-nav__cta-long { display: none; }
  .aef-nav__cta-short { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .aef-nav,
  .aef-nav__cta,
  .aef-nav__link,
  .aef-nav__link::after { transition: none; }
}

/* =========================================================================
   LANDING PARTNER — tutto quello che segue vale SOLO con «aef-nav--partner»

   La barra è condivisa: la landing biglietti e la landing informazioni usano
   lo stesso foglio e sono già in linea. Nessuna riga qui sotto deve poterle
   toccare, quindi ogni selettore porta la classe della landing Partner.

   Attenzione alla trappola in cui si è già caduti: «.aef-nav--partner X» pesa
   due classi e batte «X» ANCHE dentro una media query. Una regola pensata per
   il desktop e scritta fuori da una media query scende quindi sul telefono e
   vince sulla regola del telefono. Per questo qui sotto sta fuori dalle media
   query solo ciò che vale davvero a tutte le larghezze; il resto è chiuso
   nella fascia giusta:
     ≥1181  desktop        (sopra la fascia tablet che ridichiara padding e gap)
     ≥768   desktop+tablet (dove la spaziatura fra le lettere è ancora 2,4px)
     ≤767   telefono
     ≤339   più stretto del frame: i conti del telefono non tornano più
   Valori dai frame «Nav — sticky» 1440×113,94 e «Nav — mobile» 390×78,44.

   Vale anche per gli stati: `:hover`, `:focus` e `:focus-visible` scritti fuori
   da una media query pesano (0,3,0) e scendono su TUTTE le larghezze. Gli aloni
   del bottone sono diversi fra desktop e telefono, quindi in fondo al foglio
   c'è una fascia ≤767 che li rimette in scala. Stessa ragione per la
   transizione ridichiarata sul bottone: va rispenta sotto
   «prefers-reduced-motion» con lo stesso peso, in fondo.
   ========================================================================= */

/* ---- valgono a ogni larghezza ---------------------------------------- */

/* clipsContent è true su entrambi i frame: l'alone del bottone si ferma al
   bordo della barra. Senza, i 44px di sfocatura del secondo alone colano
   sull'Hero. `clip` e non `hidden`: non crea un contenitore di scorrimento. */
.aef-nav.aef-nav--partner { overflow: clip; }

/* Il fondo dichiarato è quello del frame — rgba(3,15,15,0.96) — ma quel 4% di
   trasparenza lascia passare ciò che sta dietro, e dietro c'è il <body> bianco
   che il modello «Elementor Canvas» mette su questa pagina: il composito
   diventava rgb(13,24,24) invece del rgb(3,15,15) del render. Misurato:
   0,96×3 + 0,04×255 = 13,1.

   Il rimedio è dipingere il fondo della PAGINA, non quello dell'involucro
   della barra. Accendere e spegnere il fondo dell'involucro (com'era prima:
   pieno a riposo, trasparente da `is-stuck` in poi) produceva un salto di
   colore visibile al primo scorrimento — misurato sul dominante di tutta la
   barra: rgb(3,15,15) fino a 4px di scorrimento, rgb(13,24,24) da 5px, e il
   ritorno a rgb(4,15,15) solo verso i 115px, quando l'Hero arriva davvero
   dietro la barra. Nei primi ~115px dietro la barra incollata non c'è ancora
   l'Hero: c'è la fessura che la barra stessa ha lasciato, e sotto il bianco.

   Col fondo pagina scuro il composito è rgb(3,15,15) fermo e resta rgb(3,15,15)
   mentre si scorre, senza toccare la trasparenza che il misuratore legge e
   senza mettere niente di opaco fra la barra e il contenuto che le passa sotto.
   Vale solo dove c'è la barra della landing Partner: le altre due landing, che
   sono già in linea, non hanno quella classe e non vengono sfiorate.
   Su un browser senza :has() la regola cade e si torna al fondo di prima:
   degrada, non rompe. */
body:has(.aef-nav--partner) { background-color: #030F0F; }

/* Nel frame la riga dell'edizione è allineata a sinistra sotto il marchio. */
.aef-nav--partner .aef-nav__edition { text-align: left; }

/* Bordo INSIDE del Figma: il filo di 1px sta DENTRO i 234×53 dichiarati.
   `border` su un bottone a contenuto aggiunge invece 1px per lato (236×55):
   si usa outline con outline-offset -1px. Il colore del bordo resta quello
   dichiarato più sopra, così chi legge lo stile calcolato lo ritrova. */
.aef-nav--partner .aef-nav__cta {
  border-width: 0;
  outline: 1px solid rgba(255, 255, 255, 0.4);
  outline-offset: -1px;
  /* Con il bordo spostato su `outline`, il colore del filo cambia su
     `outline-color`: la transizione condivisa sfuma `border-color`, che qui è
     largo zero, e il filo scattava di netto al passaggio del mouse. Si
     ridichiara la stessa lista aggiungendo `outline-color`. La lista va
     ripetuta per intero perché `transition` è una scorciatoia: dichiararne una
     sola voce cancellerebbe le altre. */
  transition:
    transform .18s cubic-bezier(.2, .8, .3, 1),
    background-color .18s ease,
    border-color .18s ease,
    outline-color .18s ease,
    box-shadow .18s ease;
}

/* ---- desktop e tablet (≥768) ----------------------------------------- */
@media (min-width: 768px) {
  /* Il CSS mette la spaziatura fra le lettere anche DOPO l'ultima, Figma no:
     la coda di 2,4px allargava il marchio a 230,23 invece dei 228 del frame.
     Il margine negativo toglie solo quella coda, non tocca il testo. */
  .aef-nav--partner .aef-nav__edition { margin-right: -2.4px; }

  /* I tre effetti del componente «Button / CTA»: due aloni arancioni con
     scostamento 0,0 e un filo di luce interno che viene da SOPRA (0,+1).
     Vanno scritti qui sotto la classe della landing perché Elementor porta
     «.elementor a { box-shadow: none }», che pesa (0,1,1) e batteva la sola
     «.aef-nav__cta» (0,1,0); con la classe della landing si pesa (0,2,0). */
  .aef-nav--partner .aef-nav__cta {
    box-shadow:
      0 0 18px 1px rgba(255, 92, 31, 0.65),
      0 0 44px 6px rgba(255, 92, 31, 0.35),
      inset 0 1px 2px rgba(255, 255, 255, 0.28);
  }
}

/* ---- solo desktop (≥1181) -------------------------------------------- */
@media (min-width: 1181px) {
  /* Il frame dice margine interno 20/100 e stacco fra i blocchi 40. */
  .aef-nav.aef-nav--partner {
    gap: 40px;
    padding: 20px 100px;
  }
}

/* ---- telefono (≤767) -------------------------------------------------- */
@media (max-width: 767px) {
  /* Il frame telefono dice margine interno 16/20. */
  .aef-nav.aef-nav--partner { padding: 16px 20px; }

  /* Stacco fra logo ed edizione: 4, non 6. Sono i +1,9px di altezza. */
  .aef-nav--partner .aef-nav__brand { gap: 4px; }

  /* La spaziatura fra le lettere è 0,276px, non 1,6: con 1,6 la riga
     dell'edizione misurava 176px invece di 140 e allargava il marchio, e non
     andava a capo solo perché il bottone diceva «ACQUISTA». Le due cose vanno
     sistemate insieme, qui sotto. */
  .aef-nav--partner .aef-nav__edition {
    letter-spacing: 0.276px;
    margin-right: -0.276px;
  }

  .aef-nav--partner .aef-nav__cta {
    font-size: 13px;
    box-shadow:
      0 0 16px 1px rgba(255, 92, 31, 0.65),
      0 0 36px 5px rgba(255, 92, 31, 0.35),
      inset 0 1px 2px rgba(255, 255, 255, 0.28);
  }

  /* Nel frame telefono il bottone porta la stessa scritta del desktop:
     «DIVENTA PARTNER». La scritta corta del widget resta nel markup per le
     altre due landing, qui non si mostra. Ci sta: 20+140+12+148+20 = 340 su
     390. Sotto i 340 no, e per quelle larghezze c'è la fascia qui sotto. */
  .aef-nav--partner .aef-nav__cta-long { display: inline; }
  .aef-nav--partner .aef-nav__cta-short { display: none; }
}

/* ---- più stretti del frame (≤339) -----------------------------------------
   Il frame telefono è largo 390 e la sua somma è 20+140+12+148+20 = 340: sotto
   i 340 px non ci sta più niente. Misurato prima di questa regola: a 320 px il
   bottone finiva a 320,05, cioè oltre il bordo dello schermo, e `overflow-x:
   clip` lo tagliava in silenzio senza nemmeno una barra di scorrimento a
   segnalarlo. A 330 sbordava di 10, a 340 di 0,05.

   Sotto quella soglia si stringono solo gli spazi — margini interni, stacco e
   respiro dentro il bottone — lasciando intatti corpo del testo, scritta e
   raggio, che sono quelli dichiarati dal frame. Nuova somma a 320:
   12+140+8+143,75+12 = 315,75, con 4,25 px di respiro.
   La soglia è 339 e non 359 perché a 340 i conti del frame tornano ancora: una
   larghezza che funziona non si tocca. */
@media (max-width: 339px) {
  .aef-nav.aef-nav--partner {
    padding-left: 12px;
    padding-right: 12px;
    gap: 8px;
  }

  .aef-nav--partner .aef-nav__cta {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ---- passaggio del mouse ---------------------------------------------
   Va DOPO le regole qui sopra: pesa (0,3,0) e deve battere l'alone a riposo
   della landing Partner, che pesa (0,2,0). Senza, il bottone non reagirebbe
   più. Stessi colori del frame, un po' più forti; il bordo cambia con
   outline-color, perché per la landing Partner il border è a zero. */
.aef-nav--partner .aef-nav__cta:hover,
.aef-nav--partner .aef-nav__cta:focus,
.aef-nav--partner .aef-nav__cta:active {
  outline-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 24px 2px rgba(255, 92, 31, 0.8),
    0 0 56px 8px rgba(255, 92, 31, 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* ---- anello di fuoco da tastiera --------------------------------------
   Qui l'`outline` è già occupato: fa da bordo INSIDE del frame. Se l'anello di
   fuoco lo riusasse — com'era prima, `outline: 3px solid` con offset 3 — per
   tutto il tempo in cui il bottone è a fuoco il filo di 1 px del Figma
   sparirebbe. L'anello si disegna quindi con `box-shadow`, che si somma alle
   ombre già presenti separandole con una virgola: il bordo resta al suo posto e
   l'anello si vede lo stesso, verde brillante su arancio.
   Prima ombra della lista = quella dipinta più in alto: l'anello sta sopra gli
   aloni. `:focus-visible` implica `:focus`, quindi sotto c'è sempre la lista
   del passaggio del mouse, che si ripete qui per intero.
   Provato premendo Tab davvero, non con .focus() da codice. */
.aef-nav--partner .aef-nav__cta:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.55);
  outline-offset: -1px;
  box-shadow:
    0 0 0 3px var(--green-bright),
    0 0 24px 2px rgba(255, 92, 31, 0.8),
    0 0 56px 8px rgba(255, 92, 31, 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* Il marchio è un link, si raggiunge con Tab, e finora prendeva solo l'anello
   di serie del browser: 1 px blu scuro su un fondo #030F0F, praticamente
   invisibile. Qui l'outline è libero — il marchio non ha bordi — e si usa
   quello, come per le voci di menù. */
.aef-nav--partner .aef-nav__brand:focus-visible {
  outline: 2px solid var(--green-bright);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---- telefono: passaggio del mouse e fuoco in scala --------------------
   Le due regole qui sopra stanno fuori da ogni media query e pesano (0,3,0):
   senza questo blocco scenderebbero anche sul telefono e il bottone piccolo
   prenderebbe gli aloni del desktop (24/2 + 56/8) invece dei suoi. È la
   trappola descritta in cima al blocco. Gli aloni qui sono i 16/1 + 36/5 del
   frame telefono, cresciuti nella stessa proporzione del desktop. */
@media (max-width: 767px) {
  .aef-nav--partner .aef-nav__cta:hover,
  .aef-nav--partner .aef-nav__cta:focus,
  .aef-nav--partner .aef-nav__cta:active {
    box-shadow:
      0 0 22px 2px rgba(255, 92, 31, 0.8),
      0 0 46px 7px rgba(255, 92, 31, 0.45),
      inset 0 1px 2px rgba(255, 255, 255, 0.4);
  }

  .aef-nav--partner .aef-nav__cta:focus-visible {
    box-shadow:
      0 0 0 3px var(--green-bright),
      0 0 22px 2px rgba(255, 92, 31, 0.8),
      0 0 46px 7px rgba(255, 92, 31, 0.45),
      inset 0 1px 2px rgba(255, 255, 255, 0.4);
  }
}

/* Il blocco «prefers-reduced-motion» in cima spegne le transizioni con
   `.aef-nav__cta`, che pesa (0,1,0): la transizione ridichiarata più sopra con
   `.aef-nav--partner .aef-nav__cta` (0,2,0) la batteva e sulla landing Partner
   il movimento sarebbe tornato acceso. Si rispegne qui, allo stesso peso e
   dopo. */
@media (prefers-reduced-motion: reduce) {
  .aef-nav--partner .aef-nav__cta { transition: none; }
}

/* =========================================================================
   LO SPAZIO SOPRA I BERSAGLI DELLE ANCORE

   La barra è appiccicata in alto e copre i primi 114 pixel della pagina (78 sul
   telefono). Le voci del menù lo sanno — `nav.js` scala l'altezza della barra
   prima di scorrere — ma **tutti gli altri collegamenti no**: i nove pulsanti
   che portano a `#form` sparsi per la pagina atterravano con la sezione a
   filo zero, e l'occhiello finiva sotto la barra. Sul telefono si vedeva
   tagliato a metà: sei pixel su sedici.

   `scroll-margin-top` lo risolve alla radice, per **qualunque** modo di
   arrivarci — un clic, un indirizzo con l'ancora scritto a mano, il tasto
   indietro — e senza che nessun copione debba saperlo.
   ========================================================================= */
:where(#numeri, #partner, #pubblico, #motivi, #recensioni, #speaker,
       #edizioni, #pacchetti, #form, #modulo, #faq) {
  scroll-margin-top: 130px;
}

@media (max-width: 767px) {
  :where(#numeri, #partner, #pubblico, #motivi, #recensioni, #speaker,
         #edizioni, #pacchetti, #form, #modulo, #faq) {
    scroll-margin-top: 94px;
  }
}