/* ==========================================================================
   PALETTE COLORI E IMPOSTAZIONI GENERALI (Stile Botanico Attenuato)
   ========================================================================== */

/* Sfondo della pagina modificato: ora è un verde chiarissimo, tenue e opaco, riposante per la vista */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #EBF2E9;
  /* Un verde-grigio chiarissimo e morbido, non accecante */
  color: #2F3E2B;
  /* Verde scurissimo per il testo principale */
  margin: 0;
  padding: 0;
  line-height: 1.6;
  /* Ottima spaziatura per le righe dello statuto */
}

/* Contenitore principale del testo (la scheda centrale) */
section {
  max-width: 900px;
  margin: 40px auto;
  padding: 30px;
  background-color: #FFFFFF;
  /* Sfondo bianco puro solo dove si legge, per il massimo contrasto */
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  /* Ombra ancora più sfumata */
}

/* ==========================================================================
   MENU DI NAVIGAZIONE (Spostato in alto in cima alla pagina)
   ========================================================================== */

nav {
  background-color: #87A982;
  /* Il Verde Salvia della palette */
  margin: 0;
  /* Rimosso il margine per farlo aderire alla cima del browser */
  padding: 12px 0;
  width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

nav ul li {
  display: inline-block;
  margin: 0 18px;
}

nav ul li a {
  color: #FAF8F2;
  /* Testo color panna */
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  padding: 8px 16px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Effetto al passaggio del mouse sui pulsanti */
nav ul li a:hover {
  background-color: #FAF8F2;
  /* Il fondo del pulsante diventa panna */
  color: #556B4D;
  /* Il testo diventa verde bosco */
  border-radius: 4px;
}

/* ==========================================================================
   TITOLI
   ========================================================================== */

/* Il titolo principale dell'associazione */
header h1 {
  text-align: center;
  color: #556B4D;
  /* Verde bosco, per staccare meglio dallo sfondo tenue */
  font-size: 2.6rem;
  margin-top: 30px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Titoli dei capitoli e degli articoli */
article h2,
article h3 {
  color: #43543D;
  /* Un verde istituzionale leggermente più scuro e leggibile */
  border-left: 5px solid #A1CD6F;
  /* Linea verticale verde mela brillante */
  padding-left: 12px;
  margin-top: 35px;
}

/* ==========================================================================
   TESTI DELLO STATUTO
   ========================================================================== */

article p {
  margin-bottom: 15px;
  text-align: justify;
  /* Testo perfettamente allineato a destra e a sinistra */
}

article ul {
  padding-left: 20px;
  margin-bottom: 20px;
}

article ul li {
  margin-bottom: 8px;
}

/* ==========================================================================
   FOOTER (Con logo della banca ingrandito)
   ========================================================================== */

footer {
  text-align: center;
  margin: 50px 0 30px 0;
  padding-top: 25px;
  border-top: 1px solid #D0DDD0;
  /* Linea di divisione che si adatta al nuovo sfondo */
}

/* Ingrandito il logo per dargli più respiro e visibilità */
footer img {
  max-width: 450px;
  /* Portato da 250px a 450px come richiesto */
  width: 100%;
  /* Impedisce al logo di uscire dallo schermo sui telefoni */
  height: auto;
  opacity: 0.9;
  /* Leggermente più nitido e visibile */
}


/* ==========================================================================
   OTTIMIZZAZIONE PER SMARTPHONE (Schermi fino a 768px di larghezza)
   ========================================================================== */
@media screen and (max-width: 768px) {

  /* 1. Diamo più spazio ai contenuti centrali */
  section {
    margin: 15px;
    /* Riduciamo lo spazio esterno */
    padding: 15px;
    /* Riduciamo lo spazio interno per dare più millimetri al testo */
  }

  /* 2. Rimpiccioliamo leggermente il titolo principale per non farlo andare a capo male */
  header h1 {
    font-size: 1.8rem;
    margin-top: 20px;
  }

  /* 3. TRASFORMIAMO IL MENU: Le voci si dispongono in verticale, una sotto l'altra */
  nav ul li {
    display: block;
    /* Non più di fianco, ma uno sotto l'altro come un elenco */
    margin: 10px 0;
    /* Spazio verticale tra un pulsante e l'altro */
  }

  nav ul li a {
    display: block;
    /* Il link occupa tutta la larghezza, rendendo più facile cliccarlo con il dito */
    padding: 10px;
  }
}

/* ==========================================================================
   STILE DEI LINK (Solo per il testo, non tocca il menu)
   ========================================================================== */

/* Colore del link per il modulo (colpisce solo i link dentro la scheda <section>) */
section a {
  color: #87A982 !important;
  /* Forza il Verde Salvia della tua palette */
  text-decoration: underline !important;
  /* Mantiene la sottolineatura nel testo */
  font-weight: 600;
  /* Lo rende ben evidente */
  transition: color 0.2s ease;
}

/* Colore del link nel testo quando ci passi sopra con il mouse */
section a:hover {
  color: #556B4D !important;
  /* Diventa Verde Bosco scuro */
  text-decoration: none !important;
  /* Toglie la sottolineatura al passaggio */
}

/* Colore del link nel testo dopo che è stato già cliccato */
section a:visited {
  color: #72926D !important;
  /* Un verde intermedio */
}


/* ==========================================================================
   STRUTTURA EVENTI CON MINIATURA
   ========================================================================== */

/* Affianca la miniatura e il testo dell'evento */
.evento-container {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  /* Spazio tra l'immagine e il testo */
  margin-top: 20px;
  background: #fdfdfd;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #87A982;
  /* Un richiamo al nostro verde salvia */
}

/* Stile della miniatura (piccola e ordinata) */
.locandina-mini {
  width: 120px;
  /* Dimensione della miniatura della locandina */
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
  display: block;
}

/* Effetto zoom leggero quando si passa il mouse sulla miniatura */
.locandina-link:hover .locandina-mini {
  transform: scale(1.04);
}

/* Contenitore del testo dell'evento */
.evento-testo {
  flex: 1;
  /* Occupa tutto lo spazio rimasto a destra */
}

.evento-testo h3 {
  margin-top: 0 !important;
  /* Allinea il titolo dell'evento alla cima della locandina */
  border-left: none !important;
  /* Togliamo la linea generica dei titoli qui */
  padding-left: 0 !important;
}

/* ==========================================================================
   IL POP-UP (LIGHTBOX) IN CSS PURO
   ========================================================================== */

/* Lo sfondo scuro che copre lo schermo quando il pop-up è attivo */
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  /* Sfondo nero semi-trasparente */
  transition: opacity 500ms;
  visibility: hidden;
  /* Di base è nascosto */
  opacity: 0;
  z-index: 9999;
  /* Sta sopra a tutto il resto del sito */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* LA MAGIA: Quando il link punta all'ID del pop-up (#popup-locandina), questo si mostra */
.overlay:target {
  visibility: visible;
  opacity: 1;
}

/* L'immagine grande dentro il pop-up */
.popup-img {
  max-width: 90%;
  max-height: 85vh;
  /* Non supera l'altezza dello schermo del telefono/PC */
  border-radius: 4px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
}

/* Il pulsante per chiudere (la "X") */
.close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}

.close:hover {
  color: #A1CD6F;
  /* Diventa verde mela quando ci passi sopra */
}

/* Ottimizzazione per smartphone: mette l'immagine sopra e il testo sotto */
@media screen and (max-width: 600px) {
  .evento-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .locandina-mini {
    width: 150px;
    /* Leggermente più grande sui telefoni essendo centrata */
  }
}

/* Stile della miniatura: la blocchiamo a una dimensione ridotta */
.locandina-mini,
.locandina-link img {
  width: 120px !important;
  /* Riduce la larghezza a soli 120 pixel */
  height: 160px !important;
  /* Imposta un'altezza proporzionata da locandina verticale */
  object-fit: cover;
  /* Evita che l'immagine si distorca o si schiacci */
  border-radius: 6px;
  /* Arrotonda leggermente gli angoli */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  /* Aggiunge un'ombra leggera molto elegante */
  transition: transform 0.2s ease;
  display: block;
}

/* Quando passi il mouse sopra la miniatura, fa un piccolissimo movimento fluido */
.locandina-link:hover img {
  transform: scale(1.04);
}


/* ==========================================================================
   SEZIONE GIARDINO BOTANICO (ACCORDION)
   ========================================================================== */

.giardino-accordion {
  margin-top: 30px;
  max-width: 800px;
  /* Tiene la lista centrale e ordinata */
  margin-left: auto;
  margin-right: auto;
}

/* Il singolo tassello della pianta */
.pianta-item {
  background: #fdfdfd;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

/* Cambia lo sfondo quando la pianta è aperta o ci si passa sopra */
.pianta-item[open],
.pianta-item:hover {
  box-shadow: 0 4px 12px rgba(85, 107, 77, 0.1);
}

/* Il rettangolo del nome della pianta (il pulsante cliccabile) */
.pianta-nome {
  padding: 15px 20px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #556B4D;
  /* Il nostro Verde Bosco */
  cursor: pointer;
  background: #fcfcfc;
  list-style: none;
  /* Nasconde la freccetta standard del browser */
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid transparent;
}

/* Aggiungiamo una freccetta personalizzata elegante sulla destra */
.pianta-nome::after {
  content: "➔";
  font-size: 0.9rem;
  transition: transform 0.3s ease;
  color: #87A982;
  /* Verde salvia */
}

/* Quando la pianta si espande, la freccia ruota verso il basso */
.pianta-item[open] .pianta-nome {
  border-bottom: 1px solid #e2e8f0;
  background: #f7f9f6;
  /* Sfondo leggermente verde chiaro */
}

.pianta-item[open] .pianta-nome::after {
  transform: rotate(90deg);
}

/* Il contenuto nascosto che si mostra all'apertura */
.pianta-contenuto {
  padding: 20px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: #ffffff;
}

/* La foto della pianta ridimensionata e ordinata */
.pianta-foto {
  width: 150px;
  height: 150px;
  object-fit: cover;
  /* Ritaglia la foto quadrata senza distorcerla */
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Info testuali affiancate alla foto*/
.pianta-info {
  flex: 1;
  color: #4a5568;
  line-height: 1.6;
}

/* Ottimizzazione per telefoni: foto sopra e testo sotto */
@media screen and (max-width: 600px) {
  .pianta-contenuto {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .pianta-foto {
    width: 100%;
    max-width: 250px;
    height: 180px;
  }
}

/* Pulsante Instagram */
.btn-instagram {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #556B4D; 
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-instagram:hover {
    background-color: #c1275b;
    transform: translateY(-2px);
}