/*
Theme Name: PWPM NTB Child
Theme URI: https://pwpmntb.org/
Description: Child theme untuk website PWPM NTB
Author: Tim Kolaborasi & Gemini
Author URI: https://pwpmntb.org/
Template: pwpmntb-theme
Version: 2.0.1
*/


/* =========================================================================
    1. DASAR & LAYOUT UTAMA
    ========================================================================= */

    body { 
     font-family: Arial, sans-serif; 
     line-height: 1.6; 
     margin: 0; 
     padding: 0; 
     background-color: #f4f4f4; 
     color: #333; 
}

.container { 
     max-width: 1200px; 
     margin: auto; 
     overflow: hidden; 
     padding: 0 20px; 
}

.main-content-row { 
     display: flex; 
     flex-wrap: wrap; 
     margin-top: 20px; 
}

.main-content { 
     flex: 1; 
     min-width: 65%; 
     padding-right: 20px; 
     padding: 20px; 
     background: #fff; 
     margin-top:20px;
}

.sidebar { 
     flex: 1; 
     min-width: 30%; 
}

/* =========================================================================
    2. HEADER & NAVIGASI
    ========================================================================= */

#header { 
     background: #003366; 
     color: #fff; 
     padding: 1.2rem 0; 
     border-bottom: 5px solid #d4af37; 
}

#header .container { 
     display: flex; 
     align-items: center; 
}

#header .logo img { 
     height: 90px; 
}

#header .site-title { 
     margin-left: 20px; 
}

#header .site-title h1 { 
     margin: 0; 
     font-size: 2.14em; 
     line-height: 1.1; 
     font-weight: bold; 
}

#header .site-title h2 { 
     margin: 0; 
     font-size: 2.8em; 
     font-weight: bold; 
}

#header .site-title h1 a {
     color: #fff;
     text-decoration: none;
}

/* Header Kustom untuk Mini Web Daerah */
#header.header-daerah .container {
     display: flex;
     align-items: center; 
}
#header.header-daerah .site-title-desktop { /* <--- SUDAH DIUBAH */
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding-left: 20px;
}
#header.header-daerah .site-title h1,
#header.header-daerah .site-title h2 {
     margin: 0;
     line-height: 1.1;
}
#header.header-daerah .site-title h1 {
     font-size: 2.6em;
     font-weight: normal;
     color: #ffffff;
}
#header.header-daerah .site-title h2 {
     font-size: 3.8em;
     font-weight: bold;
     color: #ffffff;
}


/* =========================================================================
    3. KONTEN & POSTINGAN
    ========================================================================= */

.post-title { 
     font-size: 1.8em; 
     color: #003366; 
     margin-top: 20px;
}

.post-meta { 
     font-size: 0.9em; 
     color: #666; 
     margin-bottom: 20px; 
}

.single-featured-image img {
     width: 100%;
     height: auto;
     border-radius: 5px;
}

/* Arsip Berita (index.php / archive.php) */
.post-item-archive {
     margin-bottom: 40px;
     padding-bottom: 30px;
     border-bottom: 1px solid #eee;
     overflow: hidden;
}
.post-item-archive:last-child {
     border-bottom: none;
     margin-bottom: 20px;
}
.post-thumbnail-archive {
     float: left;
     margin: 0 20px 10px 0;
     width: 250px;
}
.post-thumbnail-archive img {
     width: 100%;
     height: auto;
     border-radius: 4px;
}
.entry-content-archive {
     overflow: hidden;
}
.entry-content-archive .entry-title {
     margin-top: 0;
     font-size: 1.5em;
     line-height: 1.3;
}
.entry-content-archive .entry-title a {
     text-decoration: none;
     color: #003366;
}
.entry-content-archive .post-meta {
     margin-bottom: 15px;
}

/* Grid Berita (Beranda & Mini Web) */
.berita-utama-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 15px;
}
.berita-utama-item a {
     text-decoration: none;
}
.berita-utama-item .berita-utama-thumbnail img {
     width: 100%;
     height: 180px;
     object-fit: cover;
     display: block;
     border-radius: 4px;
     transition: opacity 0.3s ease;
}
.berita-utama-item:hover .berita-utama-thumbnail img {
     opacity: 0.85;
}
.berita-utama-item .berita-utama-title {
     font-size: 1.1em;
     margin-top: 10px;
     line-height: 1.4;
     color: #333;
}
.berita-utama-item:hover .berita-utama-title {
     color: #003366;
}


