/**
 * CON ME — CSS EDITABILE
 * Versione tema: 2.5.0
 *
 * Questo file viene caricato DOPO style.css.
 * Puoi modificare qui l'aspetto del sito senza toccare il CSS principale.
 *
 * Dove modificarlo in WordPress:
 * Aspetto > Editor file del tema > assets/css/custom-look.css
 * (se l'editor file è abilitato sul tuo WordPress)
 *
 * CONSIGLIO: cambia prima le variabili nella sezione IMPOSTAZIONI RAPIDE.
 */

/* ==========================================================
   1. IMPOSTAZIONI RAPIDE
   ========================================================== */
:root {
    /* Colori principali */
    --cm-navy: #062b57;       /* blu scuro: titoli, menu */
    --cm-blue: #07517a;       /* blu secondario: link */
    --cm-green: #35a52c;      /* verde principale */
    --cm-green-2: #64b82f;    /* verde chiaro */
    --cm-mint: #eaf7ec;       /* fondi verdi chiari */
    --cm-sky: #eef8fc;        /* fondi azzurri chiari */
    --cm-bg: #f7fafc;         /* sfondo sezioni */
    --cm-white: #ffffff;
    --cm-text: #162d43;       /* testo normale */
    --cm-muted: #657684;      /* testo secondario */
    --cm-line: #dfe8ee;       /* bordi */

    /* Forma e dimensioni */
    --cm-radius: 22px;        /* arrotondamento card */
    --cm-container: 1420px;   /* larghezza massima sito */

    /* Ombre */
    --cm-shadow: 0 16px 45px rgba(6, 43, 87, .08);
    --cm-shadow-hover: 0 22px 55px rgba(6, 43, 87, .14);

    /* Personalizzazioni aggiuntive */
    --cm-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --cm-body-size: 16px;
    --cm-header-bg: #ffffff;
    --cm-card-bg: #ffffff;
    --cm-section-space: 76px;
    --cm-button-radius: 999px;
}

/* ==========================================================
   2. TESTI E FONT
   ========================================================== */
body {
    font-family: var(--cm-font);
    font-size: var(--cm-body-size);
    background: var(--cm-white);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--cm-navy);
}

/* Titoli principali: modifica qui se li vuoi più grandi/piccoli */
.cm-hero h1,
.entry-title,
.archive-header h1 {
    /* font-size: 54px; */
}

/* ==========================================================
   3. HEADER E MENU
   ========================================================== */
.site-header {
    background: var(--cm-header-bg);
}

/* Esempio per aumentare l'altezza del logo:
.custom-logo { max-height: 72px; width: auto; }
*/

/* Link menu */
.main-navigation a {
    color: var(--cm-navy);
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    color: var(--cm-green);
}

/* ==========================================================
   4. PULSANTI
   ========================================================== */
.cm-button,
.wp-block-button__link,
button,
input[type="submit"] {
    border-radius: var(--cm-button-radius);
}

/* Pulsante principale */
.cm-button-primary,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background: var(--cm-green);
    color: #fff;
}

.cm-button-primary:hover {
    background: var(--cm-green-2);
}

/* ==========================================================
   5. HERO / PRIMA SEZIONE HOME
   ========================================================== */
.cm-hero {
    /* Esempio sfondo personalizzato:
    background: linear-gradient(135deg, #f4fbf5, #eef8fc);
    */
}

.cm-hero h1 {
    color: var(--cm-navy);
}

/* ==========================================================
   6. SEZIONI
   ========================================================== */
.cm-section {
    padding-top: var(--cm-section-space);
    padding-bottom: var(--cm-section-space);
}

/* Esempio per alternare un fondo chiaro:
.cm-section:nth-of-type(even) { background: var(--cm-bg); }
*/

/* ==========================================================
   7. CARD SERVIZI / SOLUZIONI
   ========================================================== */
.cm-service-card,
.cm-benefit-card,
.entry-card,
.cm-post-card {
    border-radius: var(--cm-radius);
    background: var(--cm-card-bg);
}

.cm-service-card:hover,
.cm-post-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--cm-shadow-hover);
}

/* Altezza immagini/icone servizi */
.cm-service-media {
    height: 150px;
}

/* ==========================================================
   8. SEZIONI PER AZIENDE / PERSONE / TERRITORIO
   ========================================================== */
.cm-benefit-group h2 {
    color: var(--cm-navy);
}

.cm-benefit-group li::before {
    color: var(--cm-green);
}

/* ==========================================================
   9. CALCOLATORE / CTA
   ========================================================== */
.cm-tool-section {
    background: linear-gradient(125deg, var(--cm-sky), #f2fbf0);
}

.cm-cta {
    background: linear-gradient(90deg, var(--cm-blue), #288f61, var(--cm-green-2));
}

/* ==========================================================
   10. FORM RICHIESTA INFORMAZIONI
   ========================================================== */
/* Puoi usare queste regole per personalizzare il popup/form.
   Alcuni selettori potrebbero dipendere dalla pagina/versione. */
.cm-info-modal,
.cm-request-modal {
    /* backdrop-filter: blur(4px); */
}

.cm-info-form,
.cm-request-form {
    border-radius: var(--cm-radius);
}

.cm-info-form input,
.cm-info-form textarea,
.cm-info-form select,
.cm-request-form input,
.cm-request-form textarea,
.cm-request-form select {
    border-radius: 10px;
}

/* ==========================================================
   11. FOOTER
   ========================================================== */
.site-footer {
    /* background: var(--cm-navy); */
    /* color: #fff; */
}

/* ==========================================================
   12. MOBILE
   ========================================================== */
@media (max-width: 768px) {
    :root {
        --cm-section-space: 48px;
        --cm-body-size: 15px;
    }

    .cm-service-media {
        height: 130px;
    }
}

/* ==========================================================
   13. SPAZIO PER LE TUE REGOLE
   ========================================================== */

/* Scrivi qui sotto le tue personalizzazioni.
   Esempio:

.cm-service-card h3 {
    font-size: 20px;
    color: #000000;
}

*/