/* =======================================================================
   SKIN «DOCUMENTO» SUL SITO PUBBLICO
   -----------------------------------------------------------------------
   Il CV di agosto 2026 ha fissato una voce che regge meglio la lettura di
   quella cartoon: Inter per il corpo, Space Grotesk per i titoli, navy piatto
   come superficie scura, ambra come segno di evidenza. Questo foglio la porta
   sulle pagine pubbliche.

   NON e' un secondo design system. I token stanno gia' in foolab-tokens.css
   (blocco «SKIN DOCUMENTO», commit 0f638cd3): qui vengono solo RILEGATI ai
   token che le pagine usano davvero. Per tornare indietro basta non caricare
   questo file.

   REGOLA CHE NON SI TOCCA: il marchio resta Kg Happy. La parola «Footility»,
   il «{F}» e il titolo hero non cambiano font — e' l'unico elemento di
   identita' che precede il restyle. Tutte le regole qui sotto escludono
   .foo-font e i selettori del marchio.
   ======================================================================= */

@import url('/css/cv-doc-fonts.css');

:root {
    /* Tipografia: il corpo diventa di lettura, i titoli prendono carattere.
       --fl-font-brand resta intatto: e' il marchio. */
    --fl-font-body: 'Inter', system-ui, sans-serif;
    --fl-font-display: 'Space Grotesk', system-ui, sans-serif;

    /* Palette: l'inchiostro va sul navy del documento, il giallo cartoon
       diventa l'ambra dell'evidenza. Gli altri colori restano dove sono,
       perche' il colore distingue e non decora. */
    --fl-ink: #141d2c;
    --fl-line: #dfe5ee;
    --fl-bg: #fffdfa;
    --fl-panel: #ffffff;
    --fl-yellow: #f2a33c;
    --fl-green: #2e9e6b;
    --fl-tint-yellow: #fff4e3;
    --fl-tint-green: #e6f4ec;

    --doc-muted: #57647a;
    --doc-muted2: #8d9aac;
    --doc-accent: #f2a33c;
    --doc-accent-d: #d9861a;
}

/* ---- Corpo -------------------------------------------------------------
   Bootstrap scrive font-family sul body con la sua variabile: senza questo
   il token nuovo non arriva a nessuno. */
body {
    font-family: var(--fl-font-body);
    color: var(--fl-ink);
    -webkit-font-smoothing: antialiased;
}

/* guest.css apre con `*{font-family:"Kg Happy Solid"}`: il font del MARCHIO
   scritto addosso a ogni elemento della pagina. E' la ragione vera per cui il
   sito suonava cartoon anche dopo aver cambiato i token — l'ereditarieta' non
   arrivava da nessuna parte, ogni nodo aveva la sua dichiarazione.

   Qui la catena viene riaperta: `body *` batte `*` per specificita' e rimette
   tutto a ereditare. Le regole di marca restano intatte perche' sono basate su
   classe (.foo-font, .foo-title>*, .happy-font...) e per specificita' vincono
   su questa. Le regole dei titoli qui sotto vengono DOPO apposta. */
body * {
    font-family: inherit;
}

/* ---- Titoli ------------------------------------------------------------
   Space Grotesk ovunque TRANNE dove c'e' il marchio: .foo-font e i titoli
   hero restano Kg Happy. */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--fl-font-display);
    letter-spacing: -0.01em;
}

.foo-font,
h1 .foo-font, h2 .foo-font, h3 .foo-font,
[class*="brand"] .foo-font {
    font-family: 'Kg Happy', cursive !important;
    font-weight: 400 !important;   /* un solo peso: il bold sintetico sporca il marchio */
    letter-spacing: normal;
}

/* ---- Superfici ---------------------------------------------------------
   Card e pannelli: bordo sottile chiaro invece del nero pieno, ombra piatta.
   Niente gradienti, e' regola dei token. */
.card, .fl-card, .flc-card, .foolab-card {
    background: var(--fl-panel);
    border-color: var(--fl-line);
    box-shadow: 0 1px 0 rgba(20, 29, 44, .04), 0 8px 22px rgba(20, 29, 44, .06);
}

/* ---- Evidenza ----------------------------------------------------------
   L'ambra come evidenziatore: dice "leggi questo" meglio del grassetto e
   regge anche in bianco e nero. Stesso tratto del CV. */
.doc-mark {
    background-image: linear-gradient(180deg,
        rgba(242, 163, 60, 0) 52%, rgba(242, 163, 60, .42) 52%,
        rgba(242, 163, 60, .42) 93%, rgba(242, 163, 60, 0) 93%);
    padding: 0 .1em;
}

/* ---- Divisori ----------------------------------------------------------
   Il tratteggio del CV al posto della riga piena: separa senza tagliare. */
hr, .fl-divider, .section-divider {
    border: 0;
    border-top: 1px dashed var(--fl-line);
    opacity: 1;
}

/* ---- Badge e pill ------------------------------------------------------ */
.badge, .fl-badge, .flc-chip, .fl-chip, .fl-pill {
    font-family: var(--fl-font-body);
    font-weight: 600;
    letter-spacing: .01em;
}

