/* ============================================================
   ERDISERDAR.COM — dark-mode.css
   All dark mode overrides. Applied when body has class "dark".
   Change values here to adjust the dark theme.
   ============================================================ */

html.dark body {
  --color-bg:            #1c1917;
  --color-bg-secondary:  #242018;
  --color-surface:       #201e1b;
  --color-border:        #343028;
  --color-border-light:  #2a2720;

  --color-text:          #e8e3dc;
  --color-text-muted:    #8a837a;
  --color-text-light:    #5a5450;

  --color-accent:        #c9935a;
  --color-accent-hover:  #d4a870;
  --color-accent-light:  #201408;
}

/* Nav shadow in dark mode */
html.dark .nav.scrolled {
  box-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

/* Post card hover in dark mode */
html.dark .post-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* Scroll-to-top button in dark mode */
html.dark .scroll-top {
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

/* Dark mode toggle */
html.dark .dark-toggle__thumb {
  transform: translateX(44px);
  background-color: #4a4642;
}

html.dark .dark-toggle__sun {
  color: var(--color-text-light);
}

/* Moon icon — exactly overlay the thumb so crescent is visually centred */
html.dark .dark-toggle__moon {
  color: #fff;
  right: auto;
  left: 3px;
  top: 3px;
  width: 26px;
  height: 26px;
  transform: translateX(44px);
}

/* Active nav link — white, not red */
html.dark .nav__links a.active {
  color: var(--color-text);
}

/* Unified hover — white text + red underline, consistent everywhere */
html.dark .nav__links a:hover,
html.dark .nav__links a.active,
html.dark .nav__dropdown a:hover,
html.dark .nav__mobile a:hover,
html.dark .landing-featured__heading:hover,
html.dark .landing-list__title:hover,
html.dark .landing-list__cat:hover,
html.dark .landing-hero__cat-pill:hover,
html.dark .footer__links a:hover,
html.dark .landing-about__link:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

/* About link — readable base colour in dark mode */
html.dark .landing-about__link {
  color: var(--color-text);
}

html.dark .post-card:hover .post-card__title {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

html.dark .filter-btn:hover {
  color: #fff;
  font-weight: 400;
  border-color: var(--color-accent);
  background: transparent;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

/* Post body links — readable in dark mode */
html.dark .post-body a {
  color: var(--color-text);
  text-decoration-color: var(--color-accent);
}

html.dark .post-body a:hover {
  color: #fff;
  text-decoration-color: var(--color-accent-hover);
}