/* ============================================================
   INDITECH — ACCESSIBILITY MODES (Sarana Aksesibilitas)
   ------------------------------------------------------------
   Inspired by Indonesian government accessibility toolbars
   (ppid.komisiyudisial.go.id) — text size, grayscale, high
   contrast, negative contrast, light background, underline
   links, readable font + extras (big cursor, reading guide,
   letter spacing, stop animations).

   Modes are classes on <html>:
     a11y-gray a11y-contrast a11y-negative a11y-light
     a11y-underline a11y-readable a11y-spacing a11y-cursor
     a11y-guide a11y-stopanim
   Text size is set inline on <html> (font-size %) by a11y.js.

   #a11yScope wraps header+main+footer so display filters never
   break the fixed widgets (a11y panel, mobile menu, cookie bar).
   ============================================================ */

/* ---------- persistent baseline: strong focus rings ---------- */
:focus-visible {
  outline: 3px solid var(--yellow, #f0dc01);
  outline-offset: 2px;
  border-radius: 4px;
}
html.a11y-cursor :focus-visible,
html.a11y-negative :focus-visible {
  outline: 4px solid #f0dc01;
}

/* ============================================================
   1 · TEXT SIZE  (A+ / A−)
   Typography is rem-based, so scaling <html> scales all text
   while the layout grid keeps its rhythm.
   ============================================================ */
html { font-size: 100%; }
html.a11y-size-locked { scroll-behavior: auto; }

/* ============================================================
   2 · DISPLAY FILTERS — grayscale / high contrast / negative
   (mutually exclusive: turning one on turns the others off,
    exactly like the reference toolbar)
   ============================================================ */

/* — Warna Abu-abu (grayscale) — */
html.a11y-gray #a11yScope { filter: grayscale(1); }

/* — Kontras Tinggi (high contrast) — */
html.a11y-contrast #a11yScope { filter: contrast(1.45) saturate(1.3); }
html.a11y-contrast #a11yScope :is(h1, h2, h3, h4, p, li, td, th, figcaption, blockquote) {
  text-shadow: none;
}
html.a11y-contrast #a11yScope .card { border-color: rgba(0, 32, 96, .38); }
html.a11y-contrast #a11yScope a:not(.btn) { color: #0012a8; }

/* — Kontras Negatif (negative / inverted) — */
html.a11y-negative #a11yScope { filter: invert(1) hue-rotate(180deg); }
/* photos & logo images are un-inverted so people stay recognizable */
html.a11y-negative #a11yScope img { filter: invert(1) hue-rotate(180deg); }
/* keep form fields usable */
html.a11y-negative #a11yScope input,
html.a11y-negative #a11yScope select,
html.a11y-negative #a11yScope textarea { color: #000; background: #fff; }

/* ============================================================
   3 · LATAR BELAKANG TERANG (light background)
   Forces every dark surface to a light one — for readers who
   cannot use dark heroes, navy bands and dark footers.
   ============================================================ */
html.a11y-light #a11yScope :is(.topbar, .hero, .page-hero, .band-navy, .band-green,
.hero-statcard, .footer, .cta-band, .quote-band) {
  background: #ffffff !important;
  background-image: none !important;
  color: #171a2e;
}
html.a11y-light #a11yScope :is(.hero, .page-hero, .band-navy, .band-green, .footer) {
  border-bottom: 1px solid #e3e7f1;
}
html.a11y-light #a11yScope :is(.hero, .page-hero, .band-navy, .band-green, .footer, .topbar) :is(h1, h2, h3, h4, b, dt, strong) { color: #171a2e; }
html.a11y-light #a11yScope :is(.hero, .page-hero, .band-navy, .band-green, .footer, .topbar) :is(p, span, li, small, dd) { color: #3c4258; }
html.a11y-light #a11yScope .micro-invert { color: #565d72; }
html.a11y-light #a11yScope .orb,
html.a11y-light #a11yScope .dots,
html.a11y-light #a11yScope .mesh,
html.a11y-light #a11yScope .gridlines { opacity: .25; }
html.a11y-light #a11yScope .stage-counter { color: #171a2e; background: #fff; border-color: #e3e7f1; }
html.a11y-light #a11yScope .crumbs a { color: #002060; }
html.a11y-light #a11yScope .crumbs .sep { color: #6d7488; }
html.a11y-light #a11yScope .btn-ghost { color: #171a2e; border-color: #9aa3ba; }
html.a11y-light #a11yScope :is(.stat, .stat b) { color: #171a2e; }
html.a11y-light #a11yScope .stat small,
html.a11y-light #a11yScope .stat span { color: #565d72; }
html.a11y-light #a11yScope .footer-links a { color: #3c4258; }
html.a11y-light #a11yScope .footer-bar,
html.a11y-light #a11yScope .affiliated { border-color: #e3e7f1; color: #565d72; }
html.a11y-light #a11yScope .topbar,
html.a11y-light #a11yScope .topbar a { color: #3c4258; }
html.a11y-light #a11yScope .topbar .dot { background: #267A48; }
html.a11y-light #a11yScope .tb-tag { color: #565d72; }

