/* ================================================================
   STYLE.CSS — base globale + pagine di contenuto (.page-content)
   Caricato da TUTTE le pagine. Le pagine vetrina (home e menu dei
   corsi) aggiungono brand.css e il proprio foglio dedicato.
================================================================= */

/* ================================================ */
/* 0. DESIGN TOKENS                                 */
/* ================================================ */
:root {
    --brand-800: #002a4a;
    --brand-700: #003d6b;
    --brand-600: #005a9c;
    --brand-500: #1570b8;
    --brand-400: #2f8fd1;
    --brand-100: #dcebf8;
    --brand-50:  #f0f6fc;

    --ink: #0f172a;
    --ink-soft: #1e293b;
    --text: #2b3442;
    --muted: #5b6472;
    --subtle: #667085;

    --paper: #f4f6f9;
    --paper-0: #ffffff;
    --line: #e3e8ee;
    --line-strong: #cfd7e1;

    --green: #22c55e;
    --green-text: #157a3d;
    --amber: #f59e0b;

    /* Accenti dei corsi (valore + terna RGB per le trasparenze) */
    --c-fdp: #005a9c;  --c-fdp-rgb: 0, 90, 156;
    --c-asd: #6247d6;  --c-asd-rgb: 98, 71, 214;
    --c-bd:  #0b7a60;  --c-bd-rgb: 11, 122, 96;
    --c-web: #c2410c;  --c-web-rgb: 194, 65, 12;
    --c-rl:  #be123c;  --c-rl-rgb: 190, 18, 60;
    --c-elt: #b45309;  --c-elt-rgb: 180, 83, 9;

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 18px;

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 12px 28px -14px rgba(15, 23, 42, .22);
    --shadow-lg: 0 24px 48px -20px rgba(0, 61, 107, .32);

    --font-sans: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --header-h: 70px;
}

/* ================================================ */
/* 1. GLOBALI (Validi per tutte le pagine)          */
/* ================================================ */
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
    -webkit-text-size-adjust: 100%;
}
*, *::before, *::after {
    box-sizing: inherit;
}

body {
    font-family: var(--font-sans);
    margin: 0;
    color: var(--text);
    overflow-x: hidden;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(47, 143, 209, .22); }

/* l'attributo hidden deve vincere anche sui display impostati dal CSS */
[hidden] { display: none !important; }

:focus-visible {
    outline: 2px solid var(--brand-400);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Fix per elementi che "sfondano" (immagini, tabelle, codice) */
img,
table,
pre,
.formula {
    max-width: 100%;
    height: auto;
}

/* ================================================ */
/* 2. PAGINE CONTENUTO (SOLO .page-content)         */
/* ================================================ */
.page-content {
    font-size: 1.06rem;
    line-height: 1.75;
    color: var(--text);
    background-color: var(--paper);
    padding-top: var(--header-h);
}

/* ---------------- Header ---------------- */
.page-content .main-header {
    position: fixed;
    top: 0; left: 0; width: 100%;
    background: linear-gradient(100deg, var(--brand-800) 0%, var(--brand-700) 55%, #00508c 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 6px 24px -12px rgba(0, 31, 56, .6);
    z-index: 1000;
}
.page-content .header-content {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    height: var(--header-h);
}
.page-content .home-link {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border-radius: 11px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.page-content .home-link svg { width: 22px; height: 22px; }
.page-content .home-link:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .28);
    transform: translateY(-1px);
}
.page-content .header-title {
    min-width: 0;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.page-content .header-title:hover {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .4);
    text-underline-offset: 5px;
}

/* Barra di avanzamento lettura (creata da script.js dentro l'header) */
.reading-progress {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-400), var(--green));
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

/* Hamburger (visibile solo su mobile) */
.page-content .menu-toggle {
    display: none;
    margin-left: auto; /* Spinge l'hamburger a destra */
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    font-size: 1.45rem;
    line-height: 1;
    color: #ffffff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 11px;
    cursor: pointer;
    transition: background-color .2s ease;
}
.page-content .menu-toggle:hover { background: rgba(255, 255, 255, .16); }

/* ---------------- Ricerca (header) ---------------- */
.search-container {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: auto; /* Spinge a destra, ma prima del menu mobile */
    padding: 5px 6px 5px 14px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.search-container:focus-within {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .38);
    box-shadow: 0 0 0 3px rgba(47, 143, 209, .35);
}

