/*
 * HoverNews — Light Mode
 * Inspired by Milk Road: clean whites, bold type, newsletter-first
 */

/* ─── Override Design Tokens ─────────────────────────────────── */
body.light-mode {
  --bg-base:        #ffffff;
  --bg-card:        #f7f8fa;
  --bg-card-alt:    #f0f2f5;
  --bg-newsletter:  #eef9fd;
  --text-primary:   #0d0f12;
  --text-secondary: #4a5568;
  --text-tertiary:  #8896a4;
  --border-subtle:  rgba(0,0,0,0.08);
  --border-input:   rgba(0,0,0,0.14);
  --border-cyan:    rgba(0,170,220,0.25);
  --cyan:           #0099cc;
  --cyan-hover:     #007aaa;
}

/* ─── Base ───────────────────────────────────────────────────── */
body.light-mode {
  background: var(--bg-base);
  color: var(--text-primary);
}

/* ─── Navbar ─────────────────────────────────────────────────── */
body.light-mode .site-header {
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

body.light-mode .site-logo .logo-text {
  color: var(--text-primary);
}

body.light-mode .nav-links a {
  color: var(--text-secondary);
}

body.light-mode .nav-links a:hover,
body.light-mode .nav-links a.active {
  color: var(--text-primary);
}

/* ─── Hero ───────────────────────────────────────────────────── */
body.light-mode .hero-section {
  background: #f7f8fa;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

body.light-mode .hero-title {
  color: #0d0f12;
}

body.light-mode .hero-excerpt {
  color: var(--text-secondary);
}

body.light-mode .hero-image-wrap {
  border: 1px solid rgba(0,0,0,0.08);
  background: #eaecef;
}

body.light-mode .hero-image-placeholder {
  color: var(--text-tertiary);
  background: #eaecef;
}

/* ─── Section Title ──────────────────────────────────────────── */
body.light-mode .section-title {
  color: #0d0f12;
  border-bottom: 2px solid rgba(0,0,0,0.08);
}

/* ─── Article Cards ──────────────────────────────────────────── */
body.light-mode .article-card {
  background: var(--bg-card);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

body.light-mode .article-card:hover {
  border-color: rgba(0,153,204,0.3);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

body.light-mode .card-image-wrap {
  background: #e8eaed;
}

body.light-mode .card-image-placeholder {
  background: #e8eaed;
  color: var(--text-tertiary);
}

body.light-mode .card-headline {
  color: #0d0f12;
}

body.light-mode .article-card:hover .card-headline {
  color: var(--cyan);
}

body.light-mode .card-date-read {
  color: var(--text-tertiary);
}

/* ─── Category Badge ─────────────────────────────────────────── */
body.light-mode .category-badge {
  color: var(--cyan);
  border-color: rgba(0,153,204,0.3);
  background: rgba(0,153,204,0.07);
}

/* ─── Newsletter Banner ──────────────────────────────────────── */
body.light-mode .newsletter-panel {
  background: var(--bg-newsletter);
  border: 1px solid var(--border-cyan);
}

body.light-mode .newsletter-headline,
body.light-mode .subscribe-headline {
  color: #0d0f12;
}

body.light-mode .newsletter-sub,
body.light-mode .subscribe-sub {
  color: var(--text-secondary);
}

body.light-mode .newsletter-form input[type="email"],
body.light-mode .footer-form input[type="email"],
body.light-mode .subscribe-form input[type="text"],
body.light-mode .subscribe-form input[type="email"] {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.14);
  color: #0d0f12;
}

body.light-mode .newsletter-form input[type="email"]::placeholder,
body.light-mode .footer-form input[type="email"]::placeholder,
body.light-mode .subscribe-form input::placeholder {
  color: #aab4be;
}

body.light-mode .newsletter-form input:focus,
body.light-mode .subscribe-form input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,153,204,0.12);
}

body.light-mode .newsletter-note {
  color: var(--text-tertiary);
}

/* ─── Footer ─────────────────────────────────────────────────── */
body.light-mode .site-footer {
  background: #f0f2f5;
  border-top: 1px solid rgba(0,0,0,0.08);
}

body.light-mode .footer-col-title {
  color: #8896a4;
}

body.light-mode .footer-tagline {
  color: var(--text-secondary);
}

body.light-mode .footer-links a {
  color: var(--text-secondary);
}

body.light-mode .footer-links a:hover {
  color: var(--cyan);
}

body.light-mode .footer-bottom {
  border-top: 1px solid rgba(0,0,0,0.08);
}

body.light-mode .footer-copy,
body.light-mode .footer-bottom-links a {
  color: var(--text-tertiary);
}

body.light-mode .footer-bottom-links a:hover {
  color: var(--text-secondary);
}

body.light-mode .footer-form input[type="email"] {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.14);
  color: #0d0f12;
}

