/* ------------------------------------------ GENERALIA */ 

/* Fonts in locale */


@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/Inter18pt-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Inter18pt-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/Inter18pt-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/Inter18pt-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Inter18pt-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/Inter18pt-ExtraBold.woff2') format('woff2');
}




* {
  font-family: 'Inter', sans-serif;
}


[data-theme-switcher="toggle"] {

color: var(--pico-contrast); 
font-size: 1.5em;
text-decoration: none !important;


}



html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}


.sticky-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: white;
/*  padding: 1rem;*/
/*  border-bottom: 1px solid #ccc;*/
  border-bottom:1px solid black;


}


[data-theme="dark"] .sticky-header {

  background-color: #13171f;
  border-bottom:1px solid var(--pico-contrast);


}



.programma-nav a.active {
  font-weight: bold;
  text-decoration: underline;
}


hr{ 

  border-top: 1px solid var(--pico-contrast);
  margin-bottom:1.5em;

    }




/* --------------------------------------------- Logo + info  */

/*toglie spazi al logo*/

nav h1{

  margin:0;
  padding:0;


}

/* cambia colore logo su tema dark */

[data-theme="dark"] nav h1 a img {
    filter: invert(1);
}

/* Roll over logo */
nav h1 a.logo:hover{

  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%);
  

}


nav ul.info-nav {

/* sposta tutto verso il basso*/

  align-items: flex-end;


}


nav ul.info-nav li {

/*color: black;*/
color: var(--pico-contrast);
text-decoration: none;
font-weight: 400;
font-size: 0.7em;
padding-right: 28px;


}


nav ul.info-nav li:last-child {
  padding-right: 10px;
}


@media (max-width: 400px) {


    nav ul.info-nav li {

        padding-right: 15px;


    }

    nav ul.info-nav li:last-child {
      padding-right: 0px;
    }

}  




nav ul.info-nav li a{

color: var(--pico-contrast);
text-decoration: none;



}

nav ul.info-nav li a:hover{

color: var(--pico-contrast);
text-decoration: underline;



}

/* Pulsante acquista biglietto */

a.ticket{

color: var(--pico-contrast);
text-decoration: none;

border:1px solid var(--pico-contrast);
border-radius: 0;
padding: 5px;



}


 a.ticket:hover{

color: var(--pico-contrast-inverse) !important;
background: var(--pico-contrast);
text-decoration: none !important;




}




/* --------------------------------------------- Menu principale */


nav.palazzo-nav ul {
  
  display: flex;

  justify-content: space-between;
  list-style-type: none;  

  padding: 0;
  margin:0;
  border-top:1px solid var(--pico-contrast);
  border-bottom:1px solid var(--pico-contrast);

  /* menu largo al 100% */
  width: 100%; 
}


nav.palazzo-nav li {

  /*aggiusta lo spazio top e bottom dell'li*/  
  padding: 10px 10px 5px 10px;



}

/*  selezionato menu principale */
nav.palazzo-nav li.selected a {

  color: #7f7f7f;



}


nav.palazzo-nav li.current-menu-item a {

  color: #7f7f7f;



}





nav.palazzo-nav a {

color: var(--pico-contrast);

font-weight: 700;
font-size: 1.6em;
text-transform: uppercase;
padding: 0;

}





nav.palazzo-nav a:hover {

color: #7f7f7f;
text-decoration: none;


}









/* --------------------------------------------  Menu principale - Media query */

@media (max-width: 1024px) {


  nav.palazzo-nav ul {
    flex-direction: column;
    justify-content: flex-start;
  }
  
  nav.palazzo-nav li {
    width: 100%;
    padding: 4px;
    
  }


nav.palazzo-nav a {


font-size: 1.3em;
padding: 5px;

}



}







/* --------------------------------------------- 00 Home Page */



.home-grid {

            display: grid;
            grid-template-columns: 63% 34.4%;

            gap: 1.8rem;
        }




/* ----------------  colonna sinistra*/