.search-label {
    display: none !important;
    align-items: center;
    height: 100%;
    color: rgba(255, 255, 255, .78);
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
    margin-right: 12px;
    padding-right: 12px;
    border-right: 1px solid rgba(255, 255, 255, .25);
}
@media (max-width: 1100px) {
    .search-label { display: none; }
}

.search-container input {
    width: 170px;
    padding: 4px 0 4px 24px;
    color: #ffffff;
    font: inherit;
    font-size: .92rem;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat left center / 15px;
    border: none;
    outline: none;
}
.search-container input::placeholder { color: rgba(255, 255, 255, .55); }

#searchCounter {
    min-width: 42px;
    margin: 0 4px 0 8px;
    font-family: var(--font-mono);
    font-size: .75rem;
    color: rgba(255, 255, 255, .8);
    text-align: center;
    font-variant-numeric: tabular-nums; /* Evita che i numeri saltino */
}

.search-nav { display: flex; gap: 2px; }
.search-container:not(.is-active) #searchCounter,
.search-container:not(.is-active) .search-nav { display: none; }
.search-nav button {
    width: 26px;
    height: 26px;
    padding: 0;
    color: #ffffff;
    font-size: .68rem;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .2s ease;
}
.search-nav button:hover { background: rgba(255, 255, 255, .18); }

/* Testo evidenziato dalla ricerca */
mark.highlight {
    background-color: #fde68a;
    color: #111;
    padding: 0 2px;
    border-radius: 3px;
}
mark.highlight.active {
    background-color: #f97316;
    color: #ffffff;
    font-weight: bold;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .25);
}

/* ---------------- Navigazione mobile (nascosta su desktop) ---------------- */
.page-content .mobile-nav {
    display: none;
    position: fixed;
    top: var(--header-h); left: 0; width: 100%;
    background-color: #ffffff;
    box-shadow: var(--shadow-md);
    z-index: 999;
    overflow-y: auto;
    max-height: calc(100vh - var(--header-h));
}
.page-content .mobile-nav.open { display: block; }
.page-content .mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.page-content .mobile-nav li { text-align: left; margin-bottom: 0; }

/* ---------------- Layout: sidebar + contenuto ---------------- */
.page-content .page-container {
    display: flex;
    justify-content: center;
    max-width: 1400px;
    margin: 2em auto 3em;
    padding: 0 1.5em;
}
.page-content .sidebar-nav {
    width: 280px;
    flex-shrink: 0;
    margin-right: 2em;
}
.page-content .sidebar-nav nav {
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding: .8em .55em;
    font-size: .92em;
    line-height: 1.5;
    background: var(--paper-0);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.page-content .sidebar-nav nav::-webkit-scrollbar { width: 6px; }
.page-content .sidebar-nav nav::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

.page-content .sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.page-content .sidebar-nav > nav > ul > li { margin-bottom: 2px; }

/* Contenuto "Card" */
.page-content main {
    max-width: 900px;
    margin: 0;
    padding: 2.6em 3em 3em;
    text-align: left;
    flex-grow: 1;
    min-width: 0;
    background: var(--paper-0);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* ---------------- Tipografia ---------------- */
.page-content .contenuto { width: 100%; }

.page-content h1 {
    font-size: 2.35rem;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--ink);
    margin: 0 0 .35em;
}
/* Etichetta sopra il titolo: il nome del corso (messo da script.js), "Appunti" se manca */
.page-content main > h1:first-child::before {
    content: "Appunti";
    display: block;
    margin-bottom: .7em;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--brand-600);
}
.page-content main > h1[data-corso]:first-child::before { content: attr(data-corso); }

.page-content h2 {
    font-size: 1.7rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--brand-700);
    margin: 1.6em 0 .8em;
}
/* Sottotitolo subito sotto l'H1 */
.page-content main > h1 + h2 {
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--muted);
    margin: 0 0 1.8em;
    padding-bottom: 1.2em;
    border-bottom: 1px solid var(--line);
}

.page-content h3 {
    position: relative;
    font-size: 1.55rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--ink);
    margin: 2.4em 0 1em;
    padding-bottom: .55em;
    border-bottom: 1px solid var(--line);
}
.page-content h3::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--brand-600), var(--green));
}

