:root {
  --primary-color: #b11312;
  --secondary-color:#727272;
  --third-color:#ffff;
  --fourth-color:#EBEBEB;
  --fifth-color:#ECECEC;
  --cal-color-fest:#630B0B;
  --cal-color-hover:#a65b5b;
  --cal-color-sel:#eba0a0;
  --cal-color-today:#FF7700;
  --cal-back:#DBD9DB;
}

/*
=======================================
TIPOGRAFIA
=======================================
*/
p{
  font-size: 1.2rem;
}

div.field__label{
  font-size: 1.2rem;
}

h1,h2,h3,h4,h5,h6{
  font-family: 'Pathway Gothic One', sans-serif;
  line-height: 1;
  text-transform: uppercase;
}

h1.r-title, h2.r-title,h3.r-title,h4.r-title{
  color:var(--primary-color);
}

h2.r-title{
 font-size: 5rem !important;
}

h4.r-title{
 font-size: 2.5rem !important;
}

.subtitle{
 font-size: 1.5rem !important;
}


.bg__gray-sidebar,.info-box{
  background-color: var(--fifth-color);
}

.btn{
  cursor: pointer;
  padding: .25em 1em;
}

.btn__primary{
  text-transform: uppercase;
  background-color: transparent;
  border:1px solid var(--third-color);
  color:var(--third-color);
  border-radius: 0;
}

.btn__secondary{
  text-transform: uppercase;
  background-color: var(--primary-color);
  color:white;
  border-radius: 0;
  width: 42%;
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 1.8rem;
  padding: 0;
}

.btn__primary:hover,.btn__secondary:hover,.btn__primary_title:hover{
  color:var(--third-color);
  border:1px solid white;
  background-color: transparent;
}


.btn__primary_title{
  text-transform: uppercase;
  background-color: var(--primary-color);
  color:white;
  border-radius: 0;
  width: 20%;
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 1.8rem;
  padding: 0;
}

label{
  font-size:1.3em;
  font-weight:bold;
  color:var(--secondary-color);
}

a{
  text-decoration:none;
  color:var(--third-color);
}

a:hover{
  transition:0.3s;
  color:var(--primary-color);
}


div.field__label a{
  text-decoration:none;
  color:var(--primary-color);
}

.app-install{
  margin-top: 3.5rem;
  border: 0;
  background-color: var(--primary-color);
  line-height: 1;
  padding: 13px 21px;
  color: white;
  text-transform: uppercase;
  font-size: 14px;
}

.linguetta{
   background-color:var(--primary-color);
   position:fixed;
   right:-21px;
   top:70%;
   transform:rotate(270deg);
   padding:5px 10px;
   color:white;
   width:100px;
   text-align: center;
   line-height: 1.5rem;
   z-index: 1;
   display: none;
}

.bi-geo-alt-fill::before {
    font-size: 2em;
    color:var(--primary-color);
    margin-bottom:5px;
}

.detail-box{
  border-left:1px solid lightgray;
  padding-left:25px;
}

.class__link{
  text-decoration:none;
  color:var(--primary-color);
}

.social-icons-container i{
  color: var(--primary-color);
  font-size:1.4rem;
  margin-right:5px;
  margin-left:5px;
}

.main__title{
  font-size:6rem;
}

.n__mese{
  font-size:3.7rem;
  font-weight: 900;
}

.tl__mese{
  font-size:1.2rem;
  font-weight: 500;
  position: relative;
  top: 15px;
}

.card-title{
  font-family:var(--bs-font-sans-serif);
  font-size: 1.2rem;
  text-transform: none;
}

.card-title-main{
  /*font-family:var(--bs-font-sans-serif);*/
  text-transform: uppercase;
  font-size: 2rem;
  text-align: center;
  font-weight: 600;
}

.card-text{
  font-size: 1.2rem;
  line-height: 1.3;
}

/* I titoli delle card sono passati da h5 a h3 per dare una gerarchia sotto
   l'h2 di sezione (rilev. #3): il selettore deve seguirli. */
.grid-events-tl h5,
.grid-events-tl h3{
  text-transform:uppercase;
  font-family: 'Pathway Gothic One', sans-serif;
  color:var(--primary-color);;

}