/* ============================================================
   4 · GARIS BAWAH TAUTAN (underline links)
   ============================================================ */
html.a11y-underline #a11yScope a {
  text-decoration: underline !important;
  text-decoration-thickness: .09em !important;
  text-underline-offset: .18em !important;
}

/* ============================================================
   5 · FONT MUDAH DIBACA (readable font)
   Swaps the display font for a wide, classic, high-x-height
   humanist stack — no download, all system fonts.
   ============================================================ */
html.a11y-readable #a11yScope {
  --font-display: Verdana, "Trebuchet MS", Tahoma, "DejaVu Sans", sans-serif;
  --font-body: Verdana, "Trebuchet MS", Tahoma, "DejaVu Sans", sans-serif;
  font-family: Verdana, "Trebuchet MS", Tahoma, "DejaVu Sans", sans-serif;
}
html.a11y-readable #a11yScope :is(h1, h2, h3, h4) {
  letter-spacing: 0;
  line-height: 1.25;
}
html.a11y-readable #a11yScope { line-height: 1.7; }

/* ============================================================
   6 · JARAK HURUF (letter & word spacing — dyslexia friendly)
   ============================================================ */
html.a11y-spacing #a11yScope :is(p, li, a, dd, td, th, figcaption, blockquote, label, option) {
  letter-spacing: .12em;
  word-spacing: .32em;
  line-height: 1.9;
}
html.a11y-spacing #a11yScope :is(h1, h2, h3, h4) {
  letter-spacing: .04em;
  word-spacing: .18em;
  line-height: 1.35;
}

/* ============================================================
   7 · KURSOR BESAR (big cursor)
   ============================================================ */
html.a11y-cursor body {
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NiIgaGVpZ2h0PSI1NiIgdmlld0JveD0iMCAwIDU2IDU2Ij48cGF0aCBkPSJNNCAydjQ4bDEwLTkuMiA2LjIgMTMuMiA3LjgtMy44LTYuMi0xMy4yIDEyLjQtMS4yeiIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjMDAyMDYwIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=") 6 2, default;
}
html.a11y-cursor body :is(a, button, select, summary, [role="button"], [tabindex]) {
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDYwIDYwIj48Y2lyY2xlIGN4PSIzMCIgY3k9IjMwIiByPSIxOCIgZmlsbD0iI2YwZGMwMSIgc3Ryb2tlPSIjMDAyMDYwIiBzdHJva2Utd2lkdGg9IjMiLz48cGF0aCBkPSJNMjMgNDUgMzcgMzAgMzAgMjkgMzUgMTggMjcgMTkgMjggMjggMjMgMjl6IiBmaWxsPSIjMDAyMDYwIi8+PC9zdmc+") 30 30, pointer;
}

/* ============================================================
   8 · GARIS BANTU BACA (reading guide)
   ============================================================ */
#readingGuide {
  position: fixed;
  left: 0; right: 0;
  height: 46px;
  border-top: 3px solid rgba(240, 220, 1, .95);
  border-bottom: 3px solid rgba(240, 220, 1, .95);
  background: rgba(0, 32, 96, .07);
  pointer-events: none;
  z-index: 2147483000;
  display: none;
  margin-top: -23px; /* centers the band on the cursor */
}
html.a11y-guide #readingGuide { display: block; }
@media (pointer: coarse) {
  html.a11y-guide #readingGuide { display: none; }
  html.a11y-guide body::after {
    content: "";
  }
}

/* ============================================================
   9 · HENTIKAN ANIMASI (stop animations)
   ============================================================ */
html.a11y-stopanim #a11yScope *,
html.a11y-stopanim #a11yScope *::before,
html.a11y-stopanim #a11yScope *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}
html.a11y-stopanim { scroll-behavior: auto; }
html.a11y-stopanim #a11yScope .reveal { opacity: 1 !important; transform: none !important; }

/* ============================================================
   THE WIDGET (floating button + panel)
   ============================================================ */