.info {
            grid-column: 1 / 2;
            margin-bottom: 1.5rem;
        } 




/* ----------------  colonna destra*/

.esibizioni {

      grid-column: 2 / 3;
      margin-bottom: 1.5rem;
}                


/* --------------------------------------------------- Responsive per home page */


@media (max-width: 1024px) {

            .home-grid {
                grid-template-columns: 1fr;
            }
            
            .esibizioni {
                grid-column: 1 / 2;

            }
        }




/* ------- pulsante guarda tutte */

.esibizioni .guardaTutte {

  /*margin-top:10.5em;*/
  
}

.esibizioni .guardaTutte a{

      color: var(--pico-contrast);
      text-decoration: none;

      border:1px solid var(--pico-contrast);
      border-radius: 0;
      padding: 5px;

      display: block;
      text-align: center;
      font-weight: 400;
      font-size: 0.7em;

        } 




.esibizioni .guardaTutte a:hover{

color: var(--pico-contrast-inverse) !important;
background: var(--pico-contrast);
text-decoration: none !important;




}

               




/* Reset per article in tutto il sito*/

article {
  margin-bottom: 3em;
  padding: 0;
  border-radius: none;
  background: none;
  box-shadow: none;

}


article a{
  text-decoration: none;

}


article h2{


font-family: 'Inter', sans-serif !important;
color: var(--pico-contrast);
font-size: 2.3em;
font-weight: 700;
line-height: 0.9em;
margin-top: 0.4em;  
margin-bottom:0;
text-transform: uppercase;          

}


article h3{


font-family: 'Inter', sans-serif !important;
color: #7f7f7f;
font-size: 2.3em;
margin-top: 0;
line-height: 0.9em;
text-transform: uppercase;  
}



.home-grid .esibizioni h2, h3{
            
  text-align: right;
  font-size: 2.3em !important;
            

}   

.programma h3{
            
  text-align: left;
     

}   



/* --------------------------------------------- 01 Footer */

footer{

  border-top: 1px solid var(--pico-contrast);
  border-bottom: 1px solid var(--pico-contrast);
/*  margin-bottom:2em;*/

}

footer h1{

font-family: 'Inter', sans-serif !important;
color: var(--pico-contrast);
font-size: 1.5em;
font-weight: 700;
line-height: 1.2em;
/*border:1px solid red;*/
margin-top: 0;
padding-top: 0;

}

/* allineamenti per la newsletter */

form{

  margin-top: 0.5em;
 
}


footer h2{

font-family: 'Inter', sans-serif !important;
color: var(--pico-contrast);
font-weight: 700;
font-size: 0.7em;
margin-bottom: 0;
text-align:right;


}


footer p{

font-family: 'Inter', sans-serif !important;
color: var(--pico-contrast);
font-weight: 400;
font-size: 0.7em;
margin-bottom: 0;
text-align:right;


}



footer h3{

font-family: 'Inter', sans-serif !important;

text-align:right;
margin:0;
padding: 0;
}


footer h3 a{


color: var(--pico-contrast);
font-size: 1.7em;
font-weight: 700;
/*line-height: 1.2em;*/
text-decoration: none;
}


/* reset stili form per newsletter*/

footer input{

  border-radius:0 !important;
  border-color: var(--pico-contrast) !important;
  background: none;
  color: var(--pico-contrast);

}

footer input[type="submit"]{

  /*background: var(--pico-contrast);*/
  background: none;
  /*color: black;*/
  color: var(--pico-contrast);
  font-weight: 400;
  font-size: 0.7em;

}


footer input[type="submit"]:hover {
  /*background: var(--pico-contrast-inverse);
  color: var(--pico-contrast);*/

  color: var(--pico-contrast-inverse) !important;
  background: var(--pico-contrast);
}



/* --------------------------------------  GRID*/


.footer-grid {

            display: grid;
            grid-template-columns: 63% 34%;
            gap: 1.8rem;
        }




/* ----------------  colonna sinistra*/

.footer-left {
            grid-column: 1 / 2;
            margin-bottom: 0.4rem;
        } 




