/*
Theme Name: IGTI Theme
Theme URI: https://igti.or.id
Author: Ikatan Guru Tunanetra Inklusif
Author URI: https://igti.or.id
Description: Tema WordPress resmi Ikatan Guru Tunanetra Inklusif (IGTI). Didesain dengan pendekatan accessibility-first, memenuhi standar WCAG 2.2 Level AA (dan AAA untuk kontras warna). Dioptimalkan untuk pengguna screen reader (NVDA, JAWS, VoiceOver, TalkBack) dan pengguna low vision. Responsif penuh untuk desktop, tablet, dan mobile.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: igti-theme
Domain Path: /languages
Tags: accessibility-ready, block-theme, full-site-editing, translation-ready, block-patterns, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, wide-blocks, editor-style, style-variations
*/

/* ==========================================================================
   IGTI THEME - STYLE.CSS
   --------------------------------------------------------------------------
   CATATAN: Mayoritas styling tema ini dikelola melalui theme.json
   (Block Theme / Full Site Editing). File ini hanya berisi:
   1. Header identitas tema (wajib untuk WordPress)
   2. Reset CSS minimal
   3. Utility class aksesibilitas
   4. Style yang tidak bisa dikelola theme.json
   ========================================================================== */

/* ==========================================================================
   1. RESET CSS MINIMAL
   Reset default browser yang tidak konsisten antar browser.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Smooth scroll dimatikan saat user prefer reduced motion */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Body base — selebihnya diatur theme.json */
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Gambar responsif default */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* Hilangkan outline default, kita buat custom yang lebih aksesibel */
*:focus {
  outline: none;
}

/* ==========================================================================
   2. ACCESSIBILITY UTILITIES
   Class helper untuk kebutuhan aksesibilitas.
   ========================================================================== */

/* --- Screen Reader Only Text ---
   Teks yang tidak terlihat di layar tapi dibaca screen reader.
   Gunakan untuk memberi konteks tambahan bagi pengguna NVDA/JAWS.
*/
.sr-only,
.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Ketika elemen sr-only mendapat fokus (misalnya skip link),
   tampilkan ke user keyboard */
.sr-only:focus,
.screen-reader-text:focus {
  position: absolute !important;
  width: auto !important;
  height: auto !important;
  padding: 1rem 1.5rem !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  top: 1rem !important;
  left: 1rem !important;
  z-index: 100000 !important;
  background-color: #ffd700 !important;
  color: #1a1a1a !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-decoration: underline !important;
  border: 3px solid #1a1a1a !important;
  border-radius: 4px !important;
}

/* --- Skip Links ---
   Link navigasi cepat bagi pengguna keyboard/screen reader.
   Tersembunyi sampai di-fokus dengan Tab.
*/
.skip-links {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100000;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  padding: 1rem 1.5rem;
  background-color: #ffd700;
  color: #1a1a1a;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: underline;
  border: 3px solid #1a1a1a;
  border-radius: 4px;
  transition: top 0.2s ease-in-out;
}

.skip-link:focus {
  top: 1rem;
  outline: 3px solid #1a1a1a;
  outline-offset: 2px;
}

/* --- Focus Indicator Global ---
   Setiap elemen yang bisa di-fokus keyboard wajib punya indikator jelas.
   Outline minimal 3px, kontras 3:1, offset agar tidak menempel.
*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[contenteditable]:focus-visible,
summary:focus-visible {
  outline: 3px solid #ffd700;
  outline-offset: 3px;
  border-radius: 2px;
  box-shadow: 0 0 0 6px rgba(26, 26, 26, 0.9);
}

/* Focus indicator khusus untuk elemen dalam area terang */
.has-light-background a:focus-visible,
.has-light-background button:focus-visible {
  outline-color: #8b0000;
  box-shadow: 0 0 0 6px rgba(255, 215, 0, 0.5);
}

/* --- Target Size (WCAG 2.2 - 2.5.8) ---
   Minimum touch/click target 24x24px (rekomendasi 44x44px).
   Penting untuk pengguna mobile & motor impairment.
*/
a,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
select,
[role="button"] {
  min-height: 44px;
  min-width: 44px;
}

/* Kecualikan link di dalam paragraf (inline link tidak perlu 44px) */
p a,
li a,
td a,
.wp-block-post-content a {
  min-height: auto;
  min-width: auto;
}

/* ==========================================================================
   3. ACCESSIBILITY TOOLBAR
   Toolbar A-/A/A+, mode kontras, mode disleksia.
   Style lengkap akan ditambahkan di assets/css/accessibility.css
   ========================================================================== */

.igti-a11y-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem;
  background-color: #f5f5f5;
  border-bottom: 2px solid #1a1a1a;
}

