/* ==========================================================================
   Menu di navigazione condiviso — aggiunto il 17 settembre 2026
   Sta su home, pagine servizio, blog e strumenti. NON sulle landing (sono
   pagine di conversione: un menu offrirebbe scorciatoie per saltare
   l'argomentazione) né sulle demo.

   Su schermo largo: barra orizzontale con tendine.
   Su telefono: icona che diventa X e pannello a lista sulla destra.

   Le variabili hanno un ripiego perché questo file viene caricato sia dove
   c'è style.css (home) sia dove c'è lp.css (servizi, blog, strumenti).
   ========================================================================== */
.navml{
  --navml-testo: var(--text, #fff);
  --navml-muto: var(--text-muted, rgba(255,255,255,.66));
  --navml-accento: var(--secondary-testo, #9E75E2);
  --navml-attivo: var(--primary, #015E82);
  --navml-fondo: rgba(22,22,24,.96);
  --navml-bordo: rgba(255,255,255,.12);
  font-family: var(--textFont, var(--font, system-ui, sans-serif));
}

/* --- il pulsante: tre righe che diventano una X -------------------------- */
.navml__tasto{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;border:1px solid var(--navml-bordo);
  border-radius:11px;cursor:pointer;
  color:var(--navml-testo);
}
.navml__tasto:focus-visible{outline:3px solid var(--navml-accento);outline-offset:2px;}
/* stesso fondo sfocato della barra: sulla home serve perché l'header è
   trasparente e il tasto sta sopra la hero, altrove per non avere due aspetti
   diversi della stessa cosa */
.navml__tasto{
  background:rgba(22,22,24,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.navml__righe{position:relative;display:block;width:19px;height:13px;}
.navml__righe i{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:currentColor;transition:transform .26s ease, opacity .18s ease, top .26s ease;
}
.navml__righe i:nth-child(1){top:0;}
.navml__righe i:nth-child(2){top:50%;margin-top:-1px;}
.navml__righe i:nth-child(3){top:calc(100% - 2px);}
.navml__tasto[aria-expanded="true"] .navml__righe i:nth-child(1){top:50%;margin-top:-1px;transform:rotate(45deg);}
.navml__tasto[aria-expanded="true"] .navml__righe i:nth-child(2){opacity:0;}
.navml__tasto[aria-expanded="true"] .navml__righe i:nth-child(3){top:50%;margin-top:-1px;transform:rotate(-45deg);}

/* --- il pannello sul telefono: lista a destra, non a tutto schermo -------- */
.navml__pannello{
  position:absolute;top:calc(100% + 10px);right:14px;z-index:70;
  min-width:232px;max-width:min(80vw, 300px);
  max-height:min(70vh, 560px);overflow-y:auto;overscroll-behavior:contain;
  padding:8px;border-radius:14px;border:1px solid var(--navml-bordo);
  background:var(--navml-fondo);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 22px 48px rgba(0,0,0,.45);
  opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.navml__pannello.is-aperto{opacity:1;transform:none;pointer-events:auto;}

.navml__pannello a{
  display:block;padding:11px 13px;border-radius:9px;
  color:var(--navml-testo);text-decoration:none;font-size:.97rem;line-height:1.35;
}
.navml__pannello a:hover{background:rgba(255,255,255,.07);}
.navml__pannello > a[aria-current],
.navml__pannello > .navml__gruppo > button[data-dentro]{
  background:var(--navml-attivo);color:var(--navml-testo);font-weight:600;
}
.navml__sotto a[aria-current]{color:var(--navml-accento);font-weight:700;}

/* voce che apre le sottovoci */
.navml__gruppo > button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:11px 13px;border:0;border-radius:9px;background:none;cursor:pointer;
  color:var(--navml-testo);font:inherit;font-size:.97rem;text-align:left;
}
.navml__gruppo > button:hover{background:rgba(255,255,255,.07);}
.navml__gruppo > button::after{
  content:"";width:8px;height:8px;flex:0 0 auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s ease;opacity:.7;
}
.navml__gruppo > button[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-3px,-3px);}

.navml__sotto{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s ease;
}
.navml__gruppo > button[aria-expanded="true"] + .navml__sotto{grid-template-rows:1fr;}
.navml__sotto > div{overflow:hidden;}
.navml__sotto a{
  padding-left:26px;font-size:.92rem;color:var(--navml-muto);position:relative;
}
.navml__sotto a::before{
  content:"";position:absolute;left:14px;top:50%;width:5px;height:1px;background:currentColor;opacity:.5;
}
.navml__sotto a:hover{color:var(--navml-testo);}
.navml__attesa{padding:11px 13px 11px 26px;font-size:.88rem;color:var(--navml-muto);}

/* ==========================================================================
   Il marchio: un cursore che lampeggia e scrive "ml"
   Stesso effetto del badge "Powered by" di powered-by.html, ridotto a due
   caratteri. Sta a sinistra: sulla home da solo (l'header non aveva nulla),
   sulle altre pagine dentro il link del brand, prima del nome.

   ⚠ Il font è un sottoinsieme di Press Start 2P (CodeMan38, SIL OFL 1.1) di
   980 byte, incorporato qui: nessuna chiamata a Google Fonts, nessun file in
   più. Copre solo i caratteri « .0Pabdegilmortuwy», cioè quelli del badge:
   se il marchio cambia lettere il sottoinsieme va rigenerato (e va rifatto
   anche in powered-by.html, che ne tiene una copia perché è un frammento da
   incollare sui siti dei clienti).
   ========================================================================== */
@font-face{
  font-family:'MLPixel';
  font-style:normal;
  font-weight:400;
  font-display:block; /* niente ripiego a schermo: le misure in ch dipendono da questo font */
  src:url(data:font/woff2;base64,d09GMgABAAAAAAPUAAwAAAAACRAAAAOGAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHCgGYACBHBEICodghTQLKAABNgIkAygEIAWESgcgG+sGyASeT91/nmv5k2R7kbyM8FALVr+zFUHCRUl9JkUdrogXHVJA/3OpmrFwgYwpHArijf0z1+oAKdcKWMyVoqW+WEpe6zK8w151eQoBNCOEG9GyFeu20fXc4foFMjguNgMhpFbqR7lJy0J0I9oFrDV75ABT5MPGcAuWfRtXl+7espwPyLmifqS16kdp5qI3/NGTcixHZbAGlI13R83oN7sTcx0YSGcUGTkTmMQmjnCck5zmPBep0sByZX5Um+Ywx8TnJPW7wlfh2/BVeCe8Hd4Kb4Y3wmvh1fA4PAoPw4ORDrb6BQmBToy4G4wYK4JkdFBmgcQxsYotWyhUCCqdl7g91nEWJ1pHFsdaZ3SlPU50O/3Qzt3b451tnVpPpCohRUdGtLR1wkSaBJWqZKdoMZJKIjWxC6mU8i2GtN1xRBCptGm9kPN0gmYzsXAilQSIYYh3inXpjmtiOCVGaUkjw04xLVrS2CAto/qVdmks5Bg3zhp0pFtMSiJHFS6foYj3mY1SZeKdBp3B4IIUpYNGjUy2+jRrwXBGjKQ0jjem2TENhH6g2SmGojj75OzLprWls85b5xzu7BPnrHOlt9ZaisJZbMkvVJwrLxXWVeSfeF92Cr0sOBzwxp+9VLhScc5XXOleNk0Cicd52vukwiub1s/1qp113r38beycLb1TWS9N2Sfe4SpPpIAv3U2M9KiK5qWas77i599Lsyi981bA+a48pS9t6Sv8/TdRrpxzoCxn4Cpnw9mVYgT9/G0+Yz3f38VCUWaAvwvv/Y10iPDF9oeT5h/sNO/3dvUC8x+NzP8I55vf3P73k/9vqB/roI3BAdRL9f/7SbrzfXwk6kdc2emES1cLHvS5bswiYRhtOEDysXZOvApv3MEkvxCdmoT+PDFFZHxpUizgbVPMOJqmFvqyz9TKKKaxmfATOEWdOpeYw0QmUuMoVU5ziTqtmkAtfo4Jv8X3TzKRjaxgHZuocpwaNbZS5/BP0j+FTYxny/8Tb3Cupr6D41Th/Re5QM7UXwizN8CXuQi5aCvfAPw1c1nKbrawnLnj78gdPGb/Ui5yiStrh5N7gtX9l0lMZgo52zjFcfJZYy39FznDcY7WRBfToOHU3mG9+UdxlIsc4wqLuLojwuPsLBGL+eqMZhw5ltMAYhegtoNsk60fI2cFi+Gtb+Aw5+fz+iEiDPl3Ufnd8D5TfnI=) format('woff2');
}
.navml-logo-link{display:inline-flex;align-items:center;text-decoration:none;}
.navml-logo-link:focus-visible{
  outline:3px solid var(--navml-accento, #9E75E2);outline-offset:4px;border-radius:6px;
}
/* 16px perché il font è disegnato su una griglia di un ottavo di em: sui
   multipli di 8 i pixel cadono interi e il marchio resta nitido. */
.navml-logo{
  --navml-logo-c:#0086bb;
  /* ⚠ content-box: le pagine hanno *{box-sizing:border-box}, e con il bordo
     destro che fa da cursore la larghezza in ch andrebbe a finire dentro il
     bordo (misurato: "ml" restava tagliato a meta'). Lo stesso motivo per cui
     ce l'ha il badge di powered-by.html. */
  box-sizing:content-box;
  display:inline-flex;align-items:center;
  font:400 16px/1 'MLPixel',ui-monospace,"Courier New",monospace;
  color:var(--navml-logo-c);
}
/* larghezza fissa: due caratteri più mezza cella per il cursore. Il resto
   dell'header non si sposta mentre il marchio si scrive. */
.navml-logo__slot{box-sizing:content-box;display:block;flex:none;width:2.5ch;}
.navml-logo__clip{
  box-sizing:content-box;
  display:block;width:0;overflow:hidden;white-space:nowrap;
  color:var(--navml-logo-c);
  border-right:.5ch solid var(--navml-logo-c);
  animation:navml-logo-scrivi .42s steps(2,end) .5s 1 both,
            navml-logo-cursore 1.06s steps(1,end) infinite;
}
@keyframes navml-logo-scrivi{from{width:0;}to{width:2ch;}}
@keyframes navml-logo-cursore{
  0%,49.9%{border-right-color:var(--navml-logo-c);}
  50%,100%{border-right-color:transparent;}
}
/* Si scrive una volta sola e resta, mentre il cursore continua a lampeggiare:
   in un header un testo che si cancella e ricompare ogni pochi secondi porta
   l'occhio via dal contenuto. Per farlo ripetere come il badge servono la
   durata lunga e i keyframe di powered-by.html. */
@media (prefers-reduced-motion:reduce){
  .navml-logo__clip{animation:none;width:2ch;border-right-color:transparent;}
}

/* Nelle pagine servizio/blog/strumenti il marchio entra nel brand che c'è già.
   ⚠ Là il nome si porta dietro "· XYZ Studio", e a 1000px l'header ha pochi
   pixel di margine (vedi la soglia qui sotto): il suffisso torna solo da
   1200px, dove lo spazio c'è davvero. Fino a lì il marchio prende il suo posto. */
@media (max-width:1199px){
  .lp-header__brand > span:last-child{display:none;}
}
/* Il nome non va spezzato: il brand è un elemento flessibile e con il marchio
   davanti si stringeva, mandando "Mario Liguori" su due righe e alzando
   l'header (misurato: 50px invece di 25). */
.lp-header__brand{white-space:nowrap;}
/* ⚠ Marchio e nome vanno ridichiarati qui, con due classi, e non possono
   dipendere da lp.css: quel file NON ha la versione nel nome e resta in cache
   un giorno, quindi a chi ha già visitato il sito arriva subito il menu.css
   nuovo e per un giorno ancora il lp.css vecchio — dove
   ".lp-header__brand span" spegneva ogni span del brand, marchio compreso.
   Visto in produzione il 17/09/2026: nome e suffisso smorti, e sotto i 640px
   il marchio sarebbe scomparso del tutto. Queste regole vincono in ogni caso. */
.lp-header__brand .navml-logo{display:inline-flex;font-weight:400;}
.lp-header__brand .navml-logo__slot{display:block;font-weight:400;}
.lp-header__brand .navml-logo__clip{
  display:block;font-weight:400;color:var(--navml-logo-c);
}
.lp-header__brand .lp-header__nome{
  display:block;color:var(--text, #fff);font-weight:700;
}
/* Sotto i 480px a sinistra resta solo il marchio: marchio, nome, "Parliamone"
   e tasto del menu insieme non ci stanno (misurato: 7px di troppo a 320px).
   Il nome resta nell'aria-label del link, quindi chi usa lo screen reader lo
   sente comunque. */
@media (max-width:479px){
  .lp-header__brand .lp-header__nome{display:none;}
}

/* Sulla home il menu sta nell'header trasparente #headerFixed, che è in
   style.css. ⚠ Anche style.css non ha la versione nel nome: per chi ha il
   sito in cache arriverebbe il menu.css nuovo e per un giorno l'header
   vecchio, col menu centrato invece che a destra. Le tre righe che contano
   stanno quindi anche qui, in un file versionato (stessa specificità, e
   menu.css è caricato dopo). */
#headerFixed{
  justify-content:space-between;
  gap:12px;
  padding:6px 14px;
}

/* --- fino a 999px: il tasto del menu va a destra di tutto -----------------
   Nell'header delle pagine servizio/blog/strumenti l'ordine nel documento è
   brand · menu · "Parliamone", quindi il tasto resterebbe in mezzo. Sul
   telefono il posto del menu è l'angolo destro: è dove arriva il pollice ed
   è il lato da cui si apre il pannello. Sulla home ci pensa #headerFixed,
   che da qui in poi è space-between (marchio a sinistra, menu a destra). */
@media (max-width:999px){
  .lp-header__inner{justify-content:flex-start;}
  .lp-header__brand{margin-right:auto;}
  .lp-header__inner .navml{order:3;}
}

/* --- da 1000px in su: barra orizzontale con tendine ----------------------
   Non 900: fra 900 e 980 la barra, il logo e il pulsante "Parliamone"
   dell'header di _inc/testa.php non ci stanno insieme e il pulsante esce
   dallo schermo (misurato: 53px a 900px). Sotto la soglia c'è il pannello. */
.navml__barra{display:none;}

@media (min-width:1000px){
  .navml__tasto{display:none;}
  .navml__pannello{display:none;}
  /* La pillola scura sfocata che la home aveva prima del menu condiviso.
     Su tutte le pagine: sulla home perché l'header è trasparente e il menu
     sta sopra la hero, altrove perché il menu dev'essere lo stesso ovunque. */
  .navml__barra{
    display:flex;align-items:center;gap:2px;
    padding:4px;border-radius:999px;
    background:rgba(22,22,24,.72);
    border:1px solid var(--navml-bordo);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    box-shadow:0 8px 24px rgba(0,0,0,.35);
  }

  .navml__barra > li{position:relative;list-style:none;}
  .navml__barra a,
  .navml__barra > li > button{
    display:inline-flex;align-items:center;gap:7px;
    padding:9px 14px;border:0;background:none;border-radius:999px;cursor:pointer;
    color:var(--navml-muto);text-decoration:none;font:inherit;font-size:.93rem;font-weight:500;
    white-space:nowrap;
  }
  .navml__barra a:hover,
  .navml__barra > li > button:hover{color:var(--navml-testo);background:rgba(255,255,255,.06);}
  /* il selettore colorato: sulla home lo sposta l'IntersectionObserver mentre
     si scorre, altrove segna la pagina aperta */
  .navml__barra > li > a[aria-current],
  .navml__barra > li > button[data-dentro]{
    background:var(--navml-attivo);color:var(--navml-testo);font-weight:600;
  }
  .navml__barra > li > a[aria-current]:hover,
  .navml__barra > li > button[data-dentro]:hover{background:var(--navml-attivo);}
  .navml__barra .navml__sotto a[aria-current]{color:var(--navml-accento);font-weight:700;}
  .navml__barra > li > button::after{
    content:"";width:6px;height:6px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-2px);opacity:.7;transition:transform .2s ease;
  }
  .navml__barra > li > button[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-1px);}

  /* la tendina */
  .navml__barra .navml__sotto{
    position:absolute;top:calc(100% + 8px);left:0;z-index:70;
    display:block;min-width:250px;padding:7px;
    border-radius:13px;border:1px solid var(--navml-bordo);
    background:var(--navml-fondo);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    box-shadow:0 20px 44px rgba(0,0,0,.45);
    opacity:0;transform:translateY(-6px);pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .navml__barra > li > button[aria-expanded="true"] + .navml__sotto{
    opacity:1;transform:none;pointer-events:auto;
  }
  /* l'ultima voce è la più vicina al bordo: la tendina si allinea a destra,
     altrimenti alla soglia uscirebbe dallo schermo (misurato: 53px) */
  .navml__barra > li:last-child .navml__sotto{left:auto;right:0;}
  .navml__barra .navml__sotto > div{overflow:visible;}
  .navml__barra .navml__sotto a{
    display:block;padding:10px 12px;border-radius:8px;font-size:.92rem;color:var(--navml-muto);
  }
  .navml__barra .navml__sotto a::before{display:none;}
  .navml__barra .navml__sotto a:hover{color:var(--navml-testo);background:rgba(255,255,255,.07);}
}

/* Fra 1000 e 1119px barra, brand (che adesso ha il marchio davanti al nome) e
   pulsante "Parliamone" stanno insieme per pochi pixel: le voci si stringono
   di 3px per lato invece di far comparire la barra più tardi, così a 1024 —
   il tablet in orizzontale — il menu resta quello da schermo largo.
   Misurato: col padding pieno a 1000px l'header sbordava di 5px. */
@media (min-width:1000px) and (max-width:1119px){
  .navml__barra a,
  .navml__barra > li > button{padding-left:11px;padding-right:11px;}
}

@media (prefers-reduced-motion:reduce){
  .navml__pannello,.navml__sotto,.navml__righe i,
  .navml__gruppo > button::after,.navml__barra > li > button::after{transition:none;}
}