/* Shared blog + article typography */

.article-header{
  max-width: 860px;
  margin: 0 auto;
  padding: 46px 18px 10px;
}
.article-header h1{
  font-size: clamp(2rem, 4vw, 2.65rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 10px 0 14px;
}
.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  color: var(--clr-text-light);
  font-size: 0.98rem;
}
.breadcrumb{
  color: var(--clr-text-light);
  font-size: 0.98rem;
}
.breadcrumb a{color:inherit; text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}

.article-body{
  max-width: 860px;
  margin: 0 auto;
  padding: 18px 18px 46px;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--clr-text);
}
.article-body p{margin: 0 0 1.05em;}
.article-body a{color: var(--clr-primary); text-decoration: underline; text-underline-offset: 3px;}
html[data-theme="dark"] .article-body a{color: var(--clr-primary-lighter);}
.article-body h2{
  font-size: 1.55rem;
  line-height: 1.25;
  margin: 1.6em 0 0.55em;
  letter-spacing: -0.01em;
}
.article-body h3{
  font-size: 1.22rem;
  line-height: 1.35;
  margin: 1.4em 0 0.5em;
}
.article-body ul,
.article-body ol{margin: 0 0 1.05em 1.2em; padding:0;}
.article-body li{margin: 0.35em 0;}
.article-body blockquote{
  margin: 1.2em 0;
  padding: 0.85em 1em;
  border-left: 4px solid var(--clr-primary-lighter);
  background: rgba(255,255,255,.65);
  border-radius: var(--radius-sm);
  color: var(--clr-text-muted);
}
html[data-theme="dark"] .article-body blockquote{background: rgba(255,255,255,.04);}
.article-body code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
  background: rgba(0,0,0,.06);
  padding: 0.15em 0.35em;
  border-radius: 8px;
}
html[data-theme="dark"] .article-body code{background: rgba(255,255,255,.08);}
.article-body pre{
  overflow:auto;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  background: rgba(255,255,255,.7);
}
html[data-theme="dark"] .article-body pre{background: rgba(255,255,255,.04);}

.post-table-wrap{overflow:auto; border-radius: var(--radius); box-shadow: var(--shadow); border:1px solid var(--clr-border); background: rgba(255,255,255,.75);}
html[data-theme="dark"] .post-table-wrap{background: rgba(255,255,255,.03);}
.post-table{width:100%; border-collapse: collapse; min-width: 640px;}
.post-table th, .post-table td{padding: 12px 12px; border-bottom: 1px solid var(--clr-border); text-align:left; vertical-align: top;}
.post-table thead th{position:sticky; top:0; background: rgba(255,255,255,.9);}
html[data-theme="dark"] .post-table thead th{background: rgba(16,26,20,.95);}
.post-table tr:last-child td{border-bottom:none;}
.post-table .winner{background: var(--clr-winner); color: var(--clr-winner-text); font-weight: 600;}
html[data-theme="dark"] .post-table .winner{background: rgba(82,183,136,.18); color: var(--clr-primary-lighter);}

.article-body hr{border:none; border-top:1px solid var(--clr-border); margin: 1.6em 0;}
.article-body img{max-width:100%; border-radius: var(--radius-sm);}

/* Blog index search */
.blog-search{
  max-width: var(--max-width);
  margin: 18px auto 0;
  padding: 0 18px;
}
.blog-search-inner{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  padding: 12px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.75);
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .blog-search-inner{background: rgba(255,255,255,.03);}
.blog-search input{
  flex:1;
  min-width: 220px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1rem;
  padding: 10px 10px;
  color: var(--clr-text);
}
.blog-search .search-meta{
  color: var(--clr-text-light);
  font-size: 0.95rem;
  padding: 0 8px;
}
.no-results{
  max-width: var(--max-width);
  margin: 14px auto 0;
  padding: 0 18px;
  color: var(--clr-text-light);
  display:none;
}

/* ===== Dark Mode Contrast Fixes ===== */
body.dark .protocol-box,
body.dark .highlight-box,
body.dark .callout,
body.dark .card {
  background: #1f2937 !important;   /* dark slate */
  color: #f3f4f6 !important;        /* high contrast text */
}

body.dark .protocol-box p,
body.dark .highlight-box p,
body.dark .callout p,
body.dark .card p {
  color: #e5e7eb !important;
}

body.dark .protocol-box h1,
body.dark .protocol-box h2,
body.dark .protocol-box h3,
body.dark .highlight-box h1,
body.dark .highlight-box h2,
body.dark .highlight-box h3 {
  color: #ffffff !important;
}

body.dark .protocol-box {
  border-left: 4px solid #4ade80; /* keep green accent readable */
}

/* Related articles section */
.related-posts h2 { font-size: 1.4rem; margin-top: 0; }
.related-posts .blog-grid { margin-top: 12px; }
.related-posts .blog-card { transform: none; }