/*
  Header del sito: UN solo posto, usato dalla home, dal portfolio/collezioni e dalla scheda stampa.
  Il disegno e le voci le crea site-nav.js (un solo markup per tutte le pagine).
  La misura e i margini del logo arrivano dal CMS come variabili (--logo-scale, --logo-scale-mobile,
  --logo-pad-*), impostate da mpNav.applyLogo(). Il logo compare solo quando il file e' caricato.
  Serve la variabile --ease nella pagina.
*/
nav { position:fixed; inset:0 0 auto 0; z-index:10; font-family:var(--sans); font-size:17px; line-height:1.5; color:#fff; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:22px 4vw; transition:background .5s var(--ease), backdrop-filter .5s var(--ease); }
/* la barra compare quando le voci e il logo sono quelli definitivi: niente scatti */
html:not(.nav-ready) nav { visibility:hidden; }
nav.solid { background:#0a0a0acc; backdrop-filter:saturate(1.6) blur(20px); -webkit-backdrop-filter:saturate(1.6) blur(20px); }
nav ul { display:flex; gap:30px; list-style:none; font-size:13px; letter-spacing:.02em; color:#ffffffb3; }
nav ul a:hover, nav ul a.here { color:#fff; }
nav .nav-end { justify-self:end; display:flex; align-items:center; gap:22px; }
nav .right { font-size:13px; color:#ffffffb3; }
nav ul a { white-space:nowrap; }
nav ul, nav .right, nav .logo, nav .menu-btn i { transition-property:color,filter,background,transform; transition-duration:.6s; }
@media (max-width:1180px) and (min-width:821px) {
  nav { grid-template-columns:auto 1fr auto; gap:28px; }
  nav > a:first-of-type { order:-1; }
  nav ul { justify-content:flex-end; gap:20px; }
}

/* logo */
nav .logo-link { padding:var(--logo-pad-y-desktop,0px) var(--logo-pad-x-desktop,0px); opacity:0; }
nav[data-logo-ready="true"] .logo-link { opacity:1; }
nav .logo { display:inline; height:calc(40px * var(--logo-scale,1)); width:auto; object-fit:contain; transform:scale(1); transform-origin:center; will-change:transform; }
nav.solid .logo { transform:scale(.8); }

/* menu su telefono: due linee in alto a destra, apre le voci a tutto schermo */
.menu-btn { display:none; }
@media (max-width:820px) {
  nav { top:env(safe-area-inset-top); }
  nav .logo-link { padding:var(--logo-pad-y-mobile,0px) var(--logo-pad-x-mobile,0px); }
  nav .logo { height:calc(40px * var(--logo-scale-mobile,var(--logo-scale,1))); }
  /* su telefono il logo e' sempre centrato (non e' un'impostazione) */
  nav .logo-link { position:absolute; left:50%; top:calc(50% + var(--logo-pad-y-mobile,0px)); padding:0; transform:translate(-50%,-50%); }
  nav .logo { transform-origin:center; }
  nav { grid-template-columns:auto 1fr; } nav ul { display:none; } nav .logo { justify-self:start; } nav .right { display:none; }
  .menu-btn { display:grid; gap:7px; justify-self:end; width:44px; height:44px; place-content:center; background:none; border:none; cursor:pointer; position:relative; z-index:2; grid-column:-1; margin-right:-10px; }
  nav.open .logo-link { opacity:0; pointer-events:none; }
  .menu-btn i { display:block; width:24px; height:1.5px; background:#fff; transition:transform .45s var(--ease); }
  nav.open .menu-btn i:first-child { transform:translateY(4.25px) rotate(45deg); }
  nav.open .menu-btn i:last-child { transform:translateY(-4.25px) rotate(-45deg); }
  nav.open { inset:0; height:100vh; height:100dvh; align-items:start; background:#0a0a0af2; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
  nav.open ul { display:flex; flex-direction:column; gap:6px; position:absolute; inset:0; z-index:1; justify-content:center; align-items:flex-end; text-align:right; padding:0 8vw; font-family:var(--serif); font-size:clamp(40px,11vw,60px); color:#fff; letter-spacing:-.01em; animation:menuIn .5s var(--ease); }
  nav.open ul a { white-space:normal; }
  nav.open .right { display:block; position:absolute; right:8vw; bottom:calc(32px + env(safe-area-inset-bottom)); z-index:2; font-size:15px; }
  @keyframes menuIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
}