#headerbox{z-index: 999; position: fixed; top: 0px;}

#home{line-height:1.5em;background:transparent;margin:0;padding:0;position:static;width:100%;border-right:0px none #D6CC0A;}
#home a{color:#ccc;font-weight:700;text-decoration:none;}
#home a:hover{color:#fff;font-weight:700;text-decoration:none;}
#home h2 a{color:#fff;font-size:1.8em;text-transform:uppercase;text-decoration:none;line-height:1.8em;text-align:left;padding:0px 10px}

/* SLIDER */
#wrapper{ width: 100%; margin: 0 auto; }

.aw-slider{position:relative;z-index:1;max-width:1920px;margin:0 auto;background:#e9ecef;}
.aw-viewport{position:relative;width:100%;overflow:hidden;}
/* Altezza robusta (600/1920 = 31.25%): senza un'altezza esplicita la viewport
   sarebbe alta 0px (le slide sono in position:absolute) e non vedresti nulla. */
.aw-viewport::before{content:"";display:block;padding-top:31.25%;}
.aw-track{list-style:none;margin:0;padding:0;}
.aw-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;}
.aw-slide.is-active{opacity:1;}
.aw-link{display:block;width:100%;height:100%;text-decoration:none;color:#fff;}
div.aw-link{cursor:default;}
.aw-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.aw-caption{position:absolute;left:0;right:0;bottom:0;padding:16px 20px 22px;
  background:linear-gradient(transparent, rgba(0,0,0,.62));}
.aw-caption p{margin:0;font-size:clamp(.95rem,2vw,1.3rem);color:#fff;font-weight:600;
  text-shadow:0 1px 3px rgba(0,0,0,.45);}

/* frecce: z-index sopra .aw-hero (2), altrimenti il pannello del log
   (posizionato a destra) copre il pulsante "next" e ne blocca il click */
.aw-prev,.aw-next{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(43,43,43,.75);color:#fff;font-size:26px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .2s;}
.aw-prev{left:12px;}
.aw-next{right:12px;}
.aw-prev:hover,.aw-next:hover{background:rgba(0,0,0,.85);}

/* riga controlli: play/pausa + puntini */
.aw-controls{position:absolute;left:0;right:0;bottom:6px;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:14px;}
.aw-toggle{width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(43,43,43,.75);color:#fff;font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center;}
.aw-toggle:hover{background:rgba(0,0,0,.85);}
.aw-dots{display:flex;gap:8px;}
.aw-dot{width:12px;height:12px;padding:0;border:2px solid #fff;border-radius:50%;
  background:transparent;cursor:pointer;}
.aw-dot[aria-current="true"]{background:#fff;}

/* messa a fuoco sempre visibile (accessibilità da tastiera) */
.aw-prev:focus-visible,.aw-next:focus-visible,.aw-toggle:focus-visible,
.aw-dot:focus-visible,.aw-link:focus-visible,.aw-log-list:focus-visible{
  outline:3px solid #33691E;outline-offset:2px;}

/* testo solo per screen reader */
.aw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;padding:0;margin:-1px;}

/* rispetta "riduci animazioni": niente dissolvenza, niente autoplay (gestito anche in JS) */
@media (prefers-reduced-motion: reduce){
  .aw-slide{transition:none;}
}

/* LOG sovrapposto allo slider: .aw-hero e' un livello assoluto che copre
   l'intero .aw-slider (stessa altezza di .aw-viewport), cosi' controlli e log
   restano sopra le immagini invece di finire sotto nel flusso normale. */
.aw-hero{position:absolute;inset:0;z-index:2;pointer-events:none;}
.aw-hero > *{pointer-events:auto;}

.aw-log{
  position:absolute;right:18px;bottom:56px;
  width:min(360px,42%);max-height:60%;
  display:flex;flex-direction:column;
  color:#fff;background:rgba(43,43,43,.82);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  border-radius:10px;padding:12px 14px;box-sizing:border-box;
}
.aw-log-title{margin:0 0 8px;font-size:1rem;font-weight:bold;letter-spacing:.02em;}
.aw-log-list{
  list-style:none;margin:0;padding:0 4px 0 0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.aw-log-list:focus-visible{border-radius:4px;}
.aw-log-item{
  display:flex;gap:10px;padding:8px 2px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.aw-log-item:last-child{border-bottom:0;}
.aw-log-time{
  flex:0 0 auto;min-width:4.2em;font-size:.78rem;opacity:.82;
  font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.aw-log-text{font-size:.9rem;line-height:1.35;text-shadow:0 1px 2px rgba(0,0,0,.5);}

/* su smartphone alziamo un po' l'area per leggere meglio la didascalia */
@media (max-width:700px){
  .aw-viewport::before{padding-top:75%;}
}

/* SMARTPHONE: il log passa da overlay a blocco pieno sotto l'immagine */
@media (max-width:640px){
  #headerbox{position:relative;}
  .aw-hero{position:static;display:flex;flex-direction:column;}
  .aw-controls{position:static;margin-top:6px;}
  .aw-log{
    position:static;width:auto;max-height:none;border-radius:0;
    background:#2b2b2b;-webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .aw-log-list{max-height:260px;}
}

@media only screen and (max-width: 320px) {
#headerbox{position:relative;}
}
/* Codice per SMARTPHONE 321 – 480 px */
@media only screen and (min-width: 321px) and (max-width: 480px) {
#headerbox{position:relative;}
}
/* Codice per TABLET 481 – 768 px */
@media only screen and (min-width: 481px) and (max-width: 768px) {
#headerbox{position:relative;}
}
/* Codice per TABLET 769 – 1024 px */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
#headerbox{position:relative;}
}