/* =============================================================
   Parea Sons — header
   Tre colonne 1fr / auto / 1fr: il logo resta centrato sulla
   pagina a ogni larghezza, non sullo spazio che avanza.
   ============================================================= */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  background: transparent;
  transition:
    background-color var(--t-lento) var(--ease),
    box-shadow var(--t-lento) var(--ease);
}

/* filetto inferiore: compare solo quando l'header ha un fondo pieno */
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--filetto);
  opacity: 0;
  transition: opacity var(--t-lento) var(--ease);
}

.site-header[data-stato="ridotto"],
.site-header[data-tendina="aperta"] {
  background-color: var(--bianco-lino);
}
.site-header[data-stato="ridotto"]::after,
.site-header[data-tendina="aperta"]::after { opacity: 1; }

.site-header[data-stato="ridotto"] {
  --riga-logo-h: var(--riga-logo-h-ridotta);
  --riga-nav-h: var(--riga-nav-h-ridotta);
  --fascia-h: 0px;
  --logo-h: 44px;
}

/* ------------------------------------------------- fascia annunci
   La riga più alta di tutte: un invito alla volta, con le frecce ai
   lati. Allo scroll si richiude su sé stessa invece di sparire di
   colpo, e con lei se ne va l'unica cosa che l'header dice a voce. */

.annunci {
  position: relative;
  height: var(--fascia-h);
  /* Resta tagliata: allo scroll l'altezza va a zero e con lei se ne
     va tutto, filetto compreso. */
  overflow: hidden;
  background: var(--bianco-lino);
  transition:
    height var(--t-lento) var(--ease),
    opacity var(--t-medio) var(--ease);
}

/* Il doppio filetto: due righe da 1px separate da due di vuoto, oro
   sopra e rosso sotto. È il gallone di una divisa — il segno cucito
   che chiude il colletto — e chiude la riga della maison prima che
   cominci il sito. Quattro pixel in tutto: si vede, non pesa. */
.annunci::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background:
    linear-gradient(to bottom,
      var(--oro)   0 1px,
      transparent  1px 3px,
      var(--rosso) 3px 4px);
}

/* Il testo non deve finirci sopra: la riga si alza di quei 4px. */
.annunci__inner { padding-bottom: 4px; }

.site-header[data-stato="ridotto"] .annunci {
  opacity: 0;
  border-bottom-color: transparent;
}

.annunci__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-16);
  height: var(--fascia-h);
  max-width: var(--larghezza-max);
  margin-inline: auto;
  padding-inline: var(--bordo-pagina);
}

.annunci__freccia {
  display: grid;
  place-content: center;
  width: 24px;
  height: 24px;
  color: var(--greige);
  cursor: pointer;
  transition: color var(--t-rapido) var(--ease);
}

.annunci__freccia:hover { color: var(--inchiostro); }

.annunci__freccia svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Gli annunci stanno tutti nella stessa cella: la fascia è alta
   quanto il più alto e non salta quando cambiano. */
.annunci__pista {
  display: grid;
  justify-items: center;
  align-items: center;
}

.annuncio {
  grid-area: 1 / 1;
  font-family: var(--font-dato);
  font-size: var(--t-12);
  line-height: 1.3;
  letter-spacing: var(--tracking-dato);
  color: var(--inchiostro);
  text-align: center;
  text-decoration: none;
  padding-block: 2px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--t-rapido) var(--ease),
    color var(--t-rapido) var(--ease),
    visibility 0s linear var(--t-rapido);
}

/* Il nuovo aspetta che il vecchio sia uscito: due righe di testo
   che si attraversano a mezza opacità sono illeggibili, e questa
   è una riga fatta per essere letta. */
.annuncio[data-attivo="sì"] {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--t-medio) var(--ease) var(--t-rapido),
    color var(--t-rapido) var(--ease),
    visibility 0s linear 0s;
}

.annuncio:hover { color: var(--rosso); }

/* Il filetto dal centro, come ogni collegamento del sito. */
.annuncio::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-medio) var(--ease);
}

.annuncio { position: relative; }
.annuncio:hover::after,
.annuncio:focus-visible::after { transform: scaleX(1); }

/* --------------------------------------------------- le due righe
   Il logo da solo in cima, il menu disteso sotto: è così che le sei
   voci ci stanno senza doverle chiudere dietro una maniglia. Con il
   logo su una riga sua, la riga del menu ha tutta la larghezza. */