/* ----------------  colonna destra*/

.footer-right {

      grid-column: 2 / 3;
      margin-bottom: 0.4rem;
}       

.footer-right h3{


margin-top:0.7em;

} 


/* --------------------------------------------------- Responsive per footer */


@media (max-width: 1024px) {

            .footer-grid {
                grid-template-columns: 1fr;
            }
            
            .footer-right {
                grid-column: 1 / 2;

            }
        }



/* ----------------- Social */


.social-icons {
  display: flex;
  gap: 1rem;
  /*justify-content: center;
  align-items: center;*/
  padding: 1.8rem 0 0 0;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--pico-contrast);
  text-decoration: none;
  /*border: 1px solid #000;
  border-radius: 0;*/
  transition: all 0.3s ease;
}

.social-icon:hover {
  background-color: none;
  color: #7f7f7f;
}

.social-icon svg {
  width: 30px;
  height: 30px;
}



.indirizzo{

  margin-top:0.7em;
  margin-bottom:0.8em;


}


ul.footerContact{
  margin-top:1.5em;

  display:flex;

  justify-content: flex-end;
/*  border: 1px solid #000;*/
  margin-bottom: 1em;


}

ul.footerContact li{

  
  list-style-type: none;
  margin-left:2em;


}


/* --------------------------------------------------- Responsive per footerContact */


@media (max-width: 1024px) {

          
      footer h2{


      text-align:left;


      }


      footer p{


      text-align:left;


      }



      footer h3{



      text-align:left;

      }




      ul.footerContact{
        margin-top:1.5em;

        display:flex;

        justify-content: space-between;

       
      /*  margin:0;*/
        padding:0;

      }



      ul.footerContact li{

        
        list-style-type: none;
        margin-left:0 !important;
        


      }


}


/* --------------- subFooter */


.subFooter{


  margin-top:-10px;

}


.subFooter li {

  color: var(--pico-contrast);
  font-weight: 400;
  font-size: 0.7em;
  /*padding-right: 28px;*/


}

.subFooter li a{

  color: var(--pico-contrast);
  text-decoration: underline;



}





/* --------------------------------------------- 02 PROGRAMMA */


.programma header{


  /*  border:1px solid red;*/
  margin-bottom:1.3em;

}



.programma header h2{

  font-family: 'Inter', sans-serif !important;
  color: var(--pico-contrast);
  font-size: 3.5em;
  font-weight: 700;
  line-height: 0.9em;
  margin-left: -5px;  
/*  border:1px solid red;*/
  margin:0;
text-transform: uppercase;

}


.programma header h3{

  font-family: 'Inter', sans-serif !important;
  color: #7f7f7f;
  font-size: 3.5em;
  font-weight: 700;
  line-height: 0.9em;
  margin-top: 0;
  padding-top:0;
  text-transform: uppercase;
  


}


.programma .ticket{


  font-weight: 400;
  font-size: 0.7em;
}



.programma h3.divider{
  border-bottom: 1px solid var(--pico-contrast);
  padding-top:20px;
  padding-bottom:20px;
  font-family: 'Inter', sans-serif !important;
  color: var(--pico-contrast);
  font-size: 2.5em;
  font-weight: 700;
  line-height: 0.9em;
/*  margin-left: -5px;  */
  margin-bottom:1em;
  text-transform: uppercase;


}

/* ----------------- menu programma */

nav.programma-nav ul {
  
  display: flex;

  justify-content: flex-start;
  list-style-type: none;  

  padding: 0;
  margin:0;
  
/*  border-bottom:1px solid black;*/

  /* menu largo al 100% */
/*  width: 100%; */
}


nav.programma-nav li {

  /*aggiusta lo spazio top e bottom dell'li*/  
  padding: 10px 3em 5px 0px;
  /*  border: 1px solid red;*/


}

nav.programma-nav a {

color: var(--pico-contrast);
text-decoration: none;
font-weight: 400;
font-size: 0.7em;

/*padding: 0;*/

}

