/**
 * Footer.
 *
 * IL FOOTER E' CHIARO
 * -------------------
 * Non e' una preferenza. Quello di prima era una fascia antracite a tutta
 * larghezza: chiudeva la pagina con il contrasto piu' forte di tutto il sito,
 * proprio dove la tavola 2 mette l'ultimo respiro chiaro, e su schermo lungo
 * era l'unica cosa che si vedeva a fine scorrimento.
 *
 * LA STRUTTURA E' QUELLA DELLA TAVOLA, LA SCALA NO
 * ------------------------------------------------
 * Cinque colonne, la prima piu' larga, poi una barra legale separata da un
 * filo: e' il disegno. Ma i link della tavola stanno a 12,3 px con 15 px di
 * passo, e un elenco cosi' non si legge e non si tocca — quindici pixel sono
 * meno del bersaglio minimo. Qui i link sono 15 px con 28 di passo, i
 * titoletti 13 spaziati, e il footer respira: passa da 133 px del disegno a
 * circa 300, ed e' l'unico modo perche' faccia il suo mestiere.
 */

.st-footer {
    
    color: var(--st-charcoal);
    
}

/* Un filo di rame in cima: e' l'unico segno di colore del footer, e basta a
   dire che la pagina finisce qui invece di sfumare nel bianco. */
.st-footer::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--st-copper) 0%, #D08A4A 42%, var(--st-sand) 100%);
}

/* 23,7% al marchio, 19,1% a ciascuna delle altre quattro: sono le quote
   misurate sulla tavola. La prima colonna e' piu' larga perche' contiene un
   testo, non un elenco. */
.st-footer__main {

    
    padding-block: 56px 44px;
}

.st-footer__logo { margin: 0 0 18px; }
.st-footer__logo .st-logo { height: 80px; }  /* impilato: serve piu' aria */
.st-footer__desc {
    margin: 0 0 22px;
    max-width: 30ch;
    font-size: var(--st-fs-small, 14px);
    line-height: 1.85;
    color: var(--st-muted);
}