.header__inner {
  display: grid;
  grid-template-areas:
    "logo   logo  logo"
    "sx     menu  dx";
  /* Colonne laterali di pari larghezza: così le voci cadono sull'asse
     del logo, non sull'asse dello spazio che avanza. Le icone sono
     più larghe della ricerca, quindi è la loro misura a comandare
     entrambe le colonne. */
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: var(--riga-logo-h) var(--riga-nav-h);
  align-items: center;
  gap: 0 var(--s-24);
  padding-inline: var(--bordo-pagina);
  max-width: var(--larghezza-max);
  margin-inline: auto;
  transition: grid-template-rows var(--t-lento) var(--ease);
}

.header__sinistra {
  grid-area: sx;
  display: flex;
  align-items: center;
  gap: var(--s-24);
}

/* ------------------------------------------------------------- logo */
.brand {
  grid-area: logo;
  justify-self: center;
  display: grid;
  justify-items: center;
}

.brand__segno {
  height: var(--logo-h);
  width: auto;
  transition: height var(--t-lento) var(--ease);
}

/* Il payoff è testo, non disegno: allo scroll si richiude su sé stesso
   mentre lo stemma si stringe. */
.brand__payoff {
  font-family: var(--font-display);
  /* Misura scelta perché il payoff risulti largo quanto il 91% del
     marchio, la stessa proporzione del logo originale. */
  font-size: 7.5px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.23em;
  text-indent: 0.23em;          /* recupera lo spazio dopo l'ultima lettera */
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  height: 8px;
  margin-top: 11px;
  opacity: 1;
  transition:
    height var(--t-lento) var(--ease),
    margin-top var(--t-lento) var(--ease),
    opacity var(--t-medio) var(--ease);
}
.site-header[data-stato="ridotto"] .brand__payoff {
  height: 0;
  margin-top: 0;
  opacity: 0;
}

/* Ritaglio del logo master: assets/logo/parea-sons.svg
   viewBox 797 2047 12277 7977. Le variabili sono frazioni di quel riquadro. */
.ps-logo {
  position: relative;
  overflow: hidden;
  display: block;
}
.ps-logo img {
  position: absolute;
  max-width: none;
  top:  calc(var(--ritaglio-y) / var(--ritaglio-h) * -100%);
  left: calc(var(--ritaglio-x) / var(--ritaglio-w) * -100%);
  width:  calc(100% / var(--ritaglio-w));
  height: calc(100% / var(--ritaglio-h));
}
.ps-logo--completo {           /* stemma + scritta + payoff */
  --ritaglio-x: 0; --ritaglio-y: 0; --ritaglio-w: 1; --ritaglio-h: 1;
  aspect-ratio: 12277 / 7977;
}
.ps-logo--compatto {           /* stemma + scritta */
  --ritaglio-x: 0; --ritaglio-y: 0; --ritaglio-w: 1; --ritaglio-h: .94183;
  aspect-ratio: 12277 / 7513;
}
.ps-logo--stemma {             /* solo stemma */
  --ritaglio-x: .26904; --ritaglio-y: 0; --ritaglio-w: .46184; --ritaglio-h: .65626;
  aspect-ratio: 5670 / 5235;
}

/* ------------------------------------------------------------- menu */
.nav { grid-area: menu; }

.nav__lista {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-32);
}

.nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--s-8);
  font-family: var(--font-display);
  font-size: var(--t-12);
  font-weight: 400;
  letter-spacing: var(--tracking-largo);
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity var(--t-medio) var(--ease);
}

/* Il filetto è il gesto unico del sito: si apre dal centro,
   e torna al centro quando il cursore se ne va. */
.nav__link::after,
.utility__azione::after,
.lingua__voce::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-medio) var(--ease);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__voce[data-aperta="sì"] .nav__link::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* La pagina in cui si è ha il filetto in oro, e resta acceso anche
   quando il cursore è altrove: è uno stato, non una reazione. Non è
   il solo indizio — c'è aria-current per chi legge con la voce. */
.nav__link[aria-current="page"]::after,
.lingua__voce[aria-current="true"]::after { background: var(--oro); height: 2px; }

.nav__lista:hover .nav__link[aria-current="page"] { opacity: 1; }