/* =========================================================================
    4. DIREKTORI & PIMPINAN
    ========================================================================= */
     
.direktori-grid { 
     display: grid; 
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
     gap: 20px; 
}

.daerah-item { 
     background: #fafafa; 
     padding: 20px; 
     border: 1px solid #ddd; 
     border-left: 5px solid #d4af37; 
     display: flex; 
     flex-direction: column; 
}

.daerah-item h3 { 
     margin-top: 0; 
     color: #003366;
}

.daerah-item p { 
     flex-grow: 1; 
}

.daerah-links a { 
     display: inline-block; 
     margin-top: 15px; 
     text-decoration: none; 
     background: #003366; 
     color: white; 
     padding: 8px 12px; 
     border-radius: 3px; 
     font-size: 0.9em; 
}

.daerah-links a:hover { 
     background: #0055a4; 
}

.bidang-grid { 
     display: grid; 
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
     gap: 20px; 
}

.bidang-item { 
     background: #fafafa; 
     padding: 20px; 
     border: 1px solid #ddd; 
     border-left: 5px solid #003366; 
     display: flex; 
     flex-direction: column; 
}

.bidang-item h3 { 
     margin-top: 0; 
     color: #003366;
}

.bidang-item p { 
     flex-grow: 1; 
}

.bidang-pimpinan { 
     font-size: 0.9em; 
     margin-top: 15px; 
     padding-top: 10px; 
     border-top: 1px dotted #ccc; 
}

.bidang-links a { 
     display: inline-block; 
     margin-top: 15px; 
     text-decoration: none; 
     background: #003366; 
     color: white; 
     padding: 8px 12px; 
     border-radius: 3px; 
     font-size: 0.9em; 
}

.bidang-links a:hover { 
     background: #0055a4; 
}

.pimpinan-section { 
     background: #fff; 
     padding: 20px; 
     margin-bottom: 20px; 
     text-align: center; 
}

.pimpinan-photos { 
     display: flex; 
     justify-content: center; 
     gap: 20px; 
     margin-bottom: 20px; 
     flex-wrap: wrap; 
}

.pimpinan-item { 
     display: flex; 
     flex-direction: column; 
     align-items: center; 
     width: 220px; 
}

.pimpinan-item img { 
     width: 150px; 
     height: 150px; 
     border-radius: 50%; 
     border: 4px solid #003366; 
     object-fit: cover; 
     object-position: top; 
}

.pimpinan-item strong { 
     font-size: 1.05em; 
     line-height: 1.3; 
     min-height: 2.6em; 
     display: block; 
     margin-bottom: 5px; 
     margin-top: 10px; 
     color: #333; 
}

.pimpinan-item span { 
     font-size: 0.9em; 
     color: #555; 
}

.pimpinan-sambutan { 
     text-align: left; 
     border-top: 1px solid #eee; 
     padding-top: 20px; 
}


/* =========================================================================
    5. SIDEBAR & WIDGET
    ========================================================================= */

.widget { 
     background: #fff; 
     padding: 20px; 
     margin-bottom: 20px; 
}

.widget-title { 
     font-size: 1.2em; 
     border-bottom: 2px solid #003366; 
     padding-bottom: 10px; 
     margin-bottom: 10px; 
}

.widget ul { 
     list-style: none; 
     padding: 0; 
}

.widget ul li { 
     margin-bottom: 10px; 
     border-bottom: 1px dotted #ccc; 
     padding-bottom: 5px;
}

.widget ul li a { 
     text-decoration: none; 
     color: #333; 
}

.sidebar .widget_media_image {
     padding: 0;
}
.sidebar .widget_media_image img {
     width: 100%;
     height: auto;
     display: block;
}


/* =========================================================================
    6. TABEL & DOKUMEN
    ========================================================================= */

.arsip-table { 
     width: 100%; 
     border-collapse: collapse; 
     margin-top: 20px; 
}

.arsip-table th, .arsip-table td { 
     border: 1px solid #ddd; 
     padding: 12px; 
     text-align: left; 
}

.arsip-table th { 
     background-color: #003366; 
     color: white; 
}

.arsip-table tr:nth-child(even) { 
     background-color: #f2f2f2; 
}

.arsip-table a {
     text-decoration: none; 
     color: #0055a4; 
     font-weight: bold;
}

