/* ============================================================
 * Manuale Pitagorix
 * Struttura generale
 * Mobile first
 * ============================================================ */


/* ============================================================
 * Contenitore principale
 * ============================================================ */

.manual-page__content {

    width: 100%;
    max-width: 72rem;

    margin-inline: auto;

}


/* ============================================================
 * Corpo del manuale
 * ============================================================ */

.manual-page__content > .card__body {

    padding:
        1rem;

}


/* ============================================================
 * Capitoli
 * ============================================================ */

.manual-section {

    padding-block:
        2rem;

}


/*
 * Il primo capitolo non necessita
 * di spazio aggiuntivo nella parte superiore.
 */

.manual-toc + .manual-section {

    padding-top:
        2rem;

}


/* ============================================================
 * Sottosezioni
 * ============================================================ */

.manual-subsection {

    margin-top:
        2rem;

}


/* ============================================================
 * Gerarchia titoli
 * ============================================================ */

.manual-section > h2 {

    margin:
        0
        0
        1.25rem;

    line-height:
        1.2;

}


.manual-subsection > h3 {

    margin:
        0
        0
        1rem;

    line-height:
        1.25;

}


.manual-subsection h4 {

    margin:
        1.5rem
        0
        0.75rem;

    line-height:
        1.3;

}


.manual-subsection h5 {

    margin:
        1.25rem
        0
        0.625rem;

    line-height:
        1.35;

}


/* ============================================================
 * Testo
 * ============================================================ */

.manual-section p,
.manual-section li,
.manual-section dd {

    line-height:
        1.65;

}


/*
 * Limita la lunghezza delle righe.
 *
 * Su monitor ampi il testo resta più facile da leggere,
 * senza occupare tutta la larghezza disponibile.
 */

.manual-section > p,
.manual-subsection > p,
.manual-note > p,
.manual-example > p,
.manual-summary > p {

    max-width:
        72ch;

}


/* ============================================================
 * Liste
 * ============================================================ */

.manual-section ul,
.manual-section ol {

    padding-left:
        1.5rem;

}


.manual-section li + li {

    margin-top:
        0.4rem;

}


/* ============================================================
 * Anchor interni
 * ============================================================ */

.manual-section,
.manual-subsection,
.manual-section h4[id],
.manual-section dt[id] {

    scroll-margin-top:
        1rem;

}


/* ============================================================
 * Desktop
 * ============================================================ */

@media (min-width: 48rem) {

    .manual-page__content > .card__body {

        padding:
            1.5rem
            2rem;

    }


    .manual-section {

        padding-block:
            2.5rem;

    }


    .manual-subsection {

        margin-top:
            2.5rem;

    }

}

/* ============================================================
 * Indice del manuale
 * ============================================================ */

