/*
Theme Name: Vision News Portal
Theme URI: https://www.visimediateknologi.biz.id
Author: Vision Web Development
Author URI: https://www.visimediateknologi.biz.id
Description: Tema portal berita Clean profesional, modern, cepat, dengan tata letak berita nasional, dark mode komprehensif, integrasi AI redaksi, jadwal salat otomatis, verifikasi Dewan Pers, dan panel pengaturan tema mandiri yang lengkap. Dikembangkan khusus oleh Vision Web Development.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vision-news-portal
Tags: news, blog, two-columns, grid-layout, custom-colors, custom-menu, custom-logo, featured-images, theme-options, translation-ready
*/

/* Core WordPress CSS Alignment and Captions */
.alignnone {
    margin: 5px 20px 20px 0;
}
.aligncenter, div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}
.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}
.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}
a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}
a img.alignnone {
    margin: 5px 20px 20px 0;
}
a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}
a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%;
    padding: 5px 3px 10px;
    text-align: center;
}
.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}
.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}
.wp-caption p.wp-caption-text {
    font-size: 12px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
    color: #64748b;
    font-style: italic;
}
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* =========================================================================
   COMPREHENSIVE DARK MODE SYSTEM (High-Contrast & Complete Inversion)
   ========================================================================= */

html.dark {
    color-scheme: dark;
}

