/*
 * IGTI OFFICIAL - Accessibility Overrides
 * Menangani injeksi state langsung dari accessibility.js
 * Di-enqueue setelah style.css utama untuk menimpa aturan standar.
 */

/* ==========================================================================
   1. MODE DISLEKSIA (KETERBACAAN EKSTREM)
   ========================================================================== */
html[data-dyslexia="true"] body,
html[data-dyslexia="true"] p,
html[data-dyslexia="true"] a,
html[data-dyslexia="true"] h1,
html[data-dyslexia="true"] h2,
html[data-dyslexia="true"] h3,
html[data-dyslexia="true"] span,
html[data-dyslexia="true"] button,
html[data-dyslexia="true"] input,
html[data-dyslexia="true"] textarea {
  /* Memaksa fallback ke font kasual sans-serif dengan spasi yang lebih lapang */
  font-family: "Comic Sans MS", "Comic Sans", "Arial", sans-serif !important;
  letter-spacing: 0.08em !important;
  word-spacing: 0.15em !important;
  line-height: 2 !important;
}

/* ==========================================================================
   2. MODE GARIS BAWAH TAUTAN
   ========================================================================== */
html[data-underline="true"] a {
  text-decoration: underline !important;
  text-underline-offset: 5px !important;
  text-decoration-thickness: 3px !important;
  text-decoration-color: var(--igti-brand-orange) !important;
}

html[data-underline="true"] [data-theme="high-contrast"] a {
  text-decoration-color: #ffff00 !important;
}

/* Pengecualian mutlak: Tombol tidak boleh digarisbawahi agar tidak merusak UI */
html[data-underline="true"] a.igti-button,
html[data-underline="true"] a.skip-link {
  text-decoration: none !important;
  border-bottom-width: 5px !important; /* Sebagai kompensasi penanda visual */
}

/* ==========================================================================
   3. DESAIN VISUAL TOOLBAR AKSESIBILITAS
   ========================================================================== */
.igti-a11y-toolbar {
  background-color: var(--igti-text);
  color: var(--igti-bg);
  padding: 0.5rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  border-bottom: 3px solid var(--igti-brand-orange);
}

.igti-a11y-toolbar button {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.5rem 1rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.igti-a11y-toolbar button:hover,
.igti-a11y-toolbar button:focus {
  background: var(--igti-brand-orange);
  color: #1a1a1a;
  border-color: var(--igti-brand-orange);
}

/* Indikator Tombol Aktif (Pressed State) */
.igti-a11y-toolbar button[aria-pressed="true"] {
  background: #ffffff;
  color: #1a1a1a;
  border-color: #ffffff;
  box-shadow: inset 0 0 0 2px var(--igti-brand-orange);
}