.manual-toc {

    margin-bottom:
        1rem;

    padding:
        1.25rem;

    border:
        1px solid
        var(--border-color, #d8dce3);

    border-radius:
        0.75rem;

}


/* ============================================================
 * Titolo indice
 * ============================================================ */

.manual-toc h2 {

    margin:
        0
        0
        1rem;

    line-height:
        1.2;

}


/* ============================================================
 * Elenco capitoli
 * ============================================================ */

.manual-toc__list {

    margin:
        0;

    padding-left:
        0;

    list-style:
        none;

}


.manual-toc__list li {

    margin:
        0;

}


.manual-toc__list li + li {

    margin-top:
        0.65rem;

}


/* ============================================================
 * Collegamenti
 * ============================================================ */

.manual-toc__list a {

    display:
        inline-block;

    line-height:
        1.45;

    text-decoration:
        none;

}


.manual-toc__list a:hover {

    text-decoration:
        underline;

}


.manual-toc__list a:focus-visible {

    outline:
        2px solid currentColor;

    outline-offset:
        0.2rem;

    border-radius:
        0.2rem;

}


/* ============================================================
 * Desktop
 * ============================================================ */

@media (min-width: 48rem) {

    .manual-toc {

        padding:
            1.5rem
            1.75rem;

    }


    .manual-toc__list {

        columns:
            2;

        column-gap:
            3rem;

    }


    .manual-toc__list li {

        break-inside:
            avoid;

        padding-right:
            1rem;

    }

}

/* ============================================================
 * Riquadri editoriali
 * ============================================================ */

.manual-note,
.manual-example,
.manual-summary {

    width:
        100%;

    max-width:
        72ch;

    box-sizing:
        border-box;
	
	margin-top:
        1.5rem;

    padding:
        1rem;

    border:
        1px solid
        var(--border-color, #d8dce3);

    border-radius:
        0.75rem;

}


/* ============================================================
 * Titoli dei riquadri
 * ============================================================ */

.manual-note > h3,
.manual-note > h4,
.manual-example > h4,
.manual-summary > h3,
.manual-summary > h4 {

    margin-top:
        0;

}


/* ============================================================
 * Nota
 * ============================================================ */

.manual-note {

    border-left-width:
        0.3rem;

}

.manual-note {

    border-color:
        rgba(243, 156, 18, 0.35);

    border-left-color:
        #f39c12;

    background:
        rgba(243, 156, 18, 0.045);

}

/* ============================================================
 * Esempio
 * ============================================================ */

.manual-example {

    background:
        rgba(0, 0, 0, 0.02);

}

.manual-example {

    border-color:
        rgba(243, 156, 18, 0.2);

    background:
        rgba(243, 156, 18, 0.025);

}

/* ============================================================
 * Riepilogo
 * ============================================================ */

.manual-summary {

    border-width:
        2px;

}

.manual-summary {

    border-color:
        rgba(243, 156, 18, 0.45);

    background:
        rgba(243, 156, 18, 0.06);

}

/* ============================================================
 * Ultimo elemento interno
 * ============================================================ */

.manual-note > :last-child,
.manual-example > :last-child,
.manual-summary > :last-child {

    margin-bottom:
        0;

}


/* ============================================================
 * Desktop
 * ============================================================ */

@media (min-width: 48rem) {

    .manual-note,
    .manual-example,
    .manual-summary {

        padding:
            1.25rem
            1.5rem;

    }

}

/* ============================================================
 * Titoli
 * ============================================================ */

.manual-note > h3,
.manual-note > h4,
.manual-example > h4,
.manual-summary > h3,
.manual-summary > h4 {

    font-weight:
        700;

}

/* ============================================================
 * Evidenziazione semantica leggera
 * ============================================================ */

.manual-note strong,
.manual-summary strong {

    font-weight:
        700;

}

/* ============================================================
 * Separazione tra capitoli
 * ============================================================ */

.manual-section {

    border-top:
        1px solid
        var(--border-color, #e1e4e8);

}


.manual-toc + .manual-section {

    border-top:
        0;

}


/* ============================================================
 * Torna all'indice
 * ============================================================ */

.manual-back-to-toc {

    display:
        inline-flex;

    align-items:
        center;

    margin-top:
        2rem;

    padding:
        0.5rem
        0.75rem;

    border:
        1px solid
        var(--border-color, #d8dce3);

    border-radius:
        0.5rem;

    text-decoration:
        none;

    font-size:
        0.9rem;

    line-height:
        1.2;

}


.manual-back-to-toc:hover {

    text-decoration:
        underline;

}


.manual-back-to-toc:focus-visible {

    outline:
        2px solid currentColor;

    outline-offset:
        0.2rem;

}


/* ============================================================
 * Desktop
 * ============================================================ */

@media (min-width: 48rem) {

    .manual-back-to-toc {

        margin-top:
            2.5rem;

    }

}

/* ============================================================
 * Glossario
 * ============================================================ */

.manual-glossary {

    margin:
        1.5rem
        0
        0;

}


/* ============================================================
 * Termine
 * ============================================================ */

.manual-glossary dt {

    margin-top:
        1.5rem;

    padding-top:
        1.25rem;

    border-top:
        1px solid
        var(--border-color, #e1e4e8);

    font-weight:
        700;

    line-height:
        1.3;

}


/*
 * La prima voce non necessita
 * della linea superiore.
 */

.manual-glossary dt:first-of-type {

    margin-top:
        0;

    padding-top:
        0;

    border-top:
        0;

}


/* ============================================================
 * Definizione
 * ============================================================ */

.manual-glossary dd {

    margin:
        0.5rem
        0
        0;

    max-width:
        72ch;

}


/* ============================================================
 * Desktop
 * ============================================================ */

@media (min-width: 48rem) {

    .manual-glossary dt {

        margin-top:
            1.75rem;

        padding-top:
            1.5rem;

        font-size:
            1.05rem;

    }


    .manual-glossary dd {

        margin-top:
            0.625rem;

    }

}

/* ============================================================
 * Ritmo tipografico del manuale
 * ============================================================ */


/* ============================================================
 * Paragrafi
 * ============================================================ */

.manual-section p {

    margin-top:
        0;

    margin-bottom:
        1rem;

}


/* ============================================================
 * Liste
 * ============================================================ */

.manual-section ul,
.manual-section ol {

    margin-top:
        0.75rem;

    margin-bottom:
        1.25rem;

}


/* ============================================================
 * Titoli di capitolo
 * ============================================================ */

.manual-section > h2 {

    font-size:
        1.5rem;

}


/* ============================================================
 * Titoli di sottosezione
 * ============================================================ */

.manual-subsection > h3 {

    font-size:
        1.2rem;

}


/* ============================================================
 * Titoli interni
 * ============================================================ */

.manual-subsection > h4 {

    margin-top:
        1.75rem;

}


/*
 * Se un h4 segue direttamente
 * il titolo principale della sottosezione,
 * riduciamo lo spazio superiore.
 */

.manual-subsection > h3 + h4 {

    margin-top:
        1.25rem;

}


/* ============================================================
 * Blocchi consecutivi
 * ============================================================ */

.manual-subsection
    > .manual-note
    + .manual-example,
.manual-subsection
    > .manual-example
    + .manual-note,
.manual-subsection
    > .manual-note
    + .manual-summary,
.manual-subsection
    > .manual-example
    + .manual-summary {

    margin-top:
        1rem;

}


/* ============================================================
 * Desktop
 * ============================================================ */

@media (min-width: 48rem) {

    .manual-section > h2 {

        font-size:
            1.7rem;

    }


    .manual-subsection > h3 {

        font-size:
            1.3rem;

    }


    .manual-section p {

        margin-bottom:
            1.125rem;

    }

}