/* Definizione variabili di colore (test) */

/* Riassunto Sintassi:
Dichiarazione: --nome-scelto: valore; (dentro :root)
Richiamo: property: var(--nome-scelto); */

:root {
    /* Puoi usare nomi basati sulla funzione o sul colore stesso */
    --colore-titoli1: #333;    /* Un grigio */
    --colore-accento: #e74c3c;     /* Un rosso */
    --sfondo-scuro: #2c3e50;      /* Un grigio scuro */
    --testo-chiaro: #f4f4f4;      /* Un bianco sporco */
}




/* Stili per resettare i margini predefiniti */

h1 {
		/* color: #333; */
		color: var(--colore-titoli1);
		font-family: 'Roboto Condensed', sans-serif;
		font-size: 30px;
		font-weight: 300;
	}
	


h2 {
		color: var(--colore-titoli1);
		font-family: 'Roboto Condensed', sans-serif;
		font-size: 20px;
		font-weight: 300;
	}
	
.mezzaspaziatura {
  margin-top: 2px;
  margin-bottom: 2px;
}
	
		body {
			width: 100%; /* Forza la larghezza totale */
			left: 0; 	/* Forza la larghezza totale */
	
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            line-height: 1.6;
			background-color: #C0C0C0; 
			overflow-y: scroll;
			
        }

        /* Stile della testata/navigazione */
        header {
		
            background-color: #333;
            color: #fff;
            padding: 1rem 0;
			
			position: -webkit-sticky; /* Supporto per Safari */
			position: sticky;
			top: 0;           /* Fondamentale: definisce dove deve fermarsi */
			z-index: 1000;    /* Assicura che il menù stia sopra agli altri elementi */
        }

        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex; /* Rende il menu orizzontale */
            justify-content: center; /* Centra le voci del menu */
			flex-wrap: wrap; /* <--- Questa è la chiave per andare a capo con le voci se necessario tipo se la pagina del browser si ridimensiona */
			gap: 1px 1px; /* 15px di spazio verticale, 25px orizzontale */
        }

        nav li {
            margin: 0 20px;
        }

        nav a {
            color: white;
            text-decoration: none;
			/* font-style: 'Oswald'; sans-serif; */
            /* font-weight: bold; */
			font-family: 'Roboto Condensed', sans-serif;
			font-weight: 500;
        }

        nav a:hover {
            color: #ff9900; /* Cambia colore al passaggio del mouse */
        }

        /* Stile del contenuto principale */
        main {
            padding: 1rem;
            text-align: center;
			max-width: 100%;
			margin-bottom: 137px;   /* Il contenuto del main ora si fermerà "visivamente" prima del footer */
		}

        footer {
            background: #333;
			color: #ffffff; /* Aggiungi questa riga per il testo bianco */
            text-align: center;
            padding: 0.5rem;
            position: fixed;  /* blocca la posizione */
			/* position: relative; */
            bottom: 0;
            width: 100%;
			font-family: 'Roboto Condensed', sans-serif;
			font-size: 12px;
			font-weight: 300;
			
			/* --- AGGIUNTE PER IL TESTO RESPONSIVE --- */
			box-sizing: border-box; /* Fondamentale: include il padding nella larghezza totale */
			word-wrap: break-word;  /* Forza la rottura delle parole molto lunghe */
			overflow-wrap: break-word;
        }

/* --------------------prove per animazione menu voce attiva----------------- */
/* -----------------------si applicano sul menù definito sulle pagine html------- */

/* Stile base dei link del menu */
	.menu-link {
		text-decoration: none;
		color: #ffffff;
		padding-bottom: 5px;
}

/* Stile della voce attiva */
	.menu-link.active {
		border-bottom: 3px solid #ffffff; /* Colore e spessore della linea */
		/* font-weight: bold; /* Opzionale: rende il testo più evidente */ */
}
/* --------------------prove per animazione menu voce attiva----------------- */



.site-title {
    /* display: block; */
	position: center;
	display: center;
	text-align: center;
    margin-bottom: 20px;
	color: white;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 30px;
	font-weight: 30;
}



/* body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
} */

.container {
    display: flex;
    flex-direction: column; /* Dispone gli elementi uno sotto l'altro */
    gap: 30px;               /* Spazio tra le immagini */
    padding: 0px;
	margin-left: 30%;
	margin-right: 30%;
	width: 40%; /* Oppure una misura fissa come 1000px */
	max-width: 100%;
}

