/*
 * ====================================================
 *  MPP WONOSOBO - RESPONSIVE CSS
 *  Covers: Public Pages, Admin Pages, All Breakpoints
 * ====================================================
 */

/* ==========================
   GLOBAL & FONT SCALING
========================== */
@media (max-width: 576px) {
    body { font-size: 14px; }
    h1, .h1 { font-size: 26px !important; }
    h2, .h2 { font-size: 22px !important; }
    h3, .h3 { font-size: 18px !important; }
    h4, .h4 { font-size: 15px !important; }
}

/* ==========================
   NAVBAR / HEADER (PUBLIC)
========================== */
@media (max-width: 991px) {
    /* Mobile hamburger toggle - only show on small screens */
    .navbar.bootsnav .navbar-toggle {
        display: block;
        border: none;
        padding: 8px;
        background: transparent;
    }
    .navbar.bootsnav .navbar-collapse {
        background: #fff;
        border-top: 1px solid #eee;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        max-height: 80vh;
        overflow-y: auto;
    }
    .navbar.bootsnav ul.nav > li > a {
        color: #001d3d !important;
        padding: 12px 20px;
        border-bottom: 1px solid #f0f0f0;
    }
    .navbar.bootsnav ul.dropdown-menu {
        position: static !important;
        float: none;
        box-shadow: none;
        border: none;
        background: #f8f9fb;
        margin: 0;
        padding-left: 20px;
    }
    .navbar.bootsnav ul.dropdown-menu li a {
        color: #444 !important;
        padding: 10px 20px;
        font-size: 13px;
    }
    .navbar-brand img {
        width: 80px !important;
    }
}

/* Navbar adjustments for medium laptops */
@media (min-width: 992px) and (max-width: 1250px) {
    .navbar.bootsnav ul.nav > li > a {
        padding: 30px 10px !important;
        font-size: 13px !important;
    }
    .navbar-brand img.logo {
        width: 80px !important;
    }
}

/* ==========================
   BREADCRUMB AREA (Header Banner)
========================== */
@media (max-width: 768px) {
    .breadcrumb-area {
        padding: 110px 0 60px !important;
    }
    .breadcrumb-area h2 {
        font-size: 22px !important;
    }
    .breadcrumb-area ul {
        font-size: 13px !important;
    }
}

/* ==========================
   HOME PAGE - HERO SECTION
========================== */
@media (max-width: 768px) {
    /* Hero text */
    .banner-area .content-box h1 { font-size: 28px !important; }
    .banner-area .content-box p  { font-size: 14px !important; }
    .banner-area .content-box    { padding: 0 15px; text-align: center; }
}

/* ==========================
   HOME PAGE - INSTANSI GRID
========================== */
@media (max-width: 992px) {
    div[id="instansi"] div[style*="grid-template-columns:repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 576px) {
    div[id="instansi"] div[style*="grid-template-columns"] {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ==========================
   HOME PAGE - BERITA GRID
========================== */
@media (max-width: 768px) {
    #berita .row .col-md-4 { width: 100%; margin-bottom: 20px; }
}

/* ==========================
   HOME PAGE - FASILITAS GRID
========================== */
#fasilitas .row > div {
    flex: 1 1 280px;
}
@media (max-width: 576px) {
    #fasilitas .row > div {
        max-width: 100% !important;
        width: 100%;
    }
    #fasilitas .row {
        gap: 16px !important;
    }
}

/* ==========================
   HOME PAGE - APLIKASI GRID (JS Handled, fallback)
========================== */
@media (max-width: 992px) {
    #aplikasi div[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 576px) {
    #aplikasi div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================
   HOME PAGE - TESTIMONI
========================== */
@media (max-width: 768px) {
    #ulasan .row > .col-md-4 {
        width: 100% !important;
        margin-bottom: 16px;
    }
    #ulasan .row {
        flex-direction: column !important;
    }
}

/* ==========================
   HOME PAGE - ANTRIAN BANNER
========================== */
@media (max-width: 768px) {
    #antrian .row .col-md-8 h2 {
        font-size: 22px !important;
    }
    #antrian .row div[style*="display:flex;gap:12px"] {
        flex-direction: column !important;
    }
    #antrian .row div[style*="display:flex;gap:12px"] a {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================
   HOME PAGE - ZONA INTEGRITAS
========================== */
@media (max-width: 576px) {
    div.default-padding-bottom div[style*="display:flex; align-items:center"] {
        flex-direction: column !important;
        text-align: center !important;
    }
}

