/* Blog index: search + category filters.
   Hand-maintained, like site.css and bodymap.css. The build never writes to assets/.

   The toolbar is markup in content/blog.html carrying the `hidden` attribute, and
   blog.js removes it. No JavaScript means no dead controls, and every article card
   stays in the DOM either way, so crawlers and no-JS readers see the full list. */

.blog-tools{
  display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center;
  justify-content:space-between;
  margin:0 0 var(--sp-6);
  padding-bottom:var(--sp-5);
  border-bottom:1px solid var(--line);
}
.blog-tools[hidden]{display:none}

/* --- search ------------------------------------------------------------- */
.blog-search{position:relative; flex:1 1 20rem; max-width:26rem}
.blog-search svg{
  position:absolute; left:.95rem; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--muted); pointer-events:none;
}
.blog-search input{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--paper-soft); border:1.5px solid var(--line);
  border-radius:var(--radius-pill); padding:.8rem 2.6rem;
  transition:border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.blog-search input::placeholder{color:var(--muted)}
.blog-search input:focus{
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(23,81,63,.14);
}
/* Clear button. Hidden until there is something to clear. */
.blog-search button{
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  display:none; place-items:center;
  width:1.85rem; height:1.85rem; padding:0;
  border:0; border-radius:50%; background:transparent; color:var(--muted);
  font-size:1.2rem; line-height:1; cursor:pointer;
  transition:background .16s var(--ease-out), color .16s var(--ease-out);
}
.blog-search button:hover,.blog-search button:focus-visible{
  background:var(--cream-dim); color:var(--ink);
}
.blog-search.has-value button{display:grid}

/* --- category chips ----------------------------------------------------- */
.blog-cats{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:0; padding:0; list-style:none}
.blog-cats button{
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:600;
  color:var(--muted); background:var(--paper-soft);
  border:1.5px solid var(--line); border-radius:var(--radius-pill);
  padding:.5rem 1rem; cursor:pointer;
  transition:color .16s var(--ease-out), background .16s var(--ease-out),
             border-color .16s var(--ease-out);
}
.blog-cats button:hover{color:var(--green); border-color:var(--green)}
.blog-cats button:focus-visible{
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(23,81,63,.14);
}
.blog-cats button[aria-pressed="true"]{
  color:var(--cream); background:var(--green); border-color:var(--green);
}

/* --- result count + empty state ----------------------------------------- */
.blog-count{
  width:100%; margin:0; font-size:var(--text-sm); color:var(--muted);
}
.blog-empty{
  margin:var(--sp-7) auto; max-width:32rem; text-align:center; color:var(--muted);
}
.blog-empty h3{font-family:var(--font-display); color:var(--ink); margin:0 0 var(--sp-3)}
.blog-empty button{
  margin-top:var(--sp-4); font-family:var(--font-body); font-size:var(--text-sm);
  font-weight:600; color:var(--green); background:transparent;
  border:1.5px solid var(--green); border-radius:var(--radius-pill);
  padding:.6rem 1.3rem; cursor:pointer;
  transition:color .16s var(--ease-out), background .16s var(--ease-out);
}
.blog-empty button:hover{color:var(--cream); background:var(--green)}
.blog-empty[hidden]{display:none}

@media (max-width:640px){
  .blog-tools{gap:var(--sp-3)}
  .blog-search{flex:1 1 100%; max-width:none}
}