.container-home {
    display: flex;
    flex-direction: column; /* Dispone gli elementi uno sotto l'altro */
    gap: 30px;               /* Spazio tra le immagini */
    padding: 10px;
	/* 	 */
	/* margin-right: 10%; */
	margin: 0 auto;
	width: 80%; /* Oppure una misura fissa come 1000px */
	margin-bottom: 137px;
	
}

.image-wrapper img {
    width: 80%;            	/* Adatta l'immagine alla larghezza del contenitore */
    height: auto;           /* Mantiene le proporzioni originali */
    display: block;         /* Elimina spazi vuoti indesiderati alla base */
    border-radius: 8px;     /* Opzionale: arrotonda leggermente gli angoli */
    margin: 0 auto; 		/* Centra l'elemento block orizzontalmente */
}



.box-flex {
  display: flex;
  justify-content: center; /* Centra orizzontalmente */
  align-items: center;     /* Centra verticalmente */
  /* height: 200px;           /* Necessario per vedere la centratura verticale */ */
  border: 1px solid #ccc;
}

/* Stile specifico per la riga di testo */
.image-caption {
    text-align: center;      /* Centra il testo */
    margin-top: 10px;        /* Spazio tra immagine e testo */
    font-size: 14px;         /* Dimensione carattere */
    color: #333;             /* Colore del testo */
	font-family: 'Roboto Condensed', sans-serif; /* Font specifico e generico */
	font-size: 14px;
	font-weight: 300;
}

.image-caption-title {
    text-align: center;      /* Centra il testo */
    margin-top: 10px;        /* Spazio tra immagine e testo */
    font-size: 16px;         /* Dimensione carattere */
    color: #333;             /* Colore del testo */
    font-weight: normal;      /* Grassetto (facoltativo) */

	font-family: 'Roboto Condensed', sans-serif; /* Font specifico e generico */
	font-size: 16px;
	font-weight: 350;
}

.container {
  display: flex;
  justify-content: center;
}


/* Il contenitore deve avere posizione relativa */
.container-immagine	 {
	position: relative;
/*  width: 500px; /* Imposta la larghezza che desideri */
    max-width: 100%;
	/* width: 70%;            	/* Adatta l'immagine alla larghezza del contenitore */ */
    height: auto;           /* Mantiene le proporzioni originali */
    display: block;         /* Elimina spazi vuoti indesiderati alla base */
    border-radius: 8px;     /* Opzionale: arrotonda leggermente gli angoli */
    margin: 0 auto; 		/* Centra l'elemento block orizzontalmente */
	cursor: pointer;
	overflow: hidden;
	
	/* min-width: 320px; /* Non scendere mai sotto i 320 pixel se ridimensioni la pagina*/ */
}

/* L'immagine di base */
.immagine {
  display: block;
  /* width: 100%; */
  max-width: 100%;
  height: auto;
  transition: filter .8s ease; /* Transizione fluida per il colore */
  
  /* Attenzione- gli attributi che seguono forse interferiscono con l'animazione al passaggio del mouse... */
  pointer-events: none;  /* rende l'immaginbe "invisibile" ai tocchi tipo per il save as da cell */
  user-select: none;
  
  -webkit-touch-callout: none; /* Disabilita su safari il menu contestuale (Save Image, Copy, ecc.) */
  -webkit-user-select: none; /* Impedisce su safari la selezione dell'immagine come se fosse testo */

  
}



/* Il testo inizialmente invisibile */
.testo-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centra perfettamente il testo */
  color: white;
  font-size: 20px;
  font-weight: bold;
  opacity: 0;
  transition: opacity 1.2s ease;  /* Transizione fluida Ritardo in secondi */
  text-align: center;
  width: 100%;
}

/* EFFETTO AL PASSAGGIO DEL MOUSE */

/* 1. L'immagine diventa in bianco e nero */
.container-immagine:hover .immagine {
  filter: grayscale(100%);
  
  	animation-name:zoomEntrata2;
	animation-duration: 5s;
}

@keyframes zoomEntrata2 {
  from {
    transform: scale(1.0);
	/* transform: translateX(100px); /* Posizione iniziale */ */
  }
  to {
    transform: scale(1.4)/* rotate(15deg) */;
	/* transform: translateX(0px); /* Si sposta a destra di 100px */ */
  }
}

