/* =====================================================================
   Footer SahabatSAYUR

   Markup-nya (app/Widgets/SignFooterWidgetView.blade.php) sudah ada sejak
   lama tetapi tidak pernah punya gaya sama sekali -- kesembilan kelasnya
   nol kecocokan di seluruh stylesheet, sehingga yang tampil adalah markup
   telanjang: teks mepet tepi kiri dan tautan berdempetan jadi satu kalimat.

   Seluruh aturan di bawah dilingkupi .main-footer. Pelajaran dari modul
   sebelumnya: nama kelas pendek seperti .container dan .footer-links mudah
   bertabrakan dengan Bootstrap dan gaya halaman lain bila dibiarkan global.
   ===================================================================== */

.main-footer {
    --ft-hijau: #16A34A;
    --ft-tinta: #1F2937;
    --ft-redup: #6B7280;
    --ft-garis: #E5E7EB;
    --ft-latar: #FFFFFF;

    background: var(--ft-latar);
    border-top: 1px solid var(--ft-garis);
    margin-top: 40px;
    color: var(--ft-tinta);

    /*
     * Jarak bawah sengaja kecil.
     *
     * Ruang untuk bottom-nav sudah disediakan `body { padding-bottom }` di
     * buttom_nav.blade.php, dan itu berlaku untuk seluruh halaman. Menambah
     * jatah sendiri di sini membuat keduanya menumpuk -- pada halaman yang
     * justru menyembunyikan navigasinya, hasilnya ruang kosong sangat lebar
     * di bawah footer.
     */
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.main-footer .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 32px 20px 0;
}

/* ------------------------------------------------------------- susunan */

.main-footer .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}

@media (min-width: 576px) {
    /* Dua kolom tautan berdampingan supaya footer tidak jadi menara panjang. */
    .main-footer .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .main-footer .footer-about {
        grid-column: 1 / -1;
    }
}

@media (min-width: 992px) {
    .main-footer .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
        gap: 40px;
    }

    .main-footer .footer-about {
        grid-column: auto;
    }
}

/* -------------------------------------------------------------- identitas */

.main-footer .footer-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.main-footer .footer-logo i {
    font-size: 22px;
    color: var(--ft-hijau);
    line-height: 1;
}

.main-footer .footer-logo h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.main-footer .footer-about p {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--ft-redup);
    max-width: 46ch;
}

/* ------------------------------------------------------------ media sosial */

.main-footer .social-medias {
    display: flex;
    gap: 10px;
}

.main-footer .socmed-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--ft-garis);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ft-redup);
    text-decoration: none;
    font-size: 18px;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.main-footer .socmed-btn:hover,
.main-footer .socmed-btn:focus-visible {
    color: var(--ft-hijau);
    border-color: var(--ft-hijau);
    background: rgba(22, 163, 74, .07);
}

/* ----------------------------------------------------------------- tautan */

.main-footer .footer-links h5 {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ft-tinta);
}

.main-footer .footer-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
 * WAJIB. assets/css/style.css:182 menyetel `li { display: inline-block }`
 * untuk seluruh dokumen; tanpa penawar ini keempat tautan mengalir ke
 * samping dan terbaca sebagai satu kalimat -- "Pusat Bantuan Metode
 * Pembayaran". Itulah rupa footer sebelum berkas ini ada.
 */
.main-footer .footer-links li {
    display: block;
    width: 100%;
    font-size: inherit;
}

.main-footer .footer-links a {
    /* min-height 44px, bukan padding: itu jaminan target sentuh yang tidak
       ikut berubah bila ukuran fontnya nanti disetel ulang. */
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--ft-redup);
    text-decoration: none;
    transition: color .18s ease;
}

@media (min-width: 992px) {
    /* Penunjuk tetikus tidak butuh 44px; rapatkan agar kolomnya padat. */
    .main-footer .footer-links a {
        min-height: 34px;
    }
}

.main-footer .footer-links a:hover,
.main-footer .footer-links a:focus-visible {
    color: var(--ft-hijau);
}

/* ------------------------------------------------------------ baris bawah */

.main-footer .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--ft-garis);
}

.main-footer .footer-bottom p {
    margin: 0;
    font-size: 12.5px;
    color: var(--ft-redup);
}

.main-footer .lang-cluster {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--ft-garis);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--ft-redup);
}

.main-footer .lang-cluster i {
    font-size: 14px;
    line-height: 1;
}