/* ============================================================
   Small Water blog — loaded only by pages under /blog/ (on top of main.css)
   ============================================================ */

/* ~70 characters of body text; fixed so headings (larger font, larger ch) align with paragraphs. */
.blog-page { --prose: 680px; --wide: 980px; }

/* Header is always solid on blog pages (no hero underneath). */
.nav-solid {
  background: color-mix(in oklab, var(--bg-deep) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line-soft);
}
.nav-links > a.active { color: var(--text); }
.nav-links > a.active::after { transform: scaleX(1); }

.blog-main { padding-top: 78px; background: var(--bg); min-height: 70vh; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-mut);
}
.breadcrumbs li { min-width: 0; overflow-wrap: anywhere; }
.breadcrumbs li + li::before { content: "›"; margin-right: 8px; color: var(--text-mut); }
.breadcrumbs a { color: var(--text-dim); }
.breadcrumbs a:hover { color: var(--coral-soft); }
.breadcrumbs [aria-current] { color: var(--text-mut); }

/* ---------- Index / category hero ---------- */
.blog-hero { background: var(--hero-bg); padding: 72px 0 48px; border-bottom: 1px solid var(--line-soft); }
.blog-hero .breadcrumbs { margin-bottom: 28px; }
.blog-hero h1 { margin-top: 18px; font-size: clamp(2.2rem, 5vw, 3.4rem); }
.blog-hero .lead { margin-top: 16px; max-width: 62ch; }

.blog-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.blog-cats a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: color .2s, border-color .2s;
}
.blog-cats a:hover { color: var(--text); border-color: var(--coral); }
.blog-cats a.active { color: var(--coral); border-color: var(--coral); }

.blog-list { padding: 56px 0 96px; }
.blog-empty { color: var(--text-dim); font-size: 1.1rem; margin-bottom: 48px; }
.blog-empty a, .prose a, .post-back a { color: var(--coral-soft); }
.blog-empty a:hover, .prose a:hover, .post-back a:hover { color: var(--coral); }

/* Cards (.post-grid, .post-card*) live in main.css: the main page shows the newest posts too. */

.pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; font-family: var(--font-mono); font-size: 13px; }
.pagination a { color: var(--coral-soft); }
.pagination-pos { color: var(--text-mut); }

/* ---------- Article ---------- */
.post { padding: 48px 0 96px; }
.post-wrap { max-width: calc(var(--wide) + 64px); }
.post-header, .prose > *, .post-tags, .post-back { max-width: var(--prose); margin-left: auto; margin-right: auto; }
.post-header { margin-top: 36px; }
.post-category {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--coral);
  padding: 6px 12px;
  border: 1px solid color-mix(in oklab, var(--coral) 45%, transparent);
  border-radius: 100px;
}
.post-category:hover { background: var(--coral-ghost); }
.post-header h1 { margin-top: 20px; font-size: clamp(2rem, 5vw, 3rem); overflow-wrap: break-word; }
.post-lead { margin-top: 18px; color: var(--text-dim); font-size: 1.18rem; }
.post-meta { margin-top: 18px; font-family: var(--font-mono); font-size: 13px; color: var(--text-mut); }

.post-cover { margin: 40px auto 0; max-width: var(--wide); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.post-cover img { display: block; width: 100%; height: auto; }

/* ---------- Prose ---------- */
.prose { margin-top: 48px; color: var(--text-dim); }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3 { color: var(--text); position: relative; scroll-margin-top: 100px; }
.prose h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin-top: 2.2em; }
.prose h3 { font-size: 1.3rem; margin-top: 1.8em; }
.heading-anchor { position: absolute; left: -1.1em; color: var(--text-mut); opacity: 0; transition: opacity .2s; text-decoration: none; }
.prose h2:hover .heading-anchor, .prose h3:hover .heading-anchor { opacity: 1; }
.prose strong { color: var(--text); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .4em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose img, .prose video { max-width: 100%; height: auto; }
.prose :not(pre) > code {
  font-family: var(--font-mono);
  font-size: .85em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .1em .4em;
  color: var(--text);
  overflow-wrap: anywhere;
}
.prose blockquote {
  margin-left: auto;
  margin-right: auto;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--coral);
  color: var(--text);
  font-size: 1.12rem;
}
.prose blockquote > * + * { margin-top: .8em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em auto; }

