/* ===================================================================
   Mentometry — Single article fixes (v2.5.5)
   Loaded LAST (after style.css + theme-override). Covers:
   1) faded hero cover with a strong dark overlay (clear title text)
   2) bullets/numbers on the LEFT for the English (LTR) site
   3) H2/H3/H4 always readable in both themes
   4) working Dark / Light theme on single articles
   =================================================================== */

/* ── 1) HERO: faded/blurred cover + strong overlay ── */
.hero-visual { overflow: hidden; isolation: isolate; background-color: #05070d; }
.hero-visual .hero-bg {
  position: absolute; inset: -6px; z-index: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  /* cover stays clearly visible: only a light blur + slight dimming */
  filter: blur(2px) saturate(1) brightness(.82);
  opacity: .9;
  transform: scale(1.03);
}
.hero-visual .hero-overlay {
  z-index: 1;
  /* light on top (cover shows through), darker only behind the title/excerpt at the bottom */
  background:
    linear-gradient(to bottom,
      rgba(2,4,10,.18) 0%,
      rgba(2,4,10,.34) 38%,
      rgba(2,4,10,.62) 70%,
      rgba(2,4,10,.86) 100%);
}
.hero-visual:not(.has-thumb) {
  min-height: 280px;
  background: linear-gradient(135deg, var(--dark-surface) 0%, var(--dark-surface-3) 100%);
}
.hero-title, .article-title.hero-title {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 4px 24px rgba(0,0,0,.95);
}
.hero-excerpt, .article-excerpt.hero-excerpt {
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 2px 12px rgba(0,0,0,.8);
}

/* ── 2) LISTS: LTR (English) = left side; RTL (translated fa/ar/ur…) = right ── */
.article-content ul, .article-content ol { padding-right: 0; }
.article-content ol { padding-left: 1.75rem; }
.article-content ul { padding-left: 0; }
.article-content ul li { padding-right: 0; padding-left: 1.5rem; }
.article-content ul li::before { right: auto; left: 0; }
.article-content.mnt-rtl-content ol { padding-left: 0; padding-right: 1.75rem; }
.article-content.mnt-rtl-content ul li { padding-left: 0; padding-right: 1.5rem; }
.article-content.mnt-rtl-content ul li::before { left: auto; right: 0; }

/* ── 3) HEADINGS inside the article ── */
html[data-theme="dark"] .article-content h2,
html[data-theme="dark"] .article-content h3,
html[data-theme="dark"] .article-content h4,
html[data-theme="dark"] .article-content h5,
html[data-theme="dark"] .article-content h6,
html:not([data-theme]) .article-content h2,
html:not([data-theme]) .article-content h3,
html:not([data-theme]) .article-content h4 { color: #f1f5f9 !important; }
html[data-theme="dark"] .article-content h2 *,
html[data-theme="dark"] .article-content h3 *,
html[data-theme="dark"] .article-content h4 * { color: inherit !important; }

html[data-theme="light"] .article-content h2,
html[data-theme="light"] .article-content h3,
html[data-theme="light"] .article-content h4,
html[data-theme="light"] .article-content h5,
html[data-theme="light"] .article-content h6 { color: #0f172a !important; }
html[data-theme="light"] .article-content h2 *,
html[data-theme="light"] .article-content h3 *,
html[data-theme="light"] .article-content h4 * { color: inherit !important; }

/* ── 4) LIGHT THEME for single articles ──
   The neon override forced every container to the dark colour with !important
   and body.single was hard-coded to #000, so the toggle changed nothing.
   Here the light palette is scoped to the article area only (header, hero,
   footer stay dark as designed). */
html[data-theme="light"] body.single { background: #ffffff !important; }

html[data-theme="light"] .article-layout,
html[data-theme="light"] .related-posts {
  --primary:    #0f172a;
  --surface:    #ffffff;
  --surface-2:  #f1f5f9;
  --surface-3:  #e2e8f0;
  --border:     #e2e8f0;
  --text-main:  #1e293b;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --accent:       #0891b2;
  --accent-light: #06b6d4;
  color: #1e293b;
}

html[data-theme="light"] body.single #main-content,
html[data-theme="light"] .single .article-layout,
html[data-theme="light"] .single .article-main,
html[data-theme="light"] .single .article-content,
html[data-theme="light"] .single .comments-section,
html[data-theme="light"] .article-layout,
html[data-theme="light"] .article-main,
html[data-theme="light"] .article-content,
html[data-theme="light"] .comments-section {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
html[data-theme="light"] .related-posts { background: #f8fafc !important; }
html[data-theme="light"] .article-sidebar .sidebar-widget,
html[data-theme="light"] .sidebar-widget {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] .article-content,
html[data-theme="light"] .article-content p,
html[data-theme="light"] .article-content li { color: #1e293b; }
html[data-theme="light"] .article-content a { color: #0891b2; }
html[data-theme="light"] .article-content blockquote { background: #f1f5f9; }
html[data-theme="light"] .article-content blockquote p { color: #0f172a; }
html[data-theme="light"] .article-content code { background: #e2e8f0; color: #0f172a; }
html[data-theme="light"] .article-content th { color: #0f172a; }
html[data-theme="light"] .article-content td { color: #1e293b; border-bottom-color: #e2e8f0; }
html[data-theme="light"] .article-content tr:nth-child(even) td { background: #f8fafc; }

html[data-theme="light"] .widget-title { color: #475569; border-bottom-color: #e2e8f0; }
html[data-theme="light"] .cat-item a,
html[data-theme="light"] .pop-post-title-link,
html[data-theme="light"] .post-item-title { color: #1e293b; }
html[data-theme="light"] .cat-count { background: #e2e8f0; color: #475569; }
html[data-theme="light"] .pop-post-date { color: #64748b; }

html[data-theme="light"] .tag-link,
html[data-theme="light"] .share-copy,
html[data-theme="light"] .share-print { background: #f1f5f9; border-color: #e2e8f0; color: #1e293b; }
html[data-theme="light"] .bookmark-btn {
  background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #1e293b !important;
}
html[data-theme="light"] .article-rating,
html[data-theme="light"] .spn-card,
html[data-theme="light"] .author-box,
html[data-theme="light"] .comment-form-wrap,
html[data-theme="light"] .post-card { background: #f8fafc; border-color: #e2e8f0; }
html[data-theme="light"] .rating-title,
html[data-theme="light"] .spn-title,
html[data-theme="light"] .post-card-title,
html[data-theme="light"] .post-card-title a,
html[data-theme="light"] .comments-title,
html[data-theme="light"] .comment-form-title,
html[data-theme="light"] .comment-form-title a,
html[data-theme="light"] .author-box-name a,
html[data-theme="light"] .section-title { color: #0f172a; }
html[data-theme="light"] .rating-thumb { background: #ffffff; border-color: #cbd5e1; color: #475569; }
html[data-theme="light"] .spn-label,
html[data-theme="light"] .post-card-meta,
html[data-theme="light"] .comment-date,
html[data-theme="light"] .form-label,
html[data-theme="light"] .author-box-bio { color: #64748b; }
html[data-theme="light"] .comment-text,
html[data-theme="light"] .comment-text p,
html[data-theme="light"] .comment-author-name { color: #1e293b; }
html[data-theme="light"] .comment { border-bottom-color: #e2e8f0; }
html[data-theme="light"] .comments-title { border-bottom-color: #e2e8f0; }
html[data-theme="light"] .form-input,
html[data-theme="light"] .form-textarea,
html[data-theme="light"] .comment-form-wrap input[type="text"],
html[data-theme="light"] .comment-form-wrap input[type="email"],
html[data-theme="light"] .comment-form-wrap textarea {
  background: #ffffff; border-color: #cbd5e1; color: #1e293b;
}
html[data-theme="light"] .mnt-reading-progress { background: rgba(15,23,42,.08); }

/* ── Dark theme: make sure the article area is truly dark ── */
html[data-theme="dark"] body.single,
html[data-theme="dark"] .article-layout,
html[data-theme="dark"] .article-main,
html[data-theme="dark"] .article-content,
html[data-theme="dark"] .comments-section { background-color: #000000 !important; }


/* ── 5) LIGHT THEME: dark "gaming" blocks of the article-writer keep LIGHT text ──
   The rule `html[data-theme="light"] .article-content p/li { color:#1e293b }` was
   also hitting paragraphs/lists/links inside the dark boxes (Key Takeaways, Pros/Cons,
   CTA, Spec sheet, FAQ, game cards, playbox...), giving dark text on a dark background. */
html[data-theme="light"] .article-content .maw-box,
html[data-theme="light"] .article-content .maw-pc > div,
html[data-theme="light"] .article-content .maw-cta,
html[data-theme="light"] .article-content .maw-spec,
html[data-theme="light"] .article-content .maw-playbox,
html[data-theme="light"] .article-content .maw-faq-i,
html[data-theme="light"] .article-content .maw-hud,
html[data-theme="light"] .article-content .toc-box { color: #e8ecff; }

html[data-theme="light"] .article-content .maw-box p,
html[data-theme="light"] .article-content .maw-box li,
html[data-theme="light"] .article-content .maw-box span,
html[data-theme="light"] .article-content .maw-pc p,
html[data-theme="light"] .article-content .maw-pc li,
html[data-theme="light"] .article-content .maw-pc span,
html[data-theme="light"] .article-content .maw-spec p,
html[data-theme="light"] .article-content .maw-spec dd,
html[data-theme="light"] .article-content .maw-playbox p,
html[data-theme="light"] .article-content .maw-faq-i p,
html[data-theme="light"] .article-content .maw-faq-i li,
html[data-theme="light"] .article-content .maw-faq-i summary,
html[data-theme="light"] .article-content .maw-faq-a,
html[data-theme="light"] .article-content .maw-hud span { color: #e8ecff !important; }

html[data-theme="light"] .article-content .maw-cta p,
html[data-theme="light"] .article-content .maw-cta li,
html[data-theme="light"] .article-content .maw-cta b { color: #f3f5ff !important; }
html[data-theme="light"] .article-content .maw-cta strong { color: #ffffff !important; }

html[data-theme="light"] .article-content .maw-box a,
html[data-theme="light"] .article-content .maw-pc a,
html[data-theme="light"] .article-content .maw-faq-i a,
html[data-theme="light"] .article-content .maw-cta p a { color: #9fe9ff !important; }

/* box titles (first <strong>) keep their accent colours */
html[data-theme="light"] .article-content .maw-box strong:first-child { color: #00e5ff !important; }
html[data-theme="light"] .article-content .maw-box-tip strong:first-child { color: #39ff9c !important; }
html[data-theme="light"] .article-content .maw-box-warn strong:first-child { color: #ffd24a !important; }
html[data-theme="light"] .article-content .maw-box-science strong:first-child { color: #b7a6ff !important; }
html[data-theme="light"] .article-content .maw-box-challenge strong:first-child { color: #ff8bdc !important; }
html[data-theme="light"] .article-content .maw-pc > div:first-child strong { color: #39ff9c !important; }
html[data-theme="light"] .article-content .maw-pc > div + div strong { color: #ff8bdc !important; }

/* headings inside dark blocks must not turn dark either */
html[data-theme="light"] .article-content .maw-playbox h2,
html[data-theme="light"] .article-content .maw-playbox h3,
html[data-theme="light"] .article-content .maw-cta h2,
html[data-theme="light"] .article-content .maw-cta h3,
html[data-theme="light"] .article-content .maw-box h3,
html[data-theme="light"] .article-content .maw-box h4 { color: #ffffff !important; }

/* game cards */
html[data-theme="light"] .article-content a.maw-gcard,
html[data-theme="light"] .article-content a.maw-ocard { color: #e8ecff !important; }
html[data-theme="light"] .article-content .maw-gcard-name { color: #ffffff !important; }
html[data-theme="light"] .article-content .maw-gcard-dev,
html[data-theme="light"] .article-content .maw-gcard-meta { color: #9aa5d6 !important; }
html[data-theme="light"] .article-content .maw-gcard-rate { color: #dfe5ff !important; }
html[data-theme="light"] .article-content .maw-gcard-tag,
html[data-theme="light"] .article-content .maw-gcard-cta { color: #00e5ff !important; }
html[data-theme="light"] .article-content .maw-ocard-blurb { color: #c9d1f5 !important; }
html[data-theme="light"] .article-content a.maw-btn { color: #06091f !important; }
html[data-theme="light"] .article-content a.maw-btn-ghost { color: #00e5ff !important; }

/* table header (dark gradient) */
html[data-theme="light"] .article-content .maw-table-wrap th { color: #aef6ff !important; }