.igti-a11y-toolbar button {
  padding: 0.5rem 1rem;
  background-color: #ffffff;
  color: #1a1a1a;
  border: 2px solid #1a1a1a;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}

.igti-a11y-toolbar button[aria-pressed="true"] {
  background-color: #1a1a1a;
  color: #ffd700;
}

/* ==========================================================================
   4. BODY CLASS MODIFIERS (untuk Accessibility Toolbar)
   Diterapkan via JavaScript ke <body>.
   ========================================================================== */

/* Font size modifiers */
body.igti-font-small {
  font-size: 87.5%; /* 14px base */
}

body.igti-font-normal {
  font-size: 100%; /* 16px base */
}

body.igti-font-large {
  font-size: 125%; /* 20px base */
}

body.igti-font-xlarge {
  font-size: 150%; /* 24px base */
}

/* Mode Disleksia */
body.igti-dyslexia-mode {
  font-family: "OpenDyslexic", "Comic Sans MS", Arial, sans-serif !important;
  letter-spacing: 0.05em !important;
  word-spacing: 0.1em !important;
  line-height: 1.8 !important;
}

body.igti-dyslexia-mode p,
body.igti-dyslexia-mode li,
body.igti-dyslexia-mode h1,
body.igti-dyslexia-mode h2,
body.igti-dyslexia-mode h3,
body.igti-dyslexia-mode h4,
body.igti-dyslexia-mode h5,
body.igti-dyslexia-mode h6 {
  font-family: inherit !important;
}

/* Mode Underline Links — bantu pengguna color blind */
body.igti-underline-links a {
  text-decoration: underline !important;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   5. HIGH CONTRAST MODE (Forced Colors)
   Dukungan untuk Windows High Contrast Mode.
   Banyak pengguna low vision mengaktifkan fitur OS ini.
   ========================================================================== */

@media (forced-colors: active) {
  /* Pastikan border tetap terlihat */
  button,
  input,
  select,
  textarea,
  .wp-block-button__link {
    border: 2px solid ButtonText !important;
  }

  /* Focus indicator yang konsisten */
  *:focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 2px !important;
  }

  /* Icon SVG harus terlihat */
  svg {
    forced-color-adjust: auto;
  }
}

/* ==========================================================================
   6. PRINT STYLES
   Tampilan saat halaman dicetak (atau "Save as PDF").
   Pengguna screen reader kadang save halaman sebagai PDF untuk dibaca offline.
   ========================================================================== */

@media print {
  /* Sembunyikan elemen navigasi & toolbar saat print */
  .skip-links,
  .igti-a11y-toolbar,
  nav,
  .wp-block-navigation,
  footer .wp-block-social-links,
  .no-print {
    display: none !important;
  }

  /* Pastikan konten utama penuh lebar */
  main,
  .wp-block-post-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Warna hemat tinta */
  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
  }

  /* Tampilkan URL setelah link (untuk referensi) */
  a[href]:not([href^="#"])::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  /* Hindari page break di tengah heading */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Hindari page break di tengah paragraf */
  p,
  blockquote {
    orphans: 3;
    widows: 3;
  }

  /* Gambar tidak melewati batas halaman */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

/* ==========================================================================
   7. WORDPRESS CORE CLASSES
   Style wajib untuk kompatibilitas dengan block editor WordPress.
   ========================================================================== */

/* Alignment classes */
.alignleft {
  float: left;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
}

.alignright {
  float: right;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}

.alignwide {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.alignfull {
  width: 100%;
  max-width: 100%;
}

/* Caption gambar */
.wp-caption {
  max-width: 100%;
  margin-bottom: 1.5rem;
}

.wp-caption-text,
.wp-block-image figcaption {
  font-size: 0.9rem;
  color: #595959;
  text-align: center;
  margin-top: 0.5rem;
  font-style: italic;
}

/* Gallery */
.gallery-caption {
  display: block;
}

/* Sticky post */
.sticky {
  display: block;
}

/* "Bypostauthor" — untuk komentar dari author post */
.bypostauthor {
  display: block;
}

/* ==========================================================================
   8. RESPONSIVE HELPERS
   Utility class untuk kebutuhan responsif.
   ========================================================================== */

/* Sembunyikan di mobile */
@media (max-width: 767px) {
  .hide-on-mobile {
    display: none !important;
  }
}

/* Sembunyikan di tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .hide-on-tablet {
    display: none !important;
  }
}

/* Sembunyikan di desktop */
@media (min-width: 1024px) {
  .hide-on-desktop {
    display: none !important;
  }
}

/* Tampilkan hanya di mobile */
.show-on-mobile-only {
  display: none;
}

@media (max-width: 767px) {
  .show-on-mobile-only {
    display: block;
  }
}

/* ==========================================================================
   9. PLACEHOLDER & LOADING STATES
   Indikator loading yang aksesibel (diumumkan screen reader).
   ========================================================================== */

.igti-loading {
  position: relative;
  min-height: 100px;
}

.igti-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 4px solid #e0e0e0;
  border-top-color: #8b0000;
  border-radius: 50%;
  animation: igti-spin 1s linear infinite;
}

@keyframes igti-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Matikan animasi loading jika user prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .igti-loading::after {
    animation: none;
    border: 4px solid #8b0000;
  }
}

/* ==========================================================================
   10. ANNOUNCEMENT REGION (ARIA Live Region)
   Area untuk pengumuman dinamis ke screen reader.
   Digunakan oleh JavaScript untuk memberitahu NVDA/JAWS tentang perubahan.
   ========================================================================== */

.igti-announcement {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Akhir style.css */