.arsip-table .btn-download { 
     color: #fff; 
     background-color: #28a745; 
     padding: 5px 10px; 
     border-radius: 3px; 
}

.arsip-table .btn-disabled { 
     background-color: #ccc; 
     cursor: not-allowed; 
}

.kategori-dokumen-list {
     list-style: none;
     padding: 0;
     margin-top: 20px;
}
.kategori-dokumen-list li a {
     display: block;
     padding: 15px;
     background-color: #f9f9f9;
     border-bottom: 1px solid #eee;
     text-decoration: none;
     color: #333;
     font-weight: bold;
     transition: background-color 0.3s ease;
}
.kategori-dokumen-list li a:hover {
     background-color: #f0f0f0;
}


/* =========================================================================
    7. FORMULIR ULTIMATE MEMBER
    ========================================================================= */

.um {
     max-width: 800px;
     margin: 20px auto;
}
.um .um-form {
     background: #fff;
     padding: 30px !important;
     border-radius: 5px;
     box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.um-form .um-form-title {
     font-size: 1.8em !important;
     color: #003366;
     border-bottom: 2px solid #003366;
     padding-bottom: 10px;
     margin-bottom: 20px;
     text-align: center;
}
.um .um-field-label label {
     font-weight: bold !important;
}
.um .um-form input[type=text],
.um .um-form input[type=password],
.um .um-form input[type=email],
.um .um-form input[type=number],
.um .um-form input[type=date],
.um .um-form select,
.um .um-form textarea {
     width: 100% !important;
     padding: 10px !important;
     border: 1px solid #ddd !important;
     border-radius: 4px !important;
     box-sizing: border-box !important;
}
.um .um-form .um-button,
.um .um-form input[type=submit] {
     display: block !important;
     width: 100% !important;
     background-color: #003366 !important;
     color: #fff !important;
     padding: 12px !important;
     border: none !important;
     border-radius: 4px !important;
     font-size: 1.1em !important;
     cursor: pointer !important;
     transition: background-color 0.3s ease !important;
}
.um .um-form .um-button:hover,
.um .um-form input[type=submit]:hover {
     background-color: #0055a4 !important;
}

/* =========================================================================
    8. FOOTER
    ========================================================================= */

#footer { 
     background: #333; 
     color: #fff; 
     text-align: center; 
     padding: 20px 0; 
     margin-top: 20px; 
}


/* =========================================================================
    9. LAIN-LAIN & RESPONSIVE
    ========================================================================= */

.page-template-template-profil .main-content {
     width: 100%;
     max-width: 100%;
     padding-right: 0;
}

/* Aturan untuk layar tablet */
@media (max-width: 768px) {
     .berita-utama-grid {
         grid-template-columns: repeat(2, 1fr);
     }
}

/* Aturan untuk layar HP */
@media (max-width: 600px) {
     .post-thumbnail-archive {
         float: none;
         width: 100%;
         margin-right: 0;
         margin-bottom: 15px;
     }
}
@media (max-width: 480px) {
     .berita-utama-grid {
         grid-template-columns: 1fr;
     }
}

/* =========================================================================
    PERBAIKAN TAMPILAN: Jarak Antar Slide Berita Utama (Slick Carousel)
    ========================================================================= */

/* Wadah utama dari slider Slick perlu sedikit padding negatif 
    untuk mengkompensasi jarak pada slide pertama dan terakhir */
    .news-slider {
     margin-left: -2.5px;
     margin-right: -2.5px;
}

/* Beri jarak pada setiap slide berita di dalamnya */
.news-slider .slick-slide {
     padding-left: 2.5px;
     padding-right: 2.5px;
}


/* =========================================================================
    KONTROL TAMPILAN FITUR BARU
========================================================================= */

.print-only-title,
.print-only-header {
    display: none;
}
.column-number,
.row-number {
    display: none;
}


/*
 * ========================================================================
 * CSS Khusus untuk Mencetak Laporan
 * ========================================================================
 */