.st-footer__social {
     align-items: center; 
    margin: 0; padding: 0; list-style: none;
}
.st-footer__social a {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px;
    
    border: 1px solid var(--st-border-soft, #E9E5DF);
    border-radius: 50%;
    background: var(--st-white);
    transition: color var(--st-transition), border-color var(--st-transition), background var(--st-transition);
}
.st-footer__social a:hover {
    
    background: var(--st-copper);
    border-color: var(--st-copper);
}

.st-footer__title {
    
    font-family: var(--st-font-body);
    font-size: var(--st-fs-micro, 13px);
    font-weight: 700;

    
}
/* La quinta colonna non e' un elenco: «Hai bisogno di aiuto?» e' una frase, e
   nella tavola infatti non e' maiuscola. */
.st-footer__title--plain {
    font-family: var(--st-font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 16px;
}

.st-footer__list { margin: 0; padding: 0; list-style: none; }
.st-footer__list a {
    position: relative;
    display: block;
    padding: 6px 0;
    font-size: var(--st-fs-ui, 15px);
    line-height: 1.5;
    color: var(--st-muted);
    text-decoration: none;
    transition: color var(--st-transition), padding-left var(--st-transition);
}
.st-footer__list a:hover,
.st-footer__list a:focus-visible {
    color: var(--st-copper-text, var(--st-copper));
    padding-left: 10px;
}
/* Il trattino compare da sinistra al passaggio: dice quale voce e' sotto il
   puntatore senza spostare le altre e senza sottolineature che ingrossano
   l'elenco. */
.st-footer__list a::before {
    content: "";
    position: absolute; left: 0; top: 50%;
    width: 0; height: 1.5px;
    background: var(--st-copper);
    transform: translateY(-50%);
    transition: width var(--st-transition);
}
.st-footer__list a:hover::before,
.st-footer__list a:focus-visible::before { width: 6px; }

.st-footer__hours {
    margin: 0 0 22px; padding: 0; list-style: none;
    font-size: var(--st-fs-small, 14px); line-height: 2; color: var(--st-muted);
}
.st-footer__contacts { margin: 0; padding: 0; list-style: none; }
.st-footer__contacts li { margin-top: 10px; }
.st-footer__contacts a {
    display: inline-flex; align-items: center; gap: 12px;
    min-height: 44px;
    font-size: var(--st-fs-ui, 15px);
    font-weight: 500;
    color: var(--st-charcoal);
    text-decoration: none;
}
.st-footer__contacts li > .st-icon,
.st-footer__contacts .st-icon {
    color: var(--st-copper);
    flex: 0 0 auto;
}
/* L'icona sta dentro la riga, non dentro il link: il bersaglio del link resta
   il testo, e l'icona non finisce nell'etichetta letta ad alta voce. */
.st-footer__contacts li {
    display: flex; align-items: center; gap: 12px;
}
.st-footer__contacts a:hover { color: var(--st-copper-text, var(--st-copper)); text-decoration: underline; text-underline-offset: 4px; }

/* I marchi di pagamento prendono il posto delle icone social quando non ci
   sono profili confermati: stessa casella, stesso peso visivo.
   Senza queste righe l'elenco resta un elenco — sei marchi incolonnati uno per
   riga, alti 162 px — e bastava a far crescere l'intero footer di due terzi. */
.st-payments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0; padding: 0;
    list-style: none;
}
.st-payments__item { display: inline-flex; }
.st-payments__item img {
    display: block;
    height: 26px; width: auto;
    border: 1px solid var(--st-border-soft, #E9E5DF);
    border-radius: 4px;
    background: var(--st-white);
}
.st-payments__item--text {
    font-size: var(--st-fs-micro, 13px);
    color: var(--st-muted);
    padding: 5px 10px;
    background: var(--st-white);
    border: 1px solid var(--st-border-soft, #E9E5DF);
    border-radius: 4px;
}

/* --- barra legale ------------------------------------------------------ */
.st-footer__bottom {
    border-top: 1px solid var(--st-border-soft, #E9E5DF);
    background: rgba(231, 226, 218, .28);
}
.st-footer__legal {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--st-space-4);
    padding-block: 20px;

}
.st-footer__legal p { margin: 0; }
.st-footer__legal-mid {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 600;
    color: var(--st-charcoal);
    text-align: center;
}
.st-footer__legal-mid .st-icon { color: var(--st-copper); flex: 0 0 auto; }
.st-footer__legal-right {
    display: flex; align-items: center; justify-content: flex-end;
    gap: var(--st-space-3);
    text-align: right;
}
.st-footer__legal a {    }
.st-footer__legal a:hover {  }
/* Ritirare il consenso deve costare quanto darlo, anche come bersaglio. */
.st-consent-revoke {
     align-items: center; 
    background: none; border: 0; 
    font: inherit; color: inherit;
    text-decoration: underline; text-underline-offset: 3px;
    cursor: pointer;
}

/* --- tablet ------------------------------------------------------------
   Cinque colonne sotto i 1140 px diventano cinque strisce di due parole: si
   passa a due file, marchio in testa a tutta larghezza. */
@media (max-width: 1140px) {
    .st-footer__main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--st-space-5) var(--st-space-6);
        padding-block: 48px 36px;
    }
    .st-footer__brand { grid-column: 1 / -1; }
    .st-footer__desc { max-width: 46ch; }
    .st-footer__legal { grid-template-columns: 1fr; text-align: center; }
    .st-footer__legal-right { justify-content: center; text-align: center; }
}

/* Due colonne fin quasi in fondo: a una sola il footer diventava alto piu' di
   tutto il resto della pagina messo insieme. */
@media (max-width: 560px) {
    .st-footer__main { gap: var(--st-space-4) var(--st-space-4); padding-block: 40px 30px; }
    .st-footer__help { grid-column: 1 / -1; }
    .st-footer__legal { gap: 10px; }
}

@media (max-width: 380px) {
    .st-footer__main { grid-template-columns: 1fr; }
}

/* ====================================================================
 * LA FASCIA DELL'ISCRIZIONE, SOPRA IL PIEDE
 *
 * Compare solo se il marketing e' acceso: il PHP non stampa niente quando e'
 * spento, quindi qui non serve nessuna regola per nasconderla.
 *
 * Il fondo e' crema e non bianco perche' deve leggersi come una fascia a se',
 * non come la prima riga del piede: sono due cose diverse — una chiede
 * qualcosa, l'altra elenca collegamenti — e appoggiate sullo stesso fondo
 * diventano un blocco solo alto trecento pixel.
 * ==================================================================== */

.st-footer__nl {
    padding: 34px 0;
    background: var(--st-p-crema, #FAF6F1);
    border-top: 1px solid var(--st-p-riga, #EAE4DC);
    border-bottom: 1px solid var(--st-p-riga, #EAE4DC);
}

/* Sopra i 900 px il testo sta a sinistra e il modulo a destra: la fascia e'
   larga 1336 e una colonna da 520 appoggiata a sinistra lascia ottocento pixel
   vuoti, che e' lo stesso difetto gia' corretto sulle pagine di testo. */
@media (min-width: 900px) {
    .st-footer__nl .st-nl {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        align-items: center;
        column-gap: 40px;
        max-width: 1000px;
        margin-inline: auto;
    }

    /* Le righe sono dichiarate tutte e tre: lasciando che il titolo si
       collocasse da solo finiva in riga 1 mentre il testo era ancorato alla 3,
       e fra i due restava una riga vuota alta quanto il modulo. Un elemento su
       tre posizionato a mano e uno lasciato libero e' il modo tipico di
       ottenere un buco in una griglia. */
    .st-footer__nl .st-nl__esito { grid-column: 1 / -1; grid-row: 1; }
    .st-footer__nl .st-nl__titolo { grid-column: 1; grid-row: 2; margin: 0 0 6px; }
    .st-footer__nl .st-nl__sotto { grid-column: 1; grid-row: 3; margin: 0; }
    .st-footer__nl .st-nl form { grid-column: 2; grid-row: 2 / 4; }
}

/* ====================================================================
 * IL PIEDE SU TELEFONO: TRE RIGHE, NON MILLEDUECENTO PIXEL
 *
 * Le tre colonne di collegamenti diventavano una colonna sola alta 1208 px:
 * sedici voci in fila fra il contenuto e la fine della pagina. Chi scorre fin
 * la' non cerca sedici voci — cerca il telefono, o una cosa sola.
 *
 * Adesso sono `<details>`: tre righe che si aprono, e sotto i recapiti sempre
 * visibili, che sono il motivo per cui si scende fin qui.
 * ==================================================================== */

/* --- su schermo largo il richiudibile non si richiude ------------------ *
 *
 * Il triangolino sparisce e il titolo smette di essere premibile: su desktop
 * le colonne sono aperte e chiuderle non serve a niente, e un titolo che si
 * puo' premere invita a premerlo. `list-style: none` piu' la pseudo-classe di
 * WebKit perche' i due motori disegnano il segno in due modi diversi. */
@media (min-width: 721px) {
    .st-footer__col--apre > summary {
        list-style: none;
        pointer-events: none;
        cursor: default;
    }

    .st-footer__col--apre > summary::-webkit-details-marker { display: none; }
    .st-footer__col--apre > summary::after { display: none; }
}

@media (max-width: 720px) {
    .st-footer__main {

    }

    .st-footer__brand { margin-bottom: 22px; }

    /* Le colonne diventano righe separate da un filo: senza, tre titoli in
       fila su fondo bianco sembrano un elenco puntato senza pallini. */
    .st-footer__col--apre {
        border-top: 1px solid var(--st-p-riga, #EAE4DC);
    }

    .st-footer__col--apre > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        /* Quarantotto pixel: e' una riga che si preme, e le righe che si
           premono su un telefono non stanno sotto la misura del dito. */
        min-height: 48px;
        padding: 4px 0;
        margin: 0;
        cursor: pointer;
        list-style: none;
        font-size: .8125rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--st-p-inchiostro, #23201D);
    }

    .st-footer__col--apre > summary::-webkit-details-marker { display: none; }

    /*
     * Il segno «piu'» disegnato con due sfumature, che diventa «meno» da
     * aperto. Un carattere tipografico — «+», «▾» — cambia forma, peso e
     * allineamento verticale da un sistema all'altro; due gradienti no. E' lo
     * stesso segno gia' usato nelle domande frequenti e nella tendina dei
     * conti della guida: tre accordion diversi con tre segni diversi sono tre
     * cose da imparare invece di una.
     */
    .st-footer__col--apre > summary::after {
        content: '';
        flex: none;
        width: 13px;
        height: 13px;
        background:
            linear-gradient(var(--st-p-rame, #B45A17), var(--st-p-rame, #B45A17)) center/13px 2px no-repeat,
            linear-gradient(var(--st-p-rame, #B45A17), var(--st-p-rame, #B45A17)) center/2px 13px no-repeat;
    }

    .st-footer__col--apre[open] > summary::after {
        background:
            linear-gradient(var(--st-p-rame, #B45A17), var(--st-p-rame, #B45A17)) center/13px 2px no-repeat;
    }

    .st-footer__col--apre > summary:focus-visible {
        outline: 2px solid var(--st-p-rame, #B45A17);
        outline-offset: 2px;
        border-radius: 6px;
    }

    .st-footer__col--apre .st-footer__list {
        margin: 0 0 14px;
        padding-left: 2px;
        gap: 2px;
    }

    /* I recapiti non si richiudono: sono la ragione per cui si arriva quaggiu'.
       Il riquadro li stacca dalle righe richiudibili, cosi' si vede che sono
       un'altra cosa e non una quarta colonna rimasta aperta. */
    .st-footer__help {
        margin-top: 18px;
        padding: 18px;
        background: var(--st-p-crema, #FAF6F1);
        border: 1px solid var(--st-p-riga, #EAE4DC);
        border-radius: var(--st-r-grande, 12px);
    }

    .st-footer__help .st-footer__title { margin-top: 0; }

    /* La barra legale: tre blocchi incolonnati e centrati. In riga a 390 px
       diventano tre frammenti di frase larghi un terzo di schermo. */
    .st-footer__legal {
        display: grid;
        gap: 10px;
        text-align: center;
    }

    .st-footer__legal-left,
    .st-footer__legal-mid,
    .st-footer__legal-right { text-align: center; }
}

/* La firma di chi ha costruito il sito: una riga sua, sotto la fascia legale,
   piu' quieta di tutto il resto. E' un credito, non un richiamo. */
.st-footer__firma {
    margin: 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--st-border-soft, #E9E5DF);
    text-align: center;
    font-size: var(--st-fs-micro);
    letter-spacing: .04em;
    color: var(--st-muted, #7B766D);
}
.st-footer__firma a {
    color: var(--st-muted, #7B766D);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .15s, border-color .15s;
}
.st-footer__firma a:hover {
    color: var(--st-copper-text, #B45431);
    border-bottom-color: currentColor;
}
@media (prefers-reduced-motion: reduce) { .st-footer__firma a { transition: none; } }