/* ============================================================
   BarqNews Pro — 13 — Dark Mode
   ------------------------------------------------------------
   ملاحظة: متغيرات الألوان نفسها معرَّفة في barqnews-variables.css
   هذا الملف يحوي:
     • الـ toggle UI
     • overrides خاصة لا يمكن التعبير عنها بمتغيرات
     • انتقالات ناعمة عند تبديل الثيم
     • prefers-color-scheme fallback
   ============================================================ */

/* ---------- Toggle button ---------- */
.dark-mode-toggle {
  width: 48px;
  height: 26px;
  border-radius: 13px;
  background: var(--border-strong);
  border: none;
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: background var(--transition-base);
  flex-shrink: 0;
}
.dark-mode-toggle .toggle-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--text-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform var(--transition-base), background var(--transition-base);
}
.ltr .dark-mode-toggle .toggle-thumb { right: auto; left: 3px; }

[data-theme^="dark"] .dark-mode-toggle {
  background: var(--site-color);
}
[data-theme^="dark"] .dark-mode-toggle .toggle-thumb {
  transform: translateX(-22px);
  background: #0f1117;
  color: var(--site-color);
}
[data-theme^="dark"] .ltr .dark-mode-toggle .toggle-thumb {
  transform: translateX(22px);
}

/* ---------- Smooth theme transition ---------- */
body,
.post,
.widget,
#site-header,
#site-footer,
.comment-content,
.entry-author,
.entry-share,
.entry-citations,
input, textarea, select {
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base);
}

/* ---------- Dark image dimming ---------- */
[data-theme^="dark"] .post-thumb img,
[data-theme^="dark"] .entry-image img,
[data-theme^="dark"] .header-bg img {
  filter: brightness(0.92);
}

/* ---------- Dark code blocks ---------- */
[data-theme^="dark"] .entry-content code,
[data-theme^="dark"] .entry-content pre {
  background: #0a0c14;
  color: #7dd3fc;
  border-color: rgba(255, 255, 255, 0.05);
}

/* ---------- Dark dropdowns ---------- */
[data-theme^="dark"] .nav-menu ul {
  background: #1a1d2e;
  border-color: rgba(255, 255, 255, 0.08);
}

/* ---------- Dark form fields ---------- */
[data-theme^="dark"] input,
[data-theme^="dark"] textarea,
[data-theme^="dark"] select {
  background: #1a1d2e;
  color: var(--text-color);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme^="dark"] input::placeholder,
[data-theme^="dark"] textarea::placeholder {
  color: var(--text-muted);
}

/* ---------- Dark featured-post hover color ---------- */
[data-theme^="dark"] .posts-loop.style-overlay .post-link:hover .post-title h3,
[data-theme^="dark"] .post-featured .post-link:hover .post-title h3 {
  color: #ffb37a;
}

/* ---------- prefers-color-scheme (يطبَّق فقط إذا لم يختر المستخدم يدوياً) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-color:        #0f1117;
    --card-bg:         #1a1d2e;
    --card-bg-rgb:     26, 29, 46;
    --light-bg:        #232638;
    --header-bg:       #12151f;
    --text-color:      #e8eaf0;
    --text-secondary:  #9da3b8;
    --text-muted:      #5c6480;
    --text-inverse:    #0f1117;
    --border-color:    rgba(255, 255, 255, 0.07);
    --border-strong:   rgba(255, 255, 255, 0.14);
    --header-shadow:   0 1px 0 rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.25);
    --skeleton-from:   #1f2333;
    --skeleton-to:     #2a2f44;
    color-scheme: dark;
  }
}