/**
 * Stile del Footer con Layout CSS Grid
 * Sostituisce il file CSS precedente.
 */

/* ==========================================================================
   STILI GENERALI DEL FOOTER
   ========================================================================== */

.row-footer {
    border-top: 1px solid var(--black, #000);
}

.row-footer a,
.site-footer a {
    text-decoration: none;
    color: #000;
}

.footer-menu-block ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    color: var(--black, #000);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.28px;
}

.footer-menu-block h4 {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--black, #000);
    margin: 0 0 11px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.28px;
}

/* ==========================================================================
   STRUTTURA GRID PRINCIPALE (DESKTOP)
   ========================================================================== */

.site-footer-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 colonne di larghezza uguale */
    gap: 40px 42px;
    /* Spazio: 40px tra le righe, 42px tra le colonne */
    padding-top: var(--gap80-to-56);
    font-weight: 500;
}

/* ==========================================================================
   STILI DEI BLOCCHI SPECIFICI
   ========================================================================== */

/* --- Blocco Call-to-Action (CTA) --- */

.footer-menu-cta {
    /* Posizionamento nella griglia per Desktop */
    grid-area: 3 / 3;
    /* Riga 3, Colonna 3 */
    justify-self: end;
    margin-top: -40px;
    /* Allinea il blocco a destra nella sua cella */
    width: 100%;
}

@media (max-width: 880px) {
    .footer-menu-cta {
          margin-top: 0px;

    }
    
}

.footer-menu-cta ul {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-menu-cta a {
    display: block;
    text-transform: uppercase;
    color: var(--brown-ig, #5E4824);
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    max-width: fit-content;
}

.footer-menu-cta a.shop-link {
    background: var(--yellow-ig, #FFCD45);
    padding: 8px;
}

.footer-menu-cta a.delivery-link {
    border: 1px solid var(--brown-ig, #5E4824);
    padding: 6px;
}

.footer-menu-block#contatti a.wa-link {
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-size: contain;
    width: 24px;
    height: 24px;
    margin-top: 4px;
    background-position: center;
    display: inline-block;
    background-image: url(../img/whatsappblack.svg);

}

/* --- Blocco Social --- */

.footer-menu-social ul {
    display: flex;
    gap: 16px;
    padding-bottom: 16px;
}

.footer-menu-social ul a {
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-size: contain;
    width: 24px;
    height: 24px;
    background-position: center;
    display: inline-block;
}

.footer-menu-social ul a.fb-link {
    background-image: url(../img/facebook.svg);
}

.footer-menu-social ul a.is-link {
    background-image: url(../img/instagram.svg);
}

.footer-menu-social ul a.linkedin-link {
    background-image: url(../img/linkedin.svg);
}

.footer-menu-social ul a.tiktok-link {
    background-image: url(../img/tiktok.svg);
}


/* ==========================================================================
   STILI RESPONSIVE
   ========================================================================== */

/* --- Tablet (fino a 880px) --- */
@media (max-width: 880px) {
    .site-footer-menu {
        grid-template-columns: repeat(2, 1fr);
        /* Passa a 2 colonne */
    }

    .hideBr {
        display: none;
    }

    .footer-menu-cta {
        grid-area: auto;
        /* Rimuove il posizionamento esplicito */
        grid-column: 1 / -1;
        /* Occupa tutta la larghezza (2 colonne) */
        justify-self: auto;
        /* Rimuove l'allineamento a destra */
    }

    .footer-menu-cta :is(a.shop-link, a.delivery-link) {
        max-width: none;
        padding: 16px 8px;
    }
}


/* --- Mobile (fino a 480px) --- */
@media (max-width: 480px) {
    .site-footer-menu {
        grid-template-columns: 1fr;
        /* Passa a 1 colonna */
        gap: 32px;
    }

    /* Stile a 2 colonne per le liste nei primi due blocchi */
    #chi-siamo ul,
    #negozi ul {
        column-count: 2;
        column-gap: 16px;
    }

    /* Aumenta il padding dei pulsanti CTA su mobile */
    .footer-menu-cta a.shop-link,
    .footer-menu-cta a.delivery-link {
        padding: 16px 8px;
    }
}

/* ==========================================================================
   STILI FOOTER INFERIORE (Legale, Copyright)
   ========================================================================== */

.site-footer-wrapper {
    margin-top: 68px;
    border-top: 1px solid var(--black, #000);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /* Aggiunto per una migliore responsività */
    gap: 10px;
    /* Aggiunto per spaziatura su schermi piccoli */
    padding: 16px 0;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.24px;
}