/*
Theme Name: Accua Child LLM
Theme URI: https://lifelinemedical.net/accua-child/
Description: Tema child per Accua Theme
Author: Cimatti Consulting
Author URI: https://lifelinemedical.net
Template: accua-theme
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: accua-child
*/

/* VARIABILI XD FORNITO DA SIMBIOSI */
:root {
    /* Font family
    --font-family: "DM Sans", sans-serif; */

    /* Font sizes & weights */
    --headline-1: 38px;
    --headline-1-lh: 43px;
    --headline-2: 30px;
    --headline-2-lh: 35px;
    --headline-3: 22px;
    --headline-3-lh: 25px;
    --headline-4: 18px;
    --headline-4-lh: 40px;
    --headline-5: 18px;
    --headline-5-lh: 35px;
    --headline-6: 18px;
    --headline-6-lh: 21px;
    --headline-7: 18px;
    --headline-7-lh: 21px;
    --headline-8: 18px;
    --headline-8-lh: 16px;
    --body-1: 18px;
    --body-1-lh: 21px;
    --body-2: 14px;
    --body-2-lh: 16px;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* Color palette */
    --green-dark: #465e4f;
    --green-light: #EDF7F9;
    --gray-dark: #727272;
    --gray-light: #E4E4E7;
    --gray-bg: #F2F2F2;
    --black: #1D1D1B;
    --white: #FFFFFF;

    /* Border radius */
    --radius-none: 0px;
    --radius-small: 5px;
    --radius-big: 16px;
    --radius-circle: 400px;

    /* Shadow */
    --shadow-button: 0px 0px 6px rgba(0, 0, 0, 0.16);


    /* sovrascittura tema parent */
    /* Primary (usiamo il verde principale come base) */
    --color-primary: #415748;         /* verde scuro principale */
    --color-link: #861d21;
    --color-primary-dark: #861d21;    /* tono più scuro del verde */
    --color-primary-light: #EDF7F9;   /* verde chiaro come highlight */

    /* Secondary (usiamo il nero per dare un contrasto netto) */
    --color-secondary: #1D1D1B;       /* nero principale */
    --color-secondary-dark: #000000;  /* nero assoluto */
    --color-secondary-light: #727272; /* grigio scuro, per variazione */

    /* Accent (grigio chiaro o bianco, usato per sfondi o contorni) */
    --color-accent: #E4E4E7;

    /* Tonalità di scuro */
    --color-dark: #1D1D1B;
    --color-dark-medium: #727272;

    /* Tonalità medie e chiare */
    --color-medium: #E4E4E7;
    --color-light-medium: #F2F2F2;
    --color-light: #FFFFFF;

    /* Stati */
    --color-success: #80D992;    /* verde chiaro come feedback positivo */
    --color-error: #ef476f;      /* mantenuto come colore personalizzato */
    --color-warning: #FFD166;    /* mantenuto dal parent */
    --color-info: #118ab2;       /* mantenuto dal parent */

    /* font */
    --typography-body-font: "DM Sans", sans-serif;
    /*--typography-heading-font: "Roboto Slab", serif;*/
    --typography-heading-font: "DM Sans", sans-serif;
    --typography-custom-font: "Roboto Slab", serif;


    /* griglia e spaziature */
    --layout-container-width: 75%;
    --layout-container-width-medium: 70%;
    --layout-container-width-small: 60%;
    --custom-gap: 16px;
    --custom-gap-2: 48px;
    --custom-gap-3: 30px;


}
.post, .page {
    margin: 0 0 0;
}
.grid-cols-8 {
    grid-template-columns: repeat(8, 1fr);
}
.grid-cols-9 {
    grid-template-columns: repeat(9, 1fr);
}
ul, ol {
    margin: 0;
    padding-left: 25px;
}

@media (max-width: 1300px) {
    :root {
        --layout-container-width: 90%;
        --custom-gap-3: 20px;
    }
}
@media (max-width: 992px) {
    :root {
        --layout-container-width: 85%;
    }
}
@media (max-width: 768px) {
    :root {
        --headline-1: 30px;
        --headline-1-lh: 38px;
        --headline-2: 25px;
        --headline-2-lh: 32px;
        --headline-3: 22px;
        --headline-3-lh: 25px;
        --typography-base-font-size: 15px;
        --body-1: 15px;


        /* griglia e spaziature */
        --layout-container-width: 90%;
        --layout-container-width-medium: 92%;
        --layout-container-width-small: 60%;
        --custom-gap: 16px;
        --custom-gap-2: 48px;
        --custom-gap-3: 15px;
    }
}