/* ===== Dark Mode ===== */
:root,
[data-theme="dark"],
.dark {
  --bg:            #0b1020;
  --card:          #0f172a;
  --text:          #e5e7eb;
  --muted:         #94a3b8;
  --accent:        #ef4444;
  --accent2:       #06b6d4;
  --line:          rgba(148,163,184,.18);
  --shadow:        0 18px 44px rgba(0,0,0,.35);
  --r:             16px;
  --max:           1180px;
  --sidebar-width: 320px;
  --thumb-width:   280px;
  --body-bg:
    radial-gradient(900px 420px at 15% -10%, rgba(239,68,68,.18), transparent 60%),
    radial-gradient(900px 420px at 110% 10%, rgba(6,182,212,.14), transparent 60%),
    #0b1020;
}

/* ===== Light Mode ===== */
[data-theme="light"] {
  --bg:      #f1f5f9;
  --card:    #ffffff;
  --text:    #1e293b;
  --muted:   #64748b;
  --accent:  #dc2626;
  --accent2: #0891b2;
  --line:    rgba(100,116,139,.18);
  --shadow:  0 8px 24px rgba(0,0,0,.10);
  --body-bg:
    radial-gradient(900px 420px at 15% -10%, rgba(220,38,38,.06), transparent 60%),
    radial-gradient(900px 420px at 110% 10%, rgba(8,145,178,.05), transparent 60%),
    #f1f5f9;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--app-font-family, "IRANSansX");
  background: var(--body-bg);
  color: var(--text);
  overflow-x: clip;
  transition: background 0.3s ease, color 0.3s ease;
}

a { color: inherit; text-decoration: none; }

/* ===== Dark Mode: Fix blue link & text overrides ===== */
/* r12: در دارک مود تمام لینک‌ها باید رنگ متن (سفید/روشن) داشته باشند نه آبی پیش‌فرض مرورگر */
[data-theme="dark"] a,
.dark a {
  color: var(--text);
}
/* هاور لینک‌ها همچنان با accent رنگ می‌شوند */
[data-theme="dark"] a:hover,
.dark a:hover {
  color: var(--accent2);
}

/* ===== Dark Mode: Sidebar solid background ===== */
/* r12: بک‌گراند ستون کناری در دارک مود باید تیره و خوانا باشد نه شفاف آبی */
/* specificity: attribute+class = 0,2,0 — از blog.css .side (0,1,0) برنده می‌شود */
[data-theme="dark"] .side,
.dark .side {
  background: rgba(11, 16, 32, 0.88);
  border-color: rgba(255,255,255,.08);
}

/* ===== r12 Fix: CSS variable aliases — public-hardening.css uses --text-muted, --card-bg, --border ===== */
[data-theme="dark"],
.dark {
  --text-muted:            var(--muted);
  --card-bg:               var(--card);
  --border:                var(--line);
  /* footer از سایت اصلی: --color-background-light fallback را override می‌کنیم */
  --color-background-light: var(--card);
}

/* ===== r12 Fix: ID selectors — spec (1,0,0)+ cannot be overridden by class selectors ===== */

/* #global-search-form { background: white } در public-hardening.css spec(1,0,0)
   باید با attr+id selector: spec(1,1,0) override شود */
[data-theme="dark"] #global-search-form,
.dark #global-search-form {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

/* #comments-toggle:hover { background: #f8fafc; border-color: #2563eb } — spec(1,0,2)
   .dark .comments-toggle-btn:hover spec(0,2,2) کافی نیست — باید spec(1,1,2) باشد */
[data-theme="dark"] #comments-toggle:hover,
.dark #comments-toggle:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: var(--line) !important;
}


/* global search input در dark mode */
[data-theme="dark"] .global-search-input,
.dark .global-search-input {
  background: var(--card);
  color: var(--text);
  border-color: var(--line);
}
[data-theme="dark"] .global-search-input::placeholder,
.dark .global-search-input::placeholder {
  color: var(--muted);
}

