/* ==========================================================================
   LAPISAN DASAR — Koperasi Kelurahan Merah Putih Latsari
   Lapisan 2: penyempurnaan elemen dasar di atas tema existing (style.css).

   Berkas ini TIDAK mengganti karakter tema. Isinya hanya:
   1. lantai ukuran teks (audit: ada teks 11,2px — di bawah ambang nyaman)
   2. tangga ukuran judul (h1–h4) sesuai skala design system
   3. perbaikan luber horizontal di layar 320px (audit: +31px & +68px)
   4. patahan kata panjang (email/URL) yang memaksa lebar halaman
   5. keadaan fokus & seleksi teks yang seragam
   6. perluasan area tekan kontrol kecil (WCAG 2.2 SC 2.5.8)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LANTAI UKURAN TEKS — tidak boleh ada teks di bawah 12px.
   Daftar di bawah adalah SELURUH aturan di style.css yang nilainya <= 11.84px.
   Label (huruf besar, dekoratif)  → 12px  (--fs-100)
   Teks yang benar-benar dibaca    → 14px  (--fs-200)
   -------------------------------------------------------------------------- */

/* label / dekoratif → 12px */
.pita-lencana,
.bk-slide-judul em,
.bk-panel-label,
.bk-sambutan-lambang .hero-cip,
.ps-lencana,
.ig-label,
.hero-keterangan-label,
.stat-harian-tanggal small,
.pot-baris-kepala .pot-angka b,
.pot-baris-kepala .pot-angka small,
.poster-lencana,
.tabel-rt-rw thead th,
.tabel-rt-rw .sel-rw-angka,
.tabel-rt-rw .tanda-ketua-rw,
.reg-kategori,
.reg-tentang span,
.peta-alat-judul,
.satgas-nama,
.penyaring-item small,
.merek-teks small {
  font-size: var(--fs-100);
}

/* teks yang dibaca → 14px */
.ig-item figcaption,
.personel-data dt,
.komentar-nilai,
.survey-pilihan span,
.pot-kartu-jumlah small,
.berita-kategori,
.tabel-rt-rw .sel-rw-tanda {
  font-size: var(--fs-200);
}

/* Judul baris pada kartu Mode Kartu (tabel RT/RW di layar kecil) */
@media (max-width:900px){
  .tabel-rt-rw td::before{font-size: var(--fs-100);}
}

/* Keterangan kecil di formulir & pemberitahuan */
.pesan-salah,
.pesan-bantu { font-size: var(--fs-200); line-height: var(--lh-kecil); }
.pesan-salah{ color: var(--color-danger); font-weight: 600; }

/* --------------------------------------------------------------------------
   2. TANGGA UKURAN JUDUL
   Display 40 · H1 32–40 · H2 28 · H3 20 · H4 17
   Judul yang sudah punya aturan khusus (hero, kepala halaman regulasi, dll.)
   tetap memakai aturannya sendiri karena selektornya lebih khusus.
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{
  line-height: var(--lh-judul);
  letter-spacing: var(--track-judul);
  text-wrap: balance;
}
h1{ font-size: clamp(2rem, 3.4vw, 2.5rem); }        /* 32 → 40 */
h2{ font-size: clamp(1.5rem, 2.2vw, 1.75rem); }     /* 24 → 28 */
h3{ font-size: 1.25rem; }                            /* 20 */
h4{ font-size: 1.0625rem; }                          /* 17 */
h5{ font-size: .9375rem; }                           /* 15 */
h6{
  font-size: var(--fs-200);                          /* 14 */
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--color-text-muted);
}

/* Paragraf: tinggi baris nyaman + hindari baris terakhir menggantung */
p{ line-height: var(--lh-teks); text-wrap: pretty; }

/* --------------------------------------------------------------------------
   3. PATAHAN KATA PANJANG
   Penyebab luber di halaman Kontak (320px: +68px) adalah satu alamat surel
   yang tidak boleh patah. Semua teks panjang diberi izin patah.
   -------------------------------------------------------------------------- */
