/* ============================================
   HARIAN JOGJA - DARK MODE STYLESHEET (Refactored)
   ============================================
   Perubahan utama:
   - 27 rule "color: var(--accent-hover)" → 1 selector group
   - 10 rule "color: var(--accent)" → 2 selector group
   - article-detail a & p a digabung
   - baca-juga hover duplikat dihapus
   - section-kedua hover duplikat dihapus
   - sidebar-news hover digabung
   - latest-news hover digabung
   ============================================ */

/* ============================================
   1. CSS VARIABLES
   ============================================ */

[data-theme="dark"] {
  --bg-primary: #0f0f1a;
  --bg-secondary: #1a1a2e;
  --bg-tertiary: #242438;
  --footer-bg: #0a234e;
  --text-primary: #fafafa;
  --text-secondary: #c9c9c9;
  --text-tertiary: #8a8a8a;
  --border-color: #2a2a4a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* ============================================
   2. LOGO & ICONS
   ============================================ */

[data-theme="dark"] .logo-light,
[data-theme="dark"] .footer-logo-light,
[data-theme="dark"] .moon-icon {
  display: none;
}

[data-theme="dark"] .logo-dark,
[data-theme="dark"] .footer-logo-dark,
[data-theme="dark"] .sun-icon {
  display: block;
}

[data-theme="dark"] .footer {
  background: var(--bg-primary);
}

/* ============================================
   3. NAVIGATION
   ============================================ */

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active,
[data-theme="dark"] .nav-dropdown-toggle:hover,
[data-theme="dark"] .nav-dropdown-toggle.active,
[data-theme="dark"] .nav-dropdown-link:hover {
  background: var(--bg-secondary);
}

[data-theme="dark"] .mobile-nav-link:hover,
[data-theme="dark"] .mobile-nav-link.active {
  color: var(--accent-hover);
}

/* ============================================
   4. ACCENT COLOR — static (tidak hover)
   ============================================ */

[data-theme="dark"] .sub-article-category,
[data-theme="dark"] .sidebar-article-link .sidebar-category,
[data-theme="dark"] .latest-news-category,
[data-theme="dark"] .editor-name,
[data-theme="dark"] .popular-number,
[data-theme="dark"] .article-detail-content a,
[data-theme="dark"] .article-detail-content p a {
  color: var(--accent);
}

/* ============================================
   5. ACCENT-HOVER — semua :hover → color accent-hover
      (27 rule → 1 selector group)
   ============================================ */

[data-theme="dark"] a:hover,
[data-theme="dark"] .editor-name:hover,

/* Hero */
[data-theme="dark"] .hero-sub-article-link:hover .sub-article-title,
[data-theme="dark"] .hero-sub-article-link:hover .sub-article-category,

/* Sidebar article */
[data-theme="dark"] .sidebar-article-link:hover .sidebar-article-title,

/* Baca juga — :hover & a:hover sama, cukup satu */
[data-theme="dark"] .baca-juga-item:hover .baca-juga-headline,

/* Related */
[data-theme="dark"] .related-simple-item:hover .related-simple-title,

/* Latest news — item:hover & link:hover keduanya sama */
[data-theme="dark"] .latest-news-link:hover .latest-news-title,
[data-theme="dark"] .latest-news-list-full .latest-news-item:hover .latest-news-title,

/* Sidebar news — card, with-image, link → semua sama */
[data-theme="dark"] .sidebar-news-card:hover .sidebar-news-title,
[data-theme="dark"] .sidebar-news-link:hover .sidebar-news-title,
[data-theme="dark"] .sidebar-news-link:hover .sidebar-news-item-title,

/* Section kedua — :hover & link:hover sama, cukup satu */
[data-theme="dark"] .section-kedua-card-link:hover .section-kedua-card-title,

/* Sidebar national */
[data-theme="dark"] .sidebar-national-item:hover .national-title,

/* Article content */
[data-theme="dark"] .article-detail-content a:hover,
[data-theme="dark"] .article-detail-content p a:hover,

/* Pagination */
[data-theme="dark"] .pagination-btn:hover,
[data-theme="dark"] .pagination-number:hover,

/* Share */
[data-theme="dark"] .share-btn:hover,
[data-theme="dark"] .share-btn.copy-link:hover,

/* Featured */
[data-theme="dark"] .featured-card-link:hover .featured-card-title,

/* Main articles */
[data-theme="dark"] .main-article-link:hover .main-article-title,
[data-theme="dark"] .main-article-item-link:hover .main-article-item-title,

/* Popular */
[data-theme="dark"] .popular-link:hover .popular-title {
  color: var(--accent-hover);
}

/* ============================================
   6. MISC — rules yang tidak masuk pola di atas
   ============================================ */

/* Baca juga borders */
[data-theme="dark"] .baca-juga-section {
  border-top-color: var(--accent);
  border-bottom-color: var(--accent);
}
[data-theme="dark"] .baca-juga-title {
  color: var(--text-primary);
}

/* Article blockquote */
[data-theme="dark"] .article-detail-content blockquote {
  border-left-color: var(--accent);
}

/* Pagination active */
[data-theme="dark"] .pagination-number.active {
  color: var(--primary);
  background: var(--accent);
  border-color: var(--accent);
}
[data-theme="dark"] .pagination-btn:hover,
[data-theme="dark"] .pagination-number:hover {
  border-color: var(--accent-hover);
}

/* Filter / Indeks */
[data-theme="dark"] .filter-select {
  background: var(--bg-secondary);
}
[data-theme="dark"] .filter-select:focus {
  box-shadow: 0 0 0 3px rgba(244, 197, 13, 0.2);
}
[data-theme="dark"] .filter-btn {
  background: var(--accent);
  color: var(--primary);
}
[data-theme="dark"] .filter-btn:hover {
  background: var(--accent-hover);
}

/* ============================================
   END OF DARK MODE STYLES
   ============================================ */