/* ═══════════════════════════════════════════════════════════════════
   blog-light.css  –  Light reading theme for Failcast blog
   Load AFTER each page's inline <style> block so these overrides win.
   Does NOT touch React homepage styles, Vite routing, or home-content.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Token overrides ─────────────────────────────────────────────── */
:root {
  --bg-deep: #faf9f7;
  --bg: #ffffff;
  --bg-raised: #f4f3f8;
  --bg-card: #ffffff;
  --bg-card-hover: #faf9fc;
  --border: #e8e7ef;
  --border-accent: #d8d6e4;

  --text: #12142b;
  --text-dim: #5b5d75;
  --text-muted: #9a9cb0;

  --red: #e5484d;
  --red-bright: #d92d20;
  --red-glow: rgba(229, 72, 77, 0.18);
  --red-soft: rgba(229, 72, 77, 0.07);
}

/* ── Page background ─────────────────────────────────────────────── */
html {
  background: var(--bg-deep);
  color: var(--text);
}

body {
  background: var(--bg);
}

/* Remove the dark grain overlay */
body::before {
  display: none;
}

/* ── Links ───────────────────────────────────────────────────────── */
a { color: var(--red); }
a:hover { color: var(--red-bright); }

/* ── Navigation (stays dark) ─────────────────────────────────────── */
.nav {
  background: rgba(8, 8, 13, 0.96);
  border-bottom-color: #23253d;
}
.nav-logo { color: #e2e2ef; }
.nav-logo:hover { color: #e2e2ef; }
.nav-links a { color: #8d8fa8; }
.nav-links a:hover,
.nav-links a.active { color: #e2e2ef; }
.btn-nav { background: #e2e2ef; color: #0b0c18; }
.btn-nav:hover { background: #fff; color: #0b0c18; }
.nav-burger span { background: #e2e2ef; }

/* ── Mobile menu (stays dark) ────────────────────────────────────── */
.mobile-menu {
  background: rgba(5, 5, 10, 0.97);
}
.mobile-menu a { color: #e2e2ef; }
.mobile-menu a:hover { color: var(--red); }

/* ── Article header ──────────────────────────────────────────────── */
.article-back { color: var(--text-muted); }
.article-back:hover { color: var(--text-dim); }

.article-meta { color: var(--text-muted); }
.article-meta .tag {
  background: var(--red-soft);
  color: var(--red);
  border-color: rgba(229, 72, 77, 0.15);
}

.article-header h1 { color: var(--text); }
.article-header .lead { color: var(--text-dim); font-weight: 400; }

/* ── Article hero image – framed on light background ─────────────── */
.article-hero {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--px) 60px;
}
.article-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  box-shadow: 0 4px 24px rgba(18, 20, 43, 0.08);
}

/* ── Divider ─────────────────────────────────────────────────────── */
.article-divider hr { background: var(--border); }

/* ── Article body typography ─────────────────────────────────────── */
.article-content p {
  color: var(--text-dim);
  font-weight: 400;
}

.article-content p strong { color: var(--text); }
.article-content p em { color: var(--text); }

.article-content li {
  color: var(--text-dim);
  font-weight: 400;
}
.article-content li strong { color: var(--text); }

.article-content h2 { color: var(--text); }
.article-content h3 { color: var(--text); }

/* ── Blockquotes ─────────────────────────────────────────────────── */
.article-content blockquote {
  background: var(--bg-raised);
  border-left-color: var(--red);
}
.article-content blockquote p { color: var(--text); }

/* ── In-article links ────────────────────────────────────────────── */
.article-content a {
  color: var(--red);
  text-decoration-color: rgba(229, 72, 77, 0.35);
}
.article-content a:hover {
  color: var(--red-bright);
  text-decoration-color: var(--red-bright);
}

/* ── Further / Related reading ───────────────────────────────────── */
.further-reading { border-top-color: var(--border); }
.further-reading h3 { color: var(--text-muted); }
.further-reading li a {
  text-decoration-color: rgba(229, 72, 77, 0.35);
}

/* ── CTA band ────────────────────────────────────────────────────── */
.article-cta {
  background: var(--bg-raised);
  border-top-color: var(--border);
  border-bottom-color: var(--border);
}
.article-cta h3 { color: var(--text); }
.article-cta p { color: var(--text-dim); font-weight: 400; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover {
  background: var(--red-bright);
  color: #fff;
  box-shadow: 0 8px 32px var(--red-glow);
}

/* ── Footer (matches the main-site footer) ───────────────────────── */
.footer {
  background: #0b0c18;
  border-top: 0;
  border-radius: 28px 28px 0 0;
  margin-top: 16px;
  padding: 40px max(var(--px), calc((100vw - var(--max-w)) / 2)) 44px;
  max-width: none;
}

.footer-left { color: #e2e2ef; }
.footer-nav a {
  color: #8d8fa8;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.footer-nav a:hover { color: #fff; }
.footer-right { color: #5c5e78; }

/* ── Blog index header ───────────────────────────────────────────── */
.blog-header h1 { color: var(--text); }
.blog-header p { color: var(--text-dim); font-weight: 400; }
.blog-header .section-label { color: var(--red); }

/* ── Blog index cards ────────────────────────────────────────────── */
.blog-card {
  background: var(--bg);
  border-color: var(--border);
}
.blog-card:hover {
  border-color: var(--border-accent);
}

/* Card visual panel – stays dark for contrast */
.blog-card-visual {
  background: #0b0c18;
}
.blog-card-visual .visual-tag {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.15);
}
.blog-card-visual .visual-title { color: #e2e2ef; }
.blog-card-visual .visual-byline { color: #5c5e78; }

.blog-card-visual.has-photo {
  background-color: #0b0c18;
}

/* Content side of card */
.blog-card-content .excerpt {
  color: var(--text-dim);
  font-weight: 400;
}
.blog-card-content .read-link { color: var(--red); }
.blog-card-content .read-stats { color: var(--text-muted); }

/* ── Self-assessment check items ─────────────────────────────────── */
.check-item {
  background: var(--bg);
  border-color: var(--border);
}
.check-item:hover {
  border-color: var(--border-accent);
  background: var(--bg-raised);
}
.check-item.checked {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.04);
}
.check-item .check-title { color: var(--text); }
.check-item .check-desc { color: var(--text-dim); }
.check-item .check-desc a {
  text-decoration-color: rgba(229, 72, 77, 0.35);
}
.check-item .check-toggle {
  border-color: var(--border-accent);
}
.check-item:hover .check-toggle {
  border-color: var(--text-muted);
}

/* ── Score float & score block ───────────────────────────────────── */
.score-float {
  background: var(--bg-raised);
  border-color: var(--border-accent);
}
.score-float-label { color: var(--text-dim); }
.score-float .score-bar { background: var(--border); }
.score-float-reset {
  color: var(--text-muted);
  border-color: var(--border);
}
.score-float-reset:hover {
  color: var(--text-dim);
  border-color: var(--border-accent);
}

.score-block {
  background: var(--bg-raised);
  border-color: var(--border-accent);
}
.score-block h3 { color: var(--text); }
.score-tier.green { background: rgba(16, 185, 129, 0.06); border-color: rgba(16, 185, 129, 0.2); }
.score-tier.amber { background: rgba(245, 158, 11, 0.06); border-color: rgba(245, 158, 11, 0.2); }
.score-tier.red   { background: rgba(239, 68, 68, 0.06);  border-color: rgba(239, 68, 68, 0.12); }
.score-tier .score-label { color: var(--text-dim); }
.result-text p { color: var(--text-dim); }
.result-text p strong { color: var(--text); }
.result-text a { text-decoration-color: rgba(229, 72, 77, 0.35); }

/* ── Timeline blocks ─────────────────────────────────────────────── */
.timeline-block {
  background: var(--bg-raised);
  border-color: var(--border);
}
.timeline-block h4 { color: var(--text); }
.timeline-block .tl-label { color: var(--red); }

/* ── Callout boxes (used in some articles) ───────────────────────── */
.callout,
.info-box {
  background: var(--bg-raised);
  border-color: var(--border);
}

/* ── Email flow diagram (email-dependency-mapping) ───────────────── */
.dep-flow,
.flow-diagram {
  background: var(--bg-raised);
  border-color: var(--border);
}

/* ── Keyboard focus ──────────────────────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.nav *:focus-visible {
  outline-color: #e2e2ef;
}

.mobile-menu *:focus-visible {
  outline-color: #e2e2ef;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .footer {
    padding: 28px var(--px) 32px;
    flex-direction: column;
    text-align: center;
  }
  .footer-nav {
    justify-content: center;
    flex-wrap: wrap;
  }
}