/* =============================================================
   JOURNAL OF LOCAL WISDOM IN EDUCATION (JLWE)
   Penataan Footer  |  Revisi 4
   Tema    : ACahya Pro Theme
   Unggah di: Settings > Website > Appearance > Journal Style Sheet

   PERUBAHAN DARI REVISI 3
   1. Penanda diagnostik dihapus karena pemuatan CSS sudah
      terverifikasi.
   2. Logo Indosainstech kini ditempelkan pada daftar kontak
      itu sendiri, bukan pada kolom pembungkusnya. Selektor lama
      gagal karena kolomnya bukan anak langsung .row.
   3. Teks lisensi dibuat rata kiri-kanan dengan pemenggalan
      otomatis.

   Setelah unggah: bersihkan Clear Template Cache dan Clear Data
   Caches, lalu hard refresh.
   ============================================================= */


/* =============================================================
   BAGIAN 1  VARIABEL
   ============================================================= */

:root {
  --jlwe-bg:          #22252B;
  --jlwe-bg-deep:     #1A1D22;
  --jlwe-accent:      #E49800;
  --jlwe-accent-lite: #FFB627;
  --jlwe-text:        #DFE3E8;
  --jlwe-text-soft:   #9AA3AE;
  --jlwe-logo: url("https://indosainstech.id/journal/public/site/images/admin-idsti/footer.png");
}


/* =============================================================
   BAGIAN 2  LATAR DAN KERAPATAN
   ============================================================= */

footer,
.pkp_structure_footer,
.pkp_structure_footer_wrapper {
  background-color: var(--jlwe-bg) !important;
  color: var(--jlwe-text) !important;
  padding-top: 36px !important;
  padding-bottom: 0 !important;
}

footer .footer-bottom,
footer .footer_bottom,
footer .footer-copyright,
footer .copyright,
.pkp_structure_footer .footer_bottom {
  background-color: var(--jlwe-bg-deep) !important;
  border-top: 1px solid rgba(228, 152, 0, 0.16);
  color: var(--jlwe-text-soft) !important;
  padding-top: 13px !important;
  padding-bottom: 13px !important;
  margin-top: 24px !important;
}


/* =============================================================
   BAGIAN 3  BADGE CREATIVE COMMONS
   ============================================================= */

footer img,
.pkp_structure_footer img {
  float: none !important;
  display: block !important;
  width: 88px !important;
  height: auto !important;
  max-width: 100%;
  margin: 0 0 14px 0 !important;
  opacity: 0.9;
}

footer img:hover,
.pkp_structure_footer img:hover {
  opacity: 1;
}


/* =============================================================
   BAGIAN 4  MENYEMBUNYIKAN NAMA KONTAK DAN NOMOR TELEPON
   Aturan ini sudah terbukti bekerja pada revisi sebelumnya.

   Nomor telepon sebaiknya tetap dikosongkan dari field Phone di
   Settings > Contact agar hilang juga dari HTML, bukan sekadar
   tak terlihat.
   ============================================================= */

footer li:has(i[class*="user"]),
footer li:has(i[class*="phone"]),
footer li:has(span[class*="user"]),
footer li:has(span[class*="phone"]),
footer li:has(svg[class*="user"]),
footer li:has(svg[class*="phone"]),
footer li:has(a[href^="tel"]) {
  display: none !important;
}


/* =============================================================
   BAGIAN 5  LOGO INDOSAINSTECH DI BAWAH DAFTAR KONTAK

   Logo ditempelkan pada daftar kontak itu sendiri. Daftar ini
   dikenali dari ikon telepon atau ikon pengguna di dalamnya,
   dua penanda yang sudah terbukti cocok pada Bagian 4. Baris
   yang memuat ikon itu memang disembunyikan, tetapi elemennya
   tetap ada di DOM sehingga :has() tetap mengenalinya.

   Logo ini tidak bisa diklik karena disuntikkan sebagai latar.
   ============================================================= */

