/* style.css */

body {
	font-family: 'Afacad', sans-serif; /* Applica Afacad ai testi */
	line-height: 1.6;
	margin: 0;
	padding: 0;
	background-color: #f4f4f4;
	color: #333;
}
h1, h2, h3 {
	font-family: 'Tangerine', cursive; /* Applica Tangerine ai titoli */
	font-weight: 700; /* Rende Tangerine più leggibile come titolo */
	color: #000; /* Puoi mantenere il colore verde Chianti per i titoli */
	margin-bottom: 10px;
}
h1 {
	font-size:2.8em;
}
h2 {
	font-size:2.4em;
}
h3 {
	font-size:2.1em;
}
header {
	background-color: #fff;
	color: black;
	padding: 1.5rem 0;
	display: flex; /* Attiva Flexbox */
	height:100px;
	justify-content: center; /* Centra orizzontalmente il contenuto */
	align-items: center; /* Centra verticalmente il contenuto (utile se logo e testo hanno altezze diverse) */
	gap: 30px; /* Spazio tra il logo e il titolo H1 */
}
header img.logo {
	height: 130px; /* Regola questa altezza per il tuo logo */
	width: auto; /* Mantiene le proporzioni */
	/* Potresti voler aggiungere 'max-width: 100%;' se il logo è molto grande */
}
header h1 {
	margin: 0; /* Rimuovi i margini predefiniti dell'H1 per un migliore allineamento con il logo */
	/* Gli altri stili di h1 (font, colore) rimangono quelli che hai impostato prima */
}
nav ul {
    padding: 0;
    list-style: none;
    text-align: center;
    background-color: #ffffff; /* Sfondo bianco */
    padding: 0.5rem 0;
    border-top: 1px solid #5a8d5f; /* Riga verde sottile superiore */
    border-bottom: 1px solid #5a8d5f; /* Riga verde sottile inferiore */
}
nav ul li {
    display: inline;
    margin-right: 20px;
}
nav ul li a {
    color: #333; /* Testo nero */
    text-decoration: none;
    font-weight: normal; /* Rimuovi il grassetto */
    font-size:0.9em;
	text-transform: uppercase;
}
.container {
	width: 80%;
	margin: auto;
	overflow: hidden;
	padding: 20px 0;
}
/* Stili per il Carosello */
.carousel-container {
	width: 100%;
	height: 500px; /* Altezza fissa del carosello */
	position: relative;
	overflow: hidden; /* Nasconde le immagini che non sono attive */
	margin-bottom: 20px; /* Spazio sotto il carosello */
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	border-radius: 8px;
}
.carousel-slide {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0; /* Inizialmente tutte le slide sono nascoste */
	transition: opacity 1.5s ease-in-out; /* Animazione di dissolvenza */
}
.carousel-slide.active {
	opacity: 1; /* La slide attiva è visibile */
}
.carousel-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Assicura che l'immagine copra l'area mantenendo le proporzioni */
}
.carousel-text {
	font-family: 'Tangerine', cursive; /* Usa Tangerine per il testo del carosello */
	font-weight: 700; /* Rendi il testo più evidente */
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: white;
	font-size: 2.2em;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
	z-index: 10; /* Per assicurare che il testo sia sopra le immagini */
	text-align: center;
}