/* 2. Il testo diventa visibile */
.container-immagine:hover .testo-overlay {
  opacity: 1;
}

/* ------------sezione per contenitori di testi--------------------------------- */
.hero-container {
    /* Occupa tutto lo schermo */
    width: 100%;
	/* min-height: 100vh; */  /*    100% dell'altezza della finestra del browser */
    height: auto; /* Il container si adatta al contenuto */
    /* Layout Flexbox per centrare */
    display: flex;
    justify-content: center; /* Centra orizzontalmente */
    align-items: top;     /* Centra verticalmente */  
    /* Padding per evitare che il testo tocchi i bordi su smartphone */
	box-sizing: border-box; /* Con border-box, il padding e il bordo vengono calcolati all'interno della larghezza specificata, non aggiunti sopra.*/
    padding: 20px;
    background-color: #f4f4f4;
	/* background-color: var(--colore-titoli1) */
	margin-bottom: 20px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
}

.content {
    text-align: center; /* Allinea il testo all'interno del div */
    max-width: 800px;   /* Evita che le righe diventino troppo lunghe su PC */
	
}

.backgroundNone {
	background-color: var(--colore-titoli1);
}



/* ----------SEzione creata per la griglia della pagina delle exhibitions --------- */

/* Il contenitore principale */
.grid-wrapper {
  display: grid;
  /* Crea 2 colonne di uguale larghezza (1 frazione ciascuna) */
  grid-template-columns: 1fr 1fr; 
  /* Spazio tra le celle */
  gap: 20px; 
  padding: 20px;
}