/* ---- Superficie scura -------------------------------------------------- */
.fl-dark, .foolab-dark, footer.fl-footer, .bg-dark {
    background: var(--fl-surface-navy, #16253c) !important;
    background-image: none !important;   /* niente gradienti */
}

/* ---- Testo secondario -------------------------------------------------- */
.text-muted, .fl-muted {
    color: var(--doc-muted) !important;
}

/* ---- Link -------------------------------------------------------------- */
a:not(.btn):not(.nav-link):hover {
    text-decoration-color: var(--doc-accent);
}

/* =======================================================================
   FINITURE DEL CV SUL SITO
   Palette e tipografia da sole non bastano a far somigliare le due cose:
   quello che si riconosce del CV sono i SEGNI — l'ondina sotto i titoli di
   sezione, il tratteggio, il binario verticale della timeline.
   ======================================================================= */

/* ---- Ondina sotto il titolo di sezione ---------------------------------
   Stesso tratto del CV (h2 .sq): una riga dritta separa, questa accompagna.
   E' un SVG in data URI perche' deve stare in un foglio solo, senza toccare
   le blade. */
.flh-title::after,
.fl-section-title::after {
    content: "";
    display: block;
    height: 6px;
    margin-top: .45rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6' preserveAspectRatio='none'%3E%3Cpath d='M0 4 C25 1 50 6 75 3 C100 0 125 5 150 2 C170 0 185 4 200 2' fill='none' stroke='%23F2A33C' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    max-width: 22rem;
}

/* ---- Binario verticale tratteggiato ------------------------------------
   Nel CV tiene insieme le esperienze; qui gli elenchi di passi. */
.flh-steps, .fl-timeline, .flh-process-list {
    position: relative;
    padding-left: 1.4rem;
}
.flh-steps::before, .fl-timeline::before, .flh-process-list::before {
    content: "";
    position: absolute;
    left: .35rem; top: .4rem; bottom: .4rem;
    border-left: 1.5px dashed var(--doc-accent);
    opacity: .55;
}

/* ---- Hero su mobile ----------------------------------------------------
   «{FOO}tility.com» e' una parola sola di quindici caratteri: sotto i 640px
   il minimo del clamp (3.2rem) la faceva sfondare a destra invece di
   rimpicciolirsi. Qui la dimensione segue la larghezza vera del viewport. */
/* ---- La firma sotto il marchio -----------------------------------------
   «di Mistretta Paolo» e' una firma, non un secondo titolo: era grande quasi
   quanto il marchio e si prendeva la scena. Serve che resti — chi cerca il
   nome deve trovare il sito — ma sottovoce. */
.flh-hero-by {
    font-size: clamp(.9rem, 1.1vw, 1.05rem);
    opacity: .62;
    letter-spacing: .02em;
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
}

@media (max-width: 640px) {
    /* Centrare il solo marchio lo faceva sembrare disallineato rispetto al
       resto dell'hero, che e' allineato a sinistra: sbagliato il rimedio, non
       il problema. Il marchio resta a sinistra come tutto il resto e si
       rimpicciolisce quanto basta a starci dentro con i suoi margini. */
    .flh-hero-title {
        text-align: left;
    }
    .flh-hero-name {
        font-size: min(7.8vw, 3.2rem);
        letter-spacing: 0;
    }
    .flh-hero-by {
        /* block farebbe correre la sottolineatura fino al bordo destro:
           la firma deve essere lunga quanto il testo */
        display: inline-block;
        width: fit-content;
        margin-top: .45rem;
        font-size: 12px;
        opacity: .5;
        text-decoration: none;
        border-bottom: 1px dashed currentColor;
        padding-bottom: 1px;
    }

    /* lo sticker dell'occhiello va a capo su due righe: la rotazione lo fa
       uscire dal margine, meglio dritto quando e' lungo */
    .flh-eyebrow {
        transform: none;
        line-height: 1.35;
    }
    .flh-title::after { max-width: 100%; }

    /* ---- Header su mobile ----------------------------------------------
       Il menu andava a tre righe di pulsanti da 14px con i divisori in mezzo:
       tanto ingombro per qualcosa che si leggeva male. Marchio piu' grande,
       etichette piu' grandi, via i divisori — a capo ci vanno gia' i pulsanti. */
    .public-brand-mark { font-size: 34px; }
    .public-nav-divider { display: none; }
    .public-nav-menu { gap: 6px; }
    /* guest.css imposta html{font-size:12px}: tutte le misure in rem del
       chrome escono di un terzo piu' piccole del previsto, ed e' il motivo
       per cui il menu si legge male sul telefono. Qui le etichette tornano a
       una dimensione da dito, in px per non dipendere da quel root.
       Specificita' allineata a .public-navbar--foolab, che altrimenti vince. */
    .public-navbar--foolab a.public-nav-btn,
    .public-navbar--foolab a.public-nav-btn:visited,
    a.public-nav-btn,
    a.public-nav-btn:visited {
        font-size: 15px;
        padding: 9px 14px;
        letter-spacing: .3px;
    }
}

/* ---- Cambio lingua ------------------------------------------------------
   Tre sigle, non tre bandiere: una bandiera indica un paese, non una lingua,
   e lo spagnolo non e' della Spagna piu' di quanto l'inglese sia dell'UK. */
.public-lang {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 10px;
    padding: 2px;
    border: 1px solid var(--fl-line, #dfe5ee);
    border-radius: 99px;
    background: #fff;
}
.public-lang-btn {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--doc-muted, #57647a) !important;
    text-decoration: none;
    border-bottom: 0;
    line-height: 1;
}
.public-lang-btn.is-active {
    background: var(--fl-ink, #141d2c);
    color: #fff !important;
}
.public-lang-btn:hover:not(.is-active) {
    background: var(--fl-tint-yellow, #fff4e3);
    color: var(--fl-ink, #141d2c) !important;
}