/* Cursore mouse corretto */
.sp-megamenu-parent > li > span,
.sp-megamenu-parent > li > a {
  cursor: pointer;
}

/* Pulsanti non capitalized */
body .sppb-btn, body .btn {
    text-transform: none !important;
}



/* ---------- */
/* NON STICKY */
/* ---------- */

/* Stato “attivo” (voce attuale es. HOME)
   Voce attuale con padding corretto
   Serve a dare lo stile corretto alla voce attiva
   (quella della pagina corrente)
*/
#sp-header:not(.menu-fixed) .sp-megamenu-parent > li.active > a {
  color: #000000 !important;
  background-color: #a5cf4b !important;
  padding: 0 20px !important;
  line-height: 40px !important;
  display: inline-block;
}

/* ELIMINATO PERCHE' NON ABBIAMO SEPARATORI
   Voci di menu tipo "Le Piante" (senza link)
   definisce lo stile per le voci senza link, come "Le Piante", "Novità", ecc.
*/
/*
  #sp-header:not(.menu-fixed) .sp-menu-separator {
  color: #000000 !important;
  background-color: #ffffff !important;
  padding: 0 20px !important;
  line-height: 40px !important;
  display: inline-block;
  cursor: pointer;
}*/

/* Tutte le voci, stile dimensione e padding coerente
   Applica uno stile  dimensione e padding uniforme
   a tutte le voci del menu orizzontale
*/
#sp-header:not(.menu-fixed) .sp-megamenu-parent li > a,
#sp-header:not(.menu-fixed) .sp-megamenu-parent li > span {
  padding: 0 20px !important;
  line-height: 40px !important;
  display: inline-block;
}

/* Hover – solo colore, niente più gonfiamenti
   Definisce lo stile quando l’utente passa con il mouse
   su una voce del menu
*/
#sp-header:not(.menu-fixed) .sp-megamenu-parent li > a:hover,
#sp-header:not(.menu-fixed) .sp-megamenu-parent li > span:hover {
  /*color: #0F210B !important;*/
  background-color: #a5cf4b !important;
}

/* Dropdown – struttura base delle voci (non in hover)
   Imposta le voci come blocchi interi (display: block)
   così lo sfondo può estendersi su tutta la riga.
   Aggiunge padding e line-height per leggibilità e spacing uniforme.
   Il background è trasparente finché non c'è hover.
*/
#sp-header .sp-dropdown li.sp-menu-item > a,
#sp-header .sp-dropdown li.sp-menu-item > span {
  display: block;
  width: 100%;
  padding: 10px 20px;
  line-height: 1.5;
  background-color: transparent;
}

/* Dropdown – stile al passaggio del mouse (hover)
   Quando l'utente passa sopra una voce del dropdown,
   il colore di sfondo diventa verde brillante
   e il testo diventa nero, come nel menu principale.
*/
#sp-header .sp-dropdown li.sp-menu-item > a:hover,
#sp-header .sp-dropdown li.sp-menu-item > span:hover {
  color: #000000;
  background-color: #a5cf4b;
}

/* Colora il genitore del dropdown anche quando il mouse è sul menu figlio
   Evita che la voce genitore (tipo "Le Piante") perda il colore
   quando il mouse scende nel dropdown.
*/
#sp-header .sp-megamenu-parent > li:hover > a,
#sp-header .sp-megamenu-parent > li:hover > span.sp-menu-separator {
  color: #000000 !important;
  background-color: #a5cf4b !important;
}


/* Diminuire padding del contenitore dropdown
   Elimina quel fastidioso spazio bianco attorno alle
   voci del dropdown, rendendolo elegante e compatto
*/
#sp-header .sp-dropdown .sp-dropdown-inner {
  padding: 5px 10px !important;
}


/* ------------------- */
/* NON STICKY & STICKY */
/* ------------------- */

/* Dropdown – voce attiva (pagina corrente) */
#sp-header .sp-dropdown li.sp-menu-item.active > a,
#sp-header .sp-dropdown li.sp-menu-item.active > span {
  color: #000000;
  background-color: #a5cf4b;
}


/* ---------- */
/* STICKY     */
/* ---------- */

/* ===============================
   STICKY – Colore testo bianco in hover sulla barra orizzontale
   =============================== */
#sp-header.header-sticky .sp-megamenu-parent > li:hover > a {
  color: #ffffff !important;
}

