/* ==========================================================================
   HERO SLIDER (Query Loop + Cover)
   Componente specifico per lo slider orizzontale
   ========================================================================== */

/* Contenitore principale */
.site-hero-slider {
  position: relative;
  /* Rimuove outline sullo slider stesso quando cliccato */
  outline: none !important;
}

/* Track: Il contenitore UL del Query Loop */
.site-hero-slider ul.site-hero-slider__track.wp-block-post-template {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE/Edge */
  /* Rimuove outline sulla track */
  outline: none !important;
}

/* Nasconde scrollbar su Chrome/Safari */
.site-hero-slider ul.site-hero-slider__track.wp-block-post-template::-webkit-scrollbar {
  display: none;
}

/* Slide: Ogni singolo elemento LI */
.site-hero-slider ul.site-hero-slider__track.wp-block-post-template > li {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  margin: 0 !important;
  /* Rimuove outline sulla slide */
  outline: none !important;
}

/* ==============================
   PAGINAZIONE (DOTS)
   ============================== */

.site-hero-slider .site-hero-slider__dots {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  /* Assicura che i dots siano cliccabili */
  pointer-events: auto;
}

/* Dot base */
.site-hero-slider .site-hero-slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
  
  /* --- RIMOZIONE BORDI NERI DI DEFAULT --- */
  outline: none !important;
  box-shadow: none !important;
}

/* Stato attivo */
.site-hero-slider .site-hero-slider__dot.is-active {
  width: 26px;
  border-radius: 999px; /* Diventa una pillola */
  background: rgba(255, 255, 255, 1);
}

/* --- NUOVO STILE DI FOCUS (Accessibilità Elegante) --- */
/* Appare solo quando si naviga con la tastiera, non col mouse */
.site-hero-slider .site-hero-slider__dot:focus-visible {
  outline: none !important;
  /* Crea un alone bianco sfocato invece del bordo nero */
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4), 0 0 10px rgba(255, 255, 255, 0.6) !important;
  outline-offset: 0;
}