/* Stili comuni delle lezioni. Caricare dopo il CSS del tema e del codice. */
.lezione-indice {
    margin:24px 0 32px; padding:0; border:1px solid #d7dfe7;
    border-top:5px solid #0879c8; border-radius:6px;
    background:white; overflow:hidden; scroll-margin-top:110px;
}
.lezione-indice .lezione-indice-links { display:block; margin:0; }
.lezione-indice .lezione-indice-links a {
    display:flex; align-items:center; gap:12px; padding:14px 20px;
    border:0; border-bottom:1px solid #e0e6ed; border-radius:0;
    background:white; color:#17365d; text-decoration:none;
}
.lezione-indice .lezione-indice-links a:last-child { border-bottom:0; }
.lezione-indice .lezione-indice-links a:hover { background:#f4f9ff; }
.lezione-indice .lezione-numero {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:28px; height:28px; border-radius:4px;
    background:#e5f3ff; color:#0879c8; flex-shrink:0;
}
.lezione-indice .lezione-indice-links a.lezione-link-laboratorio {
    background:#e5f3ff; border-left:6px solid #168bd2;
    padding-left:14px; font-weight:700;
}
.lezione-indice .lezione-link-laboratorio .lezione-numero { background:#0879c8; color:white; }
.lezione-indice .lezione-indice-links a.lezione-link-laboratorio:hover { background:#d4ebff; }
.lezione-indice .fa-angle-right { margin-left:auto; }
.lezione-indice a:focus-visible, .lezione-torna:focus-visible { outline:3px solid #b76b00; outline-offset:-3px; }

.lezione-testata {
    margin:30px 0 20px; padding:22px 24px;
    border:1px solid #a6cfee; border-left:6px solid #168bd2;
    border-radius:10px; background:#e5f3ff; color:#17365d;
    scroll-margin-top:110px;
}
.lezione-testata h2 { margin:0 0 10px; color:#17365d; font-size:28px; line-height:1.3; }
.lezione-testata p { margin:0; color:#17365d; }
.lezione-torna { display:inline-block; margin:14px 0 0; color:#17365d; font-size:14px; }

.laboratorio {
    margin:30px 0; padding:24px; background:#e5f3ff;
    border:1px solid #a6cfee; border-left:6px solid #168bd2;
    border-radius:10px; color:#17365d; scroll-margin-top:110px;
}
.laboratorio .laboratorio-etichetta { margin:0 0 8px; font-weight:700; letter-spacing:1px; color:#17365d; }
.laboratorio h2 { margin-top:0; color:#17365d; }
.laboratorio h3 { color:#17365d; }
.laboratorio-meta { display:flex; flex-wrap:wrap; gap:12px 24px; margin:15px 0 20px; }
.laboratorio-meta p { margin:0; color:#17365d; }
.laboratorio-meta .fa { margin-right:7px; color:#0879c8; }
.laboratorio-nota { background:white; padding:15px; border:1px solid #a6cfee; border-radius:6px; margin-bottom:20px; }
.laboratorio .table { background:white; color:#17365d; }

.lezione-esempio { display:flex; flex-wrap:wrap; align-items:flex-start; gap:20px; margin:20px 0; }
.lezione-codice, .lezione-risultato { flex:1 1 340px; min-width:0; padding:20px; border-radius:10px; }
.lezione-codice { border:1px solid #e5d7be; background:#fff9ef; }
.lezione-risultato { border:1px solid #a6cfee; background:#e5f3ff; }
.lezione-esempio h3 { margin-top:0; color:#17365d; }
.lezione-codice p { color:#536373; }
.lezione-risultato p { color:#17365d; }
/* Il tema di evidenziazione del codice può imporre un proprio sfondo. */
.lezione-codice pre[class*="language-"] { background:#fff9ef !important; border:1px solid #e5d7be; margin-bottom:0; max-height:720px; overflow:auto; }
.lezione-codice pre[class*="language-"] > code { background:transparent !important; }
.lezione-anteprima { display:block; width:100%; border:1px solid #a6cfee; background:white; }
.lezione-ancora { scroll-margin-top:110px; }

@media (max-width:600px) {
    .lezione-testata, .laboratorio { padding:18px; }
    .lezione-testata h2 { font-size:24px; }
    .lezione-indice .lezione-indice-links a { padding:12px 14px; }
    .lezione-codice, .lezione-risultato { padding:15px; }
}

/* Testata principale già generata da template.php.
   Selettori limitati alla testata dell'articolo: non riguardano il menu
   del sito, la sidebar o i titoli delle sezioni della lezione. */
.lezione-principale {
    margin:0 0 28px;
    padding:26px 30px;
    border:1px solid #a6cfee;
    border-top:5px solid #0879c8;
    border-radius:10px;
    background:#e5f3ff;
    color:#17365d;
}
.lezione-principale > .container {
    width:100%; max-width:none; padding:0; margin:0;
}
.lezione-principale .section-title {
    margin:0; padding:0;
}
.lezione-principale .section-title > .row {
    margin:0;
}
.lezione-principale .section-title > .row > .col-md-9 {
    width:100%; float:none; padding:0;
}
/* Ordine visivo: collegamento alla sezione, h1, descrizione, pulsanti. */
.lezione-principale-contenuto {
    display:flex; flex-direction:column; align-items:stretch;
    text-align:left !important;
}
.lezione-principale h5.sub-title {
    order:0; margin:0 0 14px; padding:0;
    font-size:15px; line-height:1.5; font-weight:600;
    letter-spacing:0; text-transform:none; color:#17365d;
}
.lezione-principale h5.sub-title a {
    color:#17365d; text-decoration:none;
}
.lezione-principale h5.sub-title a:hover {
    text-decoration:underline;
}
h1.lezione-principale-titolo {
    order:1; margin:0 0 14px; padding:0;
    font-size:40px; line-height:1.15; font-weight:700;
    letter-spacing:0; text-transform:none;
    color:#17365d !important;
    overflow-wrap:anywhere;
}
.lezione-principale-descrizione {
    order:2; margin:0; padding:0;
}
.lezione-principale-descrizione h4 {
    margin:0; padding:0; font-size:19px; line-height:1.6;
    font-weight:400; text-transform:none; color:#17365d;
}
.lezione-principale-azioni {
    order:3; margin:20px 0 0; padding:16px 0 0;
    border-top:1px solid #bddcf3;
}
.lezione-principale .btn-group {
    display:flex; flex-wrap:wrap; gap:8px; float:none;
}
.lezione-principale .btn-group > .btn {
    float:none; margin:0; padding:7px 12px;
    border:1px solid #a6cfee; border-radius:6px !important;
    background:transparent; color:#17365d !important;
    font-size:14px; line-height:1.4; box-shadow:none;
}
.lezione-principale .btn-group > .btn:hover {
    background:white; border-color:#0879c8;
}
.lezione-principale a:focus-visible {
    outline:3px solid #b76b00; outline-offset:3px;
}
@media (max-width:600px) {
    .lezione-principale { padding:20px; }
    h1.lezione-principale-titolo { font-size:30px; }
    .lezione-principale-descrizione h4 { font-size:17px; }
}
@media print {
    .lezione-principale { background:white; border-color:#cccccc; padding:15px; }
    .lezione-principale-azioni { display:none; }
}

/* Menu laterale automatico: solo il PHP identifica la pagina corrente. */
.sidebar.sidebar-left > .widget:first-child { padding:0; margin-bottom:24px; border:1px solid #c6ddf0; border-top:5px solid #0879c8; border-radius:8px; background:white; overflow:hidden; }
.sidebar.sidebar-left > .widget:first-child > .widget-title { margin:0; padding:18px; border:0; background:#e5f3ff; color:#17365d; font-size:19px; line-height:1.4; font-weight:700; }
.sidebar.sidebar-left > .widget:first-child > .widget-title::after,
.sidebar.sidebar-left > .widget:first-child > .widget-title::before { display:none; }
.sidebar.sidebar-left > .widget:first-child > .widget-title a { color:#17365d; text-decoration:none; }
.sidebar.sidebar-left > .widget:first-child .categories > ul { margin:0; padding:0; list-style:none; }
.sidebar.sidebar-left > .widget:first-child .categories > ul > li { position:relative; margin:0; padding:0; border:0; border-bottom:1px solid #e2eaf1; background:white; }
.sidebar.sidebar-left > .widget:first-child .categories > ul > li:last-child { border-bottom:0; }
.sidebar.sidebar-left > .widget:first-child .categories > ul > li::before,
.sidebar.sidebar-left > .widget:first-child .categories > ul > li > i { display:none; }
.sidebar.sidebar-left > .widget:first-child .categories > ul > li > a,
.sidebar.sidebar-left > .widget:first-child .categories > ul > li > .btn { display:block; margin:0; padding:12px 16px; color:#17365d !important; background:transparent !important; border:0 !important; border-radius:0 !important; font-size:15px; line-height:1.5; font-weight:400; text-align:left; white-space:normal; text-decoration:none; box-shadow:none; }
.sidebar.sidebar-left > .widget:first-child .categories > ul > li a .btn { padding:0; margin:0; background:transparent !important; color:inherit !important; border:0 !important; border-radius:0 !important; font-weight:inherit; white-space:normal; text-align:left; }
.sidebar.sidebar-left > .widget:first-child .categories > ul > li > a:hover { background:#f1f8ff !important; }
.sidebar.sidebar-left > .widget:first-child .categories > ul > li.lezione-corrente { background:#e5f3ff; border-left:4px solid #0879c8; }
.sidebar.sidebar-left > .widget:first-child .categories > ul > li.lezione-corrente > a,
.sidebar.sidebar-left > .widget:first-child .categories > ul > li.lezione-corrente > .btn { font-weight:700; }
.sidebar.sidebar-left > .widget:first-child a:focus-visible { outline:3px solid #b76b00; outline-offset:-3px; }

/* Indice in pagina compatto: laboratorio uguale alle altre voci. */
.lezione-indice .lezione-indice-links a,
.lezione-indice .lezione-indice-links a.lezione-link-laboratorio { padding:9px 14px; gap:10px; font-size:15px; line-height:1.4; background:white; border-left:0; font-weight:400; }
.lezione-indice .lezione-indice-links a:hover,
.lezione-indice .lezione-indice-links a.lezione-link-laboratorio:hover { background:#f4f9ff; }
.lezione-indice .lezione-numero,
.lezione-indice .lezione-link-laboratorio .lezione-numero { min-width:24px; height:24px; background:#e5f3ff; color:#0879c8; font-size:13px; }

/* Collegamenti di fine articolo e navigazione tra le pagine. */
.lezione-indici { display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 18px; padding:16px; background:#f4f9ff; border:1px solid #c6ddf0; border-radius:8px; }
.lezione-indici a { display:inline-flex; align-items:center; gap:9px; padding:10px 14px; border:1px solid #a6cfee; border-radius:6px; background:white; color:#17365d; font-weight:600; text-decoration:none; }
.lezione-indici a:hover { background:#e5f3ff; border-color:#0879c8; }
.lezione-pagine { display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; margin:22px 0; }
.lezione-pagine a { display:flex; align-items:center; gap:12px; padding:14px 20px; min-width:160px; border:1px solid #a6cfee; border-radius:8px; background:white; color:#17365d; font-weight:600; text-decoration:none; }
.lezione-pagine a:last-child { margin-left:auto; }
.lezione-pagine a:hover { background:#e5f3ff; border-color:#0879c8; }
.lezione-pagine a small { display:block; font-weight:400; color:#536373; font-size:12px; }
.lezione-pagine a[aria-disabled="true"] { opacity:0.5; cursor:default; }
.lezione-indici a:focus-visible, .lezione-pagine a:focus-visible { outline:3px solid #b76b00; outline-offset:3px; }
@media (max-width:600px) {
 .lezione-indice .lezione-indice-links a { padding:9px 12px; }
 .lezione-pagine a { flex:1 1 130px; min-width:0; padding:12px; }
 .lezione-indici a { flex:1 1 170px; }
}

/* Tabelle didattiche: i campioni con colore inline conservano il loro sfondo. */
.lezione-tabella { width:100%; border-collapse:collapse; color:#17365d; background:#fff; margin:20px 0; }
.lezione-tabella > thead > tr > th { background:#e5f3ff; color:#17365d; font-weight:700; border:1px solid #cbddeb; padding:14px 16px; text-align:left; vertical-align:top; }
.lezione-tabella > tbody > tr > td { border:1px solid #dce6ef; padding:14px 16px; vertical-align:top; }
.lezione-tabella > tbody > tr:nth-child(odd) { background:#fff; }
.lezione-tabella > tbody > tr:nth-child(even) { background:#f5faff; }
.lezione-tabella > tbody > tr > td:not([style*="background"]) { background:inherit; }
.lezione-tabella caption { color:#536373; text-align:left; padding:10px 0; }
.lezione-tabella pre { background:#fff9ef; border:1px solid #e5d7be; white-space:pre; overflow:auto; }
.table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.lezione-testata h2, .lezione-testata h2 .text-theme-colored { color:#17365d !important; }
.lezione-testata .text-muted { color:#17365d !important; }
.lezione-ancora { scroll-margin-top:110px; }
@media(max-width:600px) { .lezione-tabella th,.lezione-tabella td { padding:10px; min-width:130px; } }

/* Indici delle unità: il titolo è quello unico prodotto dal template. */
.unita-indice { margin:24px 0; border:1px solid #dce6ef; border-top:4px solid #0879c8; border-radius:8px; overflow:hidden; background:#fff; }
.unita-indice a.unita-indice-voce { display:flex; align-items:center; gap:14px; padding:16px 20px; color:#17365d; background:transparent; border-bottom:1px solid #e1e8ef; text-decoration:none; font-weight:400; }
.unita-indice a.unita-indice-voce:last-child { border-bottom:0; }
.unita-indice-voce > div { flex:1; }
.unita-indice-voce > .fa { color:#0879c8; }
.unita-indice a.unita-indice-voce:hover { color:#0879c8; text-decoration:underline; }
.unita-indice a.unita-indice-voce:focus-visible { outline:3px solid #0879c8; outline-offset:-3px; }

/* Indici delle unità: il titolo è quello unico prodotto dal template. */
.unita-indice { margin:24px 0; border:1px solid #dce6ef; border-top:4px solid #0879c8; border-radius:8px; overflow:hidden; background:#fff; }
.unita-indice a.unita-indice-voce { display:flex; align-items:center; gap:14px; padding:16px 20px; color:#17365d; background:transparent; border-bottom:1px solid #e1e8ef; text-decoration:none; font-weight:400; }
.unita-indice a.unita-indice-voce:last-child { border-bottom:0; }
.unita-indice-voce > div { flex:1; }
.unita-indice-voce > .fa { color:#0879c8; }
.unita-indice a.unita-indice-voce:hover { color:#0879c8; text-decoration:underline; }
.unita-indice a.unita-indice-voce:focus-visible { outline:3px solid #0879c8; outline-offset:-3px; }

/* Corso HTML: codice e laboratorio coerenti con il corso CSS. */
.lezione-html-codice { background:#fff9ef; border:1px solid #e5d7be; padding:18px; overflow:auto; }
.laboratorio > .lezione-testata { margin:0 0 20px; padding:0; border:0; background:transparent; }