/* NAV CONDIVISO — home, chi-siamo/, come-trattiamo-i-dati-clinici/ (e deck/ per logo e lingua).
   Un'unica fonte per il menu, così passando da una pagina all'altra non si sposta di un pixel.
   Va incluso DOPO lo <style> della pagina: a parità di specificità vince questo file.
   Usa i token della pagina (--deep, --muted, --terracotta, --clay, --line). */

:root { --nav-h: 99px; }
html { scroll-padding-top: var(--nav-h); }

/* Il nav è fixed (la home ci disegna sotto l'hero e il suo sfondo sfumato):
   le pagine che non hanno un hero a tutta altezza aggiungono .has-fixed-nav al body. */
body.has-fixed-nav { padding-top: var(--nav-h); }

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(253,250,246,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  font-family: 'DM Sans', sans-serif; line-height: 1.3;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1280px; margin: 0 auto; padding: 24px 80px;
}
nav .logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
nav .logo-full { height: 50px; width: auto; display: block; }

.nav-right { display: flex; align-items: center; gap: 22px; }

/* Voci e CTA: stessa tipografia, tutte in maiuscolo; la CTA si distingue solo per colore e sottolineatura */
nav .nav-link, nav .cta-nav {
  font-family: 'DM Sans', sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color 0.2s, opacity 0.2s;
}
nav .nav-link { color: var(--muted); }
nav .nav-link:hover, nav .nav-link[aria-current] { color: var(--deep); }
nav .cta-nav {
  font-weight: 600; color: var(--terracotta);
  border-bottom: 1px solid var(--terracotta); padding-bottom: 2px;
}
nav .cta-nav:hover { opacity: 0.6; }

nav .lang-switch { display: flex; align-items: center; gap: 1px; }
nav .lang-switch button {
  background: none; border: 0; cursor: pointer; font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1.3; color: var(--muted);
  padding: 2px 0; transition: color 0.2s;
  display: inline-flex; flex-direction: column; align-items: center;
}
nav .lang-switch button.active { color: var(--deep); font-weight: 800; }
/* Riserva la larghezza del grassetto: cambiando lingua le voci del menu non si spostano */
nav .lang-switch button::after { content: attr(data-lang); text-transform: uppercase; font-weight: 800; height: 0; overflow: hidden; visibility: hidden; }
nav .lang-switch button:hover { color: var(--deep); }
nav .lang-switch .sep { font-size: 0.78rem; color: var(--muted); opacity: 0.4; }

@media (max-width: 960px) {
  :root { --nav-h: 91px; }
  .nav-inner { padding: 20px 24px; }
}

/* MENU A TENDINA — sotto gli 820px le voci non stanno più in riga accanto al logo
   (misurato: in IT il blocco di destra è ~500px + logo 225px + margini).
   In testata restano logo, "Richiedi l'accesso" e il pulsante del menu. */
.nav-toggle, nav .cta-mobile { display: none; }
@media (max-width: 820px) {
  .nav-inner { position: relative; gap: 12px; }
  nav .cta-mobile { display: inline-block; margin-left: auto; font-size: 0.68rem; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 8px 6px;
    background: none; border: 0; cursor: pointer; flex-shrink: 0;
  }
  .nav-toggle span { display: block; height: 1.5px; background: var(--deep); border-radius: 1px; transition: transform 0.25s ease, opacity 0.2s ease; }
  nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  nav.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  nav.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .nav-right {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: #FDFAF6; border-bottom: 1px solid var(--line); box-shadow: 0 16px 32px rgba(28,35,33,0.08); padding: 4px 24px 24px;
  }
  nav.menu-open .nav-right { display: flex; }
  nav .nav-right .nav-link { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; color: var(--deep); }
  nav .nav-right .nav-link[aria-current] { color: var(--clay); }
  nav .nav-right .cta-nav {
    margin-top: 20px; text-align: center; font-size: 0.82rem; color: #fff; background: var(--deep);
    border: 0; border-radius: 999px; padding: 15px 20px;
  }
  nav .nav-right .lang-switch { justify-content: center; padding: 18px 0 0; gap: 1px; }
  nav .nav-right .lang-switch button, nav .nav-right .lang-switch .sep { font-size: 0.9rem; }
}

@media (max-width: 480px) {
  :root { --nav-h: 69px; }
  .nav-inner { padding: 16px 16px; }
  nav .logo-full { height: 36px; }
}
/* Sotto i 360px il logo si rimpicciolisce, ma l'altezza resta 69px: la detta il pulsante del menu (36px) */
@media (max-width: 360px) {
  nav .logo-full { height: 29px; }
}