/* SaggiaSkin frontend styles */

/* Wrapper tracking sempre nascosto graficamente, gli iframe/img di tracking
   restano funzionanti perché caricati dal browser comunque */
.saggia-skin-tracking {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}

/* I due layer di sfondo sono nascosti di default e mostrati solo da desktop */
.saggia-skin-blur,
.saggia-skin-image {
  display: none;
  pointer-events: none;
}

@media (min-width: 1280px) {
  /* Layer 1 — sfocato fullscreen, sempre fisso a tutta finestra */
  body.has-saggia-skin > .saggia-skin-blur {
    display: block;
    position: fixed;
    inset: 0;
    background-image: var(--saggia-skin-img);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: blur(40px) saturate(1.1);
    /* Lo scale evita il fade trasparente sui bordi del blur */
    transform: scale(1.1);
    transform-origin: center center;
    z-index: -2;
  }

  /* Layer 2 — skin precisa 1600×1050 in alto, scrolla con il body */
  body.has-saggia-skin > .saggia-skin-image {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1050px;
    background-image: var(--saggia-skin-img);
    background-size: 1600px auto;
    background-position: top center;
    background-repeat: no-repeat;
    z-index: -1;
  }
}

/* Sotto la soglia desktop: niente tracking */
@media (max-width: 1279px) {
  .saggia-skin-tracking {
    display: none !important;
  }
}

/* Banner di preview: barra fissa in alto. Spostiamo il body 30px in basso
   tramite margin-top così non copre la parte alta della skin. */
body.has-saggia-skin-preview {
  margin-top: 30px;
}

.saggia-skin-preview-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d63638;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 99999;
  pointer-events: none;
}

/* Quando l'admin bar di WP è visibile, html riceve margin-top: 32px e il body
   diventa 62px sotto al viewport. Spostiamo il banner di 32px così copre
   esattamente la fascia tra admin bar e inizio body (dove altrimenti si
   vedrebbe il layer blurred dello sfondo). */
body.admin-bar .saggia-skin-preview-banner {
  top: 32px;
}