/**
 * Sticky Header moderno per Elementor / tema IAO
 *
 * PUNTI DI CONFIGURAZIONE RAPIDI:
 * - Durata animazioni:   --iao-sticky-header-duration
 * - Intensità blur:      --iao-sticky-header-blur
 * - Ombra:               --iao-sticky-header-shadow
 *
 * Puoi sovrascrivere queste CSS variables (ad es. in main.css o nel
 * pannello CSS personalizzato di Elementor) senza toccare questo file.
 */

:root {
  --iao-sticky-header-duration: 0.25s;
  --iao-sticky-header-blur: 86px;
  --iao-sticky-header-shadow: 0 18px 45px rgba(15, 23, 42, 0.62);
}

/* Header base quando lo script lo marca come sticky-ready */
.iao-sticky-header {
  will-change: transform, opacity, backdrop-filter;
  transition:
    transform var(--iao-sticky-header-duration) ease-out,
    opacity var(--iao-sticky-header-duration) ease-out,
    backdrop-filter var(--iao-sticky-header-duration) ease-out,
    box-shadow var(--iao-sticky-header-duration) ease-out,
    background-color var(--iao-sticky-header-duration) ease-out;
  z-index: 1000;
}

/* Modalità sticky: gestita via JS, mantiene il layout con uno spacer */
body.has-sticky-header.iao-sticky-enabled .iao-sticky-header.iao-sticky-header--sticky {
  position: fixed;
  left: 0;
  right: 0;
}

/* Stato nascosto: header fuori dallo schermo, invisibile */
body.has-sticky-header.iao-sticky-enabled .iao-sticky-header.iao-sticky-header--hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Stato visibile: sticky, con blur e shadow morbida */
body.has-sticky-header.iao-sticky-enabled.is-sticky-visible
  .iao-sticky-header.iao-sticky-header--visible {
  transform: translateY(0);
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: var(--iao-sticky-header-shadow);
}

/* Backdrop blur (con fallback per browser che non lo supportano) */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  body.has-sticky-header.iao-sticky-enabled.is-sticky-visible
    .iao-sticky-header.iao-sticky-header--visible {
    backdrop-filter: blur(var(--iao-sticky-header-blur));
    -webkit-backdrop-filter: blur(var(--iao-sticky-header-blur));
  }
}

@supports not (backdrop-filter: blur(1px)) {
  body.has-sticky-header.iao-sticky-enabled.is-sticky-visible
    .iao-sticky-header.iao-sticky-header--visible {
    background-color: rgba(255, 255, 255, 0.98);
  }
}

/* Nasconde di default qualunque container marcato come header compatto,
   per evitare che si veda per un istante al caricamento (prima del JS). */
[data-iao-sticky-compact-header] {
  display: none !important;
}

/**
 * Modalità opzionale: swap tra header normale e header sticky alternativo
 *
 * Uso:
 * - Sul container header "normale" assegna la classe CSS: iao-sticky-main
 * - Sul container header "sticky alternativo" assegna la classe: iao-sticky-alt
 *
 * Il nostro JS aggiunge/rimuove la classe body.is-sticky-visible:
 * - di default: mostra solo .iao-sticky-main
 * - quando sticky visibile: nasconde .iao-sticky-main e mostra .iao-sticky-alt
 *
 * Nessun CSS personalizzato per pagina è necessario: basta assegnare le classi
 * sui container Elementor dove vuoi questo comportamento.
 */

/* Swap robusto tra due header (main/alt) SENZA usare display:none.
 *
 * Obiettivi:
 * - al load: l'alt NON occupa spazio (niente “spazio vuoto”)
 * - in sticky: il main NON lascia “barra vuota” dentro l'header
 * - l'alt resta “renderizzato” (evitiamo display:none che rompe alcuni widget/menu)
 *
 * Strategia:
 * - lo header inattivo viene tolto dal flusso con position:absolute + invisibile
 * - lo header attivo resta nel flusso (position:static) così l’altezza del wrapper è corretta
 */
/**
 * Swap tra header principale (.iao-sticky-main) e alternativo (.iao-sticky-alt)
 * Lo swap visivo è pilotato dal JS via display: nessuna regola qui.
 */
.iao-sticky-main,
.iao-sticky-alt {
  transform: translateZ(0); /* neutro, evita warning linter */
}

/* Placeholder per evitare layout shift quando l'header diventa fixed */
.iao-sticky-header-placeholder {
  display: none;
  width: 100%;
  height: 0;
}

.iao-sticky-header-placeholder--active {
  display: block;
}

/* Preferenze utente: riduci o disattiva animazioni se richiesto */
@media (prefers-reduced-motion: reduce) {
  .iao-sticky-header {
    transition: none !important;
  }
}

html.has-reduced-motion .iao-sticky-header {
  transition: none !important;
}

/**
 * Header compatto sticky
 *
 * Quando usi un header compatto (tramite data-iao-sticky-compact),
 * questo viene mostrato solo quando lo sticky è attivo.
 */
.iao-sticky-header-compact {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1001; /* Sopra l'header normale */
  will-change: transform, opacity, backdrop-filter;
  transition:
    transform var(--iao-sticky-header-duration) ease-out,
    opacity var(--iao-sticky-header-duration) ease-out,
    backdrop-filter var(--iao-sticky-header-duration) ease-out,
    box-shadow var(--iao-sticky-header-duration) ease-out,
    background-color var(--iao-sticky-header-duration) ease-out;
}

/* Header compatto nascosto */
.iao-sticky-header-compact.iao-sticky-header--hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Header compatto visibile */
.iao-sticky-header-compact.iao-sticky-header--visible {
  transform: translateY(0);
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: var(--iao-sticky-header-shadow);
}

/* Backdrop blur per header compatto */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .iao-sticky-header-compact.iao-sticky-header--visible {
    backdrop-filter: blur(var(--iao-sticky-header-blur));
    -webkit-backdrop-filter: blur(var(--iao-sticky-header-blur));
  }
}

@supports not (backdrop-filter: blur(1px)) {
  .iao-sticky-header-compact.iao-sticky-header--visible {
    background-color: rgba(255, 255, 255, 0.98);
  }
}