/* assets/site-nav.css
   Richiede che la pagina definisca già le variabili --navy, --accent,
   --on-navy, --on-navy-sub, --divider nel proprio :root. */

nav{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
  padding:0 clamp(20px,5vw,48px);
  background: #081b2d;
  backdrop-filter: blur(16px) saturate(1.3);
  overflow:visible;
}
nav .brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:16px; color:var(--on-navy);
  text-decoration:none;
  position:relative;
  z-index:31;
}
    nav .brand .mark {
        height: 108px;
        width: auto;
        flex-shrink: 0;
        position: relative;
        border-radius: 14px;
        box-shadow: 0 10px 24px rgba(0,0,0,0.45);
        transform: translateY(15px); /* ← questo funziona sempre */
    }
nav .nav-links{ display:flex; gap:22px; align-items:center; }
nav .nav-links a{
  font-size:20px; color:var(--on-navy-sub); text-decoration:none; font-weight:500;
}
nav .nav-links a.active{ color:#fff; font-weight:700; }
nav .nav-links a.nav-cta{
  background: var(--accent); padding:9px 18px; border-radius:20px;
  font-size:13.5px; font-weight:700; color:#fff !important;
}
@media (max-width:640px){
  nav .nav-links a:not(.nav-cta){ display:none; }
  nav{ height:84px; }
  nav .brand .mark{ max-height:68px; }
  nav .nav-links a.nav-cta{ white-space:nowrap; font-size:12px; padding:8px 14px; }
}