/*
 * ==========================================================
 * PROGETTO:    Corsi
 * FILE:        index.css
 * Path:        public/assets/css/guide/index.css
 * ==========================================================
 * DESCRIZIONE GENERALE:
 * Layout a due colonne della guida in linea: indice a sinistra
 * (ridimensionabile dalla maniglia in mezzo), contenuto della voce
 * selezionata a destra.
 * ==========================================================
 */

.guide-layout {
    /* Larghezza dell'indice: 280px di default, ridimensionabile dalla
       maniglia (guide/index.js la sovrascrive con uno stile in linea). */
    --guide-index-width: 280px;
    display: flex;
    gap: 0;
    align-items: flex-start;
    font-family: "Segoe UI", Helvetica, Arial, Sans-Serif;
    font-size: 16px;
}

/*
 * ==========================================================
 * INDICE DELLA GUIDA
 * ==========================================================
 */
.guide-index {
    flex: 0 0 var(--guide-index-width);
    position: sticky;
    /* Sotto la barra del menu, fissa e alta 55px (vedi kerno/css/main.css), piu'
     * 16px di distanza: con top 16px l'inizio dell'indice finiva nascosto sotto
     * di lei. L'altezza massima lascia 16px anche in basso. */
    top: 71px;
    max-height: calc(100vh - 87px);
    overflow-y: auto;
    padding-right: 15px;
}

/*
 * Maniglia tra indice e contenuto: sostituisce il vecchio bordo destro
 * dell'indice. Una zona di presa larga 14px con al centro la linea
 * sottile di prima; al passaggio del mouse, con il focus da tastiera e
 * durante il trascinamento la linea si ispessisce e prende il colore
 * della guida. Ha la stessa altezza dell'indice (sticky) per restare
 * visibile anche scorrendo un contenuto lungo.
 */
.guide-resizer {
    flex: 0 0 14px;
    position: sticky;
    top: 71px;
    align-self: flex-start;
    height: calc(100vh - 87px);
    cursor: col-resize;
    touch-action: none;
}

.guide-resizer::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background-color: var(--color-border);
}

.guide-resizer:hover::before,
.guide-resizer:focus-visible::before,
.guide-layout.guide-resizing .guide-resizer::before {
    width: 3px;
    background-color: var(--color-guide-h1-border-left);
}

.guide-resizer:focus-visible {
    outline: none;
}

/* Durante il trascinamento il cursore resta quello di ridimensionamento
   e il testo sotto non viene selezionato. */
.guide-layout.guide-resizing {
    cursor: col-resize;
    user-select: none;
}

.guide-index h2 {
    font-size: 18px;
    text-transform: uppercase;
    margin: 30px 0 15px;
    border-left: 4px solid var(--color-guide-h1-border-left);
    background-color: var(--color-guide-h1-bg);
    padding: 8px 14px 9px;
}

.guide-index h2:first-child {
    margin-top: 0;
}

.guide-index ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.guide-index li {
    margin: 2px 0;
}

.guide-index a {
    display: block;
    padding: 1px 0px 4px 16px;
    border-radius: var(--radius-small);
    color: var(--color-text);
    text-decoration: none;
}

.guide-index a:hover {
    background: var(--color-bg-soft);
    text-decoration: none;
}

.guide-index a.active {
    font-weight: 600;
}

/* Titolo di un gruppo di pagine (es. "Corsi"): non e' un link, solo
   un'etichetta, la sotto-lista annidata sotto di esso usa lo stesso
   stile dei link ma con un rientro maggiore. */
