/*
Theme Name: LeafLife WP Child
Theme URI: https://themeforest.net/user/laralink
Template: leaflife-wp
Author: laralink
Author URI: https://themeforest.net/user/laralink
Description: LeafLife is a modern WordPress theme for gardening, landscaping, and outdoor services. Easily customize with drag-and-drop builder, flexible layouts, and ready-to-use sections. Perfect for showcasing services or selling garden products online.
Tags: grid-layout,blog,news,two-columns,right-sidebar,custom-background,custom-logo,custom-menu,featured-images,footer-widgets,sticky-post,theme-options,threaded-comments,translation-ready
Version: 1.0.1779375105
Updated: 2026-05-21 16:51:45

/* ==========================================================================
   SFONDO EFFETTO VETRO MENU (Ricalibrato: Più trasparenza)
   ========================================================================== */

/* --- 1. HEADER NORMALE (Vetro Scuro elegante e trasparente) --- */
.cs_site_header:not(.cs_sticky_active) .cs_nav .cs_nav_list ul {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Abbassato dal 85% al 55% e dal 65% al 25% */
    background: linear-gradient(241deg, rgba(0, 0, 0, 0.55) -7%, rgba(0, 0, 0, 0.25) 90%);
    -webkit-backdrop-filter: blur(10px); 
    backdrop-filter: blur(10px);
}

