/* ================================================================
   BRAND.CSS — fondamenta condivise
   Usato da: index.html (homepage) + pagine menu dei corsi
   (fdp.html, Basi_dati.html, menu_algoritmi.html).

   Contiene solo variabili, reset minimi e componenti riusati in
   più punti (eyebrow, etichette di sezione, check-list). Le pagine
   di contenuto (basi_intro.html, algoritmi.html, ecc.) NON caricano
   questo file e restano invariate.
================================================================= */

:root {
    --brand-700: #003d6b;
    --brand-600: #005a9c;
    --brand-400: #2f8fd1;
    --ink: #0f172a;
    --ink-soft: #1e293b;
    --muted: #5b6472;
    --paper: #f4f7f6;
    --paper-0: #ffffff;
    --green: #22c55e;
    --green-text: #157a3d;
    --line: #e4e8ea;
}

body.page-home {
    font-family: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif;
    position: relative;
}

/* Filo di accento in cima ad ogni pagina della "nuova generazione" */
body.page-home::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-600), var(--green));
    z-index: 1000;
}

/* Il main torna a comportarsi come un blocco normale: ogni pagina
   costruisce il proprio layout sezione per sezione. */

body.page-home main section { width: 100%; }

/* ================================================================
   REVEAL ON SCROLL (progressive enhancement)
   Senza JS o con prefers-reduced-motion: contenuto visibile subito.
================================================================= */
html.js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: var(--delay, 0s);
}
html.js [data-reveal].in-view {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    html.js [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ================================================================
   COMPONENTI CONDIVISI
================================================================= */

/* Pillola "eyebrow" in stile prompt di shell */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    font-family: 'JetBrains Mono', monospace;
    font-size: .82rem;
    font-weight: 500;
    color: var(--brand-700);
    background: rgba(0, 90, 156, .08);
    border: 1px solid rgba(0, 90, 156, .18);
    padding: .45em .9em;
    border-radius: 999px;
    white-space: nowrap;
}
.eyebrow-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
}
html.js .eyebrow-dot { animation: pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .45); }
    50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

/* Etichetta di sezione in stile commento di codice ("// ...") */
.section-eyebrow {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: .88rem;
    color: var(--green-text);
    margin-bottom: .7em;
}

.section-heading { max-width: 640px; }
.section-heading.centered { text-align: center; margin: 0 auto 2.8em; }
body.page-home .section-heading h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.2rem);
    font-weight: 800;
    color: var(--brand-700);
    margin: 0 0 .5em;
    line-height: 1.25;
}
.section-heading p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

/* Check-list a pillole: usata per "punti chiave" e caratteristiche */
.check-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .8em;
    padding: 0;
    margin: 0;
}
.check-list li {
    font-family: 'JetBrains Mono', monospace;
    font-size: .82rem;
    color: var(--brand-700);
    background: var(--paper-0);
    border: 1px solid var(--line);
    padding: .55em 1em;
    border-radius: 999px;
}
.check-list li::before {
    content: "✓ ";
    color: var(--green-text);
    font-weight: 700;
}

/* Pillole neutre per metadati (moduli, livello, ecc.) */
.meta-pill {
    display: inline-flex;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: .82rem;
    color: var(--brand-700);
    background: rgba(0, 90, 156, .06);
    border: 1px solid var(--line);
    padding: .5em 1em;
    border-radius: 999px;
}