.guide-index-group-title {
    display: block;
    padding: 1px 0 4px 16px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.guide-index-group ul {
    margin-left: 12px;
}

/*
 * ==========================================================
 * CONTENUTO DELLA GUIDA
 * ==========================================================
 *
 * .guide-content riusa .markdown-content per titoli/paragrafi/liste
 * (vedi @assets/kerno/css/markdown.css), ma senza la cornice pensata
 * per un campo di dettaglio: qui è il contenuto principale della
 * pagina, non un box dentro una card.
 */
.guide-content {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    padding: 0 0 0 15px;
}

.guide-content a {
    color: var(--color-link);
    text-decoration: none;
}

.guide-content a:hover {
    text-decoration: underline;
}

/*
 * Pager Precedente/Successiva: navigazione in sequenza tra le voci
 * della guida (topics poi pages), presente sia sopra sia sotto il
 * contenuto della voce corrente. Precedente a sinistra, successiva a
 * destra. margin-left: auto su .guide-pager-next (invece di
 * justify-content: space-between sul contenitore) mantiene "successiva"
 * ancorata a destra anche quando e' l'unico link presente (prima voce
 * della sequenza, senza "precedente"): space-between porterebbe un
 * figlio isolato all'inizio del contenitore, non alla fine.
 */
.guide-pager {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    font-size: 16px;
}

.guide-pager-next {
    margin-left: auto;
}

.guide-pager-bottom {
    margin-top: 35px;
    padding-top: 15px;
    border-top: 1px solid var(--color-border);
}

.guide-content h1,
.guide-content h2,
.guide-content h3,
.guide-content h4,
.guide-content h5
 {
    text-shadow: none;
    color: var(--color-text);
    font-weight: normal;
 }

.guide-content h1
{
    font-size: 36px;
    margin: 0 0 35px;
    border-left: 5px solid var(--color-guide-h1-border-left);
    background-color: var(--color-guide-h1-bg);
    padding: 2px 18px 10px;
}

.guide-content h2
{
    font-size: 26px;
    margin: 30px 0 25px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-border);
}

.guide-content h3
{
    font-size: 20px;
    margin: 28px 0 16px;
    color: var(--color-guide-h3);
}

.guide-content h4
{
    font-size: 16px;
    margin: 20px 0 12px;
    font-weight: bold;
}

.guide-content p
{
    margin: 0 0 10px;
    text-align: left;
}

/*
 * Punto elenco verde coerente con il resto dello stile della guida,
 * 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 gia'
 * usato per i numeri dei passi operativi (ol li::before) qui sotto.
 */
.guide-content ul {
    list-style: none;
    padding-left: 20px;
}

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

.guide-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.
 */
.guide-content ol {
    counter-reset: guide-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;
}

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

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

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

.guide-content ol li::before {
    content: counter(guide-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;
}

/*
 * ==========================================================
 * ADATTAMENTO RESPONSIVE
 * ==========================================================
 * Sotto questa soglia .guide-index (280px fissi) lascia troppo poco
 * spazio a .guide-content (min-width: 0, si restringe fino a rompere
 * ogni parola su una riga propria): le due colonne si impilano, col
 * contenuto (l'informazione richiesta) sopra e l'indice sotto, invece
 * dell'ordine sorgente (indice poi contenuto) pensato per l'affiancata.
 * position: sticky/max-height/overflow-y non hanno senso su una
 * colonna a piena larghezza invece che affiancata: rimossi insieme alla
 * maniglia di ridimensionamento, che a colonne impilate non ha senso, e
 * al riempimento laterale del contenuto.
 */
/* Nell'ambiente di sviluppo sotto la barra c'e' anche il banner rosso
 * (#development-banner, fisso e alto circa 24px): indice e maniglia scendono
 * di altrettanto. Solo a colonne affiancate: sotto i 900px l'indice non e'
 * piu' fisso e non ha un'altezza massima. */
@media (min-width: 901px) {
    body:has(#development-banner) .guide-index {
        top: 95px;
        max-height: calc(100vh - 111px);
    }

    body:has(#development-banner) .guide-resizer {
        top: 95px;
        height: calc(100vh - 111px);
    }
}

@media (max-width: 900px) {
    .guide-layout {
        flex-direction: column;
        /* align-items: flex-start (impostato sopra per l'affiancata,
         * dove serve ad allineare le due colonne in alto) qui farebbe
         * restringere ciascuna colonna alla larghezza del proprio
         * contenuto invece di occupare tutta la riga, essendo ora il
         * cross-axis di un flex-column. */
        align-items: stretch;
    }

    .guide-content {
        order: -1;
        padding-left: 0;
    }

    /* Il pager in basso e' l'ultimo elemento del contenuto, e
     * markdown.css azzera il margine inferiore dell'ultimo figlio: con le
     * colonne impilate l'indice ("Argomenti") finiva attaccato al pager.
     * Il selettore piu' specifico ridarebbe lo spazio, pari a quello sopra. */
    .guide-content .guide-pager-bottom:last-child {
        margin-bottom: 35px;
    }

    .guide-resizer {
        display: none;
    }

    .guide-index {
        flex: 1 1 auto;
        position: static;
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }
}

/* Un paragrafo giustificato su schermo stretto allarga gli spazi tra
 * le parole in modo innaturale (poche parole per riga): sotto questa
 * soglia si preferisce l'allineamento a sinistra, sopra resta
 * giustificato dove la larghezza di riga lo rende leggibile. */
@media (min-width: 768px) {
    .guide-content p {
        text-align: justify;
        hyphens: auto;
    }
}