/* ─── Archive / Category Page ────────────────────────────────── */
body.light-mode .archive-header {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

body.light-mode .archive-title {
  color: #0d0f12;
}

body.light-mode .archive-desc {
  color: var(--text-secondary);
}

body.light-mode .filter-pill {
  border-color: rgba(0,0,0,0.1);
  color: var(--text-secondary);
  background: #ffffff;
}

body.light-mode .filter-pill:hover {
  border-color: rgba(0,153,204,0.35);
  color: var(--text-primary);
}

body.light-mode .filter-pill.active {
  background: rgba(0,153,204,0.08);
  border-color: rgba(0,153,204,0.4);
  color: var(--cyan);
}

/* ─── Pagination ─────────────────────────────────────────────── */
body.light-mode .page-btn {
  border-color: rgba(0,0,0,0.1);
  color: var(--text-secondary);
  background: #ffffff;
}

body.light-mode .page-btn:hover {
  border-color: rgba(0,153,204,0.35);
  color: var(--text-primary);
}

body.light-mode .page-btn.current {
  background: rgba(0,153,204,0.1);
  border-color: rgba(0,153,204,0.4);
  color: var(--cyan);
}

/* ─── Single Article ─────────────────────────────────────────── */
body.light-mode .article-back {
  color: var(--text-secondary);
}

body.light-mode .article-back:hover {
  color: var(--cyan);
}

body.light-mode .article-title {
  color: #0d0f12;
}

body.light-mode .byline-author {
  color: #0d0f12;
}

body.light-mode .byline-meta {
  color: var(--text-tertiary);
}

body.light-mode .author-avatar {
  background: #eef9fd;
  border-color: rgba(0,0,0,0.08);
  color: var(--cyan);
}

body.light-mode .article-hero-img {
  border: 1px solid rgba(0,0,0,0.08);
}

body.light-mode .article-body {
  color: #2d3748;
}

body.light-mode .article-body h2,
body.light-mode .article-body h3 {
  color: #0d0f12;
}

body.light-mode .article-body a {
  color: var(--cyan);
}

body.light-mode .pull-quote {
  border-left-color: var(--cyan);
  color: #0d0f12;
  background: rgba(0,153,204,0.04);
  padding: 12px 24px;
  border-radius: 0 6px 6px 0;
}

body.light-mode .related-section {
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* ─── About Page ─────────────────────────────────────────────── */
body.light-mode .about-content p {
  color: #2d3748;
}

body.light-mode .value-card {
  background: #f7f8fa;
  border: 1px solid rgba(0,0,0,0.08);
}

body.light-mode .value-title {
  color: #0d0f12;
}

body.light-mode .value-desc {
  color: var(--text-secondary);
}

/* ─── Subscribe Page ─────────────────────────────────────────── */
body.light-mode .subscribe-panel {
  background: var(--bg-newsletter);
  border: 1px solid var(--border-cyan);
}

body.light-mode .perk-dot {
  background: var(--cyan);
}

body.light-mode .perk-item {
  color: var(--text-secondary);
}

/* ─── Milk Road Inspired: Hero Variant ───────────────────────── */
/* Larger, bolder, more newsletter-forward */
body.light-mode .hero-title {
  font-size: 50px;
  letter-spacing: -1px;
}

body.light-mode .section-title {
  font-size: 28px;
  letter-spacing: -0.3px;
}

/* Subtle section separators */
body.light-mode .section + .section {
  border-top: 1px solid rgba(0,0,0,0.06);
}