/*
Skin Name: Dark Mode
Deskripsi: Membalik palet ke latar gelap sambil mempertahankan struktur
editorial dasar, dengan warna aksen tetap memakai --primary-color-al-theme.
*/

body.skin-dark-mode{
    background:#15161c;
    color:#e7e6e2;
}

body.skin-dark-mode h1,
body.skin-dark-mode h2,
body.skin-dark-mode h3,
body.skin-dark-mode h4,
body.skin-dark-mode h5,
body.skin-dark-mode h6{
    color:#f5f4f0;
}

body.skin-dark-mode a{color:#e7e6e2;}
body.skin-dark-mode a:hover{color:var(--primary-color-al-theme);}

body.skin-dark-mode .site-topbar,
body.skin-dark-mode .masthead-rule,
body.skin-dark-mode .site-nav-wrap,
body.skin-dark-mode .byline-block,
body.skin-dark-mode .hero-secondary-item,
body.skin-dark-mode .post-brief,
body.skin-dark-mode .section-heading,
body.skin-dark-mode .related-box,
body.skin-dark-mode .widget h5,
body.skin-dark-mode .sidebar-col,
body.skin-dark-mode .archive-list li,
body.skin-dark-mode .backlink-box a,
body.skin-dark-mode .site-footer{
    border-color:#33353f !important;
}

body.skin-dark-mode .site-masthead .brand,
body.skin-dark-mode .site-nav a,
body.skin-dark-mode .entry-title{
    color:#f5f4f0;
}

body.skin-dark-mode .site-topbar,
body.skin-dark-mode .site-tagline,
body.skin-dark-mode .post-meta,
body.skin-dark-mode .breadcrumb-trail,
body.skin-dark-mode .archive-list a,
body.skin-dark-mode .backlink-box a{
    color:#9a9aa5;
}

/*
 * Base style.css hardcodes beberapa warna teks abu-abu GELAP (#333/#444)
 * yang dirancang untuk latar terang — kalau tidak ditimpa di sini, teks
 * itu nyaris tidak terbaca di atas latar gelap skin ini (kontras sangat
 * rendah). Ditemukan lewat pemeriksaan visual screenshot, bukan cuma baca
 * kode, jadi daftar ini penting untuk tetap lengkap kalau ada elemen baru
 * yang memakai pola warna serupa di style.css.
 */
body.skin-dark-mode .hero-dek,
body.skin-dark-mode .post-brief p,
body.skin-dark-mode .archive-description,
body.skin-dark-mode .author-box p,
body.skin-dark-mode .no-results-box p,
body.skin-dark-mode .post-content blockquote,
body.skin-dark-mode .page-content blockquote{
    color:#c7c6c2;
}
/* cite di dalam blockquote pakai var(--meta) dari style.css dasar, yang
   warnanya dihitung untuk latar TERANG — nyaris tak terbaca di atas latar
   gelap skin ini kalau tidak ditimpa (ketemu lewat screenshot visual). */
body.skin-dark-mode .post-content blockquote cite,
body.skin-dark-mode .page-content blockquote cite{
    color:#9a9aa5;
}

body.skin-dark-mode .breadcrumb-trail .current{
    color:#f5f4f0;
}

body.skin-dark-mode .toc-box{
    background:#1d1f27;
    border-color:#33353f;
}

body.skin-dark-mode .post-brief-thumb-empty,
body.skin-dark-mode .recent-post-item .thumb-empty{
    background:#2a2c35;
}

body.skin-dark-mode .search-form-widget input[type="search"]{
    background:#1d1f27;
    color:#e7e6e2;
    border-color:#33353f;
}

body.skin-dark-mode .no-results-box,
body.skin-dark-mode .author-box{
    border-color:#33353f;
    background:#1d1f27;
}

/*
 * Ditemukan lewat screenshot: dial "Sudut" / "Bayangan" di Customizer
 * (al_simple_output_custom_css() di functions.php) mengubah .post-brief
 * & .hero-secondary-item jadi kartu dengan background:var(--paper) —
 * tapi --paper TIDAK PERNAH ditimpa di skin ini (dark-mode.css memang
 * sengaja pakai hex langsung, bukan variabel --paper/--ink, di semua
 * tempat lain), jadi kartu itu jadi putih terang dengan teks warna terang
 * di atasnya (kontras nyaris tidak terbaca) begitu salah satu dial itu
 * aktif berbarengan dengan skin Dark Mode. Selector di sini spesifisitasnya
 * lebih tinggi (body.skin-dark-mode + class) daripada rule dial yang cuma
 * class tunggal, jadi background gelap ini otomatis menang tanpa perlu
 * !important — dan berlaku juga saat dial TIDAK aktif (kartu tetap terlihat
 * baik, konsisten dengan toc-box/author-box/no-results-box di atas yang
 * memang selalu punya latar sendiri di skin ini).
 */
body.skin-dark-mode .post-brief,
body.skin-dark-mode .hero-secondary-item{
    background:#1d1f27;
}

/*
 * Sama persis alasannya dengan rule .post-brief/.hero-secondary-item di
 * atas: placeholder "tidak ada gambar" yang baru ditambahkan di homepage
 * (.hero-lead-thumb-empty/.hero-secondary-thumb-empty, dipakai saat post
 * tidak punya featured image) pakai var(--paper-alt) yang juga tidak
 * pernah ditimpa di skin ini — tanpa override ini, kotak placeholder-nya
 * akan jadi krem terang mencolok di tengah halaman gelap.
 */
body.skin-dark-mode .hero-lead-thumb-empty,
body.skin-dark-mode .hero-secondary-thumb-empty{
    background:#1d1f27;
}

/*
 * Sama lagi alasannya: dial "Bayangan" sekarang memasang panel bayangan
 * pada wadah pembungkus .post-brief-list/.hero-secondary-list (bukan lagi
 * per .post-brief/.hero-secondary-item satu-satu — lihat komentar di
 * al_simple_output_custom_css()) dan wadah itu juga pakai var(--paper)
 * yang tidak pernah ditimpa di skin ini, jadi butuh override gelap yang
 * sama seperti .post-brief/.hero-secondary-item di atas.
 */
body.skin-dark-mode .post-brief-list,
body.skin-dark-mode .hero-secondary-list{
    background:#1d1f27;
}

body.skin-dark-mode .al-pagination li a,
body.skin-dark-mode .al-pagination li span{
    border-color:#33353f;
    color:#e7e6e2;
}
body.skin-dark-mode .al-pagination li span.current-page,
body.skin-dark-mode .al-pagination li a:hover{
    background:var(--primary-color-al-theme);
    border-color:var(--primary-color-al-theme);
    color:#15161c;
}

body.skin-dark-mode .nav-toggle-btn{
    background:var(--primary-color-al-theme);
    color:#15161c;
}