/* ==========================================================================
   DESCAN 1605 — penyeragaman layout, kartu, tipografi, dan responsivitas.

   File ini sengaja dimuat SETELAH CSS template (tempdesa/temp2/admin3)
   supaya bisa menimpa gaya bawaan template tanpa perlu mengubah file
   template itu sendiri — sehingga template tetap bisa diperbarui.
   ========================================================================== */

:root {
    /* Rasio tetap untuk gambar kartu. Sumber gambar boleh beda-beda ukuran
       (potret, lanskap, kotak) — rasio ini yang menentukan tampilannya. */
    --dc-card-ratio: 3 / 4;
    --dc-radius: 12px;
    --dc-gap: 1.5rem;

    /* Tinggi header fixed; dipakai juga untuk offset <main>. */
    --dc-header-h: 72px;

    --dc-shadow: 0 1px 3px rgba(16, 24, 40, .1), 0 1px 2px rgba(16, 24, 40, .06);
    --dc-shadow-hover: 0 12px 24px -8px rgba(16, 24, 40, .18);
}

/* ==========================================================================
   1. TIPOGRAFI
   Skala fluid dengan clamp() supaya ukuran menyesuaikan lebar layar tanpa
   perlu banyak media query, dan tidak ada judul yang "meledak" di mobile.
   ========================================================================== */

body {
    /* Cegah teks membesar otomatis saat rotasi di iOS. */
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

h1,
.h1 {
    font-size: clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem);
}

h2,
.h2 {
    font-size: clamp(1.5rem, 1.22rem + 1.35vw, 2.25rem);
}

h3,
.h3 {
    font-size: clamp(1.25rem, 1.08rem + .8vw, 1.65rem);
}

h4,
.h4 {
    font-size: clamp(1.1rem, 1.02rem + .4vw, 1.3rem);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.25;
    text-wrap: balance;
    /* hindari 1 kata menggantung di baris terakhir judul */
}

p,
li {
    line-height: 1.65;
}

/* Paragraf panjang lebih enak dibaca bila lebarnya dibatasi. */
.section-title p {
    max-width: 65ch;
    margin-inline: auto;
    text-wrap: pretty;
}

/* Cegah kata panjang (URL, nama file) merusak layout di layar sempit. */
p,
h1,
h2,
h3,
.card .title {
    overflow-wrap: break-word;
}

/* ==========================================================================
   2. KARTU SERAGAM
   Masalah sebelumnya: tiap kartu memakai gambar dengan rasio berbeda
   (4426x6250, 988x1280, 2000x2000) + `max-height` saja, sehingga tiap
   kartu tampil beda tinggi/bentuk. Solusinya: kotak media ber-rasio tetap
   + object-fit, jadi ukuran sumber tidak lagi menentukan tampilan.
   ========================================================================== */

.dc-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, .08);
    border-radius: var(--dc-radius);
    overflow: hidden;
    box-shadow: var(--dc-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}

.dc-card:hover,
.dc-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--dc-shadow-hover);
}

.dc-card__media {
    position: relative;
    aspect-ratio: var(--dc-card-ratio);
    background: #f2f4f7;
    overflow: hidden;
}

.dc-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* seragamkan apapun rasio aslinya */
    object-position: top center;
    display: block;
}

.dc-card__body {
    padding: 1rem 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.dc-card__title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.dc-card__text {
    font-size: .925rem;
    color: #475467;
    margin-bottom: 0;
}

/* Tombol aksi di pojok gambar (mis. buka PDF). */
.dc-card__action {
    position: absolute;
    right: .625rem;
    bottom: .625rem;
    width: 44px;
    /* target sentuh minimum 44px */
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: #0d6efd;
    font-size: 1.35rem;
    cursor: pointer;
    box-shadow: var(--dc-shadow);
    transition: background-color .2s ease, transform .2s ease;
}

.dc-card__action:hover,
.dc-card__action:focus-visible {
    background: #fff;
    transform: scale(1.06);
}

/* ==========================================================================
   3. NAVBAR
   Perbaikan: nama desa panjang tidak lagi mendorong menu keluar layar,
   dan tombol hamburger punya area sentuh yang layak.
   ========================================================================== */

#header.header {
    min-height: var(--dc-header-h);
}

.header .logo {
    min-width: 0;
    /* izinkan anak flex menyusut agar bisa di-truncate */
    gap: .625rem;
}

.header .logo img {
    height: 42px;
    width: auto;
    object-fit: contain;
    flex: 0 0 auto;
}

.header .logo .sitename {
    font-size: clamp(.95rem, .8rem + .7vw, 1.5rem);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Tombol hamburger: perbesar area sentuh tanpa mengubah ikonnya. */
.mobile-nav-toggle {
    padding: .5rem;
    margin: -.5rem;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

/* Offset <main> mengikuti tinggi header, bukan angka tetap 80px yang
   meleset saat header membungkus di layar kecil. */
main.main {
    margin-top: var(--dc-header-h) !important;
}

@media (max-width: 575.98px) {
    :root {
        --dc-header-h: 64px;
    }

    .header .logo img {
        height: 34px;
    }
}

/* Item menu mobile: jarak sentuh lebih nyaman. */
@media (max-width: 1199.98px) {
    .navmenu ul li a {
        padding-block: .7rem;
    }
}

/* ==========================================================================
   4. GRID & GAMBAR UMUM
   ========================================================================== */

/* Tidak ada gambar yang boleh melebihi kontainernya. */
img {
    max-width: 100%;
}

/* Slider infografis: seragamkan tinggi slide. */
.infografis-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 10px;
    background: #f2f4f7;
}

/* ==========================================================================
   5. TABEL RESPONSIF
   Tabel lebar (data keluarga, status pembinaan) harus bisa digeser
   horizontal di mobile, bukan merusak lebar halaman.
   ========================================================================== */

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
    .table-wrap {
        overflow-x: auto;
    }

    .table-wrap>table {
        min-width: 640px;
    }
}

/* ==========================================================================
   6. MODAL PDF
   ========================================================================== */

.dc-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(16, 24, 40, .8);
}

.dc-modal.is-open {
    display: flex;
}

.dc-modal__dialog {
    position: relative;
    width: min(960px, 100%);
    height: min(90vh, 100%);
    background: #fff;
    border-radius: var(--dc-radius);
    padding: .625rem;
}

.dc-modal__close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    line-height: 1;
    color: #fff;
    background: rgba(16, 24, 40, .65);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
    transition: background-color .2s ease;
}

.dc-modal__close:hover,
.dc-modal__close:focus-visible {
    background: rgba(16, 24, 40, .9);
}

.dc-modal__frame {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: calc(var(--dc-radius) - 4px);
}

/* ==========================================================================
   7. AKSESIBILITAS
   ========================================================================== */

/* Fokus keyboard harus selalu terlihat. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Hormati preferensi pengguna yang mengurangi animasi. */
@media (prefers-reduced-motion: reduce) {

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