/*
 * ==========================================================
 * PROGETTO:    Kerno Framework
 * FILE:        markdown.css
 * Path:        public/css/markdown.css
 * ==========================================================
 * DESCRIZIONE GENERALE:
 * Definisce la resa base dei contenuti Markdown convertiti in HTML e
 * visualizzati nelle viste applicative.
 *
 * FUNZIONE DEL FILE:
 * Questo foglio di stile raccoglie regole CSS specifiche per: contenitore
 * Markdown, titoli, liste e spaziature interne del contenuto generato.
 * Le regole mantengono leggibile il markup prodotto dal parser Markdown.
 *
 * NOTE OPERATIVE:
 * - mantenere questo file indipendente dal contenuto specifico delle pagine;
 * - verificare titoli, liste e paragrafi quando si modificano spaziature;
 * - evitare regole troppo generiche fuori dal wrapper .markdown-content;
 * - dimensioni/margini/bordi/sfondi dei titoli sono variabili --md-h*-*
 *   in theme.css, condivise con l'anteprima live EasyMDE (vedi easymde.css):
 *   modificarle li', non con valori letterali qui, per restare allineati.
 *   Lo stile (titoli con bordo/sfondo, liste puntate con pallino verde,
 *   elenchi numerati con cornice e cerchi) e' quello della guida in
 *   linea applicativa (content/guide/): stessa resa ovunque compaia
 *   Markdown nell'app.
 * ==========================================================
 */

/* ==========================================================
 * SEZIONE: contenitore Markdown
 * ========================================================== */

/* Wrapper del contenuto Markdown renderizzato. */
.markdown-content {
    border: 1px solid var(--color-border-soft-alt);
    border-radius: var(--radius-medium);
    padding: 12px 14px;
    background: var(--color-bg-muted);
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.55;
}

/* Rimuove spazio superiore dal primo elemento del contenuto. */
.markdown-content > :first-child {
    margin-top: 0;
}

/* Rimuove spazio inferiore dall'ultimo elemento del contenuto. */
.markdown-content > :last-child {
    margin-bottom: 0;
}

/* ==========================================================
 * SEZIONE: titoli
 * ========================================================== */

/*
 * Ogni livello usa il proprio set di variabili --md-h*-* di theme.css
 * (dimensione, margine, interlinea, peso, ombra, colore), condiviso con
 * l'anteprima live EasyMDE (vedi easymde.css): modificare i valori li',
 * non qui, per restare allineati tra anteprima editor e resa finale.
 */
.markdown-content h1 {
    font-size  : var(--md-h1-size);
    margin     : var(--md-h1-margin);
    line-height: var(--md-h1-line-height);
    font-weight: var(--md-h1-font-weight);
    text-shadow: var(--md-h1-text-shadow);
    color      : var(--md-h1-color);
    border-left: var(--md-h1-border-left);
    background : var(--md-h1-background);
    padding    : var(--md-h1-padding);
}

.markdown-content h2 {
    font-size    : var(--md-h2-size);
    margin       : var(--md-h2-margin);
    line-height  : var(--md-h2-line-height);
    font-weight  : var(--md-h2-font-weight);
    text-shadow  : var(--md-h2-text-shadow);
    color        : var(--md-h2-color);
    border-bottom: var(--md-h2-border-bottom);
    padding-bottom: var(--md-h2-padding-bottom);
}

.markdown-content h3 {
    font-size  : var(--md-h3-size);
    margin     : var(--md-h3-margin);
    line-height: var(--md-h3-line-height);
    font-weight: var(--md-h3-font-weight);
    text-shadow: var(--md-h3-text-shadow);
    color      : var(--md-h3-color);
}

.markdown-content h4 {
    font-size  : var(--md-h4-size);
    margin     : var(--md-h4-margin);
    line-height: var(--md-h4-line-height);
    font-weight: var(--md-h4-font-weight);
    text-shadow: var(--md-h4-text-shadow);
    color      : var(--md-h4-color);
}

/* ==========================================================
 * SEZIONE: paragrafi
 * ========================================================== */

/*
 * Allineamento a sinistra senza sillabazione forzata: in un contenitore
 * stretto (card/dettaglio) la giustificazione di site.css produce spazi
 * irregolari tra le parole ("fiumi"), piu' evidenti su poche parole per
 * riga.
 */
.markdown-content p {
    text-align: left;
    hyphens: none;
}

/* ==========================================================
 * SEZIONE: liste
 * ========================================================== */

/*
 * Punto elenco verde al posto del pallino scuro di default del browser.
 * ::marker non permette di controllare lo spazio tra il pallino e il
 * testo (e' deciso dal browser in base al font), quindi il marker
 * nativo e' sostituito da uno pseudo-elemento posizionato, stesso
 * approccio usato per i numeri dei passi operativi (ol li::before) qui
 * sotto.
 */
.markdown-content ul {
    list-style: none;
    padding-left: 20px;
}

.markdown-content ul li {
    position: relative;
    padding-left: 18px;
}

.markdown-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-round);
    background-color: var(--color-guide-h1-border-left);
}

/*
 * Elenchi numerati = passi operativi ("cosa fare"), distinti dal resto
 * del contenuto discorsivo con una cornice dedicata. Le liste puntate
 * (ul) restano semplici elenchi, senza questo trattamento.
 */
.markdown-content ol {
    counter-reset: md-step;
    list-style: none;
    margin: 16px 0;
    padding: 14px 18px 14px 14px;
    border-left: 4px solid var(--color-guide-h1-border-left);
    background-color: var(--color-guide-h1-bg);
    border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
}

.markdown-content ol li {
    counter-increment: md-step;
    position: relative;
    padding-left: 34px;
    margin: 10px 0;
}

.markdown-content ol li:first-child {
    margin-top: 0;
}

.markdown-content ol li:last-child {
    margin-bottom: 0;
}

.markdown-content ol li::before {
    content: counter(md-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-round);
    background-color: var(--color-guide-h1-border-left);
    color: var(--color-on-primary);
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    /* Scostamento empirico: il centraggio flessibile teorico lascia il
       numero percettibilmente piu' basso nei browser reali (differenze
       di rendering del font rispetto al box di riferimento). */
    padding-bottom: 1px;
}