/* ===============================
   COLORE DI SFONDO DELLA BARRA STICKY (HEADER FISSO)
   =============================== */
#sp-header.header-sticky {
  background-color: #313B55 !important; /* Blu-grigio scuro, coerente col tema */
}

/* ===============================
   COLORE DEL TESTO PER LA VOCE ATTIVA (quella evidenziata in verde brillante)
   =============================== */
#sp-header.header-sticky .sp-megamenu-parent > li.active > a,
#sp-header.header-sticky .sp-megamenu-parent > li.active > span {
  color: #ffffff !important;
}

/* ===============================
   STILE PER I MENU SEPARATOR (non cliccabili) in modalità sticky
   =============================== */
#sp-header.header-sticky .sp-megamenu-parent > li.sp-menu-item > span.sp-menu-separator {
  background-color: #313B55 !important;
  color: #ffffff !important;
}

/* ===============================
   COLORE TESTO → tutte le voci di menu in modalità sticky
   (sia <a> che <span>, inclusi dropdown e voce corrente)
   =============================== */
#sp-header.header-sticky .sp-megamenu-parent li a,
#sp-header.header-sticky .sp-megamenu-parent li span,
#sp-header.header-sticky .sp-megamenu-parent > li > a,
#sp-header.header-sticky .sp-megamenu-parent > li > span {
  color: #ffffff !important;
}

/* ===============================
   STICKY – Sfondo del box dropdown
   =============================== */
#sp-header.header-sticky .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background-color: #313B55 !important;
}
/* ===============================
   STICKY – Colore del testo nel box dropdown
   =============================== */
#sp-header.header-sticky .sp-dropdown li.sp-menu-item > a {
  color: #ffffff !important;
}


/* HEADER: barra menu, centratura del CONTENUTO a 1670px */
/* =========================================================== */

/* ——— BOX SITO ———
   Cap desktop, centrato */
html body .body-wrapper {
  max-width: 1670px !important;
  margin: 0 auto !important;
}

/* ——— HEADER STABILE (normale + sticky) ———
   Barra full-width, contenuto disposto in riga, niente salti */
#sp-header,
#sp-header.header-sticky {
  width: 100% !important;
  max-width: none !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

#sp-header .container,
#sp-header .container-inner,
#sp-header .sp-megamenu-wrapper {
  width: 100% !important;        /* il contenuto dello header occupa tutta la barra */
  max-width: none !important;     /* niente cap: lo header resta full-width (non boxed) */
  margin: 0 auto !important;      /* neutro qui (con width:100% non cambia), ma innocuo */
  padding: 0 15px !important;     /* piccoli gutter interni a sinistra/destra */
  display: flex !important;       /* logo + menu messi su una sola riga */
  align-items: center !important; /* verticalmente centrati nella barra */
  justify-content: space-between !important; /* logo a sinistra, menu a destra */
  flex-wrap: nowrap !important;   /* niente a capo: restano sulla stessa riga */
  gap: 24px;                      /* respiro orizzontale tra logo e menu */
}

/* elimina i “dentini” della grid Bootstrap */
#sp-header .row { margin: 0 !important; }
#sp-header .row > [class^="col-"],
#sp-header .row > [class*=" col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* 
  Migliora la leggibilità dell'header su dispositivi con schermo stretto (<992px).
  Aggiunge un po' di "respiro" orizzontale al menu e agli elementi interni
  dello #sp-header (contenitori e megamenu) usando padding e gap.
  NB: L'uso di !important serve per forzare il padding nel caso sia sovrascritto
  da regole del template o di SP Page Builder.
*/
@media (max-width: 992px) {
  #sp-header .container,
  #sp-header .container-inner,
  #sp-header .sp-megamenu-wrapper {
    gap: 12px;
    padding: 0 12px !important;
  }
}

/* =================================================================== */
/* ========================= SNIPPETS VARI =========================== */
/* =================================================================== */