/* Mentre il cursore è su una voce, le altre arretrano.
   Guida l'occhio invece di limitarsi a decorare. */
@media (hover: hover) {
  .nav__lista:hover .nav__link { opacity: .45; }
  .nav__lista .nav__link:hover,
  .nav__lista .nav__link:focus-visible,
  .nav__voce[data-aperta="sì"] .nav__link { opacity: 1; }
}

/* --------------------------------------------------- icone di servizio */
.utility {
  grid-area: dx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-24);
}

/* La ricerca è l'unica che porta il suo nome scritto, come nel
   riferimento: sta all'estremità opposta delle altre e da sola
   un'icona non basterebbe a dire cos'è. */
.utility__nome {
  font-family: var(--font-display);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-largo);
  text-transform: uppercase;
}

.utility__azione {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-block: var(--s-8);
  /* Non si stringono. Sotto i 640px il flex le comprimeva a 18,3px
     mentre la ricerca restava a 20: quattro icone che dovrebbero
     pesare uguale finivano una diversa dall'altra. */
  flex: 0 0 auto;
}
.utility__azione svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.utility__azione:hover::after,
.utility__azione:focus-visible::after { transform: scaleX(1); }

/* Contatore: appare solo quando c'è qualcosa da contare. */
.contatore {
  font-family: var(--font-dato);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--tracking-dato);
  line-height: 1;
  min-width: 1ch;
  opacity: 0;
  transition: opacity var(--t-rapido) var(--ease);
}
.contatore[data-pieno="sì"] { opacity: 1; }

/* L'unico rosso della schermata: il cuore pieno oppure il contatore
   della borsa. Mai i due insieme — se ne occupa js/panels.js.

   IL CONTATORE USA `--rosso`, NON L'ARALDICO, e i due segni qui si
   separano. Il cuore è un'icona: per una forma la soglia è 3:1, e
   l'araldico la passa. Il contatore invece è TESTO — una cifra in Jost
   da 10px sopra il lino — e lì l'araldico dà 4,29:1 contro i 4,5 che
   chiede il 1.4.3. È lo stesso conto per cui `--rosso` esiste.

   Non era mai emerso perché il contatore si vede solo a borsa piena, e
   il referto di legale/audit-accessibilita.md è stato preso con la
   borsa vuota: dichiarava 4,71:1 di minimo e quel numero non l'aveva
   mai guardato. Misurato il 21 settembre 2026 su tre pagine. */
.utility__azione[data-attivo="sì"] svg { stroke: var(--rosso-araldico); }
.utility__azione[data-attivo="sì"] .icona-cuore { fill: var(--rosso-araldico); }
.contatore[data-accento="sì"] { color: var(--rosso); }

.lingua {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding-left: var(--s-24);
  border-left: 1px solid var(--filetto);
}
.lingua__voce {
  position: relative;
  padding-block: var(--s-8);
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
}
.lingua__voce[aria-current="true"]::after { transform: scaleX(1); }
.lingua__voce:not([aria-current="true"]) { opacity: .45; }
.lingua__voce:hover { opacity: 1; }

/* ------------------------------------------------------------ tendina */
.tendina {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-tendina);
  background: var(--bianco-lino);
  border-bottom: 1px solid var(--filetto);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--t-medio) var(--ease),
    transform var(--t-medio) var(--ease),
    visibility 0s linear var(--t-medio);
}
.tendina[data-aperta="sì"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Le sei voci stanno su due colonne e il collegamento al listino va a
   filo destro, allineato alle icone: la fascia bianca resta bassa e
   nessuna metà rimane vuota. */
.tendina__inner {
  max-width: var(--larghezza-max);
  margin-inline: auto;
  padding: var(--s-24) var(--bordo-pagina) var(--s-32);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-64);
}

.tendina__gruppo {
  display: grid;
  /* 300px per colonna: "Girocollo manica lunga" e il suo prezzo stanno
     sulla stessa riga senza andare a capo. */
  grid-template-columns: repeat(2, minmax(0, 300px));
  gap: 2px var(--s-32);
}

.tendina__riga {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-24);
  padding-block: 6px;
  font-family: var(--font-testo);
  font-size: var(--t-20);
  line-height: 1.3;
  transition: color var(--t-rapido) var(--ease);
}
.tendina__riga:hover { color: var(--rosso); }

