/* Custom Stylesheet untuk Website Resmi Desa Penggarit */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Merriweather:ital,wght@0,400;0,700;1,300;1,400&display=swap');

:root {
  --primary-emerald: #064e3b;
  --accent-amber: #d97706;
}

html {
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #1e293b;
  background-color: #f8fafc;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-x pan-y;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* ================= GLOBAL DARK MODE STYLES ================= */
html.dark {
  color-scheme: dark;
}
html.dark body {
  background-color: #0b1322 !important;
  color: #f1f5f9 !important;
}
html.dark .bg-white {
  background-color: #151e32 !important;
}
html.dark .bg-slate-50 {
  background-color: #0b1322 !important;
}
html.dark .bg-slate-100 {
  background-color: #1a243a !important;
}
html.dark .bg-slate-200 {
  background-color: #24324f !important;
}
html.dark .border-slate-200,
html.dark .border-slate-100 {
  border-color: #263554 !important;
}
html.dark .border-slate-300 {
  border-color: #33466d !important;
}
html.dark .text-slate-900,
html.dark .text-slate-800 {
  color: #f8fafc !important;
}
html.dark .text-slate-700 {
  color: #e2e8f0 !important;
}
html.dark .text-slate-600 {
  color: #cbd5e1 !important;
}
html.dark .text-slate-500 {
  color: #94a3b8 !important;
}
html.dark .text-slate-400 {
  color: #64748b !important;
}
html.dark header {
  background-color: rgba(21, 30, 50, 0.98) !important;
  border-color: #263554 !important;
}
html.dark #mobile-menu {
  background-color: #151e32 !important;
  border-color: #263554 !important;
}
html.dark #mobile-bottom-nav {
  background-color: rgba(21, 30, 50, 0.98) !important;
  border-color: #263554 !important;
}
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #151e32 !important;
  color: #f8fafc !important;
  border-color: #33466d !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #64748b !important;
}
html.dark .glass-panel {
  background: rgba(21, 30, 50, 0.88) !important;
}
html.dark ::-webkit-scrollbar-track {
  background: #0b1322 !important;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #33466d !important;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #10b981 !important;
}

/* Khusus Area Anggaran (APBDes) Kontras Tinggi di Dark Mode */
html.dark #apbdes-section {
  background: linear-gradient(180deg, #0b1322 0%, #111a2e 100%) !important;
  border-color: #1e293b !important;
}
html.dark #apbdes-section h2,
html.dark #apbdes-section h3,
html.dark #apbdes-section h4 {
  color: #ffffff !important;
}
html.dark #apbdes-section p {
  color: #cbd5e1 !important;
}
html.dark #apbdes-section .bg-white {
  background-color: #151f33 !important;
  border-color: #24334f !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4) !important;
}
html.dark #apbdes-section .bg-slate-50 {
  background-color: #1a253c !important;
  border-color: #2a3b5a !important;
}
html.dark #apbdes-section .bg-slate-200 {
  background-color: #2a3a58 !important;
}
html.dark #apbdes-pendapatan-list p,
html.dark #apbdes-belanja-list span,
html.dark #apbdes-proyek-container h4 {
  color: #ffffff !important;
}
html.dark #apbdes-pendapatan-list span.font-bold,
html.dark #apbdes-belanja-list span.font-bold {
  color: #38bdf8 !important; /* Biru toska terang agar nominal uang terbaca sangat kontras */
}
html.dark #apbdes-pendapatan-list p.text-slate-500,
html.dark #apbdes-belanja-list div.text-slate-500,
html.dark #apbdes-proyek-container p.text-slate-500 {
  color: #94a3b8 !important;
}
html.dark .apbdes-tab-btn[data-tab="pendapatan"]:not(.bg-emerald-600),
html.dark .apbdes-tab-btn[data-tab="belanja"]:not(.bg-emerald-600),
html.dark .apbdes-tab-btn[data-tab="proyek"]:not(.bg-emerald-600) {
  background-color: #1e293b !important;
  color: #cbd5e1 !important;
}

/* ================= MOBILE-FRIENDLY RESPONSIVENESS ================= */
* {
  box-sizing: border-box;
}

img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

