/* ==========================================================================
   FILE: custom.css
   DESKRIPSI: File ini berisi seluruh CSS kustom untuk Child Theme Muktamar NU.
   STRUKTUR:
   A. OVERRIDE PARENT THEME (Mewarisi struktur indeks dari main.css)
   B. CSS UNTUK PLUGIN (Network Posts Widget)
   ========================================================================== */


/* ==========================================================================
   KELOMPOK A: OVERRIDE PARENT THEME
   ========================================================================== */

/* --------------------------------------------------------------------------
   2.0 Header
   -------------------------------------------------------------------------- */
/* Menyesuaikan ukuran lebar logo utama pada header agar proporsional */
.bb-bldr-row .site-branding img { 
    width: 400px; 
}

/* Menambahkan shadow di bawah header */
.site-header {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
}
body.online-newspaper-dark-mode .site-header {
    box-shadow: none; /* Menghilangkan bayangan */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Memaksa warna latar belakang baris ketiga header menjadi putih (mode terang) */
.site-header .row-three.full-width, 
.site-header .row-three .bb-bldr-row.full-width { 
    background: #fff; 
}

/* Saat Mode Gelap (Dark Mode) aktif: hilangkan garis batas atas dan jadikan latar hitam */
.online-newspaper-dark-mode .site-header .row-three.full-width, 
.online-newspaper-dark-mode .site-header .row-three .full-width { 
    border-top: none; 
    background: #000; 
}

/* Mengubah warna latar belakang form pencarian pop-up menjadi putih murni */
.search-popup--three .site-header .search-form-wrap { 
    background-color: #fff; 
}

/* 1. Menyembunyikan "More" dan mengatur jarak (gap) teks dengan panah */
#site-navigation ul.nav-menu li.menu-item-custom-more > a {
    font-size: 0 !important;
    display: flex !important;
    align-items: center;
    gap: 0;
}

/* 2. Memunculkan teks "Lainnya" */
#site-navigation ul.nav-menu li.menu-item-custom-more > a::before {
    content: "Lainnya";
    font-size: var(--menu-size);
    font-family: var(--menu-family);
    font-weight: var(--menu-weight);
    letter-spacing: var(--menu-letterspacing);
    text-transform: var(--menu-texttransform);
}

/* 3. Mematikan jarak bawaan tema agar panah tidak terlalu jauh */
#site-navigation ul.nav-menu li.menu-item-custom-more > a::after {
    margin-left: 0 !important; 
    margin-top: 4px; 
}

/* Mengatur warna latar belakang submenu dropdown di desktop (mode terang) */
@media (min-width: 48.1em) {
    .main-navigation ul.menu ul, 
    .main-navigation ul.nav-menu ul { background-color: #fff; }

    /* Mengatur latar belakang submenu dropdown pada mode gelap */
    .online-newspaper-dark-mode .main-navigation ul.menu ul, 
    .online-newspaper-dark-mode .main-navigation ul.nav-menu ul { background-color: #000; }

    /* Menambahkan garis pemisah tipis antar daftar menu dropdown di mode terang */
    body .site-header .main-navigation ul.menu ul li + li, 
    body .site-header .main-navigation ul.nav-menu ul li + li { border-top: 1px solid #ddd; }

    /* Menambahkan garis pemisah dengan warna lebih gelap di mode gelap */
    .online-newspaper-dark-mode .site-header .main-navigation ul.menu ul li + li, 
    .online-newspaper-dark-mode .site-header .main-navigation ul.nav-menu ul li + li { border-top: 1px solid #333; }
}

/* --------------------------------------------------------------------------
   4.0 Banner Slider & 9.0 Grid Layout / 11.0 Carousel
   -------------------------------------------------------------------------- */

/* MODIFIKASI HERO BANNER (SLIDER) MUKTAMAR.NU */
/* Mengatur Container Utama Teks: Rata tengah dan posisi diangkat dari bawah */
#main-banner-section .main-banner-wrap .post-element {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    bottom: 12% !important; /* Mengangkat posisi teks ke atas agar proporsional */
    padding-bottom: 20px;
}

/* Memastikan area Judul melebar 100% dan teks rata tengah */
#main-banner-section .main-banner-wrap .post-element .post-title {
    width: 100% !important;
    text-align: center;
}

/* Memperbesar font Judul agar lebih tegas sebagai Hero Banner */
#main-banner-section .main-banner-wrap .post-element .post-title a {
    font-size: 32px !important; 
    font-weight: 700;
    line-height: 1.3;
    color: var(--white-text); 
}

/* Mengatur posisi kategori/meta (jika ada) agar berada di tengah */
#main-banner-section .main-banner-wrap .post-element .post-meta {
    justify-content: center;
}