/*
	░█████╗░░█████╗░██████╗░██╗░░░░░░█████╗░    ░█████╗░░██████╗░██████╗
	██╔══██╗██╔══██╗██╔══██╗██║░░░░░██╔══██╗    ██╔══██╗██╔════╝██╔════╝
	██║░░╚═╝███████║██████╔╝██║░░░░░██║░░██║    ██║░░╚═╝╚█████╗░╚█████╗░
	██║░░██╗██╔══██║██╔══██╗██║░░░░░██║░░██║    ██║░░██╗░╚═══██╗░╚═══██╗
	╚█████╔╝██║░░██║██║░░██║███████╗╚█████╔╝    ╚█████╔╝██████╔╝██████╔╝
	░╚════╝░╚═╝░░╚═╝╚═╝░░╚═╝╚══════╝░╚════╝░    ░╚════╝░╚═════╝░╚═════╝░
*/

/* 
  ------------------------------------------
  CLASS: .OHNOOO
  ------------------------------------------
  Classe segnaposto neutra usata come "spaziatore visivo" nella casella CSS Class di SP Page Builder.
  Non applica alcuno stile, serve solo a migliorare la leggibilità tra classi.
  Può essere chiamata .NIL, .__nil__, .zzz-nil o anche .OHNOOO (versione drammatica consigliata)
  Origine:    Mitologia internettiana americana (fine XX – inizio XXI sec.)
              Deriva dal celebre lamento vocale "OH NOOOOO!" usato in video
              comici, tragedie casalinghe, errori di stampa e momenti di panico da tastiera.
  Scopo:      Classe CSS sacrificale, usata per separare visivamente classi
              scritte in linea in SP Page Builder e in ambienti ostili alla leggibilità.
              Non applica alcuno stile, ma grida silenziosamente per te.
  Autore:     Carlo VII Il Lacrimoso
              Re del refactoring,  
              Signore del padding coerente,  
              Protettore dei selettori semantici,
              Mite umanista del DOM.
  Benedizione: Frate Tom – ordine dei CSS Umani
  Nota: Se trovi questa classe in un markup,
        sappi che qualcuno, un giorno, ha amato davvero la chiarezza.

*/
.OHNOOO {}


/* ---------------------------------------------------------
   GLOBAL LINK STYLING
   ---------------------------------------------------------
   - I link ereditano il colore del testo circostante
   - Nessuna sottolineatura visibile se non in hover
   - Il cursore è sempre "pointer" (mano) per indicare che è cliccabile
   - In hover: il link diventa blu e sottolineato
   - Se il link contiene titoli (H1–H6), anche quelli diventano blu + sottolineati
   --------------------------------------------------------- */
a {
  color: inherit;        /* eredita il colore del testo circostante */
  text-decoration: none; /* nessuna sottolineatura */
  cursor: pointer;       /* sempre "mano", anche non in hover */
  transition: color 0.3s ease, text-decoration 0.3s ease;
}
a:hover {
  color: blue !important;                      /* colore blu in hover */
  /*text-decoration: underline !important;       /* mostra la sottolineatura */*/
  cursor: pointer;
}

a h1, a h2, a h3, a h4, a h5, a h6 {
  transition: color 0.3s ease, text-decoration 0.3s ease;
}
a:hover h1, a:hover h2, a:hover h3, a:hover h4, a:hover h5, a:hover h6 {
  color: blue !important;
  /*text-decoration: underline !important;*/
  cursor: pointer;
}

/* -----------------------------------------
   Escludi sottolineatura nei link dentro i pulsanti
   -----------------------------------------
*/
a.sppb-btn.button-v1,
a.sppb-btn.button-v1:hover,
.button-v1 .sppb-btn,
.button-v1 .sppb-btn:hover,
a.sppb-btn.button-v2,
a.sppb-btn.button-v2:hover,
.button-v2 .sppb-btn,
.button-v2 .sppb-btn:hover,
a.sppb-btn.button-v3,
a.sppb-btn.button-v3:hover,
.button-v3 .sppb-btn,
.button-v3 .sppb-btn:hover {
  text-decoration: none !important;
}


/* -----------------------------------------
   box-squared-border - box-squared-border-green
   -----------------------------------------
   Bordo morbido con angoli netti a 90°.
   Stile base per i box con bordo verde tenue.
   Usa questa classe per applicare solo bordo.
*/
.box-squared-border {
  border: 1px solid #a6bda980;
  border-radius: 0;
}
/*
   Bordo morbido con angoli netti a 90°.
   Stile base per i box con bordo verde tenue e sfondo verde semi-trasparente.
   Usa questa classe per applicare solo bordo e sfondo.*/
