/* ==========================================================================
   CB FOOTER — foglio del footer, caricato su TUTTE le pagine del sito
   (design system: stessi colori, font e componenti di cb-design-system.css)

   COME FUNZIONA
   - Il footer è un unico blocco "HTML personalizzato" nell'area widget del footer di Woostify
     (<footer class="cb-footer"> … </footer>, file footer-woostify__nuovo.html).
   - Questo foglio si carica ovunque (snippet in Code Snippets), mentre cb-design-system.css
     per ora si carica solo sulle pagine di test. Per questo qui non si usa nessun token del
     design system senza un valore di riserva: dove il design system c'è vince lui, dove non c'è
     valgono i valori scritti qui (sono gli stessi).
   - Unità: em, % e clamp. La base è la dimensione del testo della pagina (16px sulle vecchie
     pagine, 16-17px su quelle del design system): il footer ha così la stessa resa ovunque,
     indipendentemente dai 14px che Woostify imposta sul root (1rem).
   - Il prefisso "body" serve a battere i colori e i titoli del tema.
   - Il footer di questo foglio sostituisce quello che stava nella sezione 10d di cb-design-system.css.
   ultimo aggiornamento: 13/11/2026
   ========================================================================== */

/* ---------- 1. FONT ----------
   Gli stessi file di cb-design-system.css e di style.css: il browser li scarica una volta sola.
   Così il footer ha Oswald e Inter anche sulle pagine che non caricano il design system. */
@font-face { font-display: swap; font-family: 'Oswald'; font-style: normal; font-weight: 600; src: url('../fonts/oswald-v57-latin-600.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Inter'; font-style: normal; font-weight: 400; src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Inter'; font-style: normal; font-weight: 600; src: url('../fonts/inter-v20-latin-600.woff2') format('woff2'); }

/* ---------- 2. CORNICE WOOSTIFY ----------
   Lo sfondo scuro va sull'intero footer del tema (a tutta larghezza), non solo sul blocco.
   Il :has() fa scattare la regola solo se il footer contiene il blocco cb-footer. */
body .site-footer:has(.cb-footer) {
    background: var(--cb-ink, #111111);
    border-top: 0;
}
body .site-footer:has(.cb-footer) .site-footer-widget {
    margin: 0;
    padding: 0;
}

/* ---------- 3. TOKEN LOCALI (con valori di riserva) ---------- */
.cb-footer {
    --cbf-bg: var(--cb-ink, #111111);
    --cbf-text: #c9c9ce;
    --cbf-muted: #8e8e93;
    --cbf-white: var(--cb-white, #ffffff);
    --cbf-accent: var(--cb-accent, #ff6600);
    --cbf-accent-light: #ff8a3d;
    --cbf-line: #2c2c2e;
    --cbf-font-heading: var(--cb-font-heading, 'Oswald', sans-serif);
    --cbf-font-body: var(--cb-font-body, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

/* ---------- 4. BASE ---------- */
.cb-footer {
    box-sizing: border-box;
    width: 100%;
    padding-block: clamp(2.5em, 6vw, 4em);
    background: var(--cbf-bg);
    color: var(--cbf-text);
    font-family: var(--cbf-font-body);
    font-size: .875em;
    line-height: 1.6;
    text-align: left;
}
.cb-footer *,
.cb-footer *::before,
.cb-footer *::after { box-sizing: border-box; }

/* Larghezza e margini laterali: !important perché cb-design-system.css, dove è caricato,
   imposta .cb-wrap con !important a 75rem; qui il footer deve avere la stessa larghezza su ogni pagina. */
body .cb-footer .cb-wrap {
    width: 100%;
    max-width: 86em !important;
    margin-inline: auto !important;
    padding-inline: clamp(1em, 4vw, 1.5em);
}

/* ---------- 5. GRIGLIA A COLONNE ---------- */
.cb-footer__grid {
    display: grid;
    gap: 2em;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16em), 1fr));
}

/* ---------- 6. TESTI ---------- */
body .cb-footer h3 {
    margin: 0 0 .75em;
    font-family: var(--cbf-font-heading);
    font-size: .9em;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cbf-muted);
}
body .cb-footer p {
    margin: 0 0 .5em;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}
body .cb-footer .cb-footer__name {
    font-family: var(--cbf-font-heading);
    font-size: 1.45em;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cbf-white);
}

/* ---------- 7. LINK ---------- */
body .cb-footer a {
    color: var(--cbf-white);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    transition: border-color .2s ease, color .2s ease;
}

body .cb-footer a:hover,
body .cb-footer a:focus-visible { 
    border-color: var(--cbf-accent); 
    color: var(--cbf-accent);}
body .cb-footer a:focus-visible {
    outline: 2px solid var(--cbf-accent);
    outline-offset: 3px;
}

/* ---------- 8. ICONE SOCIAL ---------- */
.cb-footer__social {
    display: flex;
    gap: .75em;
    margin-top: 1em;
}
body .cb-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.15em;
    height: 3.15em;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
}
body .cb-footer__social a:hover,
body .cb-footer__social a:focus-visible {
    border-color: var(--cbf-accent);
    color: var(--cbf-accent-light);
}
/* Senza queste misure le icone SVG si allargano a tutta la colonna */
.cb-footer__social svg {
    display: block;
    flex: none;
    width: 1.45em;
    height: 1.45em;
}

/* ---------- 9. RIGA FINALE (facoltativa: copyright, note) ---------- */
.cb-footer .cb-footer__legal {
    margin: 2.5em 0 0;
    padding-top: 1.25em;
    border-top: 1px solid var(--cbf-line);
    font-size: .93em;
    color: var(--cbf-muted);
}