.social-icons a{
    background-color: var(--primary-color);
    border-radius:0;
}

.social-icons i{
  color:var(--third-color);
}

.list-group-item{
  background-color:transparent;
  text-transform:uppercase;
  padding:4px 0px;
}

.arrow-icon-custom i{
  font-size:1.3em;
}

.arrow-icon-custom i:hover{
  opacity:0.5;
  transition:0.3s;
  color:white;
}

.tl-logo{
  max-width: 100%;
  cursor: pointer;
}

.download-icon{
  max-width:114px;
}

.header__home{
  background-image: url('../images/mura-di-notte.jpg');
  min-height:70vh;
  background-size:cover;
  background-position: center;
}

.header__int{
  background-image: url('../images/mura-di-notte.jpg');
  min-height:40vh;
  background-size:cover;
  background-position: center;
}

.calendar-box{
  min-height:100%;
}

.calendar-box i{
  color:white;
  font-size:2rem;
}

.main--header__section{
  margin-top: 7rem;
  margin-bottom: 2rem;
}

.navbar-pwa{
  background-color: var(--primary-color);
  color:white;
  text-transform: uppercase;
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 1.3rem;
}

.navbar-pwa i{
  margin-left:10px;
}

.card-image-top{
  height:40vh;
  width:100%;
  object-fit: cover;
}

.card, .card-img-top{
  border:0;
  border-radius:0;
}

.card-body{
  background-color:var(--primary-color);
  color:var(--third-color);
  gap: 20px;
}

.card-body-main{
  min-height: 200px;
}

.card-body__event-card{
  background-color:var(--fifth-color);
  gap: 20px;
  height: 330px;
}

.bg-gray-events{
  background-color:var(--fifth-color);
}

.btn-more-events{
  color:var(--third-color);
  background-color:var(--primary-color);
  border-radius:0;
  text-transform: uppercase;
  font-family: 'Pathway Gothic One';
  font-size: 1.5rem;
}

.btn-more-events:hover{
  transition:0.3s;
  color:var(--primary-color);
  background-color:var(--fifth-color);
  border:1px solid var(--primary-color);
}

.label-events{
  position: absolute;
  background-color:var(--primary-color);
  color:white;
  right:0;
  padding:4px;
}

.label-events p{
  margin:0;
}

.label-events p .n__mese{
  font-size: 1.8rem;
}

