/* =====================================================================
   Tata letak responsif situs publik (dimuat paling akhir di layouts/main.php).

   Prinsip: halaman tidak pernah bisa digeser ke samping, dan tidak ada
   konten yang tertutup header di lebar layar berapa pun.
   ===================================================================== */

html, body { max-width: 100%; overflow-x: clip; }

/* ---------- Header ----------
   Dulu #header `position: fixed` lalu JavaScript menghitung `top`-nya dari
   tinggi top bar, sementara jarak konten di bawahnya ditebak per halaman
   (padding-top: 80px). Begitu top bar membungkus ke 2-3 baris (tablet, HP,
   zoom), hitungannya meleset: header menimpa judul halaman atau menyisakan
   celah. Sticky membuat header tetap di alur halaman tepat di bawah top bar
   dan menempel di atas layar saat digulir, tanpa hitungan apa pun. */
#header.fixed-top {
    position: sticky;
    top: 0 !important;
}

/* Jarak lama untuk header fixed tidak diperlukan lagi. */
.dokumen-index-wrapper,
.site-about,
.berita-index-wrapper,
.page-with-fixed-header { padding-top: 24px !important; }

/* Lompatan ke #anchor tidak berhenti di bawah header yang menempel. */
html { scroll-padding-top: 76px; }

/* ---------- Top bar identitas ----------
   Satu baris hanya muat mulai 1200px. Di bawahnya blok nama dan blok kontak
   masing-masing satu baris penuh, rata tengah; sebelumnya keduanya dipaksa
   sebaris (nowrap) sehingga nama terjepit menjadi 5 baris dan menimpa email. */
@media (max-width: 1199.98px) {
    .top-info-content { flex-wrap: wrap !important; justify-content: center; row-gap: 6px; }
    .top-info-left { flex: 1 1 100% !important; justify-content: center; }
    .top-info-text { max-width: none !important; }
    .top-info-contact { flex: 1 1 100% !important; justify-content: center !important; }
    .gov-clock { margin-left: 0 !important; }
    .gov-clock::before { display: none; }
}
@media (max-width: 575.98px) {
    .top-info-logo { height: 40px !important; }
    .top-info-text { font-size: 11.5px !important; line-height: 1.35; }
    .top-info-contact { gap: 4px 10px !important; font-size: 11px !important; }
    .btn-login { padding: 4px 12px !important; }
}

/* ---------- Menu desktop di layar sedang (992-1279px) ----------
   Menu lengkap + kotak cari tidak muat sehingga kotak cari terpotong di kanan.
   Kotak cari disembunyikan (pencarian tetap ada di beranda, halaman dokumen,
   dan menu HP) dan jarak antarmenu dirapatkan. */
@media (min-width: 992px) and (max-width: 1279.98px) {
    #header .header-search { display: none !important; }
    #header .navbar-menu-desktop > ul > li > a,
    #header .navbar-menu-desktop > ul > li > a:focus { padding: 6px 7px !important; font-size: 12.5px !important; }
    #header > .container { gap: 8px !important; }
}

/* ---------- Konten umum ---------- */
img, video, iframe, embed, object { max-width: 100%; }
img, video { height: auto; }
iframe { border: 0; }

/* Teks panjang tanpa spasi (nomor, nama berkas, URL) dipatahkan. */
main h1, main h2, main h3, main h4, main p, main td, main li, main a { overflow-wrap: anywhere; }

/* Tabel di halaman konten digeser di dalam kotaknya. */
main .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
main table { max-width: 100%; }
@media (max-width: 767.98px) {
    main table:not(.table-responsive table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Item flex/grid tidak melebar mengikuti isinya. */
main .row > [class*="col"] { min-width: 0; }

/* ---------- Grafik (Chart.js) ----------
   Kanvas mengikuti lebar kotak; tinggi diatur oleh pembungkusnya. */
canvas { max-width: 100% !important; }

/* ---------- Tombol aksesibilitas ----------
   Lebih kecil di HP agar tidak menutupi teks di pojok kiri bawah. */
@media (max-width: 575.98px) {
    .a11y-widget { left: .6rem !important; bottom: .8rem !important; }
    .a11y-widget__toggle { width: 44px !important; height: 44px !important; font-size: 18px !important; }
}

/* ---------- Beranda ----------
   Banner dulu diberi ruang setinggi navigasi yang fixed menumpang di atasnya;
   navigasi kini sticky (di atas banner, bukan menimpanya). */
.banner-section .banner-image { padding-top: 0 !important; }