/* TOC */
.post-toc { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 22px; font-size: .98rem; }
.post-toc-title { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mut); }
.post-toc ol { margin: 10px 0 0; padding-left: 1.2em; }
.post-toc ol ol { margin-top: 4px; }
.post-toc a { text-decoration: none; color: var(--text-dim); }
.post-toc a:hover { color: var(--coral-soft); }

/* Figures, video, compare — wider than the text column */
.prose > .post-figure, .prose > .post-compare, .prose > .table-wrap, .prose > .code-block { max-width: var(--wide); }
.post-figure, .post-compare { margin-top: 2em; margin-bottom: 2em; }
.post-figure picture, .post-figure video, .compare-item picture, .compare-item video {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-deep);
}
.post-figure img, .compare-item img { display: block; width: 100%; height: auto; }
.post-video { display: block; width: 100%; height: auto; }
figcaption { margin-top: 10px; font-size: .92rem; color: var(--text-mut); text-align: center; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare-item { position: relative; min-width: 0; }
.compare-label {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in oklab, var(--bg-deep) 78%, transparent);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 100px;
  pointer-events: none;
}

/* Tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table-wrap th, .table-wrap td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.table-wrap th { color: var(--text); font-family: var(--font-head); font-weight: 600; text-align: left; background: var(--bg-2); }
.table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap td { font-variant-numeric: tabular-nums; }

/* Code */
.code-block {
  position: relative;
  overflow-x: auto;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  color: #d6dbe8;
  tab-size: 4;
}
.code-block[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 8px; right: 12px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mut);
}
.code-block code { font-family: inherit; }

/* highlight.js tokens — navy + coral palette */
.hljs-comment, .hljs-quote { color: #6b7590; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-meta .hljs-keyword, .hljs-doctag { color: #f08aa0; }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-meta .hljs-string { color: #a6d99a; }
.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet { color: #f5b97a; }
.hljs-title, .hljs-title.function_, .hljs-section { color: #8fc1ff; }
.hljs-title.class_, .hljs-type, .hljs-built_in { color: #f3d58a; }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable, .hljs-property { color: #c7b4ff; }
.hljs-meta { color: #8ba0c2; }
.hljs-params { color: #d6dbe8; }
.hljs-deletion { color: #ff8b8b; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }

/* Tags */
.post-tags { list-style: none; padding: 0; margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px; }
.post-tags li { font-family: var(--font-mono); font-size: 12px; color: var(--text-mut); border: 1px solid var(--line); border-radius: 100px; padding: 4px 12px; }
.post-tags li::before { content: "#"; }

/* ---------- App box / callout ---------- */
.app-box {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  align-items: center;
  margin: 56px auto 0;
  max-width: var(--wide);
  padding: 24px;
  background: var(--card-bg);
  border: 1px solid color-mix(in oklab, var(--coral) 35%, var(--line));
  border-radius: var(--radius);
}
.app-box:not(:has(.app-box-img)) { grid-template-columns: 1fr; }
.app-box-img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-2); }
.app-box-img[src$="logo.png"] { object-fit: contain; padding: 16px; }
.app-box-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--coral); }
.app-box-title { margin-top: 8px; font-size: 1.4rem; color: var(--text); }
.app-box-body p:not(.app-box-eyebrow) { margin-top: 8px; color: var(--text-dim); font-size: 1rem; }
.app-box-status { font-family: var(--font-mono); font-size: 13px !important; color: var(--coral-soft) !important; }
.app-box-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.app-box-links .btn { padding: 10px 20px; font-size: .92rem; text-decoration: none; }
.app-box-links .btn-primary, .app-box-links .btn-primary:hover { color: #fff; }
.prose > .app-box-callout { margin-top: 2em; margin-bottom: 2em; }
.blog-list .app-box { margin-top: 64px; }

/* ---------- Related + back link ---------- */
.related { max-width: var(--wide); margin: 72px auto 0; }
.related h2 { font-size: 1.5rem; margin-bottom: 24px; }
.post-grid-related { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.post-grid-related .post-card-title { font-size: 1.1rem; }
.post-grid-related .post-card-desc { display: none; }
.post-back { margin-top: 48px; font-family: var(--font-mono); font-size: 13px; }

/* ---------- Responsive ---------- */
@media (max-width: 680px) {
  .blog-hero { padding: 48px 0 36px; }
  .post { padding-top: 32px; }
  .compare-grid { grid-template-columns: 1fr; }
  .app-box { grid-template-columns: 1fr; padding: 20px; }
  .app-box-img { height: 160px; }
  .heading-anchor { display: none; }
  .code-block { font-size: 13px; padding: 16px; }
}