/* Opzionale: Rendi la griglia a colonna singola su smartphone */
@media (max-width: 600px) {
  .grid-wrapper {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------------- */

/* Parte utile alla inclusione delle icone nel footer */
.footer-icons {
  display: flex;          /* Allinea gli elementi in riga */
  justify-content: center; /* Centra le icone orizzontalmente */
  gap: 20px;              /* Crea spazio tra le due icone */
  align-items: center;    /* Le allinea verticalmente se hanno altezze diverse */
}

.footer-icons img {
  width: 25px;            /* Imposta una dimensione uniforme */
  height: auto;
  transition: transform 0.3s ease; /* Effetto fluido al passaggio del mouse */
}

.footer-icons img:hover {
  transform: scale(1.4);  /* Le icone si ingrandiscono leggermente al passaggio del mouse */
}



/* COSE PER ANIMAZIONE FOTO DELLA HOME --------------------------------*/

/* Le keyframes sono delle specie di funzioni richiamabili con la proprietà 'animation-name'  */
@keyframes zoomEntrata {
  from {
    transform: scale(1.0);
	/* transform: translateX(100px); /* Posizione iniziale */ */
  }
  to {
    transform: scale(1.4)  translateX(-1000px) translateY(-500px)/* rotate(15deg) */;
	/* transform: translateX(0px); /* Si sposta a destra di 100px */ */
  }
}

@keyframes sfuma {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


.container-anima {
	width: 100%;
	height: 500px;
	/* height: auto; */
	overflow: hidden;
	/* background-color: #FFF534; */		
}

.container-anima img {
		
	animation-name:sfuma;
	animation-duration: 5s;	
}

.container-anima img:hover {
	
	animation-name: zoomEntrata;
	animation-duration: 30s;
	animation-iteration-count: infinite; /* Per farla ripetere */
	/* animation-iteration-count: 2; */ /* Andata e Ritorno */
	animation-direction: alternate;
	animation-fill-mode: forwards; /* Per mantenere lo stato finale */	
}


/* ----------PARTE RELATIVA ALLO SLIDER IMMAGINI----------- */

/* Contenitore principale centrato */



/* Pulsanti sopra l'immagine ai lati */

/* Contenitore principale centrato */
.slider-container {
    position: relative;
    max-width: 600px;
    margin: 10px auto; /* Centra orizzontalmente */
    display: flex;   /* Di default, un elemento flex tende a occupare 
	tutto lo spazio orizzontale disponibile (comportandosi un po' come un elemento block) a meno che non sia limitato o inserito in un altro contesto flex. */
    align-items: center;
    justify-content: center;
	
}

.testo-overlay-slide {
	position: absolute;
	top: 5%;
	left: 10%;
	/*   transform: translate(-50%, -50%); */ /* Centra perfettamente il testo */
	/* transform: translate(-50%, -50%); */ /* Centra perfettamente il testo */
	color: white;
	font-family: 'Roboto Condensed', sans-serif; /* Font specifico e generico */
	font-size: 18px;
	font-weight: 300, bold;
	opacity: 0;
	transition: opacity 1.5s ease;  /* Transizione fluida Ritardo in secondi */
	text-align: center;
	width: 80%;
	height: 100%;
	
	/* display: flex; */
}

/* Nascondi le slide per impostazione predefinita */
.slide {
    display: none;
    width: 100%;
	overflow: hidden;
	

	
	

	
}

.slide img {
	width: 100%;
    border-radius: 8px;
    display: block;

}

.slide img:hover {
	  	animation-name:zoomEntrata2;
		animation-duration: 10s;
}

/* 2. Il testo diventa visibile */
.slide:hover .testo-overlay-slide {
  opacity: 1;
}


/* Pulsanti sopra l'immagine ai lati */
button {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 16px;
    background-color: rgba(0,0,0,0.5);
    color: white;
    border: none;
    font-size: 20px;
    transition: 0.3s;
    z-index: 10;
}

.prev { left: 10px; border-radius: 0 3px 3px 0; }
.next { right: 10px; border-radius: 3px 0 0 3px; }

button:hover { background-color: rgba(0,0,0,0.8); }




#sidebar {
        position: fixed;
        width: 10em;
        height: auto;
        top: 15%;
        right: auto;
        bottom: 100px;
        left: 0;
		background-color: var(--colore-accento);
      }
	  
	  
.header2 {   /* questo contiene il sottomenù per navigare le collezioni varie quando siamo in paintings */

	background-color: color-mix(in srgb, var(--colore-titoli1), white 20%); /* Mescola il colore originale con il bianco al 20% */
	color: #fff;
	/* padding: 1rem 0; */	
}

.padredeimenu {
  position: sticky;
  top: 0;
  z-index: 1000;
}


.container-immaginesingola {
  /* 1. Altezza definita */
  height: 380px; 

  /* 2. Centratura orizzontale del container nella pagina */
  margin: 0 auto;
  width: 80%; /* O una larghezza fissa se preferisci */

  /* 3. Centratura dell'immagine all'interno del container */
  display: flex;
  justify-content: center; /* Centro orizzontale */
  align-items: center;     /* Centro verticale */
  
/*   background-color: #f0f0f0; /* Opzionale: per vedere l'area del container */ */
}

.immagine-centrata {
  /* 4. Adatta la larghezza all'altezza senza deformare */
  height: 100%;
  width: auto;
  
  /* Sicurezza extra per mantenere le proporzioni */
  object-fit: contain; 
}


/* Sezione per griglia pagin etchings ---------------------------------*/

.grid-wrapper2 {
  display: grid;
  /* Crea 2 colonne di uguale larghezza (1 frazione ciascuna) */
  grid-template-columns: 1fr 1fr 1fr; 
  /* Spazio tra le celle */
  gap: 20px; 
  padding: 20px;
}

/* Opzionale: Rendi la griglia a colonna singola su smartphone */
@media (max-width: 600px) {
  .grid-wrapper2 {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------------- */

.portfolio-container {
  width: 100%;            /* Occupa tutto lo spazio disponibile */
  max-width: 1200px;      /* Limite per schermi desktop molto grandi */
  margin: 0 auto;         /* Centra il contenitore */
  overflow: hidden;       /* Utile per arrotondare i bordi o gestire zoom */
  border-radius: 8px;     /* Un tocco di design moderno */
  background-color: #f0f0f0; /* Placeholder mentre l'immagine carica */
}

.portfolio-container img {
  display: block;
  width: 100%;
  height: auto;           /* Mantiene le proporzioni */
  object-fit: contain;    /* L'opera d'arte si vede sempre per intero */
  transition: transform 0.3s ease; /* Per effetti al passaggio del mouse */
  
  -webkit-touch-callout: none; /* Disabilita su safari il menu contestuale (Save Image, Copy, ecc.) */
  -webkit-user-select: none; /* Impedisce su safari la selezione dell'immagine come se fosse testo */
}

/* --------------------------------------------------------------------------------- */