/* site-nav.css — NAV2 (2026-10-10): UNICA fonte di stile della barra in alto del sito (logo, menu, azioni,
   tendina lingua, hamburger, pannello mobile), per le pagine statiche e per il blog.
   Markup: templates/site/_site_nav.html. Le pagine NON ridefiniscono queste regole. Variabili colore usate: --txt --txt-2 --brand --brand-glow
   --line-strong --bg-3, definite da ogni pagina statica e da static/blog/chrome/site-chrome.css. */
/* NAV3b: la barra non dipende dagli stili della pagina che la ospita (le pagine legali hanno regole su ul/li/p/a/body).
   Queste due regole stanno in testa: le regole a classe che seguono vincono a parita' di specificita'. */
.nav, .nav-mobile-panel { color: var(--txt); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.5; }
.nav :where(ul, li, p), .nav-mobile-panel :where(ul, li, p) { margin: 0; padding: 0; list-style: none; font-size: inherit; line-height: inherit; color: inherit; }
html { scrollbar-gutter: stable; }  /* niente scatto orizzontale tra pagine corte e lunghe */

/* reset limitato alla barra (il blog non ha un reset globale, le pagine statiche si') */
.nav, .nav *, .nav-mobile-panel, .nav-mobile-panel * { margin: 0; padding: 0; box-sizing: border-box; }
.nav a, .nav-mobile-panel a { text-decoration: none; }
.nav, .nav-mobile-panel { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }

.nav a, .nav-mobile-panel a { color: inherit; }
.nav ul, .nav-mobile-panel ul { list-style: none; }
/* ═══ Nav ═════════════════════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-inner {
  /* NAV1 punto 1 — nav a 3 zone: logo | 5 voci di menu centrate | azioni
     (Accedi + tendina lingua + hamburger mobile). La CTA "Provalo
     gratuitamente" NON è più qui (spostata nello sticky, vedi
     .sticky-cta più sotto): la colonna centrale ora ospita il menu,
     dimensionato dal proprio contenuto e centrato fra logo e azioni
     grazie alle due colonne auto/1fr ai lati. */
  max-width: 1180px; margin: 0 auto;
  padding: 14px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
}
/* NAV1 punto 1 — 5 voci di menu centrali (Prodotto/Prezzi/FAQ/Partner/
   Contatti). Ancore (#how, #faq) fanno smooth scroll nativo (html {
   scroll-behavior: smooth} già globale); le altre navigano a pagina.
   Voce attiva (.is-active, gestita da initNavActiveSection() più sotto
   per le due ancore in pagina) evidenziata come le altre interazioni
   del sito: colore brand + sottolineatura sottile. */
.nav-menu {
  display: flex; align-items: center; justify-content: center;
  list-style: none;
  gap: 30px;
}
.nav-menu-link {
  position: relative;
  font-size: 13px; font-weight: 600;
  color: var(--txt-2);
  padding: 4px 1px;
  white-space: nowrap;
  transition: color .2s;
}
.nav-menu-link:hover { color: var(--txt); }
.nav-menu-link.is-active { color: var(--brand); }
.nav-menu-link.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; border-radius: 2px; background: var(--brand);
}
/* NAV1 punto 1 — azioni a destra: «Accedi» in stile testo/secondario +
   tendina lingua (invariata) + hamburger (solo mobile, vedi media query
   sotto). */
.nav-actions {
  display: flex; align-items: center; justify-self: end;
  gap: 20px;
}
.nav-login {
  font-size: 13px; font-weight: 600;
  color: var(--txt-2);
  white-space: nowrap;
  transition: color .2s;
}
.nav-login:hover { color: var(--txt); }
/* NAV1 punto 2 — hamburger: nascosto su desktop, mostrato sotto la
   soglia mobile (vedi @media 900px più sotto). Icona menu/close che si
   scambia via JS (stesso bottone fa da apertura E chiusura "a X",
   niente bottone duplicato). */
.nav-hamburger {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: transparent; border: 1px solid var(--line-strong);
  color: var(--txt); cursor: pointer;
  font-family: inherit;
}
.nav-hamburger .material-icons-outlined { font-size: 20px; }
/* NAV1 punto 2 — pannello mobile: si apre SOTTO la barra senza
   spostare il resto della pagina (nessun elemento in flow, vedi
   posizionamento sotto). Nascosto via [hidden] di default, mostrato
   aggiungendo .is-open (rimuove hidden via JS).
   STICKY1 punto 1 — NON è più figlio diretto dell'elemento nav nel
   DOM (vedi markup: ora è sibling, subito dopo la sua chiusura).
   Motivo: .nav ha backdrop-filter, che crea un containing block per
   i discendenti in position:fixed — con il pannello annidato dentro
   la nav, il fixed di NAV2 veniva ancorato E RITAGLIATO alla box
   della nav (~64px), rendendo il pannello praticamente invisibile
   (si vedeva solo la X). Fuori dalla nav, position:fixed torna
   relativo al viewport. */
.nav-mobile-panel {
  display: none;
  border-top: 1px solid rgba(255, 255, 255, .06);
  background: rgba(0, 0, 0, .94);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}
.nav-mobile-panel.is-open { display: block; }
.nav-mobile-menu { list-style: none; padding: 8px 24px 0; }
.nav-mobile-menu li { border-bottom: 1px solid rgba(255, 255, 255, .06); }
.nav-mobile-menu li:last-child { border-bottom: none; }
.nav-mobile-menu a {
  display: block; padding: 16px 2px;
  font-size: 17px; font-weight: 600; color: var(--txt);
}
.nav-mobile-menu a.is-active { color: var(--brand); }
.nav-mobile-actions {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 24px 28px;
}
.nav-mobile-actions .btn { justify-content: center; width: 100%; }
/* FIX5 Parte B (2026-08-11, collaudo Angelo) — sostituisce il riquadro
   NAV2 (outline arancione): Angelo non vuole NESSUN riquadro di focus
   sulle voci del menu, su nessuna pagina. initNavMobilePanel() mette
   comunque il focus sul primo link all'apertura (accessibilità
   tastiera, invariato); qui si toglie solo il box, l'indicatore da
   tastiera resta via colore (tinta brand). Stessa regola su tutte e 5
   le pagine (north-star, pricing, partner, contatti, faq). */