.navbar-light .navbar-nav .nav-link {
    color: black;
    text-transform:uppercase;
    font-weight:500;
    font-size: 1.8rem;
    font-family: 'Pathway Gothic One', sans-serif;
    padding: 0;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.date__event{
  border-right:1px solid white;
  padding-right: 20px;
}

.owl-carousel{
  position: relative;
  height:50%;
}
.owl-carousel .owl-item img{
  height:260px;
  width:auto;
}

.more__info-sidebar{
  padding-top: 0px;
}

.owl-carousel-events .owl-nav {
  position: absolute;
  top: -100px;
  right: 0px;
  display: flex;
  align-items: center;
 }

.owl-prev {
    left:0;
    top: 200px;
 }

 .owl-next {
    right:0;
    top:200px;
 }

 .owl-carousel__top{
   bottom:-50px;
 }

 .form-select{
   width:auto;
   border-radius: 0px;
 }

 .selettore-lingua{
  padding-left:10px;
 }

 .navbar-collapse {
     padding: 25px;
     border: 0px solid var(--primary-color);
  }

 .navbar-light .navbar-toggler {
     color: rgba(0,0,0,.55);
     position: relative;
     right: 20px;
     padding:0;
     border: 0px !important;
 }

 .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {
    color: var(--primary-color);
}

.card-header-tl{
  min-height: 125px;
  aspect-ratio: 16 / 11;
  max-width: 100%;
}

.card-header-tl-carousel{
  min-height: 260px;
}


.bread{
  color: var(--third-color) !important;
}

.bread:hover{
  color: var(--primary-color) !important;
}

.descrest p a{
  color: var(--primary-color);
}

.cc-nb-okagree, .cc-nb-reject, .cc-cp-foot-save{
  background-color: var(--primary-color) !important;
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background-color: #fff;
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  font-family: 'Pathway Gothic One', sans-serif;
  text-transform:uppercase;
  text-decoration: none;
  font-size: 36px;
  color: var(--primary-color);
  display: block;
  transition: 0.3s;
  font-weight: 500;
}

.overlay a:hover, .overlay a:focus {
  color: var(--primary-color);
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

.lang-selector a.active{
  background-color: var(--primary-color);
  color:white;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}


/*=========================================
SMALL LAPTOP SCREEN
===========================================*/

@media (max-width: 1400px){

  .navbar-collapse {
      padding: 25px;
      border: 3px solid var(--primary-color);
   }
   .selettore-lingua{
     padding-left: 0px;
     margin-bottom: 20px;
     margin-top: 15px;
   }

   .detail-box{
     border-left:0px solid lightgray;
     padding-left:0px;
     margin-top:25px;
   }

   .subtitle{
     font-size: 0.856em !important;
   }

   .navbar-light .navbar-toggler-icon {
       background-image: url('../images/menu-lt-icon-new.png');
   }

   .bg-light{
     background-color: var(--primary-color) !important;
   }

   .navbar-collapse{
     background-color: white !important;
   }

   .info-order:nth-child(1) {
     order: 1;
   }
   .info-order:nth-child(2) {
     order: 5;
   }
   .info-order:nth-child(3) {
     order: 6;
   }
   .info-order:nth-child(4) {
     order: 2;
   }
   .info-order:nth-child(5) {
     order: 3;
   }
   .info-order:nth-child(6) {
     order: 4;
   }

   .card-header-tl-carousel{
     min-height: 200px;
   }

   .btn__primary_title{
     width: 42%;
   }

   .card-text{
     font-size: 1.1rem;
     line-height: 1.3;
   }

   .owl-carousel .owl-item img{
     height:220px;
   }

   .info-box{
     font-size: 0.95rem;
   }

   .navbar>.container-fluid{
     flex-wrap: nowrap;
   }
}

/*=========================================
TABLET THROTTLING
===========================================*/

@media (max-width:1200px){
  .btn__secondary{
    font-size: 1rem !important;
  }

  .card-title{
    font-size: 1.2rem !important;
  }

  .card-title-main{
    font-size: 2rem !important;
  }

  .cat-date__card{
    font-size: 0.8rem !important;
  }

  .card-text{
    font-size: 0.95rem !important;
  }

  .owl-carousel .owl-item img {
    height: 180px !important;
  }

  .owl-carousel-banners{
    height: auto;
  }

  p{
    font-size: 0.9rem;
  }

  .card-header-tl{
    min-height: 0;
  }

  .cat-event__card{
    font-size: 0.8rem !important;
  }

  .navbar>.container-fluid{
    flex-wrap: nowrap;
  }
}


/*=========================================
TABLET
===========================================*/

@media (max-width:960px){
  .btn__secondary{
    font-size: 1rem !important;
  }

  div.field__label{
    font-size: 0.8rem;
  }

  .card-title{
    font-size: 1rem !important;
  }

  .card-title-main{
    font-size: 1.5rem !important;
  }

  .cat-date__card{
    font-size: 0.6rem !important;
  }

  .card-text{
    font-size: 1rem !important;
  }

  .owl-carousel .owl-item img {
    height: 140px !important;
  }

  .owl-carousel-banners{
    height: auto;
  }

  p{
    font-size: 1.05rem;
  }

  .card-body{
    padding: 0.5rem 1rem;
    gap: 10px;
  }

  .navbar>.container-fluid{
    flex-wrap: nowrap;
  }
}


/*=========================================
SMARTPHONE
===========================================*/

@media (max-width:600px){
  .owl-theme .owl-nav {
    top: -62px;
   }
   .main--header__section {
    margin-top: 9rem;
    margin-bottom: 4rem;
}
   .navbar-events{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999999;
    border: 0;
   }

   .tl-logo{
     max-width: 75%;
   }

   .navbar-collapse {
       border: 3px solid var(--primary-color);
       padding: 25px;
    }
    .calendar-box{
      min-height:400px;
    }
    .owl-carousel{
      height:initial;
    }
    .more__info-sidebar{
      padding-top: 30px;
    }
    .main__title {
      font-size: 4.5rem;
      line-height: 3.7rem;
  }
    }
    .card-header-tl{
      min-height: 105px;
    }
    .label-events p .n__mese {
    font-size: 2rem;
  }
    .label-events {
    padding: 2px;
  }
  .label-events p {
    line-height: 2.5em;
  }

  h2.r-title{
   font-size: 2.5rem !important;
  }

  h4.r-title{
   font-size: 2.5rem !important;
  }

  .card-title{
    font-size: 1.5rem !important;
  }

  .card-title-main{
    font-size: 2rem !important;
  }

  .cat-date__card{
    font-size: 1rem !important;
  }

  .card-text{
    font-size: 1.1rem !important;
  }

  .owl-carousel .owl-item img {
    height: 200px !important;
  }

  .navbar>.container-fluid{
    flex-wrap: wrap;
  }

  .cat-event__card{
    font-size: 1rem !important;
  }
}


/*=========================================
SMARTPHONE
===========================================*/

@media (max-width:345px){

  .navbar-toggler{
    font-size: 1rem !important;
  }

  .navbar-pwa{
    font-size: 1rem !important;
  }

  .btn__primary_title{
    font-size: 1.5rem !important;
  }
}


/*=========================================
ACCESSIBILITÀ — header condiviso (Fase 1)
===========================================*/

/* Skip link (WCAG 2.4.1 — rilev. #5)
   Nascosto visivamente, diventa visibile quando riceve il focus da tastiera. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  background: #1a1a1a;
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}
.skip-link:focus {
  left: 0;
}

/* Logo: ora è un link vero, raggiungibile da tastiera */
.tl-logo-link {
  display: inline-block;
}

/* Voce di menu corrente: oltre al colore, un indicatore non cromatico
   (WCAG 1.4.1 / 4.1.2 — rilev. #28, #29) */
.navbar-light .navbar-nav .nav-link.active,
.overlay .overlay-content a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
}

/* Menu mobile chiuso: fuori dal flusso e dall'ordine di tabulazione
   (WCAG 2.4.3 / 4.1.2 — rilev. #9, #16) */
.overlay[hidden] {
  display: none;
}

/* Apertura del menu: la larghezza è pilotata da una classe, non da uno stile
   inline. Dopo il passaggio display:none -> block una transizione impostata
   nello stesso frame non parte; la classe viene aggiunta dal JS al frame
   successivo, così l'animazione da width:0 funziona. */
.overlay.is-open {
  width: 100%;
}

/* Pulsante di chiusura: era un <a>, ora è un <button> nativo
   (WCAG 4.1.2 — rilev. #17). Le regole di .overlay a non lo raggiungono più. */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  line-height: 1;
  padding: 0 0.25em;
  background: none;
  border: 0;
  color: var(--primary-color);
  font-family: 'Pathway Gothic One', sans-serif;
  cursor: pointer;
}

/* Indicatore di focus da tastiera ad alto contrasto (>= 3:1)
   (WCAG 1.4.11 — rilev. #7, #10, #14, #34, #40) */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #1a1a1a;
  outline-offset: 2px;
}

/* Bootstrap azzera l'outline sui controlli di form (.form-select:focus { outline: 0 })
   e lo sostituisce con un alone azzurro che non raggiunge 3:1. Questa regola ha la
   stessa specificità ed è caricata dopo, quindi vince. */
.form-select:focus,
.form-select:focus-visible,
.form-control:focus,
.form-control:focus-visible,
.btn:focus-visible {
  outline: 3px solid #1a1a1a;
  outline-offset: 2px;
}

/* ==========================================================================
   Caroselli accessibili (Fase 3 — rilev. #1, #11, #12, #13, #41, #43)
   ========================================================================== */

/* La sezione che avvolge il carosello: serve come riferimento di posizionamento
   per il pulsante di pausa, che JS inserisce come primo figlio. */
.carousel-region {
  position: relative;
}

/* Card con link a piena superficie: il link sul titolo copre l'intera card,
   così l'area cliccabile resta quella di prima ma esiste un solo elemento
   interattivo, raggiungibile da tastiera. Vale per il carosello in evidenza
   (rilev. #11) e per le due griglie della homepage (rilev. #3, #15), che
   prima erano <div onclick> o avevano due link alla stessa pagina. */
.owl-carousel-events .card,
.grid-events-tl .card {
  position: relative;
}

.card-link-stretched,
.card-link-stretched:hover,
.card-link-stretched:focus {
  color: inherit;
  text-decoration: none;
}

.card-link-stretched::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

/* Il focus da tastiera arriva sul link ma va mostrato attorno a tutta la card:
   l'outline sul solo testo del titolo sarebbe illeggibile sopra l'immagine. */
.card-link-stretched:focus-visible {
  outline: none;
}

.owl-carousel-events .card:focus-within,
.grid-events-tl .card:focus-within {
  outline: 3px solid #1a1a1a;
  outline-offset: 2px;
}

/* Pulsante pausa/riprendi dell'autoplay (WCAG 2.2.2).
   Sempre visibile: un controllo che compare solo all'hover non è raggiungibile
   da chi naviga da tastiera o da touch. */
.carousel-pause {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid #1a1a1a;
  border-radius: 50%;
  background: #fff;
  color: #1a1a1a;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.carousel-pause:hover {
  background: #1a1a1a;
  color: #fff;
}

/* Variante dentro .owl-nav (data-carousel-pause-position="nav"): in linea a
   destra delle frecce, stessa misura (38px) e stesso margine di Owl (5px),
   così i tre controlli sono allineati e spaziati in modo uniforme. */
.owl-nav .carousel-pause {
  position: static;
  width: 38px;
  height: 38px;
  margin: 5px;
  vertical-align: middle;
  font-size: .8rem;
}

.carousel-pause__icon {
  pointer-events: none;
}

/* Le slide non visibili sono tolte dal flusso di tabulazione via JS; inert
   aggiunge la stessa protezione a livello di browser dove supportato. */
[inert] {
  pointer-events: none;
}

/* ==========================================================================
   Reflow a 320px CSS / zoom 400% (WCAG 1.4.10 — rilev. #19)
   ========================================================================== */

/* Le tabelle dei cookie hanno 5 colonne e non possono ridisporsi: 1.4.10 ammette
   lo scorrimento orizzontale per i contenuti che richiedono due dimensioni.
   La zona scorrevole deve però essere raggiungibile da tastiera — nel markup ha
   role="region" + tabindex="0" + aria-label. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Un URL scritto per esteso non ha punti di a capo: a 320px sforava il viewport
   e trascinava con sé l'intera pagina. */
a,
p,
li,
td,
th,
dd {
  overflow-wrap: break-word;
}

/* Anche le intestazioni possono contenere una parola singola più larga del
   viewport ("Accessibilità" a 4.5rem misura 308px in un box da 264px). */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Sotto i 400px il titolo hero va ridotto ancora: la media query esistente si
   ferma a 4.5rem, che a 320px sfora. Spezzare la parola sarebbe la rete di
   sicurezza, ma rimpicciolire mantiene il titolo leggibile. */
@media (max-width: 400px) {
  .main__title {
    font-size: 3.2rem;
    line-height: 2.9rem;
  }
}

/* Link del footer che punta alla pagina corrente (rilev. #23).
   aria-current lo dice alle tecnologie assistive, sottolineatura e grassetto
   sono l'evidenza visiva non cromatica. */
.footer-link-current {
  text-decoration: underline;
  font-weight: 700;
}

/* Breadcrumb (rilev. #30 calendario, #38 dettaglio evento).
   Il separatore è generato in CSS e ha testo alternativo vuoto, così i lettori
   di schermo non annunciano "slash" fra le voci. La prima dichiarazione è il
   fallback per i browser che non supportano la sintassi content: <str> / <alt>. */
.breadcrumb-tl {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.breadcrumb-tl li + li::before {
  content: "/";
  content: "/" / "";
  padding: 0 0.4rem;
}

/* #45 — i link "sito web" e "link evento" del riquadro dettagli erano
   distinguibili dal testo circostante solo per il colore rosso. */
.link {
  text-decoration: underline;
}