/*
Theme Name: Kecamatan Mranggen
Theme URI: https://kecmranggen.demakkab.go.id/
Author: Kecamatan Mranggen
Author URI: https://kecmranggen.demakkab.go.id/
Description: Tema portal resmi Kecamatan Mranggen, Kabupaten Demak. Desain toska & hijau muda dengan mode gelap, slider hero, carousel layanan publik, berita, widget profil camat, jam pelayanan, tautan penting, dan arsip berita. Dikonversi dari desain HTML milik Kecamatan Mranggen.
Version: 2.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kecamatan-mranggen
Tags: government, portal, news, responsive, dark-mode, customizer, custom-logo, custom-menu
*/

/* ============================================================
   GAYA KUSTOM TEMA (di luar utilitas Tailwind)
   ============================================================ */

/* Preloader */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}
.dark #preloader { background-color: #0f172a; }
.loader-spinner {
    border: 4px solid rgba(20, 184, 166, 0.2);
    border-left-color: #84cc16;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: kcmr-spin 1s linear infinite;
}
.dark .loader-spinner { border-left-color: #a3e635; }
@keyframes kcmr-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
#preloader.loaded { opacity: 0; visibility: hidden; }

/* Overlay gradien gambar hero */
.hero-overlay {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.9) 0%, rgba(132, 204, 22, 0.6) 100%);
}

/* Sembunyikan scrollbar slider */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Menu utama: penanda item aktif */
.kcmr-nav a.current,
.kcmr-nav .current-menu-item > a,
.kcmr-nav .current-page-ancestor > a {
    color: #0f766e;
    border-bottom: 2px solid #84cc16;
}
.dark .kcmr-nav .current-menu-item > a,
.dark .kcmr-nav .current-page-ancestor > a { color: #2dd4bf; }

/* Menu mobile: item aktif */
.kcmr-mobile-nav .current-menu-item > a,
.kcmr-mobile-nav .current-page-ancestor > a {
    background: linear-gradient(to right, #0f766e, #84cc16);
    color: #fff !important;
}

/* Isi artikel */
.kcmr-content p { margin-bottom: 1.1rem; line-height: 1.8; }
.kcmr-content h2, .kcmr-content h3, .kcmr-content h4 { font-weight: 700; margin: 1.5rem 0 .75rem; }
.kcmr-content h2 { font-size: 1.5rem; }
.kcmr-content h3 { font-size: 1.25rem; }
.kcmr-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1.1rem; }
.kcmr-content ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1.1rem; }
.kcmr-content img { border-radius: .75rem; }
.kcmr-content blockquote {
    border-left: 4px solid #14b8a6;
    padding: .5rem 1rem;
    margin: 1.25rem 0;
    background: rgba(20,184,166,.06);
    border-radius: 0 .5rem .5rem 0;
    font-style: italic;
}
.kcmr-content a { color: #0d9488; text-decoration: underline; }
.kcmr-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: .9rem; }
.kcmr-content th, .kcmr-content td { border: 1px solid #e5e7eb; padding: .6rem .8rem; }
.kcmr-content th { background: #f0fdfa; font-weight: 700; }
.dark .kcmr-content th { background: #1e293b; }
.dark .kcmr-content th, .dark .kcmr-content td { border-color: #334155; }

/* Komentar */
.kcmr-comments .comment { margin-bottom: 1.25rem; }
.kcmr-comments .comment-list { list-style: none; padding: 0; }
.kcmr-comments .comment-body {
    background: #fff; border: 1px solid #f0fdfa; border-radius: 1rem; padding: 1rem 1.25rem;
}
.dark .kcmr-comments .comment-body { background: #0f172a; border-color: #1e293b; }
.kcmr-comments .children { list-style: none; padding-left: 1.5rem; margin-top: 1rem; }

/* Paginasi */
.kcmr-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.5rem; height: 2.5rem; padding: 0 .75rem; border-radius: .75rem;
    background: #fff; border: 1px solid #e5e7eb; font-weight: 600; font-size: .875rem;
    color: #0f766e; transition: all .2s;
}
.dark .kcmr-pagination .page-numbers { background: #1e293b; border-color: #334155; color: #5eead4; }
.kcmr-pagination .page-numbers.current,
.kcmr-pagination .page-numbers:hover {
    background: linear-gradient(to right, #0d9488, #84cc16); color: #fff; border-color: transparent;
}

/* Widget bawaan WordPress di sidebar */
.kcmr-widget-area .widget { margin-bottom: 2rem; }
.kcmr-widget-area .widget-title,
.kcmr-widget-area .wp-block-heading {
    font-size: 1.15rem; font-weight: 800; margin-bottom: 1rem;
    display: flex; align-items: center; color: #1f2937;
}
.dark .kcmr-widget-area .widget-title,
.dark .kcmr-widget-area .wp-block-heading { color: #fff; }
.kcmr-widget-area ul { list-style: none; padding: 0; }
.kcmr-widget-area ul li { padding: .45rem 0; border-bottom: 1px dashed #e5e7eb; font-size: .9rem; }
.dark .kcmr-widget-area ul li { border-color: #334155; }
.kcmr-widget-area ul li:last-child { border-bottom: 0; }
.kcmr-widget-area a { color: #0f766e; }
.dark .kcmr-widget-area a { color: #5eead4; }
.kcmr-widget-area select, .kcmr-widget-area input[type="search"] {
    width: 100%; border-radius: .75rem; border: 1px solid #99f6e4;
    padding: .7rem 1rem; font-size: .9rem; background: #f0fdfa; color: #1f2937;
}
.dark .kcmr-widget-area select, .dark .kcmr-widget-area input[type="search"] {
    background: #1e293b; border-color: #334155; color: #e2e8f0;
}