.content-section {
	background-color: white;
	padding: 20px;
	margin-top: 20px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.image-gallery {
	display: flex; /* Utilizzo flexbox per allineamento più semplice */
	flex-wrap: wrap; /* Permette alle immagini di andare a capo */
	justify-content: space-around; /* Spazio tra le immagini */
	margin-top: 15px;
}
.image-gallery img {
	width: 30%; /* Tre immagini per riga */
	margin: 1%; /* Spazio tra le immagini */
	border-radius: 8px;
	box-shadow: 0 0 5px rgba(0,0,0,0.1);
	height: 200px; /* Altezza fissa per le immagini della galleria */
	object-fit: cover; /* Assicura che l'immagine copra lo spazio senza distorcere */
}
/* Media Query per Responsiveness - Aggiornato */
@media (max-width: 768px) {
    header img.logo {
        height: 60px; /* Logo più grande anche su schermi piccoli (da 40px) */
    }
    header h1 {
        font-size: 2.2em; /* Titolo più grande su schermi piccoli (da 1.8em) */
    }
    header {
        padding: 1rem 0; /* Un po' meno padding su schermi piccoli */
        gap: 15px; /* Meno spazio tra logo e titolo su schermi piccoli */
    }

	.carousel-container {
		height: 300px; /* Altezza ridotta per il carosello su schermi medi */
	}
	.carousel-text {
		font-size: 1.8em;
	}
	.image-gallery img {
		width: 48%; /* Due immagini per riga su schermi medi */
	}
}
@media (max-width: 480px) {
	.carousel-container {
		height: 250px; /* Altezza ancora più ridotta per il carosello su schermi piccoli */
	}
	.carousel-text {
		font-size: 1.4em;
	}
	.image-gallery img {
		width: 95%; /* Una immagine per riga su schermi piccoli */
	}
}
		

/* Stili per la pagina Contatti */
.contact-section {
    background-color: white;
    padding: 20px;
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.contact-section ul {
    list-style: none;
    padding: 0;
}
.contact-section ul li {
    margin-bottom: 10px;
}
.contact-section a {
    color: #000;
    text-decoration: none;
}
.contact-section a:hover {
    text-decoration: underline;
}
.map-container {
    margin-top: 20px;
    text-align: center;
}
.map-container iframe {
    width: 100%;
    height: 450px;
    border: 0;
    border-radius: 8px;
}

/* SPOSTA QUESTA REGOLA QUI, O ASSICURATI CHE SIA PRESENTE E POSIZIONATA QUI */
.contact-image {
    width: 100%;
    max-height: 600px; /* Limita l'altezza massima */
    object-fit: cover; /* Assicura che l'immagine copra l'area mantenendo le proporzioni */
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

		
		
		
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1rem 0;
            margin-top: 20px;
        }
		
/* Stili specifici per la pagina Scopri la Toscana */
.attraction-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 3 colonne su desktop, si adattano */
    gap: 20px;
    margin-top: 20px;
}

.attraction-item {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    box-sizing: border-box; /* Include padding e border nella larghezza */
}

.attraction-item h4 {
    font-family: 'Tangerine', cursive; /* Mantiene lo stile dei titoli */
    font-size: 1.8em;
    color: #000;
    margin-top: 0;
    margin-bottom: 10px;
}

.attraction-item p {
    font-size: 0.95em;
    line-height: 1.5;
    margin-bottom: 10px;
}

.attraction-item .distance,
.attraction-item .directions {
    font-size: 0.85em;
    color: #555;
}

/* Media Queries per la responsiveness (aggiungi o modifica nelle tue sezioni @media) */
@media (max-width: 768px) {
    .attraction-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 1 o 2 colonne su tablet */
    }
}

@media (max-width: 480px) {
    .attraction-grid {
        grid-template-columns: 1fr; /* Una colonna su smartphone */
    }
    .attraction-item {
        padding: 15px;
    }
    .attraction-item h4 {
        font-size: 1.5em;
    }
}

/* Stili per la Call-to-Action (CTA) */
.text-center {
    text-align: center;
}

.cta-button {
    display: inline-block; /* Permette di impostare padding e margini come un blocco, ma rimane sulla stessa riga */
    background-color: #339933; /* Il tuo Verde Chianti */
    color: ffffff;
    padding: 12px 25px 12px 25px;
    text-decoration: none; /* Rimuove la sottolineatura tipica dei link */
    border-radius: 5px; /* Angoli leggermente arrotondati */
    /*font-weight: bold;*/
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transizione per effetto hover */
    margin-top: 15px; /* Spazio sopra il pulsante */
    font-size: 1.1em;
}

.cta-button:hover {
    background-color: #33CC33; /* Una tonalità leggermente più scura al passaggio del mouse */
    transform: translateY(-2px); /* Un leggero movimento verso l'alto per feedback */
}

/* Style for the language flag in the navigation */
.lang-flag {
    width: 20px; /* Adjust as needed for desired size */
    height: auto; /* Maintain aspect ratio */
    vertical-align: middle; /* Align with text if other menu items are text */
    margin-left: 5px; /* Add some space if needed */
}

/* Optional: Adjustments for smaller screens (responsive) */
@media (max-width: 768px) {
    .lang-flag {
        width: 18px; /* Slightly smaller on mobile */
    }

    nav ul li a {
        padding: 8px 10px; /* Adjust padding for smaller screens if necessary */
    }
}

@media (max-width: 480px) {
    .lang-flag {
        width: 16px; /* Even smaller on very small screens */
    }
}