/*
  Kaki situs HITAM di kedua mode, bukan mengikuti tema.

  Ini pilihan sadar, bukan kelalaian. Kaki situs berfungsi sebagai penutup
  halaman: bidang gelap di ujung bawah memberi tahu mata bahwa isinya sudah
  habis. Kalau ia ikut berubah terang di mode terang, ia melebur dengan isi
  halaman dan kehilangan fungsi itu.

  Karena warnanya tetap, seluruh warna di dalam kaki situs diambil dari token
  lokal di bawah ini — BUKAN dari token global. Memakai `--text` di sini akan
  menghasilkan tulisan hitam di atas hitam saat mode terang.
*/
.footer {
  --kaki-bg: #101010;
  --kaki-teks: #ededee;
  --kaki-redup: #9a9a9d;
  --kaki-garis: #2a2a2c;
  --kaki-aksen: var(--brand-400); /* 5,06:1 di atas #121212 — AA */

  margin-top: 5rem;
  background: var(--kaki-bg);
  border-top: 3px solid var(--brand-700);
  color: var(--kaki-teks);
}

.inner {
  max-width: 76rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.brandCol {
  grid-column: span 1;
}

.orgName {
  margin: 0 0 0.4rem;
  font-size: var(--t-isi);
  font-weight: 700;
  line-height: 1.35;
}

.tagline {
  margin: 0;
  color: var(--kaki-redup);
  font-size: var(--t-dasar);
  max-width: 24rem;
}

.colTitle {
  margin: 0 0 0.75rem;
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kaki-aksen);
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/*
  Tautan kaki situs terukur 31px tinggi dengan jarak antar-baris hanya 2,5px.
  Itu lolos WCAG 2.5.8 AA (batasnya 24px), tetapi meleset dari patokan 44px
  yang ditetapkan proyek ini sendiri — dan di ponsel, deretan sasaran setinggi
  31px yang nyaris berimpit adalah undangan untuk salah tekan.

  Sasarannya dilebarkan lewat bantalan tegak, bukan lewat ukuran huruf, supaya
  susunan kaki situs tidak berubah. `align-items: flex-start` menjaga lebar
  sasaran tetap sebatas tulisannya, bukan selebar kolom.
*/
.link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tombol-h-kecil);
  color: var(--kaki-teks);
  text-decoration: none;
  font-size: var(--t-dasar);
  padding: 0.15rem 0;
}

.link:hover {
  color: var(--kaki-aksen);
  text-decoration: underline;
}

/*
  Menu yang belum tersedia duduk sebagai <li> di dalam daftar yang SAMA dengan
  tautan aktif. Ketika tinggi tautan dinaikkan ke 44px, baris redup ini harus
  ikut — kalau tidak, satu kolom kaki situs berisi baris 44px dan 24px
  berselang-seling, dan iramanya patah.
*/
.muted {
  display: flex;
  align-items: center;
  min-height: var(--tombol-h-kecil);
  color: var(--kaki-redup);
  font-size: var(--t-dasar);
  padding: 0.15rem 0;
}

.contact {
  margin: 0;
  font-size: var(--t-dasar);
  color: var(--kaki-redup);
  font-style: normal;
  line-height: 1.7;
}

.contact a {
  color: var(--kaki-teks);
  text-decoration: none;
}

.contact a:hover {
  color: var(--kaki-aksen);
  text-decoration: underline;
}

/* Ditampilkan hanya bila data kontak belum diisi di /admin */
.notice {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border: 1px dashed var(--kaki-garis);
  border-radius: var(--r-kartu);
  background: rgb(255 255 255 / 0.04);
  color: var(--kaki-redup);
  font-size: var(--t-kecil);
}

.bottom {
  border-top: 1px solid var(--kaki-garis);
}

.bottomInner {
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  font-size: var(--t-kecil);
  color: var(--kaki-redup);
}

.copyright {
  margin: 0;
  margin-right: auto;
}

.legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
  Peta situs 14 menu. Dibuat berkolom agar keempat belasnya terbaca sekaligus
  tanpa membuat footer memanjang ke bawah.
*/
.sitemap {
  grid-column: 1 / -1;
}

.sitemapList {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 2rem;
}

@media (min-width: 40rem) {
  .sitemapList {
    columns: 3;
  }
}

@media (min-width: 60rem) {
  .sitemapList {
    columns: 4;
  }
}

.sitemapList li {
  break-inside: avoid;
  margin-bottom: 0.4rem;
}

/*
  Jarak di atas judul "Media Sosial".

  Di situs lama ini ditulis sebagai gaya sebaris — style={{ marginTop:
  '1.25rem' }} — langsung di JSX. Nilainya sama persis; yang berubah hanya
  tempatnya. Gaya sebaris tidak dapat dijangkau media query maupun keadaan
  tema, jadi begitu kaki halaman perlu jarak berbeda di layar sempit, nilai
  itu harus dipindahkan ke sini juga.
*/
.colTitleSosial {
  margin-top: 1.25rem;
}