/* Navbar — componente riusabile (coppia di navbar.js).
   Consuma solo variabili neutre (--nav-*, --font-*): per riusarla in un
   altro progetto basta copiare questo file + navbar.js, rispettare il
   contratto di markup (vedi assets/README.md) e definire le variabili.
   Con la classe `home` sul body la barra è in overlay trasparente,
   altrimenti è statica con sfondo --nav-surface. */

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem clamp(1rem, 4vw, 3rem);

  /* Crossfade tra lo stato trasparente e quello condensato con sfondo */
  transition: background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
}

body:not(.home) .site-header {
  position: relative;
  inset: auto;
  background: var(--nav-surface);
  border-bottom: 1px solid var(--nav-border);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  font-size: 1.5rem;
  text-decoration: none;
  transition: font-size 0.35s ease;
}

/* Il logo è dimensionato in em: nello stato condensato scala col font-size
   del brand senza regole dedicate. width/height HTML riservano lo spazio
   (no CLS), qui vince l'altezza in em. */
.site-header__logo {
  width: auto;
  height: 2.2em;
  flex-shrink: 0;
}

.site-header__nav ul {
  display: flex;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__nav a {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  color: var(--nav-fg);
  text-decoration: none;
  transition: color 0.35s ease;
}

.site-header__nav a:hover,
.site-header__nav a:focus-visible { color: var(--nav-accent); }

/* Hamburger: nascosto su desktop, attivato dal JS (resta [hidden] senza JS) */

.site-header__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.site-header__toggle-bar {
  width: 22px;
  height: 2px;
  background: var(--nav-fg);
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.35s ease;
}

.site-header.is-open .site-header__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .site-header__toggle-bar:nth-child(2) { opacity: 0; }
.site-header.is-open .site-header__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Blocca lo scroll della pagina mentre il drawer è aperto */
html.nav-open { overflow: hidden; }

/* stylelint-disable-next-line media-feature-range-notation */
@media (max-width: 860px) {
  .site-header__toggle:not([hidden]) {
    display: inline-flex;

    /* Sopra lo scrim del drawer, così la X resta cliccabile */
    position: relative;
    z-index: 2;
  }

  .site-header .pill-cta { margin-left: auto; }

  /* Drawer laterale: scrim a tutto schermo + pannello che scivola da destra */
  .site-header__nav {
    position: fixed;
    inset: 0;
    background: var(--nav-scrim);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s;
  }

  .site-header.is-open .site-header__nav {
    visibility: visible;
    opacity: 1;
  }

  .site-header__nav ul {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(20rem, 82vw);
    flex-direction: column;
    gap: 0;
    padding: 5.5rem 0 2rem;
    background: var(--nav-surface);
    box-shadow: -12px 0 32px var(--nav-shadow);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
  }

  .site-header.is-open .site-header__nav ul { transform: none; }

  .site-header__nav a {
    display: block;
    padding: 0.85rem 1.6rem;
  }
}

/* Barra condensata (tutte le pagine): sottile, fissa in alto, sfondo pieno.
   navbar.js la mostra scorrendo verso l'alto e la nasconde verso il basso;
   a inizio pagina resta la barra originale senza sfondo. */

body .site-header.is-condensed {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  padding-block: 0.5rem;
  background: var(--nav-bar-bg);
  border-color: transparent;
  box-shadow: 0 8px 24px var(--nav-shadow);

  /* Nello stato visibile niente transform: farebbe da containing block
     per il drawer fixed, ritagliandolo dentro la barra */
  transition: transform 0.3s ease, background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
}

body .site-header.is-condensed.is-hidden { transform: translateY(-100%); }

.site-header.is-condensed .site-header__brand {
  font-size: 1.2rem;
}

/* Sulla barra condensata (fondo scuro) il logo trasparente sparirebbe:
   tessera cream come quella del favicon. */
.site-header.is-condensed .site-header__logo {
  padding: 0.18em;
  background: var(--techne-cream);
  border-radius: 22%;
}

.site-header.is-condensed .pill-cta {
  padding: 0.5rem 1.2rem;
  font-size: 0.75rem;
}

.site-header.is-condensed .site-header__toggle-bar { background: var(--nav-bar-fg); }

/* A drawer aperto la X poggia sul pannello chiaro: torna al colore base */
.site-header.is-open .site-header__toggle-bar { background: var(--nav-fg); }

/* Solo desktop: nel drawer mobile i link restano nel colore base */
/* stylelint-disable-next-line media-feature-range-notation */
@media (min-width: 861px) {
  .site-header.is-condensed .site-header__nav a { color: var(--nav-bar-fg); }

  .site-header.is-condensed .site-header__nav a:hover,
  .site-header.is-condensed .site-header__nav a:focus-visible { color: var(--nav-bar-accent); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__brand,
  .site-header__nav,
  .site-header__nav ul,
  .site-header__nav a,
  .site-header__toggle-bar { transition: none; }

  body .site-header.is-condensed { transition: none; }
}