/* 1. COLORE DI SFONDO SITO (TEMA SCURO) */
body.dark-active {
    --body-bg-color: #6d0808 !important;
}

/* 2. CONFIGURAZIONE DESKTOP (Da 992px in su) */
@media (min-width: 992px) {
    
    /* Centratura classica e stabile del Menu */
    .header-block-2 .header-wrap {
        position: relative !important;
        z-index: 99999 !important;
    }
    .header-block-2 .t4-navbar {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: auto !important;
        max-width: 60% !important; 
        z-index: 999999 !important;
    }
    .header-block-2 .t4-header-r {
        margin-left: auto !important;
        z-index: 999999 !important;
    }

    /* L'ARMA DEFINITIVA CONTRO IL MURO INVISIBILE DELLO SLIDESHOW */
    /* Smaterializza l'intera struttura dello slideshow: i click lo trapassano e colpiscono il menu */
    #t4-slideshow,
    #t4-slideshow *,
    .acm-hero,
    .acm-hero *,
    .hero-content,
    .hero-content * {
        pointer-events: none !important;
    }

    /* RIATTIVAZIONE CHIRURGICA: Rende nuovamente cliccabile SOLO il pulsante blu del preventivo e i suoi link */
    .hero-content a,
    .hero-content button,
    .hero-content .btn,
    .hero-content a *,
    .hero-content .btn * {
        pointer-events: auto !important;
    }
}

/* 3. PULIZIA TESTATA MOBILE (Sotto i 992px di larghezza) */
@media (max-width: 991px) {
    .header-block-2 .t4-header-r .t4-module,
    .header-block-2 .t4-header-r a.btn,
    .header-block-2 .t4-module {
        display: none !important;
    }
    .header-block-2 .megamenu-toggle, 
    .header-block-2 .navbar-toggler {
        display: none !important;
    }
    .header-block-2 .offcanvas-toggle {
        display: block !important;
        visibility: visible !important;
    }
}

/* 4. UTILITY EXTRA */
.fancybox-caption__body {
    display: none !important;
}
/* ==========================================================================
   PERSONALIZZAZIONE MODULO CONTATTI (SCHEDA CHIARA E CAMPI BIANCHI)
   ========================================================================== */

/* 1. Il riquadro principale del modulo contatti */
.contact-form {
    background-color: #f9f9f9 !important; /* Sfondo grigio chiarissimo/bianco del riquadro */
    padding: 30px !important;              /* Spazio interno per respirare */
    border-radius: 8px !important;          /* Angoli leggermente arrotondati eleganti */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important; /* Una leggera ombra per staccarlo dallo sfondo del sito */
    color: #222222 !important;              /* Colore del testo delle etichette (Label) in grigio scuro/nero */
}

/* 2. Forzatura del colore dei titoli e delle etichette dentro il modulo */
.contact-form legend,
.contact-form label,
.contact-form .form-label {
    color: #222222 !important;              /* Rende i testi "Nome", "Email", ecc. ben visibili in nero */
    font-weight: 600 !important;
}

/* 3. Sfondo bianco e scritte nere per TUTTI i campi di testo input e textarea */
.contact-form input.form-control,
.contact-form textarea.form-control,
.contact-form select.form-select,
.contact-form input {
    background-color: #ffffff !important;   /* Sfondo dei campi rigorosamente Bianco */
    color: #111111 !important;              /* Testo digitato dall'utente rigorosamente Nero */
    border: 1px solid #cccccc !important;   /* Un bordino grigio chiaro pulito */
    border-radius: 4px !important;
}

/* 4. Comportamento dei campi quando l'utente ci clicca dentro (Focus) */
.contact-form input.form-control:focus,
.contact-form textarea.form-control:focus {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #6d0808 !important;       /* Il bordo diventa del tuo rosso bordeaux quando attivo */
    box-shadow: 0 0 0 0.25rem rgba(109, 8, 8, 0.25) !important; /* Effetto sfumatura bordeaux attorno al campo */
}

/* 5. Sistemazione del testo di aiuto (es. i campi contrassegnati con l'asterisco) */
.contact-form .text-muted, 
.contact-form .form-text {
    color: #555555 !important;              /* Grigio scuro leggibile sul fondo chiaro */
}
/* TRADUZIONE FORZATA DEL PULSANTE CONTATTI VIA CSS */
.contact-form button.btn.btn-primary {
    color: transparent !important; /* Rende invisibile la parola "Submit" originale */
    position: relative;
}

.contact-form button.btn.btn-primary::before {
    content: "Invia"; /* Scrive la parola in Italiano */
    color: #ffffff !important; /* Scegli il colore del testo (bianco) */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* Fa in modo che il click passi attraverso il testo e prema il bottone */
}
/* SISTEMAZIONE GRAFICA CHECKBOX PRIVACY */
.contact-form .fields-container {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    padding: 10px 0 !important;
}

/* Rende la spunta della checkbox scura e ben visibile */
.contact-form input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    margin-right: 10px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
}

/* Allinea il testo della privacy di fianco al quadratino */
.contact-form .field-label {
    display: inline-block !important;
    vertical-align: middle !important;
    font-weight: normal !important;
    color: #333333 !important;
}
/* ==========================================================================
   FORZATURA FINALE GRASSETTO EMAIL
   ========================================================================== */

/* Colpisce direttamente lo span con le classi del template e l'itemprop */
.contact-address span.jicons-icons[itemprop="email"],
.plain-style span.jicons-icons[itemprop="email"],
div.contact-address dt span {
    font-weight: bold !important;
    font-weight: 700 !important;
}

