/* =========================================================================
   PIEDE DI PAGINA — su tutto il sito
   Markup: footer.php

   Il disegno viene dalla home, dove era nato. Qui i valori sono scritti per
   esteso invece che con le variabili `--hm-*`: quelle esistono solo dentro
   `.hm`, cioè solo sulla home, e fuori da lì non varrebbero niente.

   Il fondo scuro va dichiarato, non ereditato: sulla home lo dava il
   contenitore della pagina, ma il blog e gli articoli hanno fondo bianco e il
   piede resterebbe illeggibile.
   ========================================================================= */

.site-footer {
    padding: 64px 48px 54px;
    background: #16100f;
    border-top: 1px solid rgba(244, 239, 233, .1);
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: center;
    justify-content: space-between;
    font-family: var(--fd);
}

.site-footer-nome {
    margin: 0;
    font-family: var(--fs);
    font-size: 17px;
    letter-spacing: .06em;
    color: #f4efe9;
}

/* Le voci arrivano da wp_nav_menu, che le impacchetta in <ul><li><a>: la fila
   sta sulla lista, e alla lista si tolgono pallini e rientri. */
.site-footer-elenco {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-footer-links a {
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(244, 239, 233, .55);
    /* il tema sottolinea tutti i link: qui no */
    text-decoration: none;
    transition: color .4s ease;
}
.site-footer-links a:hover,
.site-footer-links a:focus-visible { color: #d69a95; }
/* la voce della pagina in cui ci si trova resta accesa */
.site-footer-elenco .current-menu-item > a,
.site-footer-elenco .current_page_item > a { color: rgba(244, 239, 233, .85); }

/* La coda tiene insieme le due righe di destra: la firma del mestiere e i due
   link di legge, che stanno sotto e più in sordina. */
.site-footer-coda {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
}
.site-footer-nota {
    margin: 0;
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(244, 239, 233, .35);
}
.site-footer-legale {
    margin: 0;
    display: flex;
    gap: 9px;
    font-size: 10.5px;
    letter-spacing: .06em;
    color: rgba(244, 239, 233, .28);
}
.site-footer-legale a {
    color: rgba(244, 239, 233, .45);
    text-decoration: none;
    transition: color .4s ease;
}
.site-footer-legale a:hover,
.site-footer-legale a:focus-visible { color: #d69a95; }

@media (max-width: 900px) {
    .site-footer {
        padding: 48px 22px 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }
    .site-footer-coda { align-items: flex-start; }
}