/* blog.css — Hedgerow blog styles */

/* ── Blog listing hero ── */
.blog-hero {
  padding:5rem 0 4rem;
  border-bottom:1px solid var(--border);
}
.blog-hero h1 {
  font-size:clamp(2rem,4vw,3rem);
  margin-bottom:.75rem;
}
.blog-hero p {
  font-size:1.05rem;
  max-width:560px;
  margin:0;
  color:var(--muted);
}

/* ── Post list ── */
.post-list { padding:4rem 0 }
.post-card {
  display:block;
  text-decoration:none;
  border-top:1px solid var(--border);
  padding:2.25rem 0;
}
.post-card:last-child { border-bottom:1px solid var(--border) }
.post-card:hover .post-title { color:var(--sage) }
.post-meta { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:.85rem }
.post-date {
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
}
.post-tag {
  font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sage); background:rgba(112,140,105,.12);
  padding:.22rem .7rem; border-radius:20px;
  border:1px solid rgba(112,140,105,.2);
}
.post-title {
  font-size:1.4rem; font-weight:700; letter-spacing:-.02em;
  color:var(--navy); line-height:1.25; margin-bottom:.65rem; transition:color .15s;
}
.post-excerpt { font-size:.95rem; color:var(--muted); max-width:640px; line-height:1.75; margin:0 }
.post-read-more {
  display:inline-flex; align-items:center; gap:.35rem;
  margin-top:1.1rem; font-size:.8rem; font-weight:600;
  letter-spacing:.04em; color:var(--sage); text-decoration:none;
}

/* ── Article hero — dark panel ── */
.article-hero {
  padding:0 0 4rem;
  background:var(--navy);
}
.article-nav-back {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:600; letter-spacing:.03em;
  color:rgba(255,255,255,.4); text-decoration:none;
  padding:1.5rem 0;
  border-bottom:1px solid rgba(255,255,255,.1);
  width:100%; transition:color .15s;
  margin-bottom:3rem;
}
.article-nav-back:hover { color:rgba(255,255,255,.75) }
.article-hero h1 {
  font-size:clamp(1.9rem,4vw,3rem);
  max-width:800px;
  margin-bottom:2rem;
  color:#fff;
  letter-spacing:-.025em;
  line-height:1.15;
}
.article-byline {
  display:flex; align-items:center; gap:.875rem; flex-wrap:wrap;
}
.byline-date, .byline-author {
  font-size:.8rem; font-weight:500;
  color:rgba(255,255,255,.4); letter-spacing:.02em;
}
.byline-sep {
  width:3px; height:3px; border-radius:50%;
  background:rgba(255,255,255,.2); flex-shrink:0;
}
.byline-tag {
  font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.65);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  padding:.25rem .7rem; border-radius:20px;
}
.byline-readtime {
  font-size:.78rem; font-weight:500;
  color:rgba(255,255,255,.35); letter-spacing:.02em;
  font-style:italic;
}

/* ── Article body ── */
.article-body { padding:5rem 0 7rem; background:var(--bg) }
.article-inner { max-width:680px }

/* ── Prose base ── */
.prose > p:first-of-type {
  font-size:1.1rem; color:var(--text);
  line-height:1.85; font-weight:400; margin-bottom:1.5rem;
}
.prose p {
  font-size:1rem; color:var(--muted);
  line-height:1.85; margin-bottom:1.35rem;
}
.prose p:last-child { margin-bottom:0 }
.prose strong { color:var(--text); font-weight:600 }
.prose em { font-style:italic }

/* ── Section headings ── */
.prose h3 {
  font-size:1.25rem; font-weight:700;
  color:var(--navy); letter-spacing:-.02em; line-height:1.3;
  margin:4rem 0 1rem;
  padding-left:1rem;
  border-left:3px solid var(--sage);
}
.prose h3:first-child { margin-top:0 }

