/* ======================================
   Headroom.js base styles
   ====================================== */

/* Posizionamento sticky dell’elemento */
.headroom {
  will-change: transform;
  transition: transform 0.3s ease-in-out;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
}

/* Quando l’utente scorre verso il basso (nascondi) */
.headroom--unpinned {
  transform: translateY(-100%);
}

/* Quando l’utente scorre verso l’alto (mostra) */
.headroom--pinned {
  transform: translateY(0);
}

/* Quando l’elemento è in cima */
.headroom--top {
  position: fixed;
}

/* Quando non è più in cima (utile per aggiungere ombra o sfondo) */
.headroom--not-top {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

/* ======================================
   Compatibilità con la barra admin WP
   ====================================== */

/* Desktop: la barra è sempre alta 32px */
body.admin-bar .headroom {
  top: 32px;
}

body.admin-bar .headroom--unpinned {
  transform: translateY(calc(-100% - 32px));
}

#content::before {
  content: '';
  display: block;
  height: var(--header-height);
}
.admin-bar #content::before {
	height: calc(var(--header-height) + var(--wp-admin--admin-bar--height));
}
/* ======================================
   MOBILE (<782px)
   ====================================== */
@media screen and (max-width: 782px) {

  /* In cima alla pagina: lascia spazio per la barra */
  body.admin-bar .headroom.headroom--top, body.admin-bar .headroom.headroom--top {
    top: 46px !important;
  }

  /* Quando in scroll (pinned o not-top): header si comporta come se non ci fosse la barra */
  body.admin-bar .headroom.headroom--not-top,
  body.admin-bar .headroom.headroom--pinned {
    top: 0;
  }

  /* Quando è nascosto: va completamente fuori dallo schermo */
  body.admin-bar .headroom--unpinned {
    transform: translateY(-100%);
  }
  .headroom--unpinned {
    transform: translateY(calc(-1 * var(--header-height)));
  }

}