/* Styling untuk area Custom Excerpt */
.custom-banner-excerpt {
    color: var(--white-text, #ffffff);
    margin-top: 15px; 
    font-size: 16px; 
    line-height: 1.6;
    text-align: center;
    max-width: 80%; 
}
/* END MODIFIKASI HERO BANNER */

/* Menyesuaikan posisi elemen teks pada carousel layout 2 agar sedikit turun dari posisi standarnya */
body .news-carousel.layout--two .post-element { 
    top: unset; 
    bottom: 0; 
}

/* Menyembunyikan elemen kategori tertentu agar tidak muncul (membersihkan antarmuka UI) */
body .online-newspaper-category-no-bk .post-categories .cat-item, 
.widget .posts-grid-wrap .bmm-post-cats-wrap h3.card__content-category, 
.news-filter .tab-title { 
    display: none; 
}

/* Mengubah warna teks penghitung urutan pada Grid Layout 2 menjadi hitam pekat */
.news-grid.layout--two .post-count { 
    color: #000; 
}

/* --------------------------------------------------------------------------
   General Component: Card Layouts & Block Title
   -------------------------------------------------------------------------- */
/* Menghapus garis tepi (border) dan menyamakan padding internal (15px) untuk semua elemen tipe kotak (Card) */
.card--on.online-newspaper-web-stories .row, 
.card--on.online-newspaper-section .row > div:not(.secondary-sidebar), 
.home .card--on .primary-content, 
.card--on .widget, 
.card--on.leftc-rights-section .primary-content > div, 
.card--on.lefts-rightc-section .primary-content > div, 
.card--on.online-newspaper-multi-column-section .section-column-wrap > div, 
.card--on#footer-opinions-section .row, 
.card--on.single .primary-content .post-inner-wrapper, 
.card--on.page .primary-content .post-inner-wrapper, 
.card--on.error404 .primary-content .post-inner-wrapper, 
.card--on.search .primary-content .news-list, 
.archive .card--on .primary-content .post-inner-wrapper, 
.archive.author .card--on .online-newspaper-container.online-newspaper-author-section .row { 
    padding: 15px; 
    border: none; 
}

/* Mematikan paksa ornamen garis atas/bawah pada tipe judul blok ke-8 */
.block-title--layout-eight .online-newspaper-block-title:after, 
.block-title--layout-eight .section-head .section-title:after, 
.block-title--layout-eight .online-newspaper-custom-title:after { 
    border-top: none !important; 
    border-bottom: none !important; 
}

/* Mengembalikan posisi thumbnail banner ke versi 1.0.7 */
figure { margin: 0 }

/* Ubah warna latar dalam Tilas jadi emas */
div#online-newspaper-block--3 {
    background: transparent;
}

/* Custom page css */
.page-error-404 h1.entry-title {
    text-align: center;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* 4. Tipografi menu yang elegan dan 'meredam' */
#footer-menu.menu li a {
    font-size: 12px !important; 
    color: rgba(255, 255, 255, 0.7) !important; 
    text-decoration: none;
    letter-spacing: 0.5px; 
    transition: color 0.3s ease; 
}

/* 5. Efek Hover (Saat kursor diarahkan ke menu) */
#footer-menu.menu li a:hover {
    color: #ffffff !important; 
}

/* --------------------------------------------------------------------------
   Media Queries (Responsive/Tampilan Mobile)
   -------------------------------------------------------------------------- */
/* Target Layar: Tablet Desktop Kecil (<940px) */
@media (max-width: 940px) {
    .online-newspaper-section .secondary-sidebar { margin-left: 0 !important; margin-right: 0 !important; margin-top: 10px !important; }
    .lefts-rightc-section .secondary-sidebar { margin-top: 10px !important; }
}

