/* ==========================================================================
   blog.css — shared styles for /blog/ (hub + all articles)
   Derived from about.html (green theme, Segoe UI) + blog-specific components.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background:#f8fafc; color:#1e293b;
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  margin:0; line-height:1.65;
}
a { color:#16803c; text-decoration:none; }
a:hover { color:#15803d; text-decoration:underline; }
img { max-width:100%; height:auto; }

/* ---- Nav ---------------------------------------------------------------- */
.nav { background:#fff; border-bottom:1px solid #e2e8f0; position:sticky; top:0; z-index:50; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.nav-inner { max-width:880px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:16px; }
.nav-logo { font-size:1rem; font-weight:700; color:#15803d; letter-spacing:-0.01em; }
.nav-logo:hover { text-decoration:none; }
.nav-back { font-size:0.85rem; color:#64748b; display:flex; align-items:center; gap:4px; }
.nav-back:hover { color:#1e293b; text-decoration:none; }
.nav-links { margin-left:auto; display:flex; gap:18px; align-items:center; }
.nav-links a { font-size:0.85rem; color:#475569; font-weight:500; }
.nav-links a:hover { color:#15803d; text-decoration:none; }
.nav-links a.active { color:#15803d; }

/* ---- Breadcrumb -------------------------------------------------------- */
.breadcrumb { max-width:880px; margin:0 auto; padding:14px 24px 0; font-size:0.8rem; color:#94a3b8; }
.breadcrumb a { color:#64748b; }
.breadcrumb a:hover { color:#15803d; }
.breadcrumb span { color:#cbd5e1; margin:0 6px; }

/* ---- Hero -------------------------------------------------------------- */
.hero { max-width:880px; margin:0 auto; padding:26px 24px 8px; }
.hero-eyebrow { display:inline-block; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#15803d; background:#dcfce7; border:1px solid #bbf7d0; border-radius:20px; padding:3px 11px; margin-bottom:14px; }
h1.hero-title { font-size:2.1rem; font-weight:800; color:#0f172a; margin:0 0 14px; letter-spacing:-0.02em; line-height:1.2; }
.hero-sub { color:#475569; font-size:1.08rem; margin:0 0 16px; max-width:680px; }
.byline { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; font-size:0.8rem; color:#94a3b8; border-top:1px solid #e2e8f0; border-bottom:1px solid #e2e8f0; padding:12px 0; margin:0 0 8px; }
.byline strong { color:#475569; font-weight:600; }

/* ---- Layout ------------------------------------------------------------ */
.content { max-width:880px; margin:0 auto; padding:24px 24px 72px; }

/* ---- Typography -------------------------------------------------------- */
h2 { font-size:1.5rem; font-weight:700; color:#0f172a; margin:44px 0 14px; padding-bottom:8px; border-bottom:2px solid #e2e8f0; scroll-margin-top:80px; letter-spacing:-0.01em; }
h3 { font-size:1.15rem; font-weight:600; color:#1e293b; margin:28px 0 8px; scroll-margin-top:80px; }
p { margin:0 0 14px; color:#374151; }
ul, ol { padding-left:1.4rem; margin:0 0 14px; }
li { margin:6px 0; color:#374151; }
li > ul, li > ol { margin:6px 0; }
strong { color:#0f172a; }
.lead { font-size:1.1rem; color:#334155; }
hr { border:none; border-top:1px solid #e2e8f0; margin:36px 0; }

/* ---- Tables ------------------------------------------------------------ */
.table-wrap { overflow-x:auto; margin:18px 0; }
table { width:100%; border-collapse:collapse; font-size:0.9rem; border:1px solid #e2e8f0; border-radius:8px; overflow:hidden; }
th { background:#f1f5f9; color:#374151; padding:10px 14px; text-align:left; border-bottom:2px solid #e2e8f0; font-weight:600; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em; }
td { padding:9px 14px; border-bottom:1px solid #f1f5f9; vertical-align:top; color:#374151; }
tr:last-child td { border-bottom:none; }
tr:nth-child(even) td { background:#fafafa; }

/* ---- Code -------------------------------------------------------------- */
code { background:#f1f5f9; color:#166534; padding:1px 6px; border-radius:4px; font-size:0.88em; font-family:'Cascadia Code','Fira Code','Courier New',monospace; border:1px solid #e2e8f0; }
pre { background:#0f172a; color:#e2e8f0; padding:16px 18px; border-radius:10px; overflow-x:auto; margin:16px 0; font-size:0.85rem; line-height:1.55; }
pre code { background:none; border:none; color:inherit; padding:0; font-size:inherit; }

/* ---- Table of contents ------------------------------------------------- */
.toc { background:#fff; border:1px solid #e2e8f0; border-left:4px solid #16a34a; border-radius:0 10px 10px 0; padding:18px 24px; margin:8px 0 32px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.toc h2 { margin:0 0 12px; border:none; padding:0; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.06em; color:#15803d; }
.toc ol { margin:0; columns:2; column-gap:32px; }
.toc li { margin:5px 0; font-size:0.92rem; }
@media (max-width:640px){ .toc ol { columns:1; } }

/* ---- Worked examples --------------------------------------------------- */
.example { background:#f0fdf4; border-left:3px solid #16a34a; border-radius:0 8px 8px 0; padding:12px 16px; margin:14px 0; font-size:0.95rem; color:#1e293b; }
.example strong { color:#15803d; }
.example code { background:#dcfce7; border-color:#bbf7d0; }
.example p { margin:0 0 8px; }
.example p:last-child { margin:0; }
.example .label { display:inline-block; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#15803d; margin-bottom:4px; }

/* ---- Callouts (note / tip / warning) ----------------------------------- */
.callout { border-radius:8px; padding:14px 18px; margin:18px 0; font-size:0.95rem; border:1px solid; }
.callout p:last-child { margin:0; }
.callout .label { display:block; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px; }
.callout.note { background:#eff6ff; border-color:#bfdbfe; color:#1e3a5f; }
.callout.note .label { color:#2563eb; }
.callout.tip { background:#f0fdf4; border-color:#bbf7d0; color:#14532d; }
.callout.tip .label { color:#15803d; }
.callout.warn { background:#fef2f2; border-color:#fecaca; color:#7f1d1d; }
.callout.warn .label { color:#dc2626; }

/* ---- FAQ --------------------------------------------------------------- */
.faq { margin:8px 0; }
.faq-item { border-bottom:1px solid #e2e8f0; padding:18px 0; }
.faq-item:last-child { border-bottom:none; }
.faq-q { font-weight:600; color:#0f172a; margin:0 0 6px; font-size:1.02rem; }
.faq-a { color:#475569; margin:0; line-height:1.7; }

/* ---- Calculator CTA box ------------------------------------------------ */
.cta { background:linear-gradient(135deg,#f0fdf4 0%,#ecfdf5 50%,#f0f9ff 100%); border:1px solid #bbf7d0; border-radius:14px; padding:26px 28px; margin:36px 0; text-align:center; }
.cta h3 { margin:0 0 8px; color:#0f172a; font-size:1.25rem; }
.cta p { margin:0 auto 18px; color:#475569; max-width:520px; }
.cta-btn { display:inline-block; background:#15803d; color:#fff !important; font-weight:600; font-size:1rem; padding:12px 26px; border-radius:10px; box-shadow:0 2px 8px rgba(21,128,61,0.25); }
.cta-btn:hover { background:#166534; text-decoration:none; transform:translateY(-1px); }

/* ---- Related articles -------------------------------------------------- */
.related { margin:40px 0 0; }
.related h2 { font-size:1.25rem; }
.related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-top:16px; }
.related-card { display:block; background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:16px 18px; box-shadow:0 1px 3px rgba(0,0,0,0.04); transition:box-shadow .15s, transform .15s; }
.related-card:hover { text-decoration:none; box-shadow:0 4px 14px rgba(0,0,0,0.08); transform:translateY(-2px); }
.related-card .kicker { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#15803d; }
.related-card .title { display:block; color:#0f172a; font-weight:600; margin-top:4px; font-size:0.98rem; line-height:1.4; }
.related-card .desc { display:block; color:#64748b; font-size:0.85rem; margin-top:6px; line-height:1.5; }

/* ---- Hub: cluster cards ------------------------------------------------ */
.hub-intro { font-size:1.1rem; color:#334155; max-width:680px; }
.cluster-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:20px; margin:28px 0; }
.cluster-card { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:22px 24px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.cluster-card .cluster-tag { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#94a3b8; }
.cluster-card h3 { margin:6px 0 4px; font-size:1.15rem; }
.cluster-card h3 a { color:#0f172a; }
.cluster-card h3 a:hover { color:#15803d; }
.cluster-card .pillar-link { display:inline-block; margin:2px 0 12px; font-size:0.82rem; font-weight:600; color:#15803d; }
.cluster-card ul { list-style:none; padding:0; margin:0; border-top:1px solid #f1f5f9; padding-top:12px; }
.cluster-card li { margin:0; }
.cluster-card li a { display:block; padding:7px 0; font-size:0.92rem; color:#374151; border-bottom:1px solid #f8fafc; }
.cluster-card li a:hover { color:#15803d; text-decoration:none; padding-left:4px; }
.cluster-card li:last-child a { border-bottom:none; }

/* ---- Footer ------------------------------------------------------------ */
footer { background:#f1f5f9; border-top:1px solid #e2e8f0; text-align:center; padding:30px 24px; color:#64748b; font-size:0.82rem; margin-top:48px; }
footer a { color:#16803c; }
footer .foot-links { margin-top:8px; color:#94a3b8; line-height:1.9; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width:640px){
  h1.hero-title { font-size:1.6rem; }
  .hero-sub { font-size:1rem; }
  h2 { font-size:1.3rem; }
  .nav-links { gap:12px; }
  .content, .hero, .breadcrumb, .nav-inner { padding-left:18px; padding-right:18px; }
}