.box-squared-border-green {
  background-color: #effaf1 !important;
  border: 1px solid #a6bda980;
  border-radius: 0;
}


/* -----------------------------------------
   box-rounded-border - box-rounded-border-green
   -----------------------------------------
   Bordo morbido con angoli arrotondati.
   Stile base per i box con bordo verde tenue.
   Usa questa classe per applicare solo bordo.
*/
.box-rounded-border {
  border: 1px solid #a6bda980;
  border-radius: 30px;
}
/*
   Bordo morbido con angoli arrotondati.
   Stile base per i box con bordo verde tenue e sfondo verde semi-trasparente.
   Usa questa classe per applicare solo bordo e sfondo.
*/
.box-rounded-border-green {
  background-color: #effaf1 !important;
  border: 1px solid #a6bda980;
  border-radius: 30px;
}


/* -----------------------------------------
   box-squared-border-grey
   -----------------------------------------
   Bordo tenue, squadrato, senza arrotondamenti
   Al passaggio del mouse (hover) lo sfondo diventa grigio chiaro (#E1E3E1)
   Utile per box cliccabili, contenitori eleganti, o effetti visivi delicati
*/
.box-squared-border-grey {
  border: 1px solid #a6bda980;
  border-radius: 0;
  transition: background-color 0.3s ease;
}
.box-squared-border-grey:hover {
  background-color: #F0F0F0;
}


/* -----------------------------------------
   Shadow Effect (Normal+Hover State)
   -----------------------------------------
   Aggiunge un'ombra soffusa per creare profondità.
   Si adatta alla forma del contenitore cui è applicato
   Include una transizione per l'effetto hover
*/
.box-with-shadow {
  transition: box-shadow 0.3s ease !important;     /* Transizione morbida dell'ombra */
  box-shadow: 5px 5px 10px 0 #a6bda980 !important; /* Ombra verde soffusa semi-trasparente */
}
.box-with-shadow:hover {
  box-shadow: 18px 18px 20px 0 #a6bda980 !important; /* Ombra verde soffusa più ampia per effetto sollevato */
}


/* -----------------------------------------
   Image – Bottom Left Radius
   -----------------------------------------
   Applica un arrotondamento morbido a tutti gli angoli
   con una curva più marcata nell’angolo in basso a sinistra.
   Da usare su  all’interno di Feature Box o componenti simili.
*/
.image-rounded-bottom-left img {
  border-radius: 20px !important;          /* Arrotondamento morbido generale */
  border-bottom-left-radius: 60px !important;/* Arrotondamento più accentuato in basso a sinistra */
  width: 100% !important;                    /* Larghezza al 100% del contenitore */
  object-fit: cover !important;              /* Ritaglio proporzionato dell’immagine */
}


/* -----------------------------------------
   Image – Bottom Left Radius Only
   -----------------------------------------
   Applica un arrotondamento accentuato solo all'angolo in basso a sinistra.
   Da usare su  all'interno di Feature Box o componenti simili.
*/
.image-rounded-bottom-left-only img {
  border-radius: 0 !important;                /* reset generale degli angoli */
  border-bottom-left-radius: 60px !important; /* arrotondamento solo in basso a sinistra */
  width: 100% !important;
  object-fit: cover !important;
}


/* 
  Curva verde decorativa (destra e sinistra)
  -------------------------------------------------------------
  Elemento visivo decorativo che aggiunge una curva verde 
  sul lato sinistro o destro di un contenitore di testo.
  Perfetto per mettere in evidenza blocchi di contenuto in 
  modo naturale, elegante e originale – senza usare immagini.
  Colore dell'ombra: #9ccc5c (Lime Green Soft – uno dei toni identitari)
*/
.green-curve-right {
  box-shadow: 10px 0 0 0 #7dc855;
  border-radius: 150px;
}
.green-curve-left {
  box-shadow: -10px 0 0 0 #7dc855;
  border-radius: 150px;
}


/* --------------------------------------------
   Padding Universale
   10px, 20px, 30px su tutti i fronti
   --------------------------------------------
   La classe perfetta per dare respiro a un DIV
   senza pensarci troppo. Quadrata, equilibrata,
   solida. Come un mattone d’INA-CSS.
*/
.padding-10 { padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; }
.padding-20 { padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; }
.padding-30 { padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px; }