/* Target Layar: Tablet Portrait & Menu Navigasi Mobile (<769px) */
@media (max-width: 769px) {
    .online-newspaper-dark-mode .main-navigation #header-menu li > a, 
    .online-newspaper-dark-mode nav.main-navigation ul.menu > li > a, 
    .online-newspaper-dark-mode nav.main-navigation ul.nav-menu > li > a { color: #000; }
    
    nav.main-navigation ul.menu li, nav.main-navigation ul.nav-menu li { border-bottom: 1px solid #ddd; }
	
	.bb-bldr-row.mobile-canvas.open {
        max-height: max-content;
        display: block;
        position: absolute;
        z-index: 999;
        width: 100%;
        left: 0;
        overflow-y: auto;
        padding: 20px;
        background-color: var(--online-newspaper-black-dark-color);
	}
}

/* Target Layar: Smartphone (<610px) */
@media (max-width: 610px) {
    /* Memaksa teks judul banner memenuhi seluruh lebar (100%) di layar sempit */
    .banner-layout--five .main-banner-wrap .post-element .post-title { width: 100% !important; }
    /* Memperbaiki posisi teks carousel di layar kecil */
    body .news-carousel.layout--two .post-element { top: unset; bottom: 0; }
	
	body.home .online-newspaper-section .news-grid .post-title,
	body.home .online-newspaper-section .news-carousel .post-title {
		font-size: calc(var(--post-title-size-mobile));
		line-height: calc(var(--post-title-lineheight-mobile));
	}
	    
	/* Memberbesar judul kelompok footer menu */
	body .site .site-footer h2.online-newspaper-block-title,
	body .site .site-footer h2.online-newspaper-block-title span,
	body .site .site-footer h2.widget-title span,
	body .site .site-footer h2.online-newspaper-widget-title span {
		font-size: 17px;
	}
}

/* ==========================================================================
   KELOMPOK B: CSS UNTUK PLUGIN NETWORK POSTS WIDGET
   ========================================================================== */

/* --------------------------------------------------------------------------
   Kontainer Utama Plugin
   -------------------------------------------------------------------------- */
.network-posts-container { display: block; width: 100%; margin-top: 15px; }
.network-posts-container * { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Struktur Tata Letak Plugin (STRICT BULLETPROOF LOCK)
   -------------------------------------------------------------------------- */
/* (Grid 1 & 2 Kolom) */
.network-posts-container.is-grid-1 { display: grid; grid-template-columns: 1fr; gap: 20px; width: 100%; }
.network-posts-container.is-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width: 100%; }
.network-posts-container.is-grid-1 .network-posts-article,
.network-posts-container.is-grid .network-posts-article { display: flex; flex-direction: column; gap: 12px; width: 100%; overflow: hidden; }

/* (List) Kunci mati lebar elemen, anti-menyusut dan anti-melar */
.network-posts-container.is-list { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.network-posts-container.is-list .network-posts-article { display: flex; flex-direction: row; align-items: flex-start; gap: 15px; width: 100%; overflow: hidden; }
.network-posts-container.is-list .network-posts-thumb-wrap { 
    width: 35% !important; 
    flex: 0 0 35% !important; 
    max-width: 35% !important; 
    margin: 0; 
}
.network-posts-container.is-list .network-posts-text-wrap { 
    width: calc(65% - 15px) !important; 
    flex: 0 0 calc(65% - 15px) !important; 
    max-width: calc(65% - 15px) !important; 
    padding: 0; 
}

/* --------------------------------------------------------------------------
   JIKA THUMBNAIL DINONAKTIFKAN (Teks Penuh & Ikon Bookmark)
   -------------------------------------------------------------------------- */
/* FIX: Membuat teks memenuhi 100% dan menggeser SELURUH konten (judul, meta, excerpt) ke kanan sebesar 25px */
.network-posts-container .network-posts-text-wrap:first-child { 
    width: 100% !important; 
    flex: 0 0 100% !important; 
    max-width: 100% !important; 
    position: relative;
    padding-left: 25px !important; 
}

/* FIX: Menambahkan ikon pita di sudut kiri pembungkus, menggunakan warna sama dengan judul (adaptif) */
.network-posts-container .network-posts-text-wrap:first-child::before {
    content: '\f02e'; 
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    position: absolute;
    left: 0;
    top: 3px; 
    color: var(--post-title-color, #111); 
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   Desain Gambar Thumbnail (KARANTINA ELEMEN INJEKSI)
   -------------------------------------------------------------------------- */
.network-posts-thumb-wrap { 
    position: relative !important; 
    display: block !important; 
    overflow: hidden !important; 
    background: #333 !important; 
    aspect-ratio: 3/2 !important; 
    text-decoration: none !important; 
}
/* Kunci gambar utamanya */
.network-posts-thumb-wrap img { 
    position: absolute !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    z-index: 10 !important;
}
/* Sembunyikan SEMUA elemen sisipan (Caption, Attribution, Text) secara paksa */
.network-posts-thumb-wrap { font-size: 0 !important; color: transparent !important; }
.network-posts-thumb-wrap > *:not(img) { 
    display: none !important; 
    opacity: 0 !important;
    visibility: hidden !important;
}
/* Sembunyikan Alt Text jika gambar error 404 */
.network-posts-thumb-wrap img:-moz-loading,
.network-posts-thumb-wrap img:-moz-broken { opacity: 0 !important; }

/* --------------------------------------------------------------------------
   Tipografi Plugin Dasar
   -------------------------------------------------------------------------- */
.widget_network_posts_widget .network-posts-title,
.network-posts-container .network-posts-title { margin: 0 0 6px 0; padding: 0; font-family: var(--post-title-family, inherit); font-size: calc(var(--post-title-size) * 0.75); line-height: calc(var(--post-title-lineheight) * 0.88); font-weight: var(--post-title-weight); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-wrap: break-word; }
.widget_network_posts_widget .network-posts-title a,
.network-posts-container .network-posts-title a { color: var(--post-title-color, #111) !important; text-decoration: none !important; transition: all 0.3s ease !important; box-shadow: none !important; display: block; }
.widget_network_posts_widget .network-posts-title a:hover,
.network-posts-container .network-posts-title a:hover { color: var(--online-newspaper-global-preset-theme-color, #d71d4f) !important; }

.widget_network_posts_widget .network-posts-meta,
.network-posts-container .network-posts-meta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 8px 0; padding: 0; list-style: none; align-items: center; }
.widget_network_posts_widget .network-posts-meta-item,
.network-posts-container .network-posts-meta-item { display: inline-flex; align-items: baseline; gap: 6px; color: var(--meta-text-color, #666) !important; font-family: var(--meta-family, inherit); font-size: calc(var(--meta-size, 12px) * 0.95); line-height: 1; margin: 0; padding: 0; }
.widget_network_posts_widget .network-posts-meta-item i,
.network-posts-container .network-posts-meta-item i { font-size: 11px; opacity: 0.8; margin: 0; padding: 0; }
.widget_network_posts_widget .network-posts-meta-content, 
.widget_network_posts_widget .network-posts-meta-content a,
.network-posts-container .network-posts-meta-content,
.network-posts-container .network-posts-meta-content a { color: var(--meta-text-color, #666) !important; text-decoration: none !important; transition: color 0.3s ease !important; box-shadow: none !important; display: inline !important; margin: 0 !important; padding: 0 !important; }
.widget_network_posts_widget .network-posts-meta-item a:hover, 
.widget_network_posts_widget .network-posts-meta-content a:hover,
.network-posts-container .network-posts-meta-item a:hover,
.network-posts-container .network-posts-meta-content a:hover { color: var(--online-newspaper-global-preset-theme-color, #d71d4f) !important; }

.widget_network_posts_widget .network-posts-excerpt,
.network-posts-container .network-posts-excerpt { margin: 0; padding: 0; font-family: var(--content-family, inherit); font-size: calc(var(--content-size, 14px) * 0.95); line-height: 1.5; color: var(--post-content-color, #505050) !important; word-wrap: break-word; }

/* --------------------------------------------------------------------------
   Injeksi Footer Mode Gelap (Khusus Plugin) - HARDCODED COLORS
   -------------------------------------------------------------------------- */
.site-footer .widget_network_posts_widget .network-posts-title a,
.site-footer .network-posts-container .network-posts-title a { color: #ffffff !important; }
.site-footer .widget_network_posts_widget .network-posts-title a:hover,
.site-footer .network-posts-container .network-posts-title a:hover { color: #cccccc !important; }

/* Menyamakan warna ikon pita dengan judul saat berada di footer */
.site-footer .network-posts-container .network-posts-text-wrap:first-child::before { color: #ffffff !important; }

.site-footer .widget_network_posts_widget .network-posts-meta-item,
.site-footer .network-posts-container .network-posts-meta-item,
.site-footer .widget_network_posts_widget .network-posts-meta-item a, 
.site-footer .network-posts-container .network-posts-meta-content a { color: #a1a1a1 !important; }
.site-footer .widget_network_posts_widget .network-posts-meta-item a:hover, 
.site-footer .network-posts-container .network-posts-meta-content a:hover { color: #ffffff !important; }

.site-footer .widget_network_posts_widget .network-posts-excerpt,
.site-footer .network-posts-container .network-posts-excerpt { color: #cccccc !important; opacity: 1 !important; }

.site-footer .widget_network_posts_widget .online-newspaper-block-title, 
.site-footer .widget_network_posts_widget .online-newspaper-block-title span, 
.site-footer .widget_network_posts_widget .view-all-button,
.site-footer .section-head .online-newspaper-block-title, 
.site-footer .section-head .view-all-button { color: #ffffff !important; }
.site-footer .widget_network_posts_widget .view-all-button:hover,
.site-footer .section-head .view-all-button:hover { color: var(--online-newspaper-global-preset-theme-color, #d71d4f) !important; }

/* --------------------------------------------------------------------------
   SINKRONISASI EFEK HOVER JUDUL DENGAN PARENT THEME
   -------------------------------------------------------------------------- */
/* Title Effect Six (Gradasi / Wipe Effect) */
.online-newspaper-title-six .widget_network_posts_widget .network-posts-title a,
.online-newspaper-title-six .network-posts-container .network-posts-title a {
    display: inline !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-image: linear-gradient(to right, var(--online-newspaper-global-preset-theme-color), var(--online-newspaper-global-preset-theme-color) 50%, var(--post-title-color) 50%) !important;
    background-size: 200% 100% !important;
    background-position: 100% !important;
    transition: all 0.7s cubic-bezier(0,0,.23,1) !important;
}
.online-newspaper-title-six .site-footer .widget_network_posts_widget .network-posts-title a,
.online-newspaper-title-six .site-footer .network-posts-container .network-posts-title a {
    background-image: linear-gradient(to right, var(--online-newspaper-global-preset-theme-color), var(--online-newspaper-global-preset-theme-color) 50%, #ffffff 50%) !important;
}
.online-newspaper-title-six .widget_network_posts_widget .network-posts-title a:hover,
.online-newspaper-title-six .network-posts-container .network-posts-title a:hover {
    background-position: 0% !important;
}

/* Title Effect Ten (Garis Bawah Lebar / Underline Expand) */
.online-newspaper-title-ten .widget_network_posts_widget .network-posts-title a,
.online-newspaper-title-ten .network-posts-container .network-posts-title a {
    display: inline !important;
    background-image: linear-gradient(90deg, currentColor, currentColor) !important;
    background-repeat: no-repeat !important;
    background-size: 0% 1px !important;
    background-position: 0% bottom !important;
    transition: background-size 0.5s cubic-bezier(.25, .8, .25, 1), color 0.3s ease !important;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.online-newspaper-title-ten .widget_network_posts_widget .network-posts-title a:hover,
.online-newspaper-title-ten .network-posts-container .network-posts-title a:hover {
    background-size: 100% 1px !important;
    color: var(--online-newspaper-global-preset-theme-color) !important;
}
.online-newspaper-title-ten .site-footer .widget_network_posts_widget .network-posts-title a:hover,
.online-newspaper-title-ten .site-footer .network-posts-container .network-posts-title a:hover {
    color: #ffffff !important;
}

/* Title Effect None (Pastikan tidak ada background image terisa) */
.online-newspaper-title-none .widget_network_posts_widget .network-posts-title a:hover,
.online-newspaper-title-none .network-posts-container .network-posts-title a:hover {
    background-image: none !important;
    background-size: 0 !important;
}

/* --------------------------------------------------------------------------
   Media Queries Plugin untuk Mobile (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .network-posts-container.is-grid-1 { gap: 15px; }
    .network-posts-container.is-grid-1 .network-posts-title { font-size: 15px !important; line-height: 1.4; }
    .network-posts-container.is-grid-1 .network-posts-meta-item { font-size: 10px !important; }
    
    .network-posts-container.is-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .network-posts-container.is-grid .network-posts-title { font-size: calc(var(--post-title-size-tab) * 0.75); line-height: 1.4; }
    .network-posts-container.is-grid .network-posts-meta-item { font-size: 10px !important; }
    
    .network-posts-container.is-list .network-posts-article { flex-direction: row; align-items: flex-start; gap: 12px; }
    /* Mode list mobile dikunci ukurannya secara statis */
    .network-posts-container.is-list .network-posts-thumb-wrap { width: 100px !important; flex: 0 0 100px !important; max-width: 100px !important; aspect-ratio: 4/3 !important; margin: 0; }
    .network-posts-container.is-list .network-posts-text-wrap { width: calc(100% - 112px) !important; flex: 0 0 calc(100% - 112px) !important; max-width: calc(100% - 112px) !important; }
    .network-posts-container.is-list .network-posts-title { font-size: calc(var(--post-title-size-tab) * 0.75); margin-bottom: 6px; }

    /* Auto Full-Width untuk Mode Mobile saat Thumbnail Dinonaktifkan */
    .network-posts-container.is-list .network-posts-text-wrap:first-child { 
        width: 100% !important; 
        flex: 0 0 100% !important; 
        max-width: 100% !important; 
    }
}

@media (max-width: 610px) {
	/* Sembunyikan ikon burger pada link "Lihat Semua" di rubrik "Ibrah" */
	.online-newspaper-burger {
		display: none;
	}
}