/* =========================================
   1. GLOBAL & UTILITIES
   ========================================= */
html {
    scroll-behavior: smooth;
}

/* Menyembunyikan scrollbar tapi tetap bisa di-scroll (untuk slider mobile/sidebar) */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}

/* Mencegah konten terbawah tertutup oleh floating mobile navigation */
@media (max-width: 768px) {
    body {
        padding-bottom: 80px;
    }
}

/* =========================================
   2. ARTICLE RICH TEXT FORMATTING
   (Digunakan nanti di halaman baca.html)
   ========================================= */
/* Tailwind mereset semua tag HTML. Class .article-content ini mengembalikan 
   ukuran heading, jarak paragraf, dan list di dalam area baca berita. */
.article-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.article-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.article-content p {
    margin-bottom: 1.25rem;
    line-height: 1.8;
}

.article-content ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}

.article-content ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}

.article-content blockquote {
    border-left: 4px solid #2563eb; /* Blue-600 */
    padding-left: 1rem;
    font-style: italic;
    color: #4b5563; /* Gray-600 */
    margin-bottom: 1.25rem;
}

/* Menyesuaikan blockquote untuk Dark Mode */
html.dark .article-content blockquote {
    color: #9ca3af; /* Gray-400 */
}

/* =========================================
   3. QUILL EDITOR CUSTOM DARK MODE
   ========================================= */
/* Menyesuaikan warna border dan text toolbar saat mode gelap di CMS Admin */
html.dark .ql-toolbar.ql-snow,
html.dark .ql-container.ql-snow {
    border-color: #374151 !important; /* Tailwind gray-700 */
}

html.dark .ql-snow .ql-stroke {
    stroke: #d1d5db !important; /* Tailwind gray-300 */
}

html.dark .ql-snow .ql-fill, 
html.dark .ql-snow .ql-stroke.ql-fill {
    fill: #d1d5db !important;
}

html.dark .ql-snow .ql-picker {
    color: #d1d5db !important;
}