/* ==========================================================================
   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 */
}

/* ==========================================================================
   STILE MENU PER PC (Menu orizzontale fisso nella fascia verde)
   ========================================================================== */

/* Nasconde il tasto toggle su PC */
.menu-toggle {
  display: none;
}

/* Menu orizzontale classico nella fascia verde */
nav ul {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
}

nav ul li a {
  text-decoration: none;
  font-weight: 600;
  color: #ffffff;
  padding: 6px 12px;
}


/* ==========================================================================
   STILE MENU PER SMARTPHONE (Schermi fino a 768px - Apri/Chiudi al click)
   ========================================================================== */

/* Nasconde la casella di controllo invisibile sia su PC che su Mobile */
#menu-toggle-check {
  display: none;
}

@media screen and (max-width: 768px) {

  header {
    padding: 10px 15px;
  }

  header h1 {
    font-size: 1.2rem;
    margin-bottom: 6px;
  }

  /* Stile del pulsante "Menu ☰" */
  .menu-toggle {
    display: block;
    margin: 5px auto;
    padding: 6px 14px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #ffffff;
    font-weight: bold;
    font-size: 0.95rem;
    text-align: center;
    cursor: pointer;
    user-select: none;
    max-width: 150px;
  }

  /* Di base la lista dei link è nascosta su mobile */
  nav ul {
    display: none !important;
    flex-direction: column !important;
    gap: 6px;
    padding: 10px 0 5px 0;
    margin: 0;
  }

  /* QUANDO IL CHECKBOX È SELEZIONATO: Mostra il menu */
  #menu-toggle-check:checked~ul {
    display: flex !important;
  }

  nav ul li a {
    display: block;
    padding: 8px;
    font-size: 0.9rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
  }
}

/* ==========================================================================
   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;
}



/* ==========================================================================
   POP-UP OVERLAY - 2 IMMAGINI AFFIANCATE (SOLUZIONE DEFINITIVA)
   ========================================================================== */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.88);
  z-index: 99999;

  /* Centra il contenitore interno */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Mostra il popup quando cliccato */
.overlay:target {
  visibility: visible;
  opacity: 1;
}

/* Contenitore interno che affianca le immagini */
.popup-content {
  display: flex !important;
  flex-direction: row !important;
  /* Forza l'affiancamento ORIZZONTALE */
  justify-content: center;
  align-items: center;
  gap: 25px;
  max-width: 90vw;
  max-height: 85vh;
}

/* Regola ENTRAMBE le immagini per essere grandi uguale */
.popup-content img {
  position: static !important;
  /* Rimuove sovrapposizioni */
  max-width: 45vw !important;
  /* Ciascuna usa fino a metà schermo */
  max-height: 80vh !important;
  /* Non supera l'altezza della schermata */
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
}

/* Tasto di chiusura X */
.close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #ffffff;
  font-size: 42px;
  text-decoration: none;
  font-weight: bold;
  z-index: 100000;
}

/* Versione Smartphone: le mette una sotto l'altra */
@media screen and (max-width: 768px) {
  .popup-content {
    flex-direction: column !important;
    /* Una sotto l'altra su mobile */
    overflow-y: auto;
    max-height: 90vh;
  }

  .popup-content img {
    max-width: 85vw !important;
    max-height: 45vh !important;
  }
}




/*cursore diventa lente di ingrandimento quando si passa sopra la miniatura*/
.popup-content a {
  display: inline-block;
  cursor: zoom-in;
}

.popup-content a img {
  transition: transform 0.2s ease;
}

.popup-content a:hover img {
  transform: scale(1.02);
  /* Effetto leggero al passaggio del mouse */
}

/* 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;
  }
}

/* ==========================================================================
   PULSANTI SOCIAL (Instagram & Facebook)
   ========================================================================== */
.social-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 15px;
}

/* Stile base condiviso */
.btn-instagram,
.btn-facebook {
  display: inline-block;
  padding: 10px 20px;
  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;
}

/* Colore e hover Instagram */
.btn-instagram {
  background-color: #556B4D;
  /* Verde salvia in tema con il sito */
}

.btn-instagram:hover {
  background-color: #c1275b;
  /* Rosa/Viola Instagram al passaggio del mouse */
  transform: translateY(-2px);
}

/* Colore e hover Facebook */
.btn-facebook {
  background-color: #556B4D;
  /* Blu ufficiale Facebook */
}

.btn-facebook:hover {
  background-color: #0d65d9;
  transform: translateY(-2px);
}



/* Stile per i doodle affiancati ai titoli H2 */
.doodle-titolo-h2 {
    width: 35px;           /* Imposta la larghezza desiderata (es. tra 30px e 45px) */
    height: auto;          /* Mantiene le proporzioni corrette dell'immagine */
    vertical-align: middle;/* Allinea il doodle al centro del testo dell'H2 */
    margin-left: 10px;     /* Distanza dal testo del titolo */
    display: inline-block; /* Assicura che l'immagine stia sulla stessa riga del testo */
}

/* Stile per i doodle affiancati ai titoli */
.doodle-titolo {
    width: 35px;           /* Imposta la larghezza desiderata (es. tra 30px e 45px) */
    height: auto;          /* Mantiene le proporzioni corrette dell'immagine */
    vertical-align: middle;/* Allinea il doodle al centro del testo dell'H2 */
    margin-left: 10px;     /* Distanza dal testo del titolo */
    display: inline-block; /* Assicura che l'immagine stia sulla stessa riga del testo */
}