/* ==========================================================================
   accessibility.css
   File tambahan untuk memperbesar ukuran font & memperbaiki keterbacaan
   Ditujukan khusus untuk kenyamanan jamaah usia lanjut / awam teknologi.

   PENTING: Load file ini SETELAH tailwind.css di <head>, contoh:
   <link rel="stylesheet" href="assets/css/tailwind.css">
   <link rel="stylesheet" href="assets/css/accessibility.css">
   ========================================================================== */

/* Naikkan basis ukuran font dari default 16px jadi 18px.
   Karena semua class Tailwind (text-sm, text-lg, text-xl, dst) pakai satuan
   rem, perubahan di sini otomatis memperbesar SEMUA teks di seluruh halaman
   secara proporsional -- termasuk di dalam aplikasi Android (APK). */
html {
  font-size: 18px;
}

/* Jarak antar baris lebih lega, lebih nyaman dibaca lama-lama */
body {
  line-height: 1.6;
}

/* Pastikan area sentuh tombol & link cukup besar untuk jari,
   terutama penting untuk pengguna lansia di layar HP */
button,
a.inline-flex,
a.flex,
.rounded-full,
.rounded-xl,
.rounded-2xl {
  min-height: 44px;
}

/* Perkuat kontras teks abu-abu supaya lebih mudah dibaca di bawah sinar matahari
   (kondisi umum saat buka HP di area masjid/luar ruangan) */
.text-slate-400,
.text-slate-500 {
  color: #475569 !important; /* setara text-slate-600, kontras lebih baik */
}

/* ==========================================================================
   Kontrol Perbesar/Perkecil Teks (tombol A- / A / A+)
   ========================================================================== */
#font-size-control {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  background: #0c7655; /* selaras dengan warna leaf/forest di tema kamu */
  border-radius: 30px;
  padding: 8px;
  display: flex;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

#font-size-control button {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #0c7655;
  font-weight: bold;
  cursor: pointer;
  min-height: 0; /* override aturan min-height tombol umum di atas */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

#font-size-control button:hover {
  transform: translateY(-2px);
  background: #f0fdf4;
}

#font-size-control button:active {
  transform: translateY(0);
}

@media (max-width: 480px) {
  #font-size-control {
    bottom: 16px;
    right: 16px;
  }
  #font-size-control button {
    width: 38px;
    height: 38px;
  }
}