/* --- blog.css --- */

/* Reading progress bar — fixed at top of viewport */
.progress{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:3px;
  z-index:101;
}

.progress__bar{
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--clr-accent),var(--clr-accent-4),var(--clr-accent-2),var(--clr-accent-3));
}

/* Blog card — vertical stack for list view */
.blog-card{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}

.blog-card__meta{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--clr-muted);
}

.blog-card__meta time{
  color:var(--clr-accent);
}

.blog-card__title{
  font-size:1.15rem;
  line-height:1.4;
}

.blog-card__more{
  margin-top:auto;
  font-family:var(--font-mono);
  font-size:.82rem;
  color:var(--clr-accent);
}

/* Draft card — dashed border, reduced opacity */
.draft-card{
  border-style:dashed;
  opacity:.65;
}

.draft-card:hover{
  transform:none;
  border-color:var(--clr-border);
}

/* Article container — centred, constrained width */
.article{
  max-width:760px;
  margin-inline:auto;
}

/* Article h2 — ## prefix, accent monospace */
.article h2{
  margin:2.4rem 0 .9rem;
  font-size:1.4rem;
}

.article h2::before{
  content:'## ';
  color:var(--clr-accent);
  font-family:var(--font-mono);
}

.article h3{
  margin:1.8rem 0 .6rem;
  font-size:1.15rem;
}

/* Article paragraph — muted */
.article p{
  color:var(--clr-muted);
  margin-bottom:1.15rem;
}

.article strong{
  color:var(--clr-text);
}

/* Lists — indented, muted, accent markers */
.article ul,
.article ol{
  margin:0 0 1.3rem 1.4rem;
  color:var(--clr-muted);
  display:grid;
  gap:.5rem;
}

.article li::marker{
  color:var(--clr-accent);
}

/* Article links — dashed underline */
.article a{
  color:var(--clr-accent);
  border-bottom:1px dashed var(--clr-accent);
}

.article a:hover{
  border-bottom-style:solid;
}

/* Inline code — mono, alt bg */
.article code{
  font-family:var(--font-mono);
  font-size:.85em;
  background:var(--clr-bg-alt);
  padding:.15em .45em;
  border-radius:4px;
  color:var(--clr-accent);
}

/* Code block — dark panel, scroll-x */
.article pre{
  background:#0b101c;
  border:1px solid var(--clr-border);
  border-radius:var(--radius-sm);
  padding:1.2rem 1.4rem;
  overflow-x:auto;
  margin:0 0 1.5rem;
  line-height:1.7;
  position:relative;
}

.article pre code{
  background:none;
  padding:0;
  color:#c9d6ee;
  font-size:.82rem;
}

/* Copy button — appears on hover over pre */
.copy-btn{
  position:absolute;
  top:.5rem;
  right:.5rem;
  padding:.25rem .65rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--clr-muted);
  background:rgba(255,255,255,.08);
  border:1px solid var(--clr-border);
  border-radius:4px;
  cursor:pointer;
  opacity:0;
  transition:opacity .2s ease,color .2s ease,background .2s ease;
}

.article pre:hover .copy-btn{
  opacity:1;
}

.copy-btn:hover{
  color:var(--clr-text);
  background:rgba(255,255,255,.14);
}

.copy-btn--done{
  color:var(--clr-accent) !important;
  background:rgba(0,229,160,.12) !important;
}

/* Blockquote — accent left border */
.article blockquote{
  border-left:3px solid var(--clr-accent);
  background:var(--clr-accent-soft);
  padding:1rem 1.4rem;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  margin:0 0 1.5rem;
  color:var(--clr-text);
}

/* Article meta — date, reading time row */
.article__meta{
  display:flex;
  gap:1.2rem;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:.8rem;
  color:var(--clr-muted);
  margin-top:.8rem;
}

.article__meta time{
  color:var(--clr-accent);
}

/* Article nav — prev/next, top border */
.article-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:3.5rem;
  padding-top:2rem;
  border-top:1px solid var(--clr-border);
}