/* Giusto per sicurezza, diamo il grassetto a TUTTI i tag dt di quella sezione */
.contact-address dt, 
.plain-style dt,
dl.contact-address dt {
    font-weight: bold !important;
    font-weight: 700 !important;
}
/* ==========================================================================
   FORZATURA BORDO E VISIBILITÀ CHECKBOX PRIVACY
   ========================================================================== */

/* Colpisce la checkbox del modulo contatti */
.contact-form input[type="checkbox"] {
    -webkit-appearance: checkbox !important; /* Forza l'aspetto standard della checkbox */
    appearance: checkbox !important;
    
    /* Rende il bordo più spesso e nero nero */
    border: 2px solid #000000 !important; 
    
    /* Opzionale: la ingrandisce leggermente per renderla più cliccabile */
    transform: scale(1.1) !important;
    margin-right: 5px !important;
    cursor: pointer !important;
}

/* Gestione del focus per l'accessibilità */
.contact-form input[type="checkbox"]:focus {
    outline: 2px solid #6d0808 !important; /* Profilo bordeaux quando viene selezionata */
}
/* ==========================================================================
   FORZATURA SUPREMA TESTI HERO SLIDESHOW
   ========================================================================== */

/* 1. Scritta piccola in alto (Sub-heading h4) */
#t4-sideshow #acm-hero-wrap-123 .hero-content-inner .sub-heading h4,
div.sub-heading h4,
.sub-heading h4 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* 2. Titolo grande principale (H1) */
#t4-sideshow #acm-hero-wrap-123 .hero-content-inner h1.hero-title,
h1.hero-title,
.hero-title {
    font-size: 3.1rem !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}

/* Sicurezza per Mobile */
@media (max-width: 768px) {
    #t4-sideshow #acm-hero-wrap-123 .hero-content-inner .sub-heading h4 {
        font-size: 1.1rem !important;
    }
    #t4-sideshow #acm-hero-wrap-123 .hero-content-inner h1.hero-title {
        font-size: 2.2rem !important;
    }
}
/* ==========================================================================
   INGRANDIMENTO PULSANTE HERO SLIDESHOW
   ========================================================================= */

.ja-acm-hero .acm-action .btn-primary,
#t4-sideshow .acm-action a.btn {
    /* Ingrandisce il testo del pulsante */
    font-size: 1.2rem !important; 
    font-weight: 700 !important;
    
    /* Aumenta lo spazio interno per renderlo fisicamente più grande e importante */
    padding: 12px 30px !important; 
    
    /* Opzionale: aggiunge una leggera spaziatura tra le lettere per la leggibilità */
    letter-spacing: 0.5px !important;
    
    /* Assicura una transizione fluida se ci passi sopra con il mouse */
    transition: all 0.3s ease !important;
}

/* Ottimizzazione per Mobile (Smartphone) */
@media (max-width: 768px) {
    .ja-acm-hero .acm-action .btn-primary,
    #t4-sideshow .acm-action a.btn {
        font-size: 1rem !important;
        padding: 10px 20px !important;
    }
}
/* ==========================================================================
   DISTANZIAMENTO IMMAGINI GALLERY (SIMPLE IMAGE GALLERY)
   ========================================================================== */

/* Spazio intorno a ogni singola miniatura */
ul .sigFreeThumb {
    margin-right: 15px !important;  /* Spazio a destra tra una foto e l'altra */
    margin-bottom: 15px !important; /* Spazio sotto, utilissimo se le foto vanno a capo */
    
    /* Assicura che i margini vengano calcolati correttamente senza rompere il layout */
    display: inline-block !important; 
    float: left !important;
}

/* Rimuove il margine dall'ultima foto della riga per evitare disallineamenti (opzionale) */
ul .sigFreeThumb:last-child {
    margin-right: 0 !important;
}

/* Sistema il contenitore per evitare che i float taglino il layout del modulo */
.sigFreeClear {
    clear: both !important;
}
/* ==========================================================================
   DISTANZIAMENTO E ALLARGAMENTO MODERATO TESTO (ACM STYLE-3)
   ========================================================================== */

@media (min-width: 992px) {
    /* Mantiene l'immagine alla sua dimensione originale (50%) */
    .ja-acm.acm-features.style-3 .col-lg-6:not(.offset-xl-1) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Allarga la colonna del testo e aggiunge un margine interno di respiro */
    .ja-acm.acm-features.style-3 .col-lg-6.col-xl-5.offset-xl-1 {
        flex: 0 0 50% !important;     /* Occupa l'altra metà esatta della riga */
        max-width: 50% !important;
        margin-left: 0 !important;      /* Annulla l'offset rigido di Bootstrap */
        
        /* Aumenta lo spazio vuoto tra la fine dell'immagine e l'inizio del testo */
        padding-left: 60px !important;  
    }
}
/* ==========================================================================
   TRADUZIONE FORZATA VIA CSS PER PAGINA CONTATTI
   ========================================================================== */

/* Nasconde il testo originale dentro lo span mantenendo l'elemento */
.jicons-icons {
    font-size: 0 !important;
}

/* Ripristina la dimensione del font e inserisce il testo in Italiano */
.jicons-icons::before {
    font-size: 1rem; /* Regola la dimensione in base al tuo template se serve */
    font-weight: bold;
}

/* Primo blocco: Indirizzo */
dt:nth-of-type(1) .jicons-icons::before {
    content: "Indirizzo";
}

/* Secondo blocco: Telefono (Ora è diventato il secondo elemento della lista) */
dt:nth-of-type(2) .jicons-icons::before {
    content: "Telefono";
}