table {
  width: 100%;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  button, a.btn, input, select, textarea {
    min-height: 40px;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #059669;
}

/* Animasi Fade In */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ================= SISTEM ANIMASI SCROLL REVEAL MODERN ================= */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.reveal-fade {
  transform: none;
}

.reveal-on-scroll.reveal-up {
  transform: translateY(32px);
}

.reveal-on-scroll.reveal-down {
  transform: translateY(-32px);
}

.reveal-on-scroll.reveal-left {
  transform: translateX(-32px);
}

.reveal-on-scroll.reveal-right {
  transform: translateX(32px);
}

.reveal-on-scroll.reveal-scale {
  transform: scale(0.94);
}

.reveal-on-scroll.reveal-pop {
  transform: scale(0.92) translateY(20px);
}

/* Keadaan setelah terlihat (Revealed) */
.reveal-on-scroll.is-revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* Stagger Delay Classes */
.reveal-delay-50  { transition-delay: 50ms; }
.reveal-delay-100 { transition-delay: 100ms; }
.reveal-delay-150 { transition-delay: 150ms; }
.reveal-delay-200 { transition-delay: 200ms; }
.reveal-delay-250 { transition-delay: 250ms; }
.reveal-delay-300 { transition-delay: 300ms; }
.reveal-delay-350 { transition-delay: 350ms; }
.reveal-delay-400 { transition-delay: 400ms; }
.reveal-delay-500 { transition-delay: 500ms; }
.reveal-delay-600 { transition-delay: 600ms; }

/* Aksesibilitas bagi pengguna dengan prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Hero Background Glow & Image Effects */
.hero-banner-image {
  position: relative;
  background-image: 
    linear-gradient(180deg, rgba(6, 78, 59, 0.68) 0%, rgba(4, 47, 36, 0.78) 45%, rgba(15, 23, 42, 0.94) 100%),
    url('../assets/hero-banner.jpg');
  background-size: cover;
  background-position: center 32%;
  background-repeat: no-repeat;
}

/* Glassmorphism Effect */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.glass-dark {
  background: rgba(6, 78, 59, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.glass-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Mobile Friendly Touch Optimizations */
@media (max-width: 768px) {
  /* Beri ruang di bagian bawah agar tidak tertutup bottom mobile bar */
  body {
    padding-bottom: 70px;
  }
}
/* Format Konten Berita dari WordPress (Gutenberg) */
.prose figure,
.prose figure.wp-block-image {
  margin: 1.25rem 0;
}
.prose figure img,
.prose figure.wp-block-image img {
  border-radius: 0.75rem;
  max-width: 100%;
  height: auto;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.prose ul.wp-block-list,
.prose ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin: 1rem 0;
}
.prose ol.wp-block-list,
.prose ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin: 1rem 0;
}
.prose li {
  margin-bottom: 0.5rem;
}
.prose blockquote,
.prose blockquote.wp-block-quote {
  border-left: 4px solid #059669;
  padding-left: 1rem;
  font-style: italic;
  margin: 1.25rem 0;
  color: #064e3b;
  background-color: #ecfdf5;
  padding: 0.75rem 1rem;
  border-radius: 0 0.75rem 0.75rem 0;
}
.prose h1, .prose h2, .prose h3, .prose h4 {
  font-weight: 700;
  color: #1e293b;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
.prose p {
  margin-bottom: 1rem;
  line-height: 1.75;
}

/* Khusus Media Print untuk Format Surat Mandiri Resmi */
@media print {
  /* Sembunyikan elemen navigasi, banner, footer, bottom bar, dan tab website */
  body * {
    visibility: hidden;
  }

  /* Tampilkan hanya lembar kertas surat resmi */
  #modal-preview-surat,
  #modal-preview-surat * {
    visibility: visible;
  }

  #modal-preview-surat {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent !important;
    display: block !important;
  }

  /* Sembunyikan tombol aksi pada modal saat cetak */
  .no-print,
  #btn-print-surat,
  #btn-download-pdf,
  #btn-edit-surat,
  .close-modal-btn,
  #mobile-bottom-nav {
    display: none !important;
  }

  .surat-paper {
    box-sizing: border-box !important;
    width: 210mm !important;
    min-height: 297mm !important;
    max-width: 210mm !important;
    margin: 0 auto !important;
    padding: 20mm !important; /* Standar Kertas A4 Margin 2cm di setiap sisi */
    border: none !important;
    box-shadow: none !important;
    font-size: 11pt !important;
    line-height: 1.5 !important;
    color: #000 !important;
    background: #fff !important;
  }

  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Hilangkan URL, tanggal, dan header/footer bawaan browser secara total */
  @page {
    size: A4 portrait;
    margin: 0 !important;
  }
}