/* ── Blockquote ── */
.prose blockquote {
  border-left:3px solid var(--sage);
  background:rgba(112,140,105,.07);
  padding:1.5rem 2rem;
  border-radius:0 4px 4px 0;
  margin:2.5rem 0;
}
.prose blockquote p {
  font-size:1.05rem; font-style:italic;
  color:var(--navy); font-weight:500;
  line-height:1.7; margin:0;
}

/* ── Callout box (key takeaway) ── */
.prose .callout-action {
  border-left:3px solid var(--navy);
  background:rgba(1,61,90,.05);
  padding:1.25rem 1.75rem;
  border-radius:0 4px 4px 0;
  margin:2rem 0;
}
.prose .callout-action .ca-label {
  display:block; font-size:.65rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--navy); margin-bottom:.5rem; opacity:.6;
}
.prose .callout-action p {
  font-size:.975rem; color:var(--navy);
  font-weight:600; line-height:1.6; margin:0;
}

/* ── Verdict cards ── */
.prose .verdict-list {
  list-style:none; padding:0; margin:2rem 0; display:grid; gap:1rem;
}
.prose .verdict-list li {
  padding:1.5rem 1.75rem;
  border-radius:4px;
  border:1px solid var(--border);
  font-size:.95rem; line-height:1.8; color:var(--muted);
}
.prose .verdict-list li.drop {
  background:rgba(184,50,40,.04);
  border-color:rgba(184,50,40,.2);
}
.prose .verdict-list li.keep {
  background:rgba(46,104,48,.04);
  border-color:rgba(46,104,48,.2);
}
.prose .verdict-list li .vl-head {
  display:flex; align-items:center; gap:.6rem;
  font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:.75rem;
}
.prose .verdict-list li.drop .vl-head { color:var(--red) }
.prose .verdict-list li.keep .vl-head { color:var(--green) }
.vl-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:1.25rem; height:1.25rem; border-radius:50%;
  font-size:.75rem; font-weight:900; flex-shrink:0; line-height:1;
}
.drop .vl-icon { background:rgba(184,50,40,.12); color:var(--red) }
.keep .vl-icon { background:rgba(46,104,48,.12); color:var(--green) }

/* ── Code blocks ── */
.prose code {
  font-family:'SF Mono','Fira Code','Cascadia Code',monospace;
  font-size:.82em; background:rgba(1,61,90,.08);
  color:var(--navy); padding:.12em .38em; border-radius:3px;
}
.code-wrap {
  margin:2rem 0;
  border-radius:6px; overflow:hidden;
  border:1px solid rgba(0,0,0,.15);
  box-shadow:0 2px 12px rgba(1,61,90,.1);
}
.code-wrap .code-label {
  display:flex; align-items:center; gap:.6rem;
  background:#1A1E1C; color:rgba(230,226,218,.45);
  font-family:'SF Mono','Fira Code','Cascadia Code',monospace;
  font-size:.65rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.65rem 1.5rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.code-wrap .code-label::before {
  content:''; display:inline-block; width:.45rem; height:.45rem;
  border-radius:50%; background:rgba(230,226,218,.2); flex-shrink:0;
}
.code-wrap pre {
  margin:0; border-radius:0; overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.code-wrap pre code {
  display:block; background:#111210; color:#E6E2DA;
  padding:1.5rem 1.75rem; font-size:.825rem; line-height:1.75;
  white-space:pre; overflow-x:auto;
  /* reset inline code styles */
  border-radius:0; padding-top:1.5rem; padding-bottom:1.5rem;
}
/* reset inline-code overrides inside code blocks */
.code-wrap pre code {
  background:#111210 !important;
  color:#E6E2DA !important;
  font-size:.825rem !important;
  padding:1.5rem 1.75rem !important;
  border-radius:0 !important;
}

/* ── Lists ── */
.prose ul, .prose ol { padding-left:1.5rem; margin-bottom:1.25rem }
.prose li { color:var(--muted); line-height:1.8; margin-bottom:.45rem; font-size:1rem }

/* ── Appendix ── */
.appendix-divider {
  border:none; border-top:1px solid var(--border); margin:4rem 0 2.5rem;
}
.appendix-kicker {
  display:inline-block; font-size:.65rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); margin-bottom:1.25rem;
}

/* ── Article subtitle (under H1, in dark hero) ── */
.article-subtitle {
  font-size:clamp(1.05rem,2vw,1.3rem);
  font-weight:400; line-height:1.45;
  color:rgba(255,255,255,.62);
  max-width:760px; margin:-1.25rem 0 2rem;
}

/* ── Companion banner (cross-link between paired posts) ── */
.prose .companion {
  display:flex; align-items:flex-start; gap:1rem;
  border:1px solid var(--border);
  background:var(--card);
  border-radius:6px;
  padding:1.25rem 1.5rem;
  margin:0 0 2.75rem;
}
.prose .companion .comp-icon {
  flex-shrink:0; font-size:1.1rem; line-height:1.6; opacity:.5;
}
.prose .companion p {
  font-size:.92rem; line-height:1.7; margin:0; color:var(--muted);
}
.prose .companion .comp-label {
  display:block; font-size:.62rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--sage); margin-bottom:.35rem;
}
.prose .companion a { color:var(--navy); font-weight:600; text-decoration:underline; text-underline-offset:2px }
.prose .companion a:hover { color:var(--sage) }