.a11y-fab {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 2147483100;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(240, 220, 1, .9);
  background: linear-gradient(160deg, #0a2a7a, #002060 70%);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px rgba(0, 12, 46, .45);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.a11y-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 12, 46, .55); }
.a11y-fab svg { width: 26px; height: 26px; }
.a11y-fab .fab-dot {
  position: absolute;
  top: 2px; right: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #f0dc01;
  border: 2px solid #002060;
  display: none;
}
.a11y-fab.has-modes .fab-dot { display: block; }
.a11y-fab.on { background: linear-gradient(160deg, #2f8a55, #1e5c38 75%); }

.a11y-panel {
  position: fixed;
  left: 18px;
  bottom: 86px;
  z-index: 2147483200;
  width: min(348px, calc(100vw - 36px));
  background: #fff;
  border: 1px solid #dfe3ee;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 12, 46, .28);
  padding: 18px;
  display: none;
}
.a11y-panel.open { display: block; }
.a11y-panel h2 {
  margin: 0 0 2px;
  font-size: 1.02rem;
  font-family: var(--font-display, system-ui, sans-serif);
  color: #171a2e;
  display: flex;
  align-items: center;
  gap: 8px;
}
.a11y-panel h2 svg { width: 18px; height: 18px; color: #267A48; flex: none; }
.a11y-panel .a11y-sub {
  margin: 0 0 14px;
  font-size: .78rem;
  color: #6d7488;
  line-height: 1.45;
}
.a11y-panel .a11y-group-label {
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8b91a5;
  margin: 14px 0 8px;
  font-weight: 700;
}

/* text size row */
.a11y-size-row {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  gap: 8px;
  align-items: stretch;
}
.a11y-size-row button {
  min-height: 46px;
  border-radius: 12px;
  border: 1.5px solid #dfe3ee;
  background: #f7f8fc;
  font: inherit;
  font-weight: 800;
  color: #171a2e;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.a11y-size-row button:hover { border-color: #002060; }
.a11y-size-row .a11y-size-now {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eef1f8;
  font-weight: 800;
  color: #002060;
  font-variant-numeric: tabular-nums;
  min-height: 46px;
}

/* mode buttons grid */
.a11y-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.a11y-grid button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1.5px solid #dfe3ee;
  background: #f7f8fc;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  color: #2c3245;
  text-align: left;
  cursor: pointer;
  line-height: 1.25;
}
.a11y-grid button svg { width: 17px; height: 17px; flex: none; color: #565d72; }
.a11y-grid button:hover { border-color: #9aa3ba; }
.a11y-grid button[aria-pressed="true"] {
  background: #002060;
  border-color: #002060;
  color: #fff;
}
.a11y-grid button[aria-pressed="true"] svg { color: #f0dc01; }

/* reset */
.a11y-reset {
  width: 100%;
  margin-top: 12px;
  min-height: 44px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff070, #f0dc01);
  font: inherit;
  font-weight: 800;
  color: #171a2e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.a11y-reset svg { width: 16px; height: 16px; }
.a11y-reset:hover { filter: brightness(1.04); }

/* mobile */
@media (max-width: 560px) {
  .a11y-fab { width: 50px; height: 50px; left: 14px; bottom: 14px; }
  .a11y-fab svg { width: 23px; height: 23px; }
  .a11y-panel { left: 14px; bottom: 76px; }
  .a11y-grid button { font-size: .76rem; padding: 8px; }
}

/* negative mode must also restyle the widget itself for coherence */
html.a11y-negative .a11y-panel {
  background: #101010;
  border-color: #3a3a3a;
}
html.a11y-negative .a11y-panel h2 { color: #f2f2f2; }
html.a11y-negative .a11y-panel .a11y-sub { color: #b9b9b9; }
html.a11y-negative .a11y-panel .a11y-group-label { color: #9a9a9a; }
html.a11y-negative .a11y-grid button {
  background: #1c1c1c; border-color: #3a3a3a; color: #e8e8e8;
}
html.a11y-negative .a11y-grid button[aria-pressed="true"] {
  background: #f0dc01; border-color: #f0dc01; color: #171a2e;
}
html.a11y-negative .a11y-grid button[aria-pressed="true"] svg { color: #171a2e; }
html.a11y-negative .a11y-size-row button { background: #1c1c1c; border-color: #3a3a3a; color: #e8e8e8; }
html.a11y-negative .a11y-size-row .a11y-size-now { background: #262626; color: #f0dc01; }

/* reduced motion users get stopanim behavior for free */
@media (prefers-reduced-motion: reduce) {
  .a11y-fab, .a11y-panel { transition: none; }
}

/* screen-reader only live region */
.a11y-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- academy pages: FAB matches the green brand ---------- */
body.academy .a11y-fab {
  background: linear-gradient(160deg, #2f8a55, #1e5c38 75%);
  border-color: rgba(255, 255, 255, .55);
}
body.academy .a11y-fab.on { background: linear-gradient(160deg, #0a2a7a, #002060 70%); }

/* ---------- cookie bar present: lift the FAB above it ---------- */
body.has-cookie .a11y-fab { bottom: 96px; }
body.has-cookie .a11y-panel { bottom: 164px; }
@media (max-width: 560px) {
  body.has-cookie .a11y-fab { bottom: 108px; }
  body.has-cookie .a11y-panel { bottom: 176px; }
}