/* PC8 — intestazione unica del sito.
   Prima ogni pagina aveva la sua copia del CSS della barra: il logo finiva in
   cinque posizioni diverse (x170 in home, x250 nel carrello, centrato in
   accesso, x20 in registrazione) e in due misure (immagine 40px o 36px), e
   cambiando pagina "saltava". Qui la barra è definita UNA volta sola.

   Va caricato DOPO lo <style> della pagina, così vince sulle regole locali:
     <link rel="stylesheet" href="/assets/pc8-header.css">

   La colonna della barra (.nav-wrap) è sempre la stessa — 1180px, 40px di lato —
   anche dove il contenuto sotto è più stretto (carrello 1020, privacy 760):
   è quello che tiene il logo fermo nello stesso punto in tutto il sito.

   Struttura attesa (identica in ogni pagina, vedi anche NAV in
   editoria/build/genera_pagine_sito.py):
     <nav><div class="nav-wrap nav-inner"> logo + <ul> voci </div></nav>
   Le classi `nav-inner`, `nav ul` e `.nav-cta` sono il contratto su cui si
   agganciano pc8-nav.js (hamburger), pc8-account.js (account) e
   pc8-carrello.js (voce Carrello): non rinominarle. */

nav {
  position: sticky; top: 0; z-index: 10;
  padding: 0;
  background: rgba(18, 20, 22, .85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.nav-wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }

.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 20px; }

.logo-chip {
  background: #EEEEE5; border-radius: 10px; padding: 6px 14px 5px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none; flex-shrink: 0;
}
.logo-chip img { height: 40px; display: block; }
.logo-chip .payoff {
  /* line-height esplicito: se lo eredita dal body, sulle pagine che non lo
     dichiarano il logo viene 5px più basso che altrove. */
  font-size: 8.5px; line-height: 1.6; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #6E7377; white-space: nowrap;
}

nav ul { display: flex; gap: 32px; list-style: none; align-items: center; margin: 0; padding: 0; }
/* font-weight esplicito: la privacy imposta il corpo a 300 e le voci del menu
   uscivano più sottili che nelle altre pagine. La barra non deve dipendere
   dalla tipografia della pagina che la ospita. */
nav a { text-decoration: none; color: #8B9096; font-size: 14px; font-weight: 400; transition: .2s; }
nav a:hover { color: #6BB8E8; }
nav .nav-cta {
  color: #121416 !important; background: #6BB8E8;
  padding: 9px 20px; border-radius: 6px; font-weight: 600;
}
nav .nav-cta:hover { box-shadow: 0 0 24px rgba(107, 184, 232, .5); }

/* Sotto i 900px le voci spariscono: al loro posto l'hamburger di pc8-nav.js. */
@media (max-width: 900px) {
  .nav-wrap { padding: 0 24px; }
  nav ul { display: none; }
}