/* ── Inline prose links ── */
.prose p a, .prose li a {
  color:var(--navy); font-weight:500;
  text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:rgba(112,140,105,.5);
}
.prose p a:hover, .prose li a:hover { color:var(--sage) }

/* ── H4 sub-headings ── */
.prose h4 {
  font-size:1.02rem; font-weight:700;
  color:var(--navy); letter-spacing:-.01em;
  margin:2.5rem 0 .75rem;
}

/* ── Tables ── */
.table-wrap { margin:2.25rem 0; overflow-x:auto; -webkit-overflow-scrolling:touch }
.prose table {
  width:100%; border-collapse:collapse;
  font-size:.9rem; line-height:1.6;
}
.prose table th, .prose table td {
  text-align:left; padding:.7rem .9rem;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
.prose table th {
  font-size:.68rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--navy);
  background:rgba(1,61,90,.04);
  border-bottom:2px solid var(--border);
  white-space:nowrap;
}
.prose table td { color:var(--muted) }
.prose table td strong { color:var(--navy) }
.prose table tr:last-child td { border-bottom:none }
.prose table .row-mark { background:rgba(112,140,105,.08) }
.prose table .row-mark td { color:var(--navy); font-weight:600 }

/* ── References ── */
.prose .ref-list {
  list-style:none; counter-reset:ref; padding:0; margin:1.5rem 0 0;
}
.prose .ref-list li {
  position:relative; padding-left:2.4rem; margin-bottom:1rem;
  font-size:.85rem; line-height:1.65; color:var(--muted);
}
.prose .ref-list li::before {
  counter-increment:ref; content:"["counter(ref)"]";
  position:absolute; left:0; top:0;
  font-family:'SF Mono','Fira Code','Cascadia Code',monospace;
  font-size:.72rem; font-weight:600; color:var(--sage);
}
.prose .ref-list li .ref-title { color:var(--navy); font-weight:600 }
.prose .ref-list code { font-size:.78em; word-break:break-all }

/* ── Tag filter bar (blog index navigation) ── */
.tag-filter {
  display:flex; flex-wrap:wrap; gap:.55rem;
  padding:0 0 2.5rem;
}
.tag-filter-btn {
  font-size:.7rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted); background:transparent;
  border:1px solid var(--border);
  padding:.42rem .95rem; border-radius:20px;
  cursor:pointer; transition:all .15s; font-family:inherit;
}
.tag-filter-btn:hover { border-color:var(--sage); color:var(--sage) }
.tag-filter-btn.active {
  background:var(--sage); border-color:var(--sage); color:#fff;
}
.post-card.is-hidden { display:none }
.post-list-empty {
  display:none; padding:2rem 0; color:var(--faint);
  font-size:.95rem; font-style:italic;
}
.post-list-empty.show { display:block }