.nav-mobile-menu a:focus, .nav-mobile-menu a:focus-visible,
.nav-mobile-actions .btn:focus, .nav-mobile-actions .btn:focus-visible { outline: none; }
.nav-mobile-menu a:focus-visible { color: var(--brand); }
@media (max-width: 900px) {
  .nav-menu, .nav-login { display: none; }
  .nav-hamburger { display: inline-flex; }
  /* NAV2 — collaudo Angelo: il pannello mobile era un dropdown
     semi-trasparente che copriva solo l'altezza del proprio contenuto,
     lasciando trapelare sotto la sticky CTA arancione e le card della
     pagina (doppi CTA, caos visivo). Aperto (.is-open), ora copre
     l'INTERO viewport sotto la barra nav: position:fixed ancorato a
     "top" sull'altezza REALE della nav (var --nav-h, impostata da
     initNavMobilePanel() alla apertura via getBoundingClientRect,
     robusta a eventuali variazioni di altezza; 64px di fallback se la
     var non è ancora impostata), fino in fondo allo schermo
     (bottom:0). Sfondo PIENO opaco (var(--bg-3): grigio-scuro appena
     più chiaro del nero pagina, per staccare visivamente il pannello)
     al posto del blur trasparente: niente più bleed-through. Contenuto
     scrollabile se eccede lo spazio disponibile (overflow-y:auto,
     niente più il cap calc(100vh - 60px) pensato per il vecchio
     dropdown). Scope SOLO mobile: la regola vive dentro questa stessa
     media query, zero impatto su desktop.
     FIX2 punto B — collaudo Angelo a 390px: sfondo apparentemente
     "trasparente" nonostante background:var(--bg-3) sia opaco. Causa:
     da quando STICKY1 ha spostato .nav-mobile-panel fuori dal tag nav
     (per il fix del backdrop-filter), il pannello non eredita più lo
     stacking context della nav (z-index:100): essendo ora figlio
     diretto di body, senza un z-index proprio resta a z-index:auto e il
     contenuto di pagina (sezioni con position:relative, reveal, canvas)
     viene dipinto SOPRA il suo sfondo opaco, dando l'illusione che sia
     trasparente. z-index:90 lo tiene sotto la nav (100, così la X
     dell'hamburger resta cliccabile sopra il pannello) e sopra tutto il
     contenuto di pagina (0..60) e sotto il lightbox galleria (200,
     nascosto di default). */
  .nav-mobile-panel.is-open {
    position: fixed;
    top: var(--nav-h, 64px);
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    background: var(--bg-3);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    max-height: none;
    overflow-y: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* NAV1 punto 2 — apertura senza animazione: il pannello non ha
     transition propria (display:none -> block è già istantaneo), qui
     si azzera solo per sicurezza qualunque transizione ereditata. */
  .nav-mobile-panel, .nav-mobile-panel * { transition: none !important; }
}
.logo {
  font-size: 18px; font-weight: 700; letter-spacing: -0.4px;
  color: var(--txt);
  /* Hotfix (regola Angelo): AchillesAI sempre ATTACCATO — il gap flex
     separava anche il nodo testo "Achilles" dallo span "AI"; gap solo
     tra badge e wordmark via margin sul badge. */
  display: flex; align-items: center; gap: 0;
}
.logo span { color: var(--brand); }
/* LAB1D punto 3 — selettore lingua a tendina: mostra SOLO la sigla
   della lingua attiva (niente più fila di bandierine), menu con i 5
   nomi per esteso al clic. Stessa logica setLang()/localStorage di
   sempre (invariata): qui si gestisce solo apertura/chiusura del menu
   e l'etichetta della lingua attiva (vedi initLangDropdown()).
   Accessibile da tastiera: bottoni reali (focus/Enter/Space nativi),
   aria-haspopup/aria-expanded sul trigger, chiusura su click fuori e
   su Escape con ritorno del focus al trigger. */
.lang-dd { position: relative; justify-self: end; }
.lang-dd-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .04em;
  color: var(--txt-2);
  cursor: pointer;
  font-family: inherit;
  transition: color .15s, border-color .15s;
}
.lang-dd-trigger:hover { color: var(--txt); border-color: rgba(255, 255, 255, .18); }
.lang-dd-caret { font-size: 16px !important; transition: transform .2s; }
.lang-dd-trigger[aria-expanded="true"] .lang-dd-caret { transform: rotate(180deg); }
.lang-dd-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 168px;
  list-style: none; margin: 0; padding: 6px;
  background: #0d0d10;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  z-index: 110;
}
.lang-dd-item {
  display: block; width: 100%;
  background: transparent; border: none;
  padding: 9px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 600; text-align: left;
  color: var(--txt-2);
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.lang-dd-item:hover { background: rgba(255, 255, 255, .06); color: var(--txt); }
.lang-dd-item.is-active { background: rgba(249, 115, 22, .16); color: var(--brand); }
/* da @media (max-width: 600px) del sito: solo le regole di nav e tendina */
@media (max-width: 600px) {
  .nav-inner { padding: 12px 16px; gap: 8px; }
  .lang-dd-trigger { padding: 5px 9px; font-size: 11px; gap: 4px; }
}