html.dark body {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

/* 1. Global Dark Mode Text Colors */
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-gray-900,
html.dark .text-gray-800 {
    color: #f8fafc !important;
}

html.dark .text-slate-700,
html.dark .text-slate-600,
html.dark .text-gray-700,
html.dark .text-gray-600 {
    color: #cbd5e1 !important;
}

html.dark .text-slate-500,
html.dark .text-slate-400,
html.dark .text-gray-500,
html.dark .text-gray-400 {
    color: #94a3b8 !important;
}

html.dark .text-slate-300,
html.dark .text-gray-300 {
    color: #cbd5e1 !important;
}

/* 2. Global Dark Mode Background Colors */
html.dark .bg-white {
    background-color: #1e293b !important;
}

html.dark .bg-slate-50,
html.dark .bg-gray-50 {
    background-color: #0f172a !important;
}

html.dark .bg-slate-100,
html.dark .bg-gray-100 {
    background-color: #1e293b !important;
}

html.dark .bg-slate-200,
html.dark .bg-gray-200 {
    background-color: #334155 !important;
}

html.dark .bg-slate-800 {
    background-color: #1e293b !important;
}

html.dark .bg-slate-900 {
    background-color: #0f172a !important;
}

html.dark .bg-slate-950 {
    background-color: #020617 !important;
}

/* 3. Global Dark Mode Border & Divide Colors */
html.dark .border-slate-100,
html.dark .border-gray-100 {
    border-color: #1e293b !important;
}

html.dark .border-slate-200,
html.dark .border-slate-200\/60,
html.dark .border-slate-200\/80,
html.dark .border-gray-200 {
    border-color: #334155 !important;
}

html.dark .border-slate-300,
html.dark .border-gray-300 {
    border-color: #475569 !important;
}

html.dark .border-slate-700,
html.dark .border-slate-700\/50,
html.dark .border-slate-700\/60,
html.dark .border-slate-800,
html.dark .border-gray-700,
html.dark .border-gray-800 {
    border-color: #334155 !important;
}

html.dark .divide-slate-100 > :not(:last-child),
html.dark .divide-slate-200 > :not(:last-child),
html.dark .divide-gray-100 > :not(:last-child),
html.dark .divide-gray-200 > :not(:last-child) {
    border-color: #334155 !important;
}

/* 4. Article Plagiarism / Copyright Warning Box */
html.dark .article-warning-box,
html.dark [class*="bg-amber-50"] {
    background-color: rgba(245, 158, 11, 0.12) !important;
    border-left-color: #f59e0b !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

html.dark .article-warning-box h4,
html.dark [class*="bg-amber-50"] h4,
html.dark .article-warning-box .text-amber-900,
html.dark .article-warning-box .text-slate-900 {
    color: #fde68a !important;
}

html.dark .article-warning-box p,
html.dark [class*="bg-amber-50"] p,
html.dark .article-warning-box .text-amber-950,
html.dark .article-warning-box .text-slate-700 {
    color: #fef3c7 !important;
}

/* 5. Summary Bullets Box ("Ringkasnya gini..") */
html.dark .summary-bullets-box,
html.dark .bg-blue-50\/70 {
    background-color: #1e293b !important;
    border-color: var(--color-clean-primary, #3b82f6) !important;
}

html.dark .summary-bullets-box h3 {
    color: #ffffff !important;
}

html.dark .summary-bullets-box ul li,
html.dark .summary-bullets-box span {
    color: #cbd5e1 !important;
}

/* 6. Article Typography in Dark Mode */
html.dark .article-content {
    color: #e2e8f0 !important;
}

html.dark .article-content p {
    color: #e2e8f0 !important;
}

html.dark .article-content h1,
html.dark .article-content h2,
html.dark .article-content h3,
html.dark .article-content h4,
html.dark .article-content h5,
html.dark .article-content h6 {
    color: #f8fafc !important;
}

html.dark .article-content strong,
html.dark .article-content b {
    color: #ffffff !important;
}

html.dark .article-content a {
    color: #60a5fa !important;
}

html.dark .article-content a:hover {
    color: #93c5fd !important;
}

html.dark .article-content blockquote {
    background-color: #1e293b !important;
    border-left-color: var(--color-clean-primary, #3b82f6) !important;
    color: #cbd5e1 !important;
}

html.dark .article-content code {
    background-color: #0f172a !important;
    color: #f472b6 !important;
    border: 1px solid #334155;
    padding: 0.15rem 0.35rem;
    border-radius: 0.375rem;
}

html.dark .article-content pre {
    background-color: #020617 !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}

html.dark .article-content table,
html.dark .article-content th,
html.dark .article-content td {
    border-color: #334155 !important;
}

html.dark .article-content th {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

html.dark .article-content td {
    color: #cbd5e1 !important;
}

html.dark .article-content figcaption,
html.dark .wp-caption p.wp-caption-text {
    color: #94a3b8 !important;
}

html.dark .wp-caption {
    background: #1e293b !important;
    border-color: #334155 !important;
}

/* 7. Inline "Baca Juga" Boxes */
html.dark .baca-juga-inline,
html.dark .article-content p.baca-juga,
html.dark .article-content div.baca-juga {
    background-color: #1e293b !important;
    border-left-color: var(--color-clean-primary, #3b82f6) !important;
}

html.dark .baca-juga-inline .baca-juga-title,
html.dark .baca-juga-inline strong:first-child,
html.dark .article-content p.baca-juga strong:first-child {
    color: #93c5fd !important;
}

html.dark .baca-juga-inline a,
html.dark .article-content p.baca-juga a {
    color: #60a5fa !important;
}

/* 8. Comments Form & List in Dark Mode */
html.dark #comments input[type="text"],
html.dark #comments input[type="email"],
html.dark #comments input[type="url"],
html.dark #comments input[type="number"],
html.dark #comments textarea {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark #comments input::placeholder,
html.dark #comments textarea::placeholder {
    color: #64748b !important;
}

html.dark #comments label {
    color: #e2e8f0 !important;
}

html.dark #comments .comment-form-container,
html.dark #comments [id^="comment-"] {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html.dark #comments [id^="comment-"] .font-bold {
    color: #ffffff !important;
}

/* 9. Sidebar Widgets in Dark Mode */
html.dark .news-portal-widget {
    background-color: #1e293b;
    border-color: #334155;
}

html.dark .news-portal-widget h3 {
    color: #ffffff !important;
}

/* Prayer Times Table in Dark Mode */
html.dark .prayer-times-table tr {
    border-color: #334155 !important;
}

html.dark .prayer-times-table tr:hover {
    background-color: rgba(51, 65, 85, 0.4) !important;
}

html.dark .prayer-times-table tr td:first-child {
    color: #cbd5e1 !important;
}

html.dark .prayer-times-table tr td:last-child {
    color: #ffffff !important;
}

html.dark .prayer-times-table tr.bg-blue-50,
html.dark tr.prayer-active-row {
    background-color: rgba(37, 99, 235, 0.25) !important;
}

html.dark .prayer-times-table tr.bg-blue-50 td {
    color: #93c5fd !important;
}

/* Popular Posts Rank Number */
html.dark .font-extrabold.text-2xl.text-slate-800,
html.dark .font-extrabold.text-3xl.text-slate-800,
html.dark .text-slate-300 {
    color: #64748b !important;
}

html.dark .group:hover .text-slate-300,
html.dark .group:hover .text-slate-800 {
    color: var(--color-clean-primary, #60a5fa) !important;
}

/* Tag Pill Badges */
html.dark a[href*="/tag/"] {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

html.dark a[href*="/tag/"]:hover {
    background-color: var(--color-clean-primary, #1a56db) !important;
    color: #ffffff !important;
    border-color: var(--color-clean-primary, #1a56db) !important;
}

/* 10. Form Inputs & Search Modals */
html.dark input[type="text"],
html.dark input[type="search"],
html.dark input[type="email"],
html.dark textarea,
html.dark select {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b !important;
}

/* 11. Mobile Drawer in Dark Mode */
html.dark #mobile-drawer,
html.dark #mobile-menu {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
}

html.dark #mobile-drawer a,
html.dark #mobile-menu a {
    color: #e2e8f0 !important;
}

html.dark #mobile-drawer a:hover,
html.dark #mobile-menu a:hover {
    color: var(--color-clean-primary, #60a5fa) !important;
}

/* 12. Pagination in Dark Mode */
html.dark .page-numbers:not(.current) {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

html.dark .page-numbers:not(.current):hover {
    background-color: #334155 !important;
    color: #ffffff !important;
}

html.dark .page-numbers.current {
    background-color: var(--color-clean-primary, #1a56db) !important;
    color: #ffffff !important;
}

/* 13. Footer Bottom in Dark Mode */
html.dark footer {
    background-color: #020617 !important;
    border-color: #1e293b !important;
}

html.dark footer h4 {
    color: #ffffff !important;
}

html.dark footer a {
    color: #94a3b8 !important;
}

html.dark footer a:hover {
    color: #ffffff !important;
}

/* 14. Brand Links in Dark Mode (Enhanced Contrast) */
html.dark .text-brand-primary {
    color: #60a5fa !important;
}

html.dark .hover\:text-brand-primary:hover,
html.dark .group:hover .group-hover\:text-brand-primary {
    color: #93c5fd !important;
}

html.dark .bg-brand-primary {
    background-color: var(--color-clean-primary, #1a56db) !important;
}

/* =========================================================================
   15. HEADER NAVIGATION & MENU ITEMS (Light & Dark Mode Support)
   ========================================================================= */

.header-nav-row,
header nav.main-header-nav,
.header-nav-row nav {
    background-color: var(--color-navbar-bg, #1a56db);
    color: var(--color-navbar-text, #ffffff) !important;
}

.header-nav-row ul,
header nav.main-header-nav ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    background: transparent !important;
}

.header-nav-row li,
header nav.main-header-nav li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.header-nav-row a,
.header-nav-row ul li a,
header nav.main-header-nav a,
header nav.main-header-nav ul li a {
    color: var(--color-navbar-text, #ffffff) !important;
    background: transparent !important;
    display: inline-block;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    text-decoration: none !important;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.header-nav-row a:hover,
.header-nav-row ul li a:hover,
header nav.main-header-nav a:hover,
header nav.main-header-nav ul li a:hover {
    background-color: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ACTIVE / SELECTED MENU ITEM: VIBRANT ACCENT COLOR */
.header-nav-row .current-menu-item > a,
.header-nav-row .current_page_item > a,
.header-nav-row .current-cat > a,
.header-nav-row .current-category-ancestor > a,
.header-nav-row li.active > a,
.header-nav-row a.nav-link-active,
header nav.main-header-nav .current-menu-item > a,
header nav.main-header-nav .current_page_item > a,
header nav.main-header-nav .current-cat > a,
header nav.main-header-nav .current-category-ancestor > a,
header nav.main-header-nav li.active > a,
header nav.main-header-nav a.nav-link-active {
    background-color: var(--color-clean-secondary, #ff6c00) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.header-nav-row .current-menu-item > a:hover,
.header-nav-row .current_page_item > a:hover,
.header-nav-row .current-cat > a:hover,
.header-nav-row li.active > a:hover,
.header-nav-row a.nav-link-active:hover,
header nav.main-header-nav .current-menu-item > a:hover,
header nav.main-header-nav .current_page_item > a:hover,
header nav.main-header-nav .current-cat > a:hover,
header nav.main-header-nav li.active > a:hover,
header nav.main-header-nav a.nav-link-active:hover {
    background-color: var(--color-clean-secondary, #ff6c00) !important;
    opacity: 0.9 !important;
    color: #ffffff !important;
}

/* Light Row Menus (If Menu placed on Row 1 or Row 2) */
.header-light-row a,
.header-light-row ul li a {
    color: #1e293b !important;
    background: transparent !important;
}

.header-light-row a:hover,
.header-light-row ul li a:hover {
    color: var(--color-clean-primary, #1a56db) !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.header-light-row .current-menu-item > a,
.header-light-row .current_page_item > a,
.header-light-row .current-cat > a,
.header-light-row li.active > a,
.header-light-row a.nav-link-active {
    background-color: var(--color-clean-secondary, #ff6c00) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

html.dark .header-light-row a,
html.dark .header-light-row ul li a {
    color: #f1f5f9 !important;
    background: transparent !important;
}

html.dark .header-light-row a:hover,
html.dark .header-light-row ul li a:hover {
    color: var(--color-clean-secondary, #ff6c00) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .header-light-row .current-menu-item > a,
html.dark .header-light-row .current_page_item > a,
html.dark .header-light-row .current-cat > a,
html.dark .header-light-row li.active > a,
html.dark .header-light-row a.nav-link-active {
    background-color: var(--color-clean-secondary, #ff6c00) !important;
    color: #ffffff !important;
}