/* ==========================================================
   STILI PERSONALIZZATI PER PULSANTI – V1 E V2 (INA Box)
   ----------------------------------------------------------
   button-v1 → stile con gradiente (Apricot ➜ Terracotta)
   button-v2 → stile piatto (colore fisso)
   Colore del testo sempre #effaf1 (verde ultra-chiaro)
   Supporta icona (se inserita tramite SP Page Builder)
   Da usare solo su CSS Class di "Button" di SPPB
   ========================================================== */
/*
   Proprietà chiave per il testo del pulsante
font-size
→ Grandezza del testo.
Es: font-size: 16px; (più piccolo) oppure 20px; (più grande).
font-weight
→ Spessore del testo.
Es: 400 = normale, 500 = medio, 600 = semigrassetto.
(Io ti consiglio max 500 o 600 per pulsanti eleganti).
letter-spacing
→ Spaziatura tra le lettere.
Es: 0.5px dà un effetto più arioso, utile se abbassi un po’ la dimensione.
text-transform
→ Maiuscole/Minuscole.
Es: uppercase per tutto maiuscolo, capitalize per la prima maiuscola, none lascia com’è.
line-height
→ Altezza della riga. Noi l’abbiamo già settata a 1, ma se vuoi un testo meno “schiacciato” puoi provare 1.2.
*/

/* GRADIENT */
.sppb-btn.button-v1,
.button-v1 .sppb-btn {
  background: linear-gradient(45deg, #f4a340 0%, #c65a13 100%) !important;
  color: #effaf1 !important;             /* testo fisso */
  border: none !important;
  border-radius: 50px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  padding: 10px 30px 10px 30px !important;
  /* padding: 11px 30px 11px 30px !important; */
  white-space: nowrap !important;
  text-align: center !important;
  vertical-align: middle !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: none !important;
  transition: all 0.3s ease-in-out !important;
  cursor: pointer !important;
  outline: none !important;
}
.sppb-btn.button-v1:hover,
.button-v1 .sppb-btn:hover {
  background: linear-gradient(45deg, #c65a13 0%, #f4a340 100%) !important;
  color: #effaf1 !important;
}


/* NON GRADIENT */
.sppb-btn.button-v2,
.button-v2 .sppb-btn {
  background-color: #f6a14a !important;
  color: #effaf1 !important;
  border: none !important;
  border-radius: 50px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  /* padding: 10px 30px 10px 30px !important; */
  padding: 11px 30px 11px 30px !important;
  white-space: nowrap !important;
  text-align: center !important;
  vertical-align: middle !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: none !important;
  transition: all 0.3s ease-in-out !important;
  cursor: pointer !important;
  outline: none !important;
}
.sppb-btn.button-v2:hover,
.button-v2 .sppb-btn:hover {
  background-color: #d86210 !important;  /* colore hover */
  color: #effaf1 !important;
}
/* Disattiva il gradiente SPPB solo sui v2 */
.sppb-btn.button-v2.sppb-btn-gradient,
.button-v2 .sppb-btn.sppb-btn-gradient { background-image: none !important; }


/* ==========================================================
   BUTTON-OUTLINE-GREEN – UNIVERSAL (standalone + Feature Box)
   ----------------------------------------------------------
   Pulsante con bordo verde Mid-Terra, trasparente di base.
   In hover si riempie del colore verde e il testo diventa chiaro.
   ========================================================== */
.sppb-btn.button-v3,
.button-v3 .sppb-btn {
  background-color: transparent !important;
  color: #597c4c !important;           /* Green Mid-Terra */
  border: 2px solid #597c4c !important;
  border-radius: 50px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  /* padding: 10px 30px 10px 30px !important; */
  padding: 11px 30px 11px 30px !important;
  white-space: nowrap !important;
  text-align: center !important;
  vertical-align: middle !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: none !important;
  transition: all 0.3s ease-in-out !important;
  cursor: pointer !important;
  outline: none !important;
}
.sppb-btn.button-v3:hover,
.button-v3 .sppb-btn:hover {
  background-color: #597c4c !important; /* riempimento */
  color: #effaf1 !important;            /* testo chiaro – Light Green */
  border-color: #597c4c !important;
}
/* Disattiva il gradiente SPPB solo sui v3 */
.sppb-btn.button-v3.sppb-btn-gradient,
.button-v3 .sppb-btn.sppb-btn-gradient { background-image: none !important; }