/* ============================================================
   ESPERIMENTO — header a contrasto con la sezione sotto
   ------------------------------------------------------------
   Foglio ISOLATO. Caricato solo se la costante
   ELIDRIA_HEADER_CONTRAST e' definita (functions.php).
   Non modifica nessuna regola di main.css: aggiunge soltanto
   comportamento alle classi .is-over-dark / .is-over-light che
   header-contrast.js mette su .site-header.

   NIENTE PILLOLA: la barra e' sempre trasparente. Cambia solo il
   COLORE di logo e hamburger (che seguono currentColor), in base al
   fondo della sezione che scorre sotto l'header.

   Il valore di data-header-theme (nel markup di ogni sezione, come
   prima: i partial non cambiano) e' il colore del LOGO, ed e' quindi
   l'opposto del fondo della sezione:
     data-header-theme="dark"   -> sezione CHIARA sotto -> logo SCURO
     data-header-theme="light"  -> sezione SCURA sotto  -> logo CHIARO

   Convenzione colori come nel resto del tema:
     --color-surface  #ececec  (chiaro)
     --color-primary  #1e1e1e  (scuro)
   ============================================================ */

/* Barra sempre trasparente. Doppia classe .site-header: specificita'
   0,3,0, come le regole di main.css che disegnano la pillola
   (.headroom--pinned.headroom--not-top, .is-dark-through ...), e questo
   foglio e' accodato dopo main.css, quindi vince. Vale anche prima che
   il JS metta i suoi stati. */
.site-header.site-header .site-header__bar {
  background-color: transparent;
}

/* Transizione morbida del cambio colore (corta: il logo non resta
   "sbagliato" mentre la sezione gli passa sotto).

   Solo DOPO che il JS ha applicato lo stato iniziale (classe
   .is-contrast-ready sul .site-header, aggiunta al secondo rAF): al
   primo frame il colore deve scattare, non animare, altrimenti su
   reload da fondo pagina si vede il logo "sfumare" dal colore
   sbagliato a quello giusto. */
.site-header.is-contrast-ready.is-over-dark .site-header__bar,
.site-header.is-contrast-ready.is-over-light .site-header__bar {
  transition: color 0.2s ease;
}

/* --- sezione CHIARA sotto (data-header-theme="dark"): logo SCURO --- */
.site-header.is-over-dark .site-header__bar {
  color: var(--color-primary);
}

.site-header.is-over-dark .site-header__logo-img {
  filter: none;
}

/* --- sezione SCURA sotto (data-header-theme="light"): logo CHIARO -- */
.site-header.is-over-light .site-header__bar {
  color: var(--color-surface);
}

.site-header.is-over-light .site-header__logo-img {
  filter: invert(1);
}

/* --- sezione di apertura, ancora in cima (.is-over-bare) -----------
   Il JS la marca 'light' finche' si e' in cima (poi 'dark'), ma
   l'apertura ha sempre fondo chiaro o colorato-chiaro (hero, "Chi e'",
   .project-lede con testo scuro): il logo deve restare SCURO. Va
   dopo le due regole sopra: a parita' di specificita' vince per ordine. */
.site-header.is-over-bare .site-header__bar {
  color: var(--color-primary);
}

.site-header.is-over-bare .site-header__logo-img {
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-header.is-over-dark .site-header__bar,
  .site-header.is-over-light .site-header__bar {
    transition: none;
  }
}