@media print {
    
    /* --- Gaya Cetak Umum --- */
    body, #page, .site-content, .container, .main-content, main {
        width: 100% !important; margin: 0 !important; padding: 0 !important;
        box-shadow: none !important; border: none !important; background: #fff !important;
    }
    header.site-header, #header, footer.site-footer, #footer, #wpadminbar, 
    #main-nav, .main-navigation, #secondary, .no-print, .statistik-header button.button {
        display: none !important;
    }

    /* ▼▼▼ BLOK YANG DIPERBAIKI TOTAL ▼▼▼ */
    /* --- Gaya Cetak Halaman Statistik Kader --- */
    body.page-template-template-statistik {
        
        /* Pastikan elemen-elemen ini tidak pecah antar halaman */
        .statistik-grid, .detail-table-container, .chart-container {
             page-break-inside: avoid;
        }

        /* Sembunyikan judul H1 di layar, kita pakai judul khusus cetak */
        .statistik-header h1.page-title {
            display: none !important;
        }

        /* Tampilkan dan tata letak judul khusus untuk cetak */
        .print-only-header {
            display: block;
            text-align: center;
            border-bottom: 3px double #333;
            margin-bottom: 30px;
            page-break-after: avoid;
        }
        .print-only-header h1 { font-size: 18pt; margin: 0; }
        .print-only-header h2 { font-size: 16pt; margin: 5px 0; font-weight: normal; }
        .print-only-header p { font-size: 10pt; font-style: italic; margin-top: 5px; }
        
        /* Pastikan canvas (grafik) terlihat saat dicetak */
        .chart-container canvas {
            max-width: 100% !important;
            display: block;
        }
    }
    /* ▲▲▲ AKHIR BLOK YANG DIPERBAIKI ▲▲▲ */

    /* --- Gaya Cetak Halaman Arsip Surat --- */
    body.post-type-archive-surat {
        .page-title, .arsip-filter-form, .pagination, .column-action {
            display: none !important;
        }
        .print-only-title {
            display: block; text-align: center; font-size: 16pt; margin-bottom: 20px;
        }
        .print-only-title small { font-size: 11pt; font-weight: normal; color: #555; }
        .column-number, .row-number {
            display: table-cell; width: 5%; text-align: center;
        }
        .arsip-table {
            counter-reset: rowNumber;
            width: 100% !important; border-collapse: collapse;
            font-size: 11pt; margin-top: 0;
        }
        .arsip-table tbody tr { counter-increment: rowNumber; }
        .row-number::before { content: counter(rowNumber); }
        .arsip-table th, .arsip-table td {
            border: 1px solid #333; padding: 8px; text-align: left; vertical-align: middle;
        }
        .arsip-table th { background-color: #eee; text-align: center; }
        .arsip-table .row-number { text-align: center; }
    }
}

/* =========================================================================
   2. NAVIGASI & DROPDOWN MENU (VERSI FINAL)
   ========================================================================= */

/* Navigasi Utama */
#main-nav { 
     background: #333; 
 }
 
 /* * PERBAIKAN PENTING:
 * Kita hapus 'justify-content: space-between;' dari sini.
 * Ini agar pembagian menu kiri-kanan bisa diontrol penuh oleh item 'menu-spacer'.
 * Selector ditambahkan untuk mencakup menu di halaman daerah juga.
 */