.page-content h4 {
    font-size: 1.22rem;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -.005em;
    color: var(--brand-600);
    margin: 2em 0 .7em;
}
.page-content h5 {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--ink-soft);
    margin: 1.6em 0 .5em;
}

.page-content a { color: var(--brand-600); text-underline-offset: 3px; }

/* Liste */
.page-content .contenuto ul,
.page-content .contenuto ol {
    text-align: left;
    margin: 1em 0;
    padding-left: 2em;
    list-style-position: outside;
}
.page-content .contenuto ul > li::marker { color: var(--brand-400); }
.page-content .contenuto ol > li::marker { color: var(--brand-600); font-weight: 700; }
.page-content p + ul, .page-content p + ol { margin-top: .5em; }
.page-content li { text-align: left; margin-bottom: .5em; }

.page-content hr {
    margin: 2.8em 0;
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong) 15%, var(--line-strong) 85%, transparent);
}

.page-content mark {
    background-color: #fef08a;
    padding: 1px 4px;
    border-radius: 4px;
}

/* ---------------- Box: formula e nota bene ---------------- */
.page-content .formula {
    font-family: var(--font-mono);
    font-size: 1em;
    color: var(--brand-700);
    width: 100%;
    margin: 1.6em 0;
    padding: 1.2em 1.4em;
    background: #f5f9fd;
    border: 1px solid var(--brand-100);
    border-left: 4px solid var(--brand-600);
    border-radius: 12px;
    overflow-x: auto;
}

.page-content .nota-bene {
    color: #4d4018;
    margin: 1.8em 0;
    padding: 1em 1.3em;
    background: #fffbeb;
    border: 1px solid #fbe7b0;
    border-left: 4px solid var(--amber);
    border-radius: 12px;
}
.page-content .nota-bene > :first-child { margin-top: 0; }
.page-content .nota-bene > :last-child { margin-bottom: 0; }

/* Riquadro neutro: sostituisce i vecchi box scuri a contrasto basso */
.page-content .language-box {
    margin: 1.6em 0;
    padding: 1.2em 1.4em;
    color: var(--text);
    background: #f6f8fb;
    border: 1px solid var(--line);
    border-radius: 14px;
}
.page-content .language-box > :first-child { margin-top: 0; }
.page-content .language-box > :last-child { margin-bottom: 0; }
.page-content .chip {
    padding: .05em .45em;
    font-weight: 600;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
}

/* ---------------- Codice ---------------- */
.page-content pre {
    width: 100%;
    margin: 0;
    padding: 1.2em;
    background-color: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow-x: auto;
}
.page-content code {
    font-family: var(--font-mono);
    font-size: .9rem;
    line-height: 1.7;
    color: #1f2937;
}