footer ul:has(li i[class*="phone"])::after,
footer ul:has(li i[class*="user"])::after,
footer ul:has(li i[class*="envelope"])::after,
footer ol:has(li i[class*="phone"])::after,
footer ol:has(li i[class*="envelope"])::after {
  content: "";
  display: block;
  width: 215px;
  max-width: 100%;
  height: 52px;
  margin: 20px 0 0 0;
  list-style: none;
  background-image: var(--jlwe-logo);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}


/* =============================================================
   BAGIAN 6  TEKS LISENSI RATA KIRI-KANAN

   Pemenggalan otomatis diaktifkan untuk meredam celah antarkata
   yang lebar, efek samping yang lazim saat justifikasi diterapkan
   pada kolom sempit. Kalau hasilnya masih terasa renggang,
   nonaktifkan seluruh blok ini dan biarkan rata kiri.
   ============================================================= */

footer p:has(a[href*="creativecommons"]),
.pkp_structure_footer p:has(a[href*="creativecommons"]) {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}


/* =============================================================
   BAGIAN 7  TIPOGRAFI
   ============================================================= */

footer p,
.pkp_structure_footer p {
  margin: 0 0 9px 0;
  line-height: 1.6;
  font-size: 0.88rem;
  color: var(--jlwe-text);
  max-width: 58ch;
}

footer p:last-child,
.pkp_structure_footer p:last-child {
  margin-bottom: 0;
}

footer h2,
footer h3,
footer h4,
.pkp_structure_footer h2,
.pkp_structure_footer h3,
.pkp_structure_footer h4 {
  color: #FFFFFF !important;
  letter-spacing: 0.05em;
  margin-top: 0 !important;
  margin-bottom: 11px !important;
}

footer li,
.pkp_structure_footer li {
  line-height: 1.6;
  margin-bottom: 7px;
}

footer ul,
.pkp_structure_footer ul {
  margin-bottom: 0;
}


/* =============================================================
   BAGIAN 8  TAUTAN DAN IKON
   ============================================================= */

footer a,
.pkp_structure_footer a {
  color: var(--jlwe-accent) !important;
  text-decoration: none;
  transition: color 0.15s ease;
}

footer a:hover,
footer a:focus,
.pkp_structure_footer a:hover,
.pkp_structure_footer a:focus {
  color: var(--jlwe-accent-lite) !important;
  text-decoration: underline;
}

footer a:focus-visible,
.pkp_structure_footer a:focus-visible {
  outline: 2px solid var(--jlwe-accent-lite);
  outline-offset: 3px;
}

footer i[class*="icon"],
footer .fa,
footer .fas,
footer .far,
.pkp_structure_footer i[class*="icon"] {
  color: var(--jlwe-accent);
}


/* =============================================================
   BAGIAN 9  BARIS PUBLISHER DUPLIKAT DI KOLOM KIRI
   Kelas di bawah masih dugaan. Konfirmasi lewat Inspect.
   ============================================================= */

footer .publisher,
.pkp_structure_footer .publisher {
  display: none !important;
}


/* =============================================================
   BAGIAN 10  RESPONSIF
   ============================================================= */

@media (max-width: 992px) {
  footer ul:has(li i[class*="phone"])::after,
  footer ul:has(li i[class*="user"])::after,
  footer ul:has(li i[class*="envelope"])::after {
    width: 185px;
    height: 45px;
    margin-top: 16px;
  }
}

@media (max-width: 768px) {
  footer,
  .pkp_structure_footer {
    padding-top: 26px !important;
  }

  footer p,
  .pkp_structure_footer p {
    font-size: 0.85rem;
    max-width: none;
  }

  /* Justifikasi dilepas di layar sempit karena kolom terlalu
     pendek untuk menghasilkan baris yang rapi. */
  footer p:has(a[href*="creativecommons"]) {
    text-align: left;
  }

  footer h2,
  footer h3,
  footer h4,
  .pkp_structure_footer h2,
  .pkp_structure_footer h3 {
    margin-top: 20px !important;
  }
}


/* =============================================================
   BAGIAN 11  PREFERENSI GERAK MINIMAL
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  footer a,
  .pkp_structure_footer a {
    transition: none;
  }
}