#main-nav ul.main-menu,
#main-nav ul.menu { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    display: flex; 
    flex-wrap: wrap; 
    align-items: center;
}
 
 /* Tampilan dasar link menu */
 #main-nav ul li a { 
     color: #fff; 
     padding: 15px; 
     display: block; 
     text-decoration: none; 
     transition: background-color 0.2s ease;
 }
 
 #main-nav ul li a:hover { 
     background: #555; 
 }
 
 /* === MEMBAGI MENU KIRI & KANAN === */
 
 /* Item pemisah akan mendorong semua item setelahnya ke kanan */
 #main-nav .menu-spacer {
     margin-left: auto;
 }
 
 /* * PERBAIKAN PENTING:
  * Benar-benar menyembunyikan tanda titik dari item pemisah.
  */
 #main-nav .menu-spacer > a {
     padding-top: 0;
     padding-bottom: 0;
     font-size: 0;
     visibility: hidden;
 }
 
 
 /* === DROPDOWN MENU GAYA TRANSPARAN === */
 
 /* Izinkan container di dalam navigasi untuk menampilkan konten yang meluap */
 #main-nav .container {
     overflow: visible;
 }
 
 /* Beri posisi relatif pada setiap item menu agar dropdown bisa diposisikan */
 #main-nav ul li {
     position: relative;
 }
 
 /* Mengatur tampilan dasar dropdown agar lebih transparan */
 #main-nav ul .sub-menu {
     display: none;
     position: absolute;
     top: 100%; 
     left: 0;
     padding: 0;
     min-width: 240px; 
     z-index: 9999;
     
     /* * PERBAIKAN PENTING:
      * Nilai transparansi diubah dari 0.9 menjadi 0.8 agar lebih tembus pandang.
      */
     background-color: rgba(71, 71, 71, 0.322); /* Warna hitam dengan transparansi 80% */
     
     -webkit-backdrop-filter: blur(5px);
     backdrop-filter: blur(5px);
     
     border-top: 2px solid #d4af37;
     border-radius: 0 0 5px 5px;
     box-shadow: 0 4px 10px rgba(0,0,0,0.3);
 }
 
 /* Tampilkan sub-menu ketika item menu induk di-hover */
 #main-nav ul li:hover > .sub-menu {
     display: block;
 }
 
 /* Atur tampilan item di dalam sub-menu */
 #main-nav ul .sub-menu li {
     width: 100%;
     border-bottom: 1px solid rgba(182, 181, 181, 0.1);
 }
 #main-nav ul .sub-menu li:last-child {
     border-bottom: none;
 }
 
 #main-nav ul .sub-menu li a {
     padding: 13px 20px;
     color: #ffffff;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
     white-space: nowrap;
     transition: background-color 0.2s ease-in-out;
 }
 
 /* Efek hover untuk item di dalam dropdown */
 #main-nav ul .sub-menu li a:hover {
     background-color: rgba(212, 175, 55, 0.2);
 }
 
 /* Mengatur posisi sub-sub menu (level 3) */
 #main-nav .sub-menu .sub-menu {
     top: -2px;
     left: 100%;
 }

 /* =========================================================================
    10. FINAL RESPONSIVE HEADER & MOBILE MENU (VERSI 2.3 - DEFINITIF)
    ========================================================================= */

/* --- ATURAN UMUM / DESKTOP --- */
.hamburger-button { display: none; }
#header .site-title-mobile { display: none; }
.header-left-side {
    display: flex;
    align-items: center;
    min-width: 0;
}
#header.header-daerah .site-title-desktop {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20px;
}
/* Aturan spesifik untuk menyembunyikan judul mobile di header daerah (Desktop) */
#header.header-daerah .site-title-mobile {
    display: none;
}


/* --- ATURAN RESPONSIVE UNTUK LAYAR KECIL (<= 768px) --- */
@media (max-width: 768px) {

    #header .container {
        justify-content: space-between;
        align-items: center;
    }
    
    #header .logo img {
        height: 45px;
        width: auto;
        flex-shrink: 0;
    }

    #header .site-title-desktop {
        display: none !important;
    }

    /* ▼▼▼ PERBAIKAN PRIORITAS CSS ADA DI SINI ▼▼▼ */
    /* Dibuat lebih spesifik agar pasti menang melawan aturan desktop */
    #header.header-daerah .site-title-mobile,
    #header .site-title-mobile {
        display: block;
        margin-left: 12px;
    }
    /* ▲▲▲ AKHIR DARI PERBAIKAN PRIORITAS ▲▲▲ */

    #header.header-daerah .site-title-mobile h1,
    #header .site-title-mobile h1 {
        margin: 0;
        font-size: 1.5em;      /* Ukuran font kecil untuk HP akan aktif */
        font-weight: bold;
        line-height: 1.25;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .site-title-mobile h1 a {
        color: inherit;
        text-decoration: none;
    }
    
    .hamburger-button {
        display: block;
        font-size: 28px;
        color: #fff;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    /* Penyesuaian Menu Navigasi */
    #main-nav { position: relative; }
    #main-nav .container { padding: 0; }
    #main-nav ul.menu,
    #main-nav ul.main-menu {
        display: none; 
        flex-direction: column;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        background-color: #333;
        z-index: 1000;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    #main-nav ul.menu.tampil-menu,
    #main-nav ul.main-menu.tampil-menu {
        display: flex;
    }
    #main-nav ul li { width: 100%; }
    #main-nav ul li a { border-bottom: 1px solid #444; }
    #main-nav .menu-spacer { display: none; }
    #main-nav ul .sub-menu { display: none; }

} /* <--- PERBAIKAN SINTAKSIS: Kurung '}' ekstra sudah dihapus */