nav.programma-nav a:hover {

color: #7f7f7f;
text-decoration: none;



}


/* -------------------   Grid per il programma*/

.prog-grid {

            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 1.5em;
            margin-bottom: 5em;
        }


.prog-grid article {
  margin-bottom: 0.5em;
  

}



.prog-grid article h2{


  margin-top:0.5em;
  font-size: 1.6em;
        

}


.prog-grid article h3{

  font-size: 1.6em;
/*  margin-left:-5px;*/

}        




/* --------------------------------------------------- Responsive per PROGRAMMA */


@media (max-width: 1024px) {

            .prog-grid {
                grid-template-columns: 1fr 1fr;
            }
            
            
        }


@media (max-width: 750px) {

            .prog-grid {
                grid-template-columns: 1fr;
            }
            
            
        }


/* -------------------   Grid per l'archivio a 5 colonne*/

.prog-arch-grid {

            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
            gap: 1.5em;
            margin-bottom: 5em;
        }


.prog-arch-grid article {
  margin-bottom: 0.5em;
  

}



.prog-arch-grid article h2{


  margin-top:0.5em;
  font-size: 1em;
  line-height: 0.9em;
        

}


.prog-arch-grid article h3{

  font-size: 1em;
/*  margin-left:-5px;*/

}              



/* --------------------------------------------------- Responsive per archivio */


@media (max-width: 1024px) {

            .prog-arch-grid {
                grid-template-columns: 1fr 1fr 1fr;
            }
            
            
        }


@media (max-width: 800px) {

            .prog-arch-grid {
                grid-template-columns: 1fr 1fr;
            }
            
            
        }



@media (max-width: 750px) {

            .prog-arch-grid {
                grid-template-columns: 1fr;
            }
            
            
        }






/* --------------------------------------------- 04 Dettaglio */



.detail-grid {

            display: grid;
/*            grid-template-columns: 63% 34.4%;*/
            grid-template-columns: 1fr 1fr;

            gap: 1.8rem;
        }




/* ----------------  colonna sinistra*/

.detail-img {
            grid-column: 1 / 2;
            margin-bottom: 1.5rem;
           

          /* ------ immagine fissa -----------*/

          /*tolta altrimenti crea spazio vuoto sotto img*/

            /*position: sticky;
            top: 0;
            height: 100vh;
            overflow: hidden;*/




        } 




/* ----------------  colonna destra*/

.detail-txt {

      grid-column: 2 / 3;
      margin-bottom: 1.5rem;
     
}      


.infoBox p{

  color: var(--pico-contrast);
  font-size: 80%;
  font-weight: 700;



}


.detail-txt p{

  color: var(--pico-contrast);
  font-size: 100%;
}  




/* --------------------------------------------------- Responsive per pagina dettaglio */


        @media (max-width: 1024px) {

            .detail-grid {

            display: grid;
            grid-template-columns: 1fr;

            gap: 1.8rem;

            }

            .detail-img {
            

              position: static;
    height: auto;


        } 



            .detail-txt {

            grid-column: 1 / 2;
            margin-bottom: 1.5rem;

            }    
            
            
        }







/* -------------------------------  DOWNLOAD PDF*/

 .download-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            text-decoration: none;
            color: var(--pico-contrast) !important;
            transition: color 0.15s ease-in-out;
        }
        
        .download-link:hover {
            color: #7f7f7f;
            text-decoration: underline;
        }


        
        .pdf-icon {
            width: 48px;
            height: 64px;
            flex-shrink: 0;

        }




.pdf-icon .pdf-outline,
.pdf-icon .pdf-fold {
  stroke: var(--pico-contrast);
  transition: stroke 0.3s;
}

.pdf-icon .pdf-text {
  fill: var(--pico-contrast);
  transition: fill 0.3s;
}

.download-link:hover .pdf-outline,
.download-link:hover .pdf-fold {
  stroke: #7f7f7f; /* hover grigio*/
}