/* Blocchi di codice con barra "finestra" */
.page-content .code-container {
    position: relative;
    width: 100%;
    margin: 1.6em 0;
    background: #101a2e;
    border: 1px solid #22304d;
    border-radius: 12px;
    box-shadow: 0 14px 30px -20px rgba(15, 23, 42, .5);
    overflow: hidden;
}
.page-content .code-container::before {
    content: "";
    display: block;
    height: 36px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background:
        radial-gradient(circle at 17px 18px, #f87171 4.5px, transparent 5px),
        radial-gradient(circle at 33px 18px, #fbbf24 4.5px, transparent 5px),
        radial-gradient(circle at 49px 18px, #34d399 4.5px, transparent 5px),
        #17233d;
}
.page-content .code-container pre {
    margin: 0;
    width: 100%;
    padding: 1.1em 1.3em;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.page-content .code-container pre code,
.page-content .code-container code { color: #dbe4f0; }
.page-content .code-container pre::-webkit-scrollbar { height: 8px; }
.page-content .code-container pre::-webkit-scrollbar-thumb { background: #33415c; border-radius: 4px; }

/* Syntax highlighting: tavolozza chiara per i <pre> fuori dai blocchi
   (tabelle, note, output), tavolozza scura dentro i blocchi terminale */
.page-content pre code .com { color: #187a40; font-style: italic; }
.page-content pre code .key { color: #1d4ed8; font-weight: 600; }
.page-content pre code .typ { color: #0e7490; }
.page-content pre code .str { color: #b42318; }
.page-content pre code .num { color: #be185d; }
.page-content .code-container pre code .com { color: #7fbf9a; }
.page-content .code-container pre code .key { color: #8ab4ff; }
.page-content .code-container pre code .typ { color: #5fd8e8; }
.page-content .code-container pre code .str { color: #f7a7a0; }
.page-content .code-container pre code .num { color: #efa6e6; }

/* Codice in linea */
.page-content :not(pre) > code {
    font-family: var(--font-mono);
    font-size: .86em;
    color: var(--brand-700);
    background-color: var(--brand-50);
    border: 1px solid var(--brand-100);
    padding: .1em .4em;
    border-radius: 6px;
}

/* Bottone Copia (aggiunto da script.js, siede nella barra del blocco) */
.page-content .copy-btn {
    position: absolute;
    top: 6px; right: 8px;
    z-index: 10;
    padding: 2px 10px;
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.7;
    color: #b9c6d9;
    background-color: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 7px;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.page-content .copy-btn:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .3);
}
.page-content .copy-btn.copied {
    color: #0f172a;
    background-color: #6ee7a8;
    border-color: #6ee7a8;
}

/* ---------------- Tabelle ---------------- */
.table-scroll-container {
    width: 100%;
    overflow-x: auto;
    margin: 1.6em 0;
    background: var(--paper-0);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
}
.table-scroll-container table { border-style: hidden; } /* niente doppio bordo esterno */

.page-content table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: .94em;
}
.page-content th,
.page-content td {
    border: 1px solid var(--line);
    padding: 10px 14px;
    text-align: left;
}
.page-content th {
    background-color: var(--brand-50);
    color: var(--brand-700);
    font-weight: 700;
}
.page-content tr:nth-child(even) { background-color: #fafbfd; }
.page-content tbody tr:hover { background-color: #f3f7fc; }

/* ================================================ */
/* 3. MENU LATERALE: ACCORDION + SCROLLSPY + SPILLO */
/* ================================================ */

/* --- A. Link base --- */
.sidebar-nav li > a,
.mobile-nav li > a {
    position: relative;
    display: block;
    text-decoration: none;
    color: var(--ink-soft);
    /* 32px a sinistra (spazio freccia), 40px a destra (spazio spillo) */
    padding: 7px 40px 7px 32px;
    border-radius: 9px;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.sidebar-nav > nav > ul > li > a,
.mobile-nav > ul > li > a { font-weight: 600; }

.sidebar-nav li > a:hover,
.mobile-nav li > a:hover {
    color: var(--brand-600);
    background-color: var(--brand-50);
}

/* Sottomenu: rientrati, con filo verticale */
.page-content .sidebar-nav li > ul,
.page-content .mobile-nav li > ul {
    margin: 2px 0 8px 20px;
    padding-left: 0;
    border-left: 1px solid var(--line);
}
.sidebar-nav li > ul a,
.mobile-nav li > ul a {
    font-size: .95em;
    font-weight: 400;
    color: var(--muted);
    padding-left: 16px;
    border-radius: 0 9px 9px 0;
    margin-left: -1px;
    box-shadow: inset 2px 0 0 transparent;
}

/* Sottomenu chiusi di default: lo stato lo gestisce script.js;
   se il padre nasce con la classe .open il sottomenu parte aperto. */
.page-content .sidebar-nav > nav > ul > li > ul,
.page-content .mobile-nav .has-submenu > ul { display: none; }
.page-content .sidebar-nav li.has-submenu.open > ul,
.page-content .mobile-nav li.has-submenu.open > ul { display: block; }

/* --- B. Freccia a sinistra (solo voci con sottomenu) --- */
li.has-submenu > a::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-style: solid;
    border-color: var(--subtle);
    border-width: 0 1.8px 1.8px 0;
    transform: translateY(-50%) rotate(-45deg);
    transition: transform .2s ease, border-color .2s ease;
    z-index: 2;
}
li.has-submenu.open > a::before {
    transform: translateY(-70%) rotate(45deg);
    border-color: var(--brand-600);
}

/* --- C. Stato ATTIVO (scrollspy) --- */
.sidebar-nav > nav > ul > li > a.active {
    color: var(--brand-700);
    font-weight: 700;
    background-color: var(--brand-50);
    box-shadow: inset 3px 0 0 var(--brand-600);
}
.sidebar-nav ul ul li a.active,
.mobile-nav ul ul li a.active {
    color: var(--brand-600);
    font-weight: 600;
    background-color: var(--brand-50);
    box-shadow: inset 2px 0 0 var(--brand-600);
}
/* Il padre di un figlio attivo resta "acceso" ma senza sfondo */
.sidebar-nav li.has-submenu:has(ul li a.active) > a {
    color: var(--brand-700);
    background-color: transparent;
}
.sidebar-nav li.has-submenu:has(ul li a.active) > a::before { border-color: var(--brand-600); }

/* --- D. Bottone Evidenzia (spillo a destra) --- */
.highlight-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    padding: 2px 6px;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    filter: grayscale(1);
    opacity: 0;
    transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
li > a:hover > .highlight-btn,
li > a:focus-visible > .highlight-btn { opacity: .6; }
@media (hover: none) { .highlight-btn { opacity: .35; } }
.highlight-btn:hover {
    opacity: 1;
    filter: none;
    transform: translateY(-50%) scale(1.15);
}
.highlight-btn.active { opacity: 1; filter: none; }

/* --- E. Voci segnate per il ripasso --- */
.page-content .sidebar-nav li.highlight > a,
.page-content .mobile-nav li.highlight > a {
    background-color: #fef6d8;
    color: #b42318;
    box-shadow: inset 3px 0 0 #ef4444;
}
/* Genitore con figli evidenziati -> solo testo e filo rosso */
.page-content .sidebar-nav li.has-highlighted-child:not(.highlight) > a,
.page-content .mobile-nav li.has-highlighted-child:not(.highlight) > a {
    background-color: transparent;
    color: #b42318;
    box-shadow: inset 3px 0 0 #fca5a5;
}
.page-content .sidebar-nav li.highlight > a::before,
.page-content .sidebar-nav li.has-highlighted-child > a::before,
.page-content .mobile-nav li.highlight > a::before,
.page-content .mobile-nav li.has-highlighted-child > a::before {
    border-color: #b42318;
}

/* ================================================ */
/* 4. BOTTONE TORNA SU (GLOBALE)                    */
/* ================================================ */
#back-to-top {
    display: none;
    position: fixed;
    bottom: 28px; right: 28px;
    z-index: 9999;
    width: 48px;
    height: 48px;
    color: #ffffff;
    font-size: 1.3rem;
    line-height: 1;
    background: linear-gradient(145deg, var(--brand-500), var(--brand-700));
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 10px 24px -8px rgba(0, 61, 107, .55);
    opacity: 0;
    transition: opacity .3s ease, transform .25s ease, box-shadow .25s ease;
}
#back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -8px rgba(0, 61, 107, .6);
}

/* ================================================ */
/* 5. FOOTER                                        */
/* ================================================ */
.site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    padding: 2.6rem 1.5rem 2.2rem;
    text-align: center;
    color: var(--muted);
    font-size: .95rem;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 90, 156, .03) 100%);
    border-top: 1px solid var(--line);
}
.site-footer p { margin: 0; text-align: center; }

.footer-content {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.footer-brand { font-size: 1.1rem; color: var(--brand-700); }
.footer-brand strong { font-weight: 800; }
.footer-brand span { color: var(--muted); font-weight: 400; }
.footer-desc { color: var(--muted); font-size: .9rem; margin: 0; }

/* ================================================ */
/* 6. MOBILE                                        */
/* ================================================ */
@media (max-width: 768px) {
    :root { --header-h: 104px; }

    /* La ricerca prima spariva del tutto: ora scende su una seconda riga,
       che e' il motivo per cui l'header qui e' piu' alto. */
    .page-content .header-content {
        flex-wrap: wrap;
        align-content: center;
        row-gap: 7px;
        padding: 0 14px;
    }
    .page-content .header-title {
        flex: 1 1 0;            /* base 0: un titolo lungo non manda a capo il menu */
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .search-container {
        order: 3;
        flex: 1 0 100%;
        margin-left: 0;
        padding: 5px 6px 5px 12px;
    }
    .search-container input { flex: 1 1 auto; width: auto; min-width: 0; }

    .page-content { font-size: 1.03rem; }
    .page-content .header-content { padding: 0 14px; gap: 10px; }
    .page-content .home-link { width: 38px; height: 38px; }
    .page-content .header-title { font-size: 1.02rem; }

    .page-content .page-container { padding: 0; margin: 0; }
    .page-content .sidebar-nav { display: none; } /* Nascondi sidebar */
    .page-content main {
        max-width: 100%;
        margin: 0;
        padding: 1.8em 1.2em 2.4em;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .page-content h1 { font-size: 1.9rem; }
    .page-content h2 { font-size: 1.45rem; }
    .page-content main > h1 + h2 { font-size: 1.15rem; }
    .page-content h3 { font-size: 1.35rem; }
    .page-content h4 { font-size: 1.12rem; }

    /* Codice e tabelle 100% */
    .page-content .code-container,
    .page-content .formula,
    .page-content table { width: 100%; }
    .page-content .code-container pre { padding: 1em; }

    /* Menu Hamburger: pannello che scorre da sinistra */
    .page-content .menu-toggle { display: block; }
    .page-content .mobile-nav {
        display: block; /* Esiste nel DOM */
        position: fixed;
        top: var(--header-h); left: 0;
        width: min(300px, 86vw);
        height: calc(100vh - var(--header-h));
        max-height: none;
        padding: .8em .6em 2em;
        background-color: #ffffff;
        border-right: 1px solid var(--line);
        box-shadow: 18px 0 40px -20px rgba(15, 23, 42, .35);
        z-index: 1001;
        overflow-y: auto;
        transform: translateX(-105%); /* Nascosto */
        transition: transform .3s ease-in-out;
    }
    .page-content .mobile-nav.open { transform: translateX(0); }
    .page-content .mobile-nav li > a { padding-top: 10px; padding-bottom: 10px; }

    /* Lo spillo resta visibile anche senza hover */
    .mobile-nav .highlight-btn { opacity: .45; }

    #back-to-top { bottom: 16px; right: 16px; width: 44px; height: 44px; font-size: 1.2rem; }
}

/* ================================================ */
/* 7. STAMPA                                        */
/* ================================================ */
@media print {
    .page-content { padding-top: 0; background: #fff; }
    .page-content .main-header,
    .page-content .sidebar-nav,
    .page-content .mobile-nav,
    .reading-progress,
    .module-nav,
    #back-to-top,
    .copy-btn { display: none !important; }
    .page-content .page-container { display: block; margin: 0; padding: 0; }
    .page-content main { max-width: none; padding: 0; border: 0; box-shadow: none; }

    /* Su carta il nero pieno costa inchiostro e si legge peggio */
    .page-content pre,
    .page-content pre code {
        color: #111827 !important;
        background: #f6f7f9 !important;
        border: 1px solid #d7dce3 !important;
    }
    mark.highlight { background: none !important; color: inherit !important; }

    /* Niente titoli orfani a fine pagina, niente riquadri spezzati a meta' */
    .page-content h2,
    .page-content h3 { break-after: avoid-page; page-break-after: avoid; }
    .page-content pre,
    .page-content table,
    .page-content figure,
    .page-content .esempio-box,
    .page-content .prop-card,
    .page-content .nota-box,
    .page-content .guarantee-card { break-inside: avoid; page-break-inside: avoid; }

    /* I link diventano inutili su carta: stampa l'indirizzo solo se esterno */
    .page-content a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: .8em;
        color: #555;
    }
}

/* ================================================ */
/* 8. NAVIGAZIONE FRA I MODULI (fondo pagina)       */
/* ================================================ */
.page-content .module-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
    margin: 3.2em 0 .5em;
    padding-top: 1.8em;
    border-top: 1px solid var(--line);
}
.page-content .mn-link {
    display: flex;
    flex-direction: column;
    gap: .2em;
    min-width: 0;
    padding: .9em 1.1em;
    text-decoration: none;
    background: var(--paper-0);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.page-content .mn-link:hover {
    border-color: var(--brand-400);
    box-shadow: var(--shadow-md);
}
.page-content .mn-prev:hover { transform: translateX(-3px); }
.page-content .mn-next:hover { transform: translateX(3px); }
.page-content .mn-next { align-items: flex-end; text-align: right; }
.page-content .mn-dir {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .03em;
    color: var(--muted);
}
.page-content .mn-nome {
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}
.page-content .mn-menu {
    align-self: center;
    padding: .6em 1.1em;
    font-size: .84rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: var(--brand-700);
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: 999px;
    transition: background-color .2s ease, color .2s ease;
}
.page-content .mn-menu:hover { color: #fff; background: var(--brand-600); }
.page-content .mn-vuoto { display: block; }

@media (max-width: 768px) {
    .page-content .module-nav {
        grid-template-columns: minmax(0, 1fr);
        margin: 2.4em 0 .5em;
    }
    .page-content .mn-next { align-items: flex-start; text-align: left; }
    .page-content .mn-vuoto { display: none; }
}

/* ================================================ */
/* 9. BLOCCHI DIDATTICI (pagine di contenuto)       */
/* ================================================ */
.page-content [data-accent="blu"]    { --acc: #2563eb; --acc-soft: #f3f8ff; }
.page-content [data-accent="verde"]  { --acc: #0b7a60; --acc-soft: #f1fdf8; }
.page-content [data-accent="ambra"]  { --acc: #b45309; --acc-soft: #fffbf2; }
.page-content [data-accent="rosso"]  { --acc: #b42318; --acc-soft: #fff6f6; }
.page-content [data-accent="viola"]  { --acc: #6d28d9; --acc-soft: #f8f6ff; }
.page-content [data-accent="neutro"] { --acc: #475569; --acc-soft: #f8fafc; }

/* Schede con accento: definizioni, garanzie, esempi */
.page-content .guarantee-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .9em;
    margin: 1.5em 0;
}

.page-content .guarantee-card,
.page-content .esempio-box,
.page-content .prop-card {
    --acc: var(--brand-600);
    --acc-soft: var(--brand-50);
    padding: 1em 1.2em;
    background: var(--acc-soft);
    border: 1px solid var(--line);
    border-left: 4px solid var(--acc);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
}
.page-content .esempio-box { margin: 1.5em 0; }

.page-content .guarantee-card > b:first-child,
.page-content .guarantee-card > strong:first-child,
.page-content .esempio-box > b:first-child,
.page-content .esempio-box > strong:first-child {
    display: block;
    margin-bottom: .35em;
    font-size: 1.02rem;
    color: var(--acc);
}
.page-content .guarantee-card > :first-child,
.page-content .esempio-box > :first-child,
.page-content .prop-card > :first-child { margin-top: 0; }
.page-content .guarantee-card > :last-child,
.page-content .esempio-box > :last-child,
.page-content .prop-card > :last-child { margin-bottom: 0; }
.page-content .guarantee-card p,
.page-content .esempio-box p { margin: 0 0 .5em; }

/* Riquadro tratteggiato per le annotazioni */
.page-content .nota-box {
    --acc: var(--brand-600);
    --acc-soft: var(--brand-50);
    margin: 1.7em 0;
    padding: 1em 1.2em;
    background: var(--acc-soft);
    border: 1px dashed var(--acc);
    border-radius: 12px;
}
.page-content .nota-box > :first-child { margin-top: 0; }
.page-content .nota-box > :last-child { margin-bottom: 0; }

/* Griglie di proprietà */
.page-content .prop-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .9em;
    margin: 1.5em 0;
}
.page-content .prop-grid[data-cols="2"] {
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.page-content .guarantee-card,
.page-content .prop-card,
.page-content .esempio-box { min-width: 0; }
.page-content .prop-card b:first-child,
.page-content .prop-card strong:first-child { color: var(--acc); }

/* Intestazioni di sezione con icona */
.page-content .icon-header { margin-top: 2.8em; }
.page-content .icon-header:first-child { margin-top: 0; }
.page-content .icon-header h3,
.page-content .icon-header h4 { margin-top: 0; }

/* Contenitori dei widget interattivi (ordinamenti, grafi, alberi) */
.page-content .algo-widget {
    margin: 1.9em 0;
    padding: 1.4em 1.3em;
    background: var(--paper-0);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
}

/* Blocco di testo "accademico": stacco tipografico dal resto */
.page-content .text-block-academic {
    margin: 1.6em 0;
    padding-left: 1.1em;
    border-left: 3px solid var(--line-strong);
    color: var(--muted);
}

@media (max-width: 768px) {
    .page-content .algo-widget { padding: 1em .9em; border-radius: 12px; }
    .page-content .prop-grid[data-cols="2"] { grid-template-columns: 1fr; }
}