.info-item > div,
.kaki-kolom,
.kaki-kontak li,
.personel-data dd,
.kartu,
.berita-kartu-isi,
.reg-kartu,
.baca-isi,
.sorot-narasi,
.dokumen-isi { min-width: 0; }

a[href^="mailto:"],
a[href^="tel:"],
.kaki-kontak a,
.info-item p,
.info-item a,
.peta-modal-isi,
.kontak-nilai { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   4. PERBAIKAN LUBER DI LAYAR SANGAT KECIL (320–380px)
   Penyebab: baris merek dikunci `white-space:nowrap` sehingga tombol menu
   terdorong keluar layar (+31px pada semua halaman).
   -------------------------------------------------------------------------- */
/* Catatan: aturan nama koperasi di layar sempit kini ada di
   assets/desain/navigasi.css (menyatu dengan aturan laci menu). */

/* Tombol menu (tiga garis) tidak boleh menyusut */
.tombol-togel{ flex: none; }

/* Teks di dalam kartu informasi tidak boleh memaksa lebar halaman */
.info-item{ align-items: flex-start; }
.info-item > div{ flex: 1 1 auto; }
.info-item p a{ display: inline-block; padding: 3px 0; }

/* --------------------------------------------------------------------------
   5. FOKUS & SELEKSI
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.tombol:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.lewati:focus{
  left: 0;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-lewati);
  font-weight: 700;
}

::selection{ background: rgba(179,38,30,.18); color: var(--color-text); }

/* --------------------------------------------------------------------------
   6. AREA TEKAN KONTROL KECIL
   Titik navigasi slider hanya 10px. Area tekannya diperluas ke 44px tanpa
   mengubah tampilan visualnya.
   -------------------------------------------------------------------------- */
.bk-titik-item,
.hero-titik-item{ position: relative; }
.bk-titik-item::after,
.hero-titik-item::after{
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: var(--radius-pill);
}

/* Tautan yang berdiri sendiri di daftar (kaki halaman, daftar kontak) */
.kaki-kolom li a,
.kaki-kontak li{
  display: inline-block;
  padding: 3px 0;
  min-height: 24px;
}

/* Tombol pembesar peta & kontrol Leaflet: pastikan tetap mudah ditekan */
.peta-aksi a,
.peta-aksi button{ min-height: var(--sentuh-min); }

/* Kartu situs resmi di halaman Potensi: batas lebar minimum dilepas di layar
   sempit supaya tidak ada luber 1px (audit: +1px pada 320px). */
@media (max-width:520px){
  .pot-kelurahan{ padding: 18px 20px; }
  .pot-kelurahan-isi{ min-width: 0; }
}

/* --------------------------------------------------------------------------
   7. UTILITAS UMUM
   -------------------------------------------------------------------------- */
/* Teks untuk pembaca layar saja — dipakai agar urutan judul tetap runut
   (h1 → h2 → h3) tanpa menambah teks yang terlihat. */
.hanya-pembaca{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Judul kartu pada daftar informasi (Kontak) tetap berukuran seperti semula */
.info-item h3,
.kartu h3.info-judul{ margin: 0 0 3px; font-size: 1.0625rem; }

/* Judul utama blok sambutan dinaikkan sedikit agar memenuhi lantai ukuran H1
   hasil skala (yaitu 32px); sebelumnya berhenti di 31,2px. */
.bk-sambutan h1{ font-size: clamp(1.4rem, 2.4vw, 2rem); }

.teks-kecil{ font-size: var(--fs-200); }
.teks-mini{ font-size: var(--fs-100); color: var(--color-text-muted); }
.teks-tengah{ text-align: center; }
.jarak-atas{ margin-top: var(--sp-6); }
.jarak-bawah{ margin-bottom: var(--sp-6); }

/* .kartu-ds & .kartu: rerata sudut & bayangan mengikuti token */
.kartu{ border-radius: var(--radius-lg); }