/* ============================================================
   BASE.CSS -- Design tokens & aturan sitewide
   ============================================================
   DESIGN SYSTEM GLOBAL RESMI -- WEBSITE DESA BUNTU PEMA v1.1
   File ini WAJIB dimuat PALING AWAL, sebelum navbar.css dan
   home.css (maupun CSS per-halaman lain seperti pengumuman,
   berita, dokumen, layanan, potensi-desa, statistik-desa) --
   karena file-file tersebut bergantung pada variabel --color-*
   yang didefinisikan di sini.

   Seluruh warna di halaman publik WAJIB mengacu ke token di
   bawah ini. JANGAN menambah warna baru di luar palet resmi ini
   (kecuali warna status semantik: success/danger/warning/info).
   Bootstrap tetap dimuat lewat CDN, tanpa build step.

   Urutan <link> yang benar di layout:
   1. Bootstrap CDN
   2. base.css   (file ini)
   3. navbar.css (topbar + navbar + footer)
   4. home.css   (khusus halaman Beranda)
   5. CSS khusus halaman lain (pengumuman.css, dst) jika ada
*/

:root {
    /* ---- Palet resmi Desa Buntu Pema ---- */
    --color-primary: #075E3B;       /* Hijau Desa - brand utama, tombol utama, menu aktif */
    --color-primary-dark: #06452D;  /* Hijau Gelap - hover, topbar, footer, kontras tinggi */
    --color-secondary: #0F7A4D;     /* Hijau - secondary button, badge, elemen pendukung */
    --color-light: #E8F5EE;         /* Hijau Muda - background section ringan, hover bg */
    --color-accent: #84CC16;        /* Lime - highlight terbatas */
    --color-gold: #D4A72C;          /* Aksen premium/penghargaan, terbatas */
    --color-bg: #F7FAF8;            /* Background utama website */
    --color-surface: #FFFFFF;
    --color-text: #18332A;          /* Teks utama */
    --color-muted: #66756D;         /* Teks sekunder/metadata */
    --color-border: #DDE8E1;        /* Border/divider/input */

    /* ---- Warna status (semantik, dipakai terbatas utk alert/badge status) ---- */
    --color-success: #0F7A4D;
    --color-danger: #DC2626;
    --color-warning: #D4A72C;
    --color-info: #075E3B;

    /* alias lama supaya kompatibel dgn class existing di halaman publik lain */
    --color-primary-light: #0F7A4D;
    --color-text-secondary: #66756D;

    /* Alias kompatibilitas -- BEBERAPA CSS halaman (pengumuman, berita,
       dokumen, layanan, potensi-desa, statistik-desa) sudah dari awal
       memakai nama var(--color-dark), sedangkan :root ini hanya
       mendefinisikan --color-primary-dark. Tanpa alias ini, var(--color-dark)
       tidak terdefinisi sehingga background/warna hover pada tombol dan
       gradient hero jadi transparan/hilang. Alias saja, BUKAN warna baru --
       nilainya identik dengan --color-primary-dark. */
    --color-dark: #06452D;

    /* ---- Token bayangan & radius bersama (dipakai navbar.css & home.css
       supaya "bahasa" bayangan/rounding konsisten di seluruh situs,
       bukan angka acak berulang di tiap file). ---- */
    --shadow-sm: 0 6px 16px -6px rgba(6, 69, 45, 0.18);
    --shadow-md: 0 12px 28px -10px rgba(6, 69, 45, 0.20);
    --shadow-lg: 0 20px 45px -18px rgba(6, 69, 45, 0.28);
    --radius-pill: 999px;
    --radius-lg: 20px;
    --radius-md: 14px;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

body {
    color: var(--color-text);
    background-color: var(--color-bg);
    overflow-x: hidden;
}

/* PERBAIKAN LAYOUT (sticky footer): pola standar Flexbox --
   `<main class="flex-grow-1">` sebagai flex item secara default
   punya min-height:auto (bukan 0), yang di beberapa kondisi konten
   bersarang (grid+flex+accordion seperti pada halaman Layanan Desa)
   bisa membuat flex item "menolak menyusut" sesuai konten
   sebenarnya, berpotensi membuat elemen SETELAHNYA (footer) tidak
   terdorong dengan benar. min-height:0 adalah perbaikan standar
   untuk pola ini -- BUKAN hack (tidak pakai position/z-index/
   overflow:hidden/height tetap), main tetap free-flow mengikuti
   tinggi konten sungguhan. */
main.flex-grow-1 {
    min-height: 0;
}

/* Focus state konsisten SATU KALI untuk seluruh halaman publik
   (Prompt L, poin Accessibility) -- daripada menambah aturan serupa
   ke tiap file CSS per-halaman satu-satu, cukup satu aturan global di
   sini yang berlaku ke SEMUA tombol/link custom di halaman manapun,
   TANPA perlu tahu nama class spesifik tiap halaman. Warna hijau
   design system, bukan biru default browser -- supaya konsisten
   dengan palet, tapi tetap terlihat jelas untuk keyboard navigation.
   Elemen yang SUDAH punya :focus-visible sendiri (navbar, tombol
   pengumuman) otomatis tetap pakai aturan miliknya sendiri karena
   selector lebih spesifik/urutan CSS lebih akhir. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.navbar-toggler:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: none;
}

a {
    color: var(--color-primary);
    transition: color .15s ease;
}

a:hover {
    color: var(--color-primary-dark);
}

.navbar-brand .nav-link.active,
.navbar-nav .nav-link.active:not(.nav-pill-link) {
    color: var(--color-primary) !important;
}

/* ---- Override tombol Bootstrap sitewide (bukan spesifik navbar/home) ---- */
.btn-success,
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-success:hover,
.btn-primary:hover {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

.btn-outline-success {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-success:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.text-success {
    color: var(--color-primary) !important;
}

.bg-light {
    background-color: var(--color-light) !important;
}

/* Legacy generic hero/cta -- dipertahankan (bukan .hero-section-v2 /
   .cta-section-v2 yang khusus Beranda di home.css) karena kemungkinan
   masih dipakai di halaman lain (mis. header sederhana halaman dalam). */
.hero-section {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
}

.cta-section {
    background-color: var(--color-primary-dark);
}

/* Animasi ringan sitewide (dipakai navbar.css & home.css) */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    animation: fadeInUp .6s var(--ease) both;
}

@media (prefers-reduced-motion: reduce) {
    .fade-in-up { animation: none; }
}

@media (min-width: 992px) {
    .py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
}