/**
 * SafarPedia — global responsive typography & mobile/tablet UX
 *
 * Reference (bukan persyaratan WCAG per-pixel, tapi praktik umum):
 * - Teks tubuh: minimum ~16px (1rem) untuk kenyamanan & menghindari zoom otomatis iOS pada input.
 * - Teks sekunder: ~14px (0.875rem) minimum jika kontras cukup; hindari <12px untuk konten yang harus dibaca.
 * - WCAG 2.x: teks dapat diperbesar hingga 200% (1.4.4); gunakan rem/% agar mengikuti preferensi browser.
 * - Sasaran sentuh (baiknya): ~44×44px CSS untuk pointer kasar (Apple HIG / WCAG 2.5.8).
 *
 * Strategi: variabel --safar-* + sedikit penyesuaian html font-size di breakpoints agar utilitas
 * berbasis rem (Tailwind CDN) ikut membesar di ponsel/tablet tanpa mengedit setiap kelas.
 */

:root {
  /* Padding horizontal main content (bisa dipakai di komponen baru) */
  --safar-page-pad-x: clamp(0.875rem, 3.2vw, 1.5rem);
  --safar-page-pad-y: clamp(0.75rem, 2vw, 1.25rem);

  /* Skala opsional untuk komponen custom */
  --safar-text-caption: clamp(0.875rem, 0.82rem + 0.22vw, 0.9375rem); /* ~14–15px */
  --safar-text-body: clamp(1rem, 0.94rem + 0.28vw, 1.0625rem); /* ~16–17px */
  --safar-text-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);

  /* Radius kartu/tombol yang mengikuti lebar layar */
  --safar-radius-card: clamp(0.65rem, 1.8vw, 1.125rem);

  --safar-touch-target-min: 44px;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: clamp(4rem, 12vw, 5.5rem);
}

/* Membesarkan seluruh skala rem sedikit di ponsel & tablet agar teks tetap terbaca */
@media (max-width: 639px) {
  html {
    font-size: 106.25%;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  html {
    font-size: 103%;
  }
}

body {
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Input fokus di iOS: font < 16px memicu zoom — pakai minimal 16px */
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='hidden']),
textarea,
select {
  font-size: max(1rem, 16px);
}

/* Media mengikuti lebar viewport */
img,
video {
  max-width: 100%;
  height: auto;
}

/* Fokus keyboard tetap terlihat */
:focus-visible {
  outline: 2px solid #d4af37;
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Target sentuh — header saja untuk mengurangi regresi di dashboard rapat */
@media (pointer: coarse) and (max-width: 1023px) {
  #site-header .header-auth-link,
  #site-header .nav-link,
  #site-header .lang-switcher button,
  .site-header-subpage .header-auth-link,
  .site-header-subpage .nav-link,
  .site-header-subpage .lang-switcher button,
  #pkg-site-header .header-auth-link,
  #pkg-site-header .nav-link,
  #pkg-site-header .lang-switcher button {
    min-height: var(--safar-touch-target-min);
    box-sizing: border-box;
  }

  .site-header-subpage .nav-link,
  #pkg-site-header .nav-link,
  #site-header .nav-link {
    display: inline-flex;
    align-items: center;
  }
}

/* Utility: section / container horizontal padding fluid (gunakan di markup baru) */
.safar-container-pad-x {
  padding-left: var(--safar-page-pad-x);
  padding-right: var(--safar-page-pad-x);
}

.safar-radius-fluid {
  border-radius: var(--safar-radius-card);
}

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