/* --- 2. HEADER STICKY (Vetro Chiaro e lattiginoso ma trasparente) --- */
.cs_site_header.cs_sticky_active .cs_nav .cs_nav_list ul {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    /* Abbassato dal 95% al 65% e dal 80% al 30% */
    background: linear-gradient(241deg, rgba(255, 255, 255, 0.80) -7%, rgba(255, 255, 255, 0.50) 90%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Rimuove lo sfondino nativo del tema al passaggio del mouse nel sottomenu */
.cs_nav .cs_nav_list ul a:hover {
	background-color: transparent !important;
}

/* Overlay scuro per le card stile 2 (Da tenere) */
.cs_card.cs_style_2 .cs_card_thumb::before {
	background: none !important;
	background-color: rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================================================
   VOCI MENU PRINCIPALI (Primo livello in alto)
   ========================================================================== */

/* Header Normale -> Hover Blu Scuro */
.cs_site_header:not(.cs_sticky_active) .cs_nav .cs_nav_list > li > a:hover {
	color: #51EBFF !important;
}

/* Header Sticky (Sfondo blu) -> Hover Azzurro chiaro per contrasto */
.cs_site_header.cs_sticky_active .cs_nav .cs_nav_list > li > a:hover {
	color: #51EBFF !important;
}

/* ==========================================================================
   COLORI MENU A TENDINA (Dropdown Dinamico)
   ========================================================================== */

/* --- 1. HEADER NORMALE (In cima alla pagina) --- */

/* Testo normale: Bianco */
.cs_site_header:not(.cs_sticky_active) .cs_nav .cs_nav_list ul a {
    color: #ffffff !important;
    transition: color 0.3s ease;
}

/* Hover*/
.cs_site_header:not(.cs_sticky_active) .cs_nav .cs_nav_list ul a:hover {
    color: #51EBFF !important;
}

/* --- 2. HEADER STICKY (Durante lo scorrimento) --- */

/* Testo normale: Blu scuro aziendale */
.cs_site_header.cs_sticky_active .cs_nav .cs_nav_list ul a {
    color: #00317A !important;
    transition: color 0.3s ease;
}

/* Hover: Azzurro */
.cs_site_header.cs_sticky_active .cs_nav .cs_nav_list ul a:hover {
    color: #51D5FF !important;
}
		
/* ==========================================================================
   FIX LARGHEZZA SOTTOMENU DESKTOP (Dropdown Elastico)
   ========================================================================== */

@media screen and (min-width: 1200px) {
    /* Dice al box del sottomenu di allargarsi quanto basta per contenere il testo */
    .cs_nav_list ul.sub-menu,
    .cs_nav_list ul.children {
        width: max-content !important;
        min-width: 250px !important; /* Mantiene comunque una larghezza minima elegante per i testi corti */
        padding-right: 15px !important; /* Aggiunge un po' di "respiro" a destra */
    }
}

/* ==========================================================================
   OVERRIDE COLORI HARDCODED TEMA LEAFLIFE -> VARIABILI GLOBALI
   ========================================================================== */
:root {
    --xa-primary: #00317A;
}

.cs_site_header.cs_style_1.cs_sticky_active {
	background:var(--xa-primary);
}

/* 1. Sfumature Testo: Variante 1 (Grigio -> Bianco) 
   Sostituisce #e1ece3 con var(--gray-color) */
.cs_gradient_color_1,
.cs_page_heading.cs_style_1 .cs_page_title {
    background: linear-gradient(45deg, var(--gray-color), var(--white-color) 80%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* 2. Sfumature Testo: Variante 2 (Heading Color 80% -> Body Color) 
   Sostituisce rgba(55, 72, 54, 0.8) con color-mix() su --heading-color 
   Sostituisce #a0a6a1 con var(--body-color) */
.cs_page_heading.cs_style_2 .cs_page_title span,
.cs_section_heading.cs_style_1 .cs_section_title span {
    background: linear-gradient(268deg, color-mix(in srgb, var(--heading-color) 80%, transparent) 0.37%, var(--body-color) 49.66%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.cs_section_heading.cs_style_2 .cs_section_title span {
    background: linear-gradient(-15deg, color-mix(in srgb, var(--heading-color) 80%, transparent) 0.37%, var(--body-color) 49.66%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.cs_section_heading.cs_style_2.cs_color_1 .cs_section_title span,
.cs_section_heading.cs_style_4 .cs_section_title span,
.cs_section_heading.cs_style_5 .cs_section_title span {
    background: linear-gradient(223deg, color-mix(in srgb, var(--heading-color) 80%, transparent) 0.37%, var(--body-color) 49.66%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* 3. Sfondi Strutturali Fissi 
   Sostituisce #e1ece3 con var(--gray-color) */
.cs_half_bg.cs_color_1::before {
    background-color: var(--gray-color) !important;
}

/* 4. Overlay Trasparente Galleria
   Sostituisce rgba(255, 255, 255, 0.5) con color-mix() su --white-color */
.cs_gallery.cs_style_1 .cs_gallery_info {
    border-color: color-mix(in srgb, var(--white-color) 50%, transparent) !important;
    background: linear-gradient(102deg, color-mix(in srgb, var(--white-color) 50%, transparent) 2.43%, color-mix(in srgb, var(--white-color) 10%, transparent) 91.88%) !important;
}

/* ==========================================================================
   PERSONALIZZAZIONE TESTI HERO AREA
   ========================================================================== */

/* 1. Riduciamo la dimensione del titolo principale (Heading) a 64px 
   Il selettore "h1.cs_hero_title" si assicura di non toccare il sottotitolo */
.cs_hero_text h1.cs_hero_title {
    font-size: 62px !important;
    line-height: 1.2 !important;
}

/* Opzionale: rimpiccioliamo un po' il titolo sui cellulari per evitare che sbordi */
@media (max-width: 767px) {
    .cs_hero_text h1.cs_hero_title {
        font-size: 42px !important;
    }
}

/* 2. Sottotitolo: rendiamo il colore chiaro fisso e rimuoviamo l'effetto trasparenza 
   Il tema usa la classe .cs_opacity_7_5, noi la sovrascriviamo con opacity: 1 */
.cs_hero_text p.cs_hero_subtitle {
    color: #E8F2EE !important;
    opacity: 1 !important;
}

/* 3. Rendiamo i testi in grassetto dentro al sottotitolo dello stesso colore 
   Colpiamo sia i tag <strong> che <b> per massima sicurezza */
.cs_hero_text p.cs_hero_subtitle strong,
.cs_hero_text p.cs_hero_subtitle b {
    color: #E8F2EE !important;
}

/* Nasconde definitivamente il blocco Fun Fact (contatori/cerchietti) dalla Hero */
.cs_hero .cs_hero_funfact_wrap {
    display: none !important;
}

/* overlay hero */
.cs_slider_area .container {
	position:relative;
	z-index:3;
}
.cs_hero_bg {z-index:1;}
.cs_hero_bg_in {
	position:relative;
	z-index:1;
}
.cs_hero_bg_in::after {
	content:'';
	position:absolute;
	z-index:2;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:rgba(0,0,0,.5);
}

/* ==========================================================================
   PERSONALIZZAZIONE PULSANTI HERO AREA (Corretto)
   ========================================================================== */

/* 1. Solo il PRIMO pulsante (quello pieno - cs_style_1): Testo Blu */
.cs_hero_btns .cs_btn.cs_style_1 {
    color: #00317a !important;
}

/* Mantiene il testo blu sul primo pulsante anche al passaggio del mouse */
.cs_hero_btns .cs_btn.cs_style_1:hover {
    color: #00317a !important;
}

/* (Il secondo pulsante, essendo cs_style_2, verrà ignorato da questa regola e rimarrà bianco) */

/* 2. Pulsante rotondo con freccia (nel box in basso): Sfondo Blu */
.cs_hero_box .cs_arrow_btn.cs_hero_box_btn {
    background-color: #00317a !important;
    border-color: #00317a !important; 
}

/* Hover del pulsante rotondo: Sfondo bianco e freccia blu al passaggio del mouse */
.cs_hero_box .cs_arrow_btn.cs_hero_box_btn:hover {
    background-color: #ffffff !important;
    color: #00317a !important;
}

/* ==========================================================================
   RIPRISTINO BIANCO TITOLI H1 (HERO E PAGINE INTERNE) - LEAFLIFE
   ========================================================================== */

.cs_gradient_color_1, 
.cs_page_heading.cs_style_1 .cs_page_title {
    background: none !important; /* Rimuove la sfumatura lineare che conteneva il colore gray */
    -webkit-background-clip: unset !important; /* Rimuove il ritaglio del testo */
    background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important; /* Sostituisce la trasparenza con il bianco puro */
    color: #ffffff !important; /* Sicurezza per i browser che non usano webkit */
}

/* 2. Titolo Specifico della Hero Principale */
h1.cs_hero_title,
.cs_hero_title {
    color: #ffffff !important;
    background-image: none !important;          /* Disattiva sfumature ereditate dal global */
    -webkit-text-fill-color: #ffffff !important; /* Forza il riempimento del testo in bianco */
}

/* 3. Sicurezza Generica per tutti gli altri H1 del sito */
h1, 
h1.elementor-heading-title {
    color: #ffffff !important;
}

/* ==========================================================================
   FIX MENU A CAPO - FORZATURA SU SINGOLA RIGA (DESKTOP)
   ========================================================================== */

@media screen and (min-width: 992px) {
    /* 1. Allarghiamo il contenitore dell'header per dare più spazio (da 1200px a 1400px) */
    .cs_site_header .container {
        max-width: 1450px !important;
        width: 100% !important;
    }

    /* 2. Impediamo fisicamente alle voci di andare a capo */
    .cs_nav_list {
        display: flex !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

    /* 3. Riduciamo leggermente lo spazio tra le singole voci (il tema di solito abbonda) */
    .cs_nav_list > li {
        margin-right: 40px !important; /* Se serve ancora spazio, abbassalo a 15px o 20px */
    }
    
    /* Togliamo il margine all'ultima voce per un allineamento perfetto a destra */
    .cs_nav_list > li:last-child {
        margin-right: 0 !important;
    }
}

/* ==========================================================================
   PERSONALIZZAZIONE MENU MOBILE / OVERLAY (Sotto i 1200px)
   ========================================================================== */

@media screen and (max-width: 1199px) {
    
    /* Applica il blu scuro direttamente al pannello a scomparsa */
    .cs_nav .cs_nav_list_wrap {
        background-color: #00317A !important;
    }

    /* Aggiunge spazio laterale per far "respirare" le scritte */
    .cs_nav_list {
        padding-right: 25px !important;
        padding-left: 25px !important;
    }

    /* Sposta le icone "+" verso l'interno, così non escono dallo schermo */
    .cs_munu_dropdown_toggle,
    .cs_nav_list .menu-item-has-children > span,
    .cs_nav_list .menu-item-has-children > i {
        right: 30px !important;
    }
}

/* ==========================================================================
   FIX COLORE TESTO CARDS BOTTIGLIE (Stato normale e Hover)
   ========================================================================== */

/* 1. Colore blu scuro (#00317A) allo stato normale per Titolo, Link e Sottotitolo */
.cs_card.cs_style_2 .cs_card_info .cs_card_title,
.cs_card.cs_style_2 .cs_card_info .cs_card_title a,
.cs_card.cs_style_2 .cs_card_info .cs_card_subtitle {
    color: #6FC2E4 !important;
    transition: color 0.4s ease; /* Aggiunge una transizione morbida del colore */
}

/* 2. Rimette il testo bianco quando si passa il mouse sopra (hover) la card */
.cs_card.cs_style_2:hover .cs_card_info .cs_card_title,
.cs_card.cs_style_2:hover .cs_card_info .cs_card_title a,
.cs_card.cs_style_2:hover .cs_card_info .cs_card_subtitle {
    color: #00317A !important;
}

/* ==========================================================================
   OPZIONE 1: TESTO SOTTO L'IMMAGINE (Corretto: Solo per Stile 2)
   ========================================================================== */

/* Sposta il testo fuori dall'immagine e lo allinea al centro */
.cs_card.cs_style_2 .cs_card_info {
    position: relative !important;
    padding: 20px 10px 0 10px !important;
    text-align: center;
}

/* Rimpicciolisce leggermente il font per un look più pulito (SOLO per le bottiglie) */
.cs_card.cs_style_2 .cs_card_title {
    font-size: 24px !important;
}

/* ==========================================================================
   FIX TITOLO "ACQUA LEGGERMENTE FRIZZANTE" (Riduce font a 60px)
   ========================================================================== */

.page-id-9673 h1.cs_page_title {
    font-size: 72px !important;
    line-height: 1.1em !important;
}

/* ==========================================================================
   NASCONDI AUTORE E COMMENTI (Articoli Singoli)
   ========================================================================== */

/* Nasconde il box grande dell'autore a fine articolo e l'intera area commenti */
.single-post .cs_author_card,
.single-post #comments,
.single-post .comments-area,
.single-post #respond {
    display: none !important;
}

/* Nasconde le scritte "Autore" e "Commenti" anche nei piccoli meta-dati sotto il titolo */
.single-post .cs_post_meta li.author,
.single-post .cs_post_meta li:has(a[href*="author"]),
.single-post .cs_post_meta li:has(a[href*="#comments"]) {
    display: none !important;
}

/* ==========================================================================
   ETICHETTE CATEGORIA ACQUA (Solo su Classic e Ho.Re.Ca)
   ========================================================================== */

/* 1. Crea lo spazio e il font per il testo SOPRA il titolo (Sostituisci 1111 e 2222 con i tuoi ID) */
.page-id-9462 .cs_card_title::before,
.page-id-9478 .cs_card_title::before {
    display: block;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    transition: color 0.4s ease;
}

/* 2. ACQUA NATURALE (Verde) */
/* Il CSS legge l'url del pulsante per capire che acqua è e le colora di verde */
.cs_card:has(a[href*="bottiglia-pet-da-150-cl-naturale"]) .cs_card_title::before,
.cs_card:has(a[href*="bottiglia-pet-da-200-cl-naturale"]) .cs_card_title::before,
.cs_card:has(a[href*="bottiglia-pet-da-50-cl-naturale"]) .cs_card_title::before,
.cs_card:has(a[href*="bottiglia-in-pet-da-100-cl-naturale"]) .cs_card_title::before,
.cs_card:has(a[href*="bottiglia-in-vetro-da-75-cl-naturale"]) .cs_card_title::before,
.cs_card:has(a[href*="bottiglia-in-vetro-da-100-cl-naturale"]) .cs_card_title::before,
.cs_card:has(a[href*="bottiglia-in-vetro-verde-da-92-cl-naturale"]) .cs_card_title::before {
    content: "Naturale";
    color: #03965D !important;
}

/* 3. ACQUA FRIZZANTE (Rosso) */
.cs_card:has(a[href*="bottiglia-in-pet-da-50-cl-frizzante"]) .cs_card_title::before,
.cs_card:has(a[href*="bottiglia-in-pet-da-150-cl-frizzante"]) .cs_card_title::before,
.cs_card:has(a[href*="bottiglia-in-vetro-da-75-cl-frizzante"]) .cs_card_title::before,
.cs_card:has(a[href*="bottiglia-in-vetro-da-100-cl-frizzante"]) .cs_card_title::before,
.cs_card:has(a[href*="bottiglia-in-vetro-verde-da-92-cl-frizzante"]) .cs_card_title::before, 
.cs_card:has(a[href*="bottiglia-in-pet-da-100-cl-frizzante"]) .cs_card_title::before {
    content: "Frizzante";
    color: #AF3D52 !important; /* Rosso */
}

/* 4. ACQUA LEGGERMENTE FRIZZANTE (Azzurro) */
.cs_card:has(a[href*="bottiglia-in-pet-da-100-cl-leggermente-frizzante"]) .cs_card_title::before,
.cs_card:has(a[href*="bottiglia-in-vetro-da-100-cl-leggermente-frizzante"]) .cs_card_title::before,
.cs_card:has(a[href*="bottiglia-in-vetro-da-75-cl-leggermente-frizzante"]) .cs_card_title::before,
.cs_card:has(a[href*="bottiglia-in-vetro-verde-da-92-cl-leggermente-frizzante"]) .cs_card_title::before {
    content: "Leggermente Frizzante";
    color: #0075C9 !important; /* Azzurro */
}

/* ==========================================================================
   BLOCCO ETICHETTE (Visibili SOLO su Classic e Ho.Re.Ca)
   ========================================================================== */

/* Se non sei nella pagina 9462 (Classic) e non sei nella 9478 (HoReCa), distruggi l'etichetta! */
body:not(.page-id-9462):not(.page-id-9478) .cs_card_title::before {
    content: none !important;
    display: none !important;
}

/* ==========================================================================
   OVERLAY SCURO PER GLI HEADER DELLE PAGINE INTERNE
   ========================================================================== */

/* 1. Imposta il contenitore principale per gestire i livelli (z-index) */
.cs_page_heading.cs_style_1 {
    position: relative !important;
    z-index: 1 !important;
}

/* 2. Crea la patina scura sopra l'immagine di sfondo */
.cs_page_heading.cs_style_1::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(0, 0, 0, 0.4) !important; /* 0.4 = 40% di opacità nera */
    z-index: 1 !important;
}

/* 3. Assicura che i testi (Titolo e Box Vetro) stiano SOPRA la patina scura */
.cs_page_heading.cs_style_1 .container {
    position: relative !important;
    z-index: 2 !important;
}

/* ==========================================================================
   ANIMAZIONE HOVER TITOLI BOTTIGLIE (Stile Sottolineatura Blog)
   ========================================================================== */

/* 1. Stato base: prepara la linea (spessore 2px, ma larghezza invisibile a 0) */
.cs_card.cs_style_2 .cs_card_info .cs_card_title a {
    background-repeat: no-repeat !important;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, currentColor), to(currentColor)) !important;
    background-image: linear-gradient(90deg, currentColor 0, currentColor 100%) !important;
    -webkit-transition: background-size 0.42s cubic-bezier(0.49, 0.49, 0.08, 1), color 0.27s ease-out !important;
    transition: background-size 0.42s cubic-bezier(0.49, 0.49, 0.08, 1), color 0.27s ease-out !important;
    background-position: 100% calc(100% - 0px) !important;
    background-size: 0 2px !important;
    display: inline !important; /* Fondamentale affinché la linea segua esattamente la lunghezza del testo */
}

/* 2. Stato Hover: fa scattare l'animazione, la linea si allunga al 100% */
.cs_card.cs_style_2:hover .cs_card_info .cs_card_title a {
    background-size: 100% 2px !important;
    background-position: 0 calc(100% - 0px) !important;
}

/* ==========================================================================
   TIMELINE XPRO: CORREZIONI FINALI (Frecce, Box larghi, Linee pulite)
   ========================================================================== */

/* 1. Nasconde i pezzettini di linea orizzontale nativi */
.xpro-horizontal-timeline-bullet-line {
    display: none !important;
}

/* 2. Linea orizzontale sfumata: Accorciata per non toccare le frecce */
.xpro-horizontal-timeline {
    position: relative !important;
}
.xpro-horizontal-timeline::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important; /* Centro perfetto */
    left: 60px !important; /* Parte DOPO la freccia sinistra */
    width: calc(100% - 120px) !important; /* Si ferma PRIMA della freccia destra */
    height: 2px !important;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%) !important;
    z-index: 1 !important;
}

/* ==========================================================================
   NUOVE REGOLE PER LE LINEE VERTICALI E I BOX
   ========================================================================== */

/* 3. Uccidiamo il "baffo" vuoto (la linea del campo data inutilizzato) */
.xpro-horizontal-timeline-dates::before {
    display: none !important;
}

/* 4. Linea tratteggiata solo dal lato del box, con altezza fissa per toccarlo */
.xpro-horizontal-timeline-content-inner::after {
    background-color: transparent !important;
    border-left: 2px dashed rgba(255, 255, 255, 0.4) !important; /* Tratteggio delicato */
    width: 0 !important;
    height: 80px !important; /* Se non tocca perfettamente il box, cambia questo numero! (es. 70px o 60px) */
}

.xpro-horizontal-timeline-media i,
.xpro-horizontal-timeline-media .xpro-horizontal-timeline-media-custom {
    color: #00317A !important;
}

/* ==========================================================================
   TESTI IN GRASSETTO BIANCHI NEL FOOTER
   ========================================================================== */

footer b,
footer strong,
.elementor-location-footer b,
.elementor-location-footer strong,
.cs_footer b,
.cs_footer strong {
    color: #ffffff !important;
}