.download-link:hover .pdf-text {
  fill: #7f7f7f; /* hover grigio*/
}




        .download-text{
          font-family: 'Inter', sans-serif;
          font-weight: 400;
          font-size: 80%;


        }



 /* -------------------------------  LINK TORNA ALLE ESPOSIZIONI*/       


.freccia-wrapper {
  margin-bottom: 2em;

}

.freccia-wrapper.backInterno{
  
  /*border:1px solid red;*/

  text-align: right;
}


.download-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--pico-contrast);
}

.freccia {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 24px;
  line-height: 0; /* evita spazi verticali indesiderati */
  transition: transform 0.3s ease;
}

.freccia svg {
  display: block;
  width: 100%;
  height: auto;
  stroke: var(--pico-contrast);
  stroke-width: 2;
  fill: none;
}

.freccia-testo {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 80%; /* o 80% se preferisci */
  line-height: 1;
}


.download-link:hover .freccia {
  transform: translateX(4px);
  transition: transform 0.3s ease;
}








/* -------------------------------------------------------------------------------------------------- STORIA / COLLEZIONE */

figcaption{

font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 0.8em;
color: var(--pico-contrast) !important;
margin-bottom: 2em;


}


/* --------------------------------------------- 00 Collezioni grid */



.coll-grid {

            display: grid;
            grid-template-columns: 2fr 1fr;

            gap: 1.8rem;
        }




/* ----------------  colonna sinistra*/

.collezione-left {
            grid-column: 1 / 2;
            margin-bottom: 1.5rem;
        } 




/* ----------------  colonna destra*/

.collezione-right {

      grid-column: 2 / 3;
      margin-bottom: 1.5rem;
}                


/* --------------------------------------------------- Responsive per home page */


@media (max-width: 1024px) {

            .coll-grid {
                grid-template-columns: 1fr;
            }
            
            .collezione-right {
                grid-column: 1 / 2;

            }
        }



 .collezione-right p{

  color: var(--pico-contrast);
  font-size: 100%;
}   


 .collezione-right h3{

font-family: 'Inter', sans-serif !important;
color: var(--pico-contrast);
font-size: 1.5em;
}          



.collezione-left p{

  color: var(--pico-contrast);
  font-size: 100%;
}   


.collezione-left h3{

font-family: 'Inter', sans-serif !important;
color: var(--pico-contrast);
font-size: 1.5em;
}   



/* ---------------------------------------------------------------------------- accordion in visita*/


.accordion{


  margin-top:2em;
  margin-bottom: 2em;
}






 details summary {
            font-family: 'Inter', sans-serif !important;
            color: var(--pico-contrast) !important;
            font-size: 1em;
            font-weight: 600;
            list-style: none;
            position: relative;
            padding-left: 2rem;

        }
        
        /* Nasconde la freccia su WebKit */
        details summary::-webkit-details-marker {
            display: none;
        }
        
        /* Aggiunge il simbolo + personalizzato a sinistra */
        details summary::before {
          font-family: 'Inter', sans-serif !important;
          font-weight: 100;
            content: '+';
            position: absolute;
            left: 0;
            top: 0;
            transition: all 0.2s ease;
            font-size: 1.2em;
/*            font-weight: bold;*/
            color: var(--pico-contrast);
            line-height: 1;
        }
        
        /* Cambia in - quando è aperto */
        details[open] summary::before {
            content: '-';
        }
        
        /* Opzionale: aggiunge un po' di hover effect */
        details summary:hover::before {
            color: var(--pico-contrast);
        }



/*non fa comparire la freccia di default di pico*/

        details summary::after {



          display: none !important;


        }


.orari-grid {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 1rem;
            margin: 0;
            padding: 0;
        }
        
        .orari-grid > div {
            padding:  0;
/*            border:1px solid red;*/
        }
        
        .orari-grid > div:nth-child(-n+2) {
            border-top: 1px solid var(--border-color);
        }
        
        .giorno {
            font-weight: 600;
            text-transform: capitalize;
        }
        
        .ora {
            
            color: var(--primary);
        }