/* =====================================================================
   JDIH UNP — Efek aksesibilitas (diaktifkan lewat kelas "a11y-*" pada <html>)
   Panel widget-nya sendiri ada di assets/js/jdih-a11y.js (Shadow DOM).
   ===================================================================== */

/* ---------- Filter warna (gelap / terbalik / hitam-putih / warna lembut) ---------- */
html.a11y-filtered { filter: var(--a11y-f, none); }
html.a11y-dark #a11y-host { filter: invert(1) hue-rotate(180deg); }
html.a11y-invert #a11y-host { filter: invert(1); }
html.a11y-dark img, html.a11y-dark video, html.a11y-dark iframe, html.a11y-dark picture, html.a11y-dark canvas,
html.a11y-dark .hh-slides .bg, html.a11y-dark .ph-bg, html.a11y-dark .cta .bg, html.a11y-dark .jf .bg, html.a11y-dark .about-img { filter: invert(1) hue-rotate(180deg); }
html.a11y-invert img, html.a11y-invert video, html.a11y-invert iframe, html.a11y-invert picture, html.a11y-invert canvas,
html.a11y-invert .hh-slides .bg, html.a11y-invert .ph-bg, html.a11y-invert .cta .bg, html.a11y-invert .jf .bg, html.a11y-invert .about-img { filter: invert(1); }

/* ---------- Kontras tinggi (hitam, putih, kuning) ---------- */
html.a11y-contrast body,
html.a11y-contrast body *:not(img):not(svg):not(svg *):not(video):not(iframe):not(canvas):not(#a11y-host) {
    background-color: #000 !important; background-image: none !important; color: #fff !important;
    border-color: #fff !important; box-shadow: none !important; text-shadow: none !important;
}
html.a11y-contrast a, html.a11y-contrast a * { color: #ffea00 !important; }
html.a11y-contrast button, html.a11y-contrast input, html.a11y-contrast select, html.a11y-contrast textarea { border: 2px solid #fff !important; }
html.a11y-contrast svg { color: #ffea00 !important; }
html.a11y-contrast #header .logo img, html.a11y-contrast .jf-logos img, html.a11y-contrast .mobile-nav-header__logo { background: #fff !important; border-radius: 8px; padding: 3px 6px; }
html.a11y-contrast .ph::before, html.a11y-contrast .hh-ov, html.a11y-contrast .cta::before, html.a11y-contrast .jf::before { background: #000 !important; }

/* ---------- Teks ---------- */
html.a11y-letter body *:not(#a11y-host) { letter-spacing: .12em !important; word-spacing: .18em !important; }
html.a11y-line body *:not(#a11y-host) { line-height: 1.95 !important; }
html.a11y-bold body *:not(#a11y-host) { font-weight: 700 !important; }
html.a11y-left body *:not(#a11y-host) { text-align: left !important; }
html.a11y-readable body *:not(#a11y-host) { font-family: Verdana, Arial, Helvetica, sans-serif !important; }
html.a11y-dyslexia body *:not(#a11y-host) { font-family: 'Lexend', 'OpenDyslexic', 'Comic Sans MS', 'Comic Neue', sans-serif !important; letter-spacing: .05em !important; word-spacing: .12em !important; line-height: 1.85 !important; }

/* ---------- Tautan & judul ---------- */
html.a11y-links a { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; }
html.a11y-hilite a { background: #fff176 !important; color: #111 !important; outline: 2px solid #111 !important; outline-offset: 1px; border-radius: 3px; }
html.a11y-hilite a * { color: #111 !important; }
html.a11y-heads h1, html.a11y-heads h2, html.a11y-heads h3, html.a11y-heads h4, html.a11y-heads h5, html.a11y-heads h6 { outline: 3px solid #c9a227 !important; outline-offset: 5px; background: rgba(255, 241, 118, .28) !important; }
html.a11y-focus *:focus, html.a11y-focus *:focus-visible { outline: 4px solid #ffea00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 8px #000 !important; }

/* ---------- Kursor besar ---------- */
html.a11y-cursor, html.a11y-cursor body, html.a11y-cursor *:not(#a11y-host) {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'%3E%3Cpath d='M5 3 L5 26 L11 20 L16 30 L20 28 L15 19 L24 19 Z' fill='black' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, auto !important;
}
html.a11y-cursor a, html.a11y-cursor a *, html.a11y-cursor button, html.a11y-cursor button *, html.a11y-cursor [role="button"], html.a11y-cursor select, html.a11y-cursor label {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'%3E%3Cpath d='M5 3 L5 26 L11 20 L16 30 L20 28 L15 19 L24 19 Z' fill='%23ffea00' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, pointer !important;
}

/* ---------- Kurangi gerak & sembunyikan gambar ---------- */
html.a11y-calm *, html.a11y-calm *::before, html.a11y-calm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-calm [data-aos] { opacity: 1 !important; transform: none !important; }
html.a11y-calm .jl-slim { display: none !important; }
html.a11y-noimg img, html.a11y-noimg picture, html.a11y-noimg video { opacity: 0 !important; }
html.a11y-noimg .hh-slides .bg, html.a11y-noimg .ph-bg, html.a11y-noimg .cta .bg, html.a11y-noimg .jf .bg { background-image: none !important; }
html.a11y-noimg .nw-img, html.a11y-noimg .about-img img { background: #e6e9ef !important; }

/* ---------- Penggaris baca (menyorot satu baris, meredupkan sisanya) ---------- */
#a11y-ruler { position: fixed; left: 0; right: 0; top: 40vh; height: 56px; z-index: 99980; pointer-events: none; border-top: 3px solid #ffea00; border-bottom: 3px solid #ffea00;
              background: rgba(255, 241, 118, .12); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .58); }
#a11y-ruler[hidden] { display: none; }

@media print { #a11y-host, #a11y-ruler { display: none !important; } }