/* ==========================
   HOME PAGE - GRAFIK/FUN FACT
========================== */
@media (max-width: 576px) {
    .fun-fact-items .col-sm-6, .fun-fact-items .col-md-3 { width: 100% !important; float: none !important; }
    .fun-fact-items .col-md-3 { margin-bottom: 16px; }
    #chartPengunjung { max-height: 220px !important; }
    div[id="tab-harian"], div[id="tab-mingguan"], div[id="tab-bulanan"] {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
}

/* ==========================
   LAYANAN UTAMA PAGE
========================== */
@media (max-width: 768px) {
    section .col-md-6 {
        width: 100% !important;
        padding: 12px 15px !important;
    }
    section .col-md-6 img {
        height: 220px !important;
    }
    .layanan-row-reverse {
        flex-direction: column-reverse !important;
    }
}

/* ==========================
   DETAIL BERITA PAGE
========================== */
@media (max-width: 768px) {
    .blog-area .col-md-10 {
        width: 100%;
        padding: 0 10px;
    }
    /* Content card */
    div[style*="margin-top:-60px"] {
        margin-top: -30px !important;
        padding: 24px 16px !important;
    }
    /* Share buttons */
    div[style*="display:flex; justify-content:space-between"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

/* ==========================
   DETAIL HALAMAN (SOP, dll)
========================== */
@media (max-width: 768px) {
    .detail-halaman-content { padding: 0 10px; }
    .detail-halaman-content img { max-width: 100% !important; height: auto !important; }
}

/* Make images in deskripsi responsive */
.detail-halaman-content img,
div[style*="text-align:justify"] img {
    max-width: 100% !important;
    height: auto !important;
}

/* ==========================
   ORGANISASI / PENYELENGGARA PAGE
========================== */
@media (max-width: 768px) {
    /* Card instansi */
    div[style*="background:#fff; border-radius:16px; box-shadow"] .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }
    /* Stats badges */
    div[style*="display:flex;gap:12px;flex-wrap:wrap"] {
        flex-wrap: wrap;
    }
}

/* ==========================
   FOOTER (PUBLIC)
========================== */
@media (max-width: 768px) {
    footer .col-md-3,
    footer .col-md-2,
    footer .col-md-4 {
        width: 100% !important;
        margin-bottom: 28px;
    }
    footer .col-md-6 {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 8px;
    }
    footer .row:last-child {
        flex-direction: column;
        text-align: center;
    }
    /* Maps embed */
    footer div[style*="border-radius:12px"] {
        height: 200px !important;
    }
    footer div[style*="border-radius:12px"] iframe {
        height: 200px !important;
    }
}

/* ==========================
   ADMIN SIDEBAR & LAYOUT
========================== */
@media (max-width: 768px) {
    /* Ensure admin sidebar is collapsible */
    .main-sidebar {
        transform: translateX(-250px);
        transition: transform 0.3s ease;
    }
    .sidebar-open .main-sidebar {
        transform: translateX(0);
    }
    /* AdminLTE content wrapper adjustment */
    .content-wrapper {
        margin-left: 0 !important;
    }
    /* Tables in admin should scroll horizontally */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Admin cards */
    .small-box { margin-bottom: 16px; }
}

/* ==========================
   ADMIN - FORM PAGES
========================== */
@media (max-width: 768px) {
    .card-body { padding: 16px !important; }
    .form-control { font-size: 14px; }
    .btn { font-size: 14px; }
    /* Action buttons in table */
    .d-flex.justify-content-center {
        flex-wrap: wrap;
        gap: 6px !important;
    }
}

/* ==========================
   DAFTAR INFORMASI PUBLIK
========================== */
@media (max-width: 768px) {
    .nav-pills { flex-wrap: wrap; justify-content: center; }
    .nav-pills .nav-item { margin-bottom: 8px; }
    .nav-link { font-size: 13px !important; padding: 8px 14px !important; }
    /* DIP table */
    .table th, .table td { font-size: 12px; padding: 8px 6px; }
}

/* ==========================
   FLOATING BUTTONS (WA & Aksesibilitas)
========================== */
@media (max-width: 768px) {
    /* Widget aksesibilitas turun ke bawah agar tidak menutupi konten */
    .acc-widget-wrap {
        top: auto !important;
        bottom: 90px !important;
        transform: none !important;
    }
    /* Label teks aksesibilitas sembunyikan di HP agar lebih kecil */
    .acc-widget-wrap button span[style*="writing-mode"] {
        display: none !important;
    }
    .acc-widget-wrap button {
        padding: 10px !important;
    }
    /* Aksesibilitas panel buka ke atas */
    #acc-menu {
        top: auto !important;
        bottom: 0 !important;
    }
}

/* ==========================
   FUN FACT CARDS - Pastikan tidak kepotong
========================== */
@media (max-width: 768px) {
    .fun-fact-items .col-md-3,
    .fun-fact-items .col-sm-6 {
        width: 50% !important;
        padding: 8px !important;
        float: left;
    }
    .fun-fact-items .fun-fact {
        padding: 16px 10px !important;
    }
    .fun-fact-items .fun-fact .timer {
        font-size: 32px !important;
    }
    /* Extra padding bawah halaman agar tidak tertutup floating btn */
    body { padding-bottom: 80px; }
}
@media (max-width: 576px) {
    .fun-fact-items .col-md-3,
    .fun-fact-items .col-sm-6 {
        width: 100% !important;
        float: none !important;
    }
}

/* ==========================
   UTILITY: Images always responsive
========================== */
img {
    max-width: 100%;
    height: auto;
}

/* ==========================
   UTILITY: Prevent horizontal scroll
========================== */
/* PENTING: Jangan pasang overflow pada .container karena akan memblokir scroll vertikal halaman */
html {
    overflow-x: hidden;
}
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ==========================
   ACCESSIBILITY: Minimum tap target size
========================== */
@media (max-width: 768px) {
    a, button {
        min-height: 40px;
    }
    .btn {
        padding: 8px 16px;
    }
}

/* ==========================
   RICH TEXT (SUMMERNOTE) FIXES
========================== */
@media (max-width: 768px) {
    .rich-text-mobile-fix {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        padding: 0 10px !important;
    }
    .rich-text-mobile-fix * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .rich-text-mobile-fix table,
    .rich-text-mobile-fix th,
    .rich-text-mobile-fix td,
    .rich-text-mobile-fix tbody,
    .rich-text-mobile-fix tr {
        width: 100% !important;
        display: block !important;
    }
    .rich-text-mobile-fix img,
    .rich-text-mobile-fix iframe {
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }
    .rich-text-mobile-fix p,
    .rich-text-mobile-fix div,
    .rich-text-mobile-fix span,
    .rich-text-mobile-fix li,
    .rich-text-mobile-fix blockquote {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        text-indent: 0 !important;
        width: auto !important;
    }
    .rich-text-mobile-fix ul,
    .rich-text-mobile-fix ol {
        padding-left: 20px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}