/* ==========================================================================
   AKSESIBILITAS (A11Y) — NihongoDo
   Diperlukan untuk WCAG 2.1 AA compliance.
   ========================================================================== */

/* ─── Sembunyikan secara visual namun tetap dapat dibaca screen reader ─── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── A11Y-05: Skip link — tampil saat di-focus keyboard ─────────────────
   Gunakan transform (bukan left:-9999px) untuk performa lebih baik.
   Muncul di pojok kiri atas dengan warna shu (merah cinnabar) saat
   pengguna menekan Tab sebagai interaksi keyboard pertama.
   ─────────────────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-priority);
  padding: var(--space-2) var(--space-4);
  background: var(--shu);
  color: var(--washi);
  font-size: var(--fs-sm);
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
  /* Tersembunyi di luar layar secara aksesibel, bukan display:none */
  transform: translateY(calc(-100% - var(--space-3)));
  transition: transform 0.15s var(--ease);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--washi);
  outline-offset: 2px;
}

/* ─── A11Y-02: Focus ring global yang jelas untuk navigasi keyboard ───────
   WCAG 2.1 SC 2.4.7 (Focus Visible) & SC 1.4.11 (Non-text Contrast).
   Diterapkan ke semua elemen interaktif yang diakses dengan keyboard.
   ─────────────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Tombol, kartu interaktif, dan elemen kustom */
button:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 3px solid var(--indigo-light);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Link — ring lebih tipis supaya tidak mengganggu layout teks */
a:focus-visible {
  outline: 2px solid var(--indigo-light);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ─── A11Y-02: Input, select, textarea — visible focus ring ──────────────
   Banyak form element memakai `outline: none` untuk desain kustom.
   Rule ini memastikan ada indikator fokus yang jelas via box-shadow
   (dipakai saat outline dihapus oleh rule CSS komponen).
   Catatan: outline-offset:-1px agar ring tampil di dalam border elemen.
   ─────────────────────────────────────────────────────────────────────── */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--indigo-light) !important;
  outline-offset: -1px !important;
  /* Fallback untuk browser lama yang tidak mendukung focus-visible */
  box-shadow: 0 0 0 2px rgba(74, 109, 161, 0.35);
}

/* Override khusus input yang sudah punya border-color focus (tidak butuh outline ganda) */
.search-input:focus-visible,
.c-searchbar input:focus-visible {
  outline: 2px solid var(--indigo-light) !important;
  outline-offset: -1px !important;
  border-color: var(--indigo-light);
}

/* ─── A11Y-02: Hapus outline:none yang tidak aman ────────────────────────
   Beberapa komponen memakai outline:none tanpa alternatif visual.
   Rule ini memastikan setidaknya ada perubahan border yang terlihat.
   ─────────────────────────────────────────────────────────────────────── */
.filter-sort select:focus {
  box-shadow: 0 0 0 2px rgba(74, 109, 161, 0.35);
}

/* ─── A11Y-04: Accordion — visual indicator state aria-expanded ──────────
   Komponen accordion sudah mengelola aria-expanded via JS (accordion.js).
   CSS ini memastikan ada visual yang mencerminkan state terbuka/tertutup.
   ─────────────────────────────────────────────────────────────────────── */
[aria-expanded="true"] .acc-chevron {
  display: inline-block;
  transform: rotate(180deg);
  transition: transform var(--dur-fast) var(--ease);
}
[aria-expanded="false"] .acc-chevron {
  display: inline-block;
  transform: rotate(0deg);
  transition: transform var(--dur-fast) var(--ease);
}

/* ─── A11Y-06: aria-live regions — jangan sembunyikan dari pembaca layar ─
   Elemen dengan aria-live tetap aksesibel meskipun secara visual disembunyikan.
   ─────────────────────────────────────────────────────────────────────── */
[aria-live] {
  /* Jangan hidden kecuali disengaja via JS (pakai .hidden atau hidden attr) */
}

/* ─── High contrast mode opsional ────────────────────────────────────────
   Aktifkan dengan <html data-contrast="high"> atau melalui halaman Settings.
   ─────────────────────────────────────────────────────────────────────── */
:root[data-contrast="high"] {
  --border: var(--border-light);
  --text-faint: var(--text-soft);
  --color-accent: var(--shu-light);
}

/* WCAG-compliant: hormati preferensi OS "more contrast" */
@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid ButtonText;
  }
  .skip-link {
    background: ButtonFace;
    color: ButtonText;
    border: 2px solid ButtonText;
  }
}

/* Sembunyikan animasi untuk pengguna yang prefer reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
  [aria-expanded] .acc-chevron {
    transition: none;
  }
}