/* ============================================
   HARIAN JOGJA - DARK MODE STYLESHEET
   ============================================ */

/* ============================================
   DARK MODE 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);
} */
[data-theme="dark"] {
  /* backgrounds — warm gray ala claude.ai */
  --bg-primary: #1a1916;
  --bg-secondary: #242320;
  --bg-tertiary: #2d2b28;
  --footer-bg: #0a234e; /* tetap */

  /* teks — warm white, tidak pure #fff */
  --text-primary: #eeebe6;
  --text-secondary: #b8b4ae;
  --text-tertiary: #7a766f;

  /* border & shadow */
  --border-color: #363430;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.55);

  /* brand — dinaikkan lightness agar kontras */
  --primary: #7874d8;
  --primary-hover: #9490e2;
  --accent: #d4a200; /* kuning lebih warm */
  --accent-hover: #b88c00;
}
/* ============================================
   LOGO & THEME 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);
}

/* ============================================
   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);
}

/* ============================================
   HOVER TITLE COLOR (accent-hover on dark)
   Grouped by section for maintainability
   ============================================ */

/* Hero */
[data-theme="dark"] .hero-headline-link:hover .hero-headline-title,
[data-theme="dark"] .hero-sub-article-link:hover .sub-article-title,
[data-theme="dark"] .hero-sub-article-link:hover .sub-article-category {
  color: var(--accent-hover);
}

[data-theme="dark"] .sub-article-category {
  color: var(--accent);
}

/* Sidebar articles */
[data-theme="dark"] .sidebar-article-link:hover .sidebar-article-title {
  color: var(--accent-hover);
}
[data-theme="dark"] .sidebar-article-link .sidebar-category {
  color: var(--accent-hover);
}

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

/* Section Pertama (main articles) */
[data-theme="dark"] .main-article-link:hover .main-article-title {
  color: var(--accent-hover);
}
[data-theme="dark"] .main-article-item-link:hover .main-article-item-title {
  color: var(--accent-hover);
}

/* Section Kedua */
[data-theme="dark"] .section-kedua-card:hover .section-kedua-card-title,
[data-theme="dark"] .section-kedua-card-link:hover .section-kedua-card-title {
  color: var(--accent-hover);
}

/* Sidebar national */
[data-theme="dark"] .sidebar-national-item:hover .national-title {
  color: var(--accent-hover);
}

/* Latest news */
[data-theme="dark"] .latest-news-item:hover .latest-news-title,
[data-theme="dark"] .latest-news-link:hover .latest-news-title,
[data-theme="dark"]
  .latest-news-list-full
  .latest-news-item:hover
  .latest-news-title {
  color: var(--accent-hover);
}

[data-theme="dark"] .latest-news-category {
  color: var(--accent);
}

/* Sidebar news */
[data-theme="dark"] .sidebar-news-card:hover .sidebar-news-title,
[data-theme="dark"]
  .sidebar-news-list
  .sidebar-news-card.with-image: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 {
  color: var(--accent-hover);
}

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

/* Related articles */
[data-theme="dark"] .related-simple-item:hover .related-simple-title {
  color: var(--accent-hover);
}

/* Baca Juga */
[data-theme="dark"] .baca-juga-item a:hover .baca-juga-headline,
[data-theme="dark"] .baca-juga-item:hover .baca-juga-headline {
  color: var(--accent-hover);
}

[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);
}

/* Editor */
[data-theme="dark"] .editor-name {
  color: var(--accent);
}
[data-theme="dark"] .editor-name:hover {
  color: var(--accent-hover);
}

/* ============================================
   GLOBAL LINK HOVER
   ============================================ */

[data-theme="dark"] a:hover {
  color: var(--accent-hover);
}

/* ============================================
   ARTICLE DETAIL CONTENT
   ============================================ */

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

[data-theme="dark"] .article-detail-content a,
[data-theme="dark"] .article-detail-content p a {
  color: var(--accent);
}

[data-theme="dark"] .article-detail-content a:hover,
[data-theme="dark"] .article-detail-content p a:hover {
  color: var(--accent-hover);
}

/* ============================================
   SHARE BUTTONS
   ============================================ */

[data-theme="dark"] .share-btn:hover,
[data-theme="dark"] .share-btn.copy-link:hover {
  color: var(--accent-hover);
}

/* ============================================
   PAGINATION
   ============================================ */

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

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

/* ============================================
   FILTER (INDEKS PAGE)
   ============================================ */

[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
   ============================================ */