/* ═══════════════════════════════════════════════════════════
   header.css — i pezzi di barra superiore condivisi fra la home
   e le pagine generate (blog, /skills/, /cv/, /about/, /privacy/).

   PERCHE' UN FILE A PARTE. Queste regole stavano in main.css, che
   solo la home carica. Le pagine interne prendono un bundle
   diverso (tokens + langmenu + blog + consent, vedi buildAssets in
   build.mjs) e quindi non le vedevano: il pulsante Supporto e il
   selettore Smooth ci arrivavano senza stile. Duplicarle nei due
   file avrebbe creato due sorgenti che divergono alla prima
   modifica — e' lo stesso motivo per cui langmenu.css esiste.

   SORGENTE UNICA: si modifica qui. La home lo carica con un <link>
   in index.html (che home.mjs propaga a /it/ /es/ /fr/ /de/ /zh/),
   le pagine generate lo ricevono dentro app.min.css.

   Dipende solo dai token di tokens.css, che entrambi i percorsi
   caricano prima di questo file.
   ═══════════════════════════════════════════════════════════ */

/* ── LA SUPERFICIE CONDIVISA ── */
/* Colore, sfocatura, ombra e raggio di OGNI controllo delle tre barre, in un
   punto solo. Serviva davvero: .bhead__home e .bhead__theme usavano
   --color-surface-white, che è OPACO, mentre il pulsante Revolut accanto usa
   --color-nav-blur, che è traslucido al 55%. Affiancati sulla stessa barra la
   differenza si vedeva a occhio nudo.
   Ogni regola qui sotto aggiunge solo la propria forma: dimensioni, spaziatura
   e disposizione. Il vestito è questo. */
.rev-btn,
.smooth-toggle,
.nav-pills,
.bhead__nav,
.bhead__home,
.bhead__theme {
  background: var(--color-nav-blur);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--shadow-rest);
  border-radius: var(--radius-pill);
}

/* ── Pulsante donazione Revolut ── */
.rev-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 15px 0 12px;
  color: var(--color-text); font-family: var(--font-primary);
  transition: background 0.3s ease, transform 0.2s var(--ease-spring), box-shadow 0.2s ease;
}
.rev-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
/* Il marchio vero di Revolut: "R" bianca su badge nero arrotondato */
.rev-btn__logo { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; background: #000; }
.rev-btn__logo svg { display: block; transition: transform 0.3s var(--ease-spring); }
.rev-btn:hover .rev-btn__logo svg { transform: scale(1.12) rotate(-6deg); }
/* testo semplice come la pillola dello smooth-scroll (e' uno span, non un <b>) */
.rev-btn__txt { font-size: 13px; font-weight: 500; line-height: 1; color: var(--color-text); }

/* ── Selettore Smooth / Instant ── */
/* margin-left:auto lo spinge a destra nell'header della home, che e' un
   flex a livello di pagina. Dentro .bhead__tools quel margine e'
   annullato (vedi blog.css): li' ci pensa gia' il contenitore. */
/* border:0 e cursor NON sono decorazione: sulla home ci pensava il reset
   globale in main.css (`button { border: none }`), che le pagine generate non
   caricano. Senza, il <button> si presentava con il bordo di default del
   browser — il contorno bianco che si vedeva solo sul blog. Un componente
   condiviso deve bastare a se stesso, senza appoggiarsi al reset di un file
   che non tutti i suoi consumatori includono. */
.smooth-toggle {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border: 0; cursor: pointer;
  font-family: var(--font-primary); font-weight: 500; font-size: 13px;
  color: var(--color-text); user-select: none;
  transition: background 0.3s ease, transform 0.2s var(--ease-spring), opacity 0.2s ease;
}
.smooth-toggle:hover { transform: translateY(-1px); }
.smooth-toggle__icon { flex-shrink: 0; transition: transform 0.3s var(--ease-out); }
.smooth-toggle[aria-pressed="false"] { opacity: 0.55; }
.smooth-toggle[aria-pressed="false"] .smooth-toggle__icon { transform: scaleX(0.6); }

/* onda quando e' acceso, riga dritta quando e' spento */
.smooth-toggle__icon--line { display: none; }
.smooth-toggle[aria-pressed="false"] .smooth-toggle__icon--wave { display: none; }
.smooth-toggle[aria-pressed="false"] .smooth-toggle__icon--line { display: block; }

/* ── IL GRUPPO DI PILLOLE DEL MENU ── */
/* Stesso contenitore per il filtro della home (.nav-pills) e per il menu delle
   pagine generate (.bhead__nav). Erano due disegni diversi: la home un gruppo
   segmentato dentro una pillola, le pagine generate una fila di link nudi.
   Cambia il MECCANISMO, non l'aspetto — la home fa scorrere dentro il gruppo un
   indicatore mosso da JS (.nav-pill-indicator), le pagine generate hanno una
   voce attiva fissa e le basta uno sfondo. La forma è comune, e sta qui. */
/* Il gruppo è CENTRATO nella barra, non incolonnato a sinistra: sta in mezzo
   sia sulla home sia sulle pagine generate. Funziona perché entrambe le barre
   sono "posizionate" (.nav è fixed, .bhead è sticky) e fanno quindi da
   contenitore all'assoluto. */
.nav-pills,
.bhead__nav {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 4px;
}
.nav-pill,
.bhead__link {
  padding: 8px 16px; border-radius: var(--radius-pill);
  font-weight: 500; font-size: var(--text-xl); color: var(--color-text);
  white-space: nowrap; user-select: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-pill:not(.active):hover,
.bhead__link:not(.bhead__link--active):hover { color: var(--color-primary); }

/* ── Telefono ── */
/* Sotto i 720px il gruppo lascia la barra e diventa un'isola fissa in basso,
   a portata di pollice: era già il comportamento della home, ora è di tutte e
   tre le barre. In alto restano casa, Supporto, lingua e tema, che ci stanno.
   overflow-x tiene dentro i menu lunghi (il tedesco arriva a 347px su 375). */
@media (max-width: 720px) {
  .smooth-toggle { display: none; }
  .nav-pills,
  .bhead__nav {
    position: fixed; left: 50%; top: auto; bottom: 14px; transform: translateX(-50%);
    z-index: 300; gap: 2px; padding: 5px;
    max-width: calc(100vw - 24px);
    overflow-x: auto; scrollbar-width: none;
    box-shadow: 0 8px 30px var(--c-black-a20), var(--shadow-rest);
  }
  .nav-pills::-webkit-scrollbar,
  .bhead__nav::-webkit-scrollbar { display: none; }
  /* l'isola galleggia sul contenuto: serve più opaca per restare leggibile */
  [data-theme="dark"] .nav-pills,
  [data-theme="dark"] .bhead__nav { background: rgba(18,18,30,0.82); }
  .nav-pill,
  .bhead__link { padding: 8px 13px; font-size: 14px; }
}