/* La lineetta punteggiata lega la voce al prezzo senza pesare. */
.tendina__riga span:first-child { position: relative; }
.tendina__prezzo {
  font-family: var(--font-dato);
  font-size: var(--t-13);
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
  white-space: nowrap;
}
.tendina__riga:hover .tendina__prezzo { color: var(--rosso); }

.tendina__tutto {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  flex: none;
  padding-block: 6px;
  font-family: var(--font-display);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-medio);
  text-transform: uppercase;
}
.tendina__tutto span:last-child {
  transition: transform var(--t-medio) var(--ease);
}
.tendina__tutto:hover span:last-child { transform: translateX(6px); }

/* --------------------------------------------------------- da tablet in giù */
.nav__apri, .nav__chiudi { display: none; }

/* Le voci si stringono prima di arrendersi: fra 900 e 1080 il passo
   fra una e l'altra cala, e la ricerca perde la parola scritta. */
@media (max-width: 1080px) {
  /* Sotto questa misura le colonne di pari larghezza non ci stanno
     più: le voci lasciano l'asse del logo e si accontentano dello
     spazio che avanza. Meglio leggermente fuori asse che compresse. */
  .header__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
  .nav__lista { gap: var(--s-16); }
  .utility { gap: var(--s-16); }
  .utility__nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* Il menu passa a pannello a 900px, non più a 1220.
   Con il logo su una riga sua, la riga del menu ha tutta la
   larghezza: le sei voci (≈410px) più la ricerca e le icone
   (≈230px) stanno comode fino a lì. Sotto, l'header torna a una
   riga — maniglia e ricerca a sinistra, logo al centro, icone a
   destra — e le voci si aprono a pannello. */
@media (max-width: 900px) {
  .header__inner {
    grid-template-areas: "sx logo dx";
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: var(--riga-logo-h);
    align-items: center;
  }

  .header__sinistra { gap: var(--s-16); }

  .nav__apri {
    display: flex;
    align-items: center;
    gap: var(--s-8);
    font-family: var(--font-display);
    font-size: var(--t-12);
    letter-spacing: var(--tracking-medio);
    text-transform: uppercase;
  }
  .nav__apri svg {
    width: 20px; height: 20px;
    fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round;
  }

  /* Il menu diventa un pannello a tutta pagina. Uscendo dal flusso
     lascia libera la griglia, che qui ha una riga sola. */
  .nav {
    grid-area: auto;
    position: fixed;
    inset: 0;
    z-index: var(--z-pannello);
    background: var(--bianco-lino);
    padding: var(--s-96) var(--bordo-pagina) var(--s-48);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition:
      opacity var(--t-medio) var(--ease),
      transform var(--t-medio) var(--ease),
      visibility 0s linear var(--t-medio);
  }
  .nav[data-aperto="sì"] {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition-delay: 0s;
  }
  .nav__lista {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-24);
  }
  .nav__link { font-size: var(--t-16); }
  .nav__link::after { bottom: -4px; }

  .nav__chiudi {
    display: block;
    position: absolute;
    top: var(--s-32);
    right: var(--bordo-pagina);
    font-family: var(--font-display);
    font-size: var(--t-12);
    letter-spacing: var(--tracking-medio);
    text-transform: uppercase;
  }

  /* Nel pannello la tendina è sempre distesa: niente sovrapposizioni. */
  .tendina {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    background: none; border: 0;
    display: none;
  }
  .tendina[data-aperta="sì"] { display: block; }
  .tendina__inner {
    padding: var(--s-16) 0 var(--s-8);
    display: grid;
    justify-items: start;
    gap: var(--s-16);
  }
  .tendina__gruppo { grid-template-columns: 1fr; width: 100%; gap: 2px; }
  .tendina__riga { font-size: var(--t-16); }
  .tendina__tutto {
    padding-top: var(--s-16);
    border-top: 1px solid var(--filetto);
    width: 100%;
  }

  .lingua { padding-left: var(--s-16); }
}

@media (max-width: 640px) {
  .utility { gap: var(--s-16); }
  .utility__azione svg { width: 20px; height: 20px; }
  .lingua { display: none; }   /* torna nel footer */

  /* A 375px il payoff sarebbe largo quanto mezzo schermo e spingerebbe
     le icone fuori dal margine destro: resta nel footer. */
  .brand__payoff { display: none; }
}