/* search results dropdown در dark mode */
[data-theme="dark"] .search-results-dropdown,
.dark .search-results-dropdown {
  background: var(--card);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
[data-theme="dark"] .search-result-item,
.dark .search-result-item {
  color: var(--text);
  border-bottom-color: var(--line);
}
[data-theme="dark"] .search-result-item:hover,
.dark .search-result-item:hover {
  background: rgba(255,255,255,.04);
}
[data-theme="dark"] .search-result-meta,
.dark .search-result-meta {
  color: var(--muted);
}

/* comments-section border در public/post.ejs */
[data-theme="dark"] .public-post-comments-section,
.dark .public-post-comments-section {
  border-top-color: var(--line);
}


/* post-content کامنت‌ها و متن ها */
[data-theme="dark"] .comment-content,
.dark .comment-content {
  color: var(--text);
}
[data-theme="dark"] .comment-author,
.dark .comment-author {
  color: var(--text);
}

/* form elements */
[data-theme="dark"] .form-label,
.dark .form-label {
  color: var(--text);
}
[data-theme="dark"] .form-input,
.dark .form-input {
  background: var(--card);
  border-color: var(--line);
  color: var(--text);
}

/* comments toggle */
[data-theme="dark"] .comments-toggle-btn,
.dark .comments-toggle-btn {
  background: var(--card);
  border-color: var(--line);
  color: var(--text);
}
[data-theme="dark"] .comments-toggle-btn:hover,
.dark .comments-toggle-btn:hover {
  background: rgba(255,255,255,.08);
  border-color: var(--line);
}

/* section-title در dark mode */
[data-theme="dark"] .section-title,
.dark .section-title {
  color: var(--text);
  border-bottom-color: var(--line);
}

[data-theme="dark"] .public-home-popular-item,
.dark .public-home-popular-item {
  color: var(--text);
  border-bottom-color: var(--line);
}
[data-theme="dark"] .public-home-category-chip,
.dark .public-home-category-chip {
  background: rgba(255,255,255,.06);
  color: var(--text);
}
[data-theme="dark"] .public-home-category-count,
.dark .public-home-category-count {
  background: rgba(255,255,255,.1);
}
[data-theme="dark"] .public-post-category-badge,
.dark .public-post-category-badge {
  background: rgba(6,182,212,.12);
  color: var(--accent2);
}
[data-theme="dark"] .public-home-about-copy,
.dark .public-home-about-copy {
  color: var(--muted);
}
[data-theme="dark"] .public-home-empty-state,
.dark .public-home-empty-state {
  color: var(--muted);
}

/* ===== r12 Fix: Pagination layout — .pagination a spec(0,1,1) overrides .page-btn spec(0,1,0) ===== */

/* 1. Layout fix (both modes): padding/border-radius برای همه page-btns */
.pagination .page-btn {
  padding: 0;
  border-radius: 50%;
}
.pagination .page-btn.prev,
.pagination .page-btn.next {
  padding: 0 14px;
  border-radius: 999px;
  width: auto;
}

/* 2. Dark mode — رنگ و بک‌گراند non-active buttons (حالت عادی، بدون hover)
   spec=(0,5,0): [data-theme] + .pagination + .page-btn + :not(.active) + :not([aria-current]) */
[data-theme="dark"] .pagination .page-btn:not(.active):not([aria-current="page"]),
.dark .pagination .page-btn:not(.active):not([aria-current="page"]) {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  color: var(--muted);
}

/* 3. Dark mode — hover روی non-active buttons باید قرمز باشد
   spec=(0,6,0): باید از rule 2 (0,5,0) قوی‌تر باشد تا hover override شود */
[data-theme="dark"] .pagination .page-btn:not(.active):not([aria-current="page"]):hover,
.dark .pagination .page-btn:not(.active):not([aria-current="page"]):hover {
  color: #d24042;
  border-color: #d24042;
  background: rgba(210,64,66,.08);
}

/* 4. Dark mode — active button hover باید solid red باقی بماند
   blog.css .page-btn.active:hover spec=(0,3,0) — ما با spec=(0,4,0) برنده می‌شویم */
[data-theme="dark"] .page-btn.active:hover,
.dark .page-btn.active:hover,
[data-theme="dark"] .page-btn[aria-current="page"]:hover,
.dark .page-btn[aria-current="page"]:hover {
  background: #d24042;
  color: #ffffff;
  border-color: #d24042;
}

/* ===== r12 Fix: Elements whose color is overridden by [data-theme=dark] a {color:var(--text)} ===== */

/* .post-tag: cyan category tag — spec(0,1,0) loses to [data-theme=dark] a spec(0,1,1) */
[data-theme="dark"] .post-tag,
.dark .post-tag {
  color: var(--accent2);
  border-color: rgba(6,182,212,.25);
  background: rgba(6,182,212,.06);
}

/* .chip-more: accent-colored "more" chip — spec(0,1,0) loses to [data-theme=dark] a spec(0,1,1) */
[data-theme="dark"] .chip-more,
.dark .chip-more {
  color: var(--accent);
  border-color: rgba(239,68,68,.35);
}

/* .page-btn:hover: handled inside pagination section below with correct specificity */