:root {
    --transition3: all 0.3s ease-in-out;
    --transition5: all 0.5s ease-in-out;
}

.offcanvas-wrapper {
    position: relative;
}

.offcanvas-trigger {
    font-size: 24px;
    cursor: pointer;
    background: none;
    border: none;
    color: #333;
    background-color: unset !important;
}

.offcanvas-menu {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 8px rgba(0,0,0,0.2);
    transition: left 0.3s ease;
    overflow-y: auto;
    z-index: 9999;
}

.offcanvas-menu.open {
    left: 0 !important;
}

.offcanvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.offcanvas-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
    z-index: 9998;
}

.offcanvas-menu {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100%;
    background: #fff; /* default */
    box-shadow: -2px 0 8px rgba(0,0,0,0.2);
    transition: left 0.3s ease;
    overflow-y: auto;
    z-index: 9999;
}

.offcanvas-menu.open {
    left: 0;
}

.offcanvas-close {
    font-size: 24px;
    background: none;
    border: none;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    color: #000; /* default */
    z-index: 10000;
}


.offcanvas-trigger:focus,
.offcanvas-trigger:hover,
.offcanvas-trigger:focus,
.offcanvas-trigger:hover,
.offcanvas-close:focus,
.offcanvas-close:hover,
.offcanvas-close:focus,
.offcanvas-close:hover {
    background-color: unset !important;
    color: #fff;
    text-decoration: none
}
body.stop_scroll {
    overflow: hidden !important;
    height: 100vh !important;
}





/* --- BLOCCO ICONE (Attivo se vuoi mostrare le icone di espansione) --- */

/* 1. Icona quando il menu è COLLASSATO/CHIUSO */
/* Stile di base per il contenitore dell'icona inserita tramite pseudo-elemento */
.uc-list-menu li.menu-item-has-children > a .uc-menu-item-pointer::after {
    font-family: "Font Awesome 5 Free"; /* Obbligatorio in FA5 */
    font-weight: 900;                  /* Obbligatorio per icone Solid */
    display: inline-block;
    margin-left: 10px;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* --- STATO CHIUSO (di default o quando ha la classe .collapsed) --- */
/* Mostra la freccia in GIÙ (\f107) */
.uc-list-menu li.menu-item-has-children > a .uc-menu-item-pointer::after,
.uc-list-menu li.menu-item-has-children > a.collapsed .uc-menu-item-pointer::after {
    content: "\f107";
}

/* --- STATO APERTO (quando il JS applica .expanded) --- */
/* Scambia il contenuto inserendo la freccia in SÙ (\f105) */
.uc-list-menu li.menu-item-has-children > a.expanded .uc-menu-item-pointer::after {
    content: "\f106";
}


/* Allineamento flessibile per posizionare il testo a sinistra e le icone a destra */
.uc-list-menu li a {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
}

/* Posizionamento del wrapper delle icone Elementor */
.uc-elementor-icons {
    display: inline-flex;
    align-items: center;
    pointer-events: none; /* Rende cliccabile lo span sottostante del JS */
    z-index: 2;
}

/* --- LOGICA DI SCAMBIO ICONE --- */

/* Quando il menu è CHIUSO (collapsed) */
.uc-list-menu li a.collapsed .uc-icon-down-custom {
    display: inline-block !important;
}
.uc-list-menu li a.collapsed .uc-icon-up-custom {
    display: none !important;
}

/* Quando il menu è APERTO (expanded) */
.uc-list-menu li a.expanded .uc-icon-down-custom {
    display: none !important;
}
.uc-list-menu li a.expanded .uc-icon-up-custom {
    display: inline-block !important;
}

/* --- GESTIONE DELLO SPAN INIETTATO DAL JS --- */
/* Lo rendiamo invisibile ma lo stiriamo sopra le icone di Elementor, 
   così se l'utente ci clicca sopra, il JS intercetta perfettamente il click */
.uc-list-menu li a .uc-menu-item-pointer {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px; /* Area di click sopra l'icona */
    background: transparent !important;
    border: none !important;
    z-index: 3;
}

.uc-no-transition .sub-menu {
    transition: none;  
}



.uc-list-menu .wpml-ls-item a {
    display: flex !important;
    gap: 0;
    justify-content: flex-start !important;
}




/** ACCORDION IMAGES **/
.accordion-image-wrapper { 
  max-width: 1080px;
  display: flex;
  overflow: hidden;
}

.accordion-image-wrapper .tab {
  position: relative;
  height: inherit;
  padding: 20px;
  background: #000;
  color: #FFF;
  transition: width .3s ease-in-out;
}

.accordion-image-wrapper .tab img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all .3s ease-in-out;
}

.accordion-image-wrapper .caption{
  position: absolute;
  z-index: 2;
  white-space: nowrap;
  opacity: 0;
  transition: all .3s ease-in-out;
}

.accordion-image-wrapper .caption h2{
  margin-bottom: 2px;
  text-overflow:clip;
  font-size:24px;
  text-transform:uppercase;
}

.accordion-image-wrapper .caption p{
  margin: 0;
  font-family: 'Open Sans';
  font-size: .9rem;
}

/* --- Hover Effects --- */
.accordion-image-wrapper .tab:before {
    content: '';
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all .3s ease-in-out;
}
.accordion-image-wrapper .tab:hover:before  {
    opacity: 0.5;
    transition: all .3s ease-in-out;
}

.accordion-image-wrapper .tab:hover .caption{
    transition: all .3s ease-in-out;
    opacity: 1;
}