/* Bollsen functional CSS — BLOG / CONTENT chrome.
 * Pairs with mu-plugin 21 (Bollsen Content & Blog). Extracted verbatim from the UK master Customizer
 * (custom-css-audit.md, UK lines ~134-188) so the feature's styling travels with its code in git.
 * Conditionally enqueued by 30-bollsen-assets.php on posts / blog home / archives only. */

/* ===== LLM "Summarize" box  (mu21 #67) — UK L134-167 ===== */
.summarize-box{
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:14px 16px; margin:14px 0 24px; border:1px solid rgba(0,0,0,.08);
  border-radius:14px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.summarize-box .title{
  font-weight:600; white-space:nowrap;
}
.summarize-box .logos{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content: center;
}
.summarize-box .logos button{
  margin:unset;
}
.summarize-box .sum-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid rgba(0,0,0,.18); border-radius:999px;
  text-decoration:none; line-height:1; font-size:14px;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.summarize-box .sum-btn img{ display:block; }
.summarize-box .sum-btn:hover{ transform:translateY(-1px); border-color: rgba(0,0,0,.3); }
.summarize-box .sum-chatgpt:hover{ background:#F3F6F8; }
.summarize-box .sum-perplexity:hover{ background:#F4F6FF; }
.summarize-box .sum-gemini:hover{ background:#F4F8FF; }
@media (max-width: 640px){
  .summarize-box{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* ===== Reading time  (mu21 #54) — UK L169-173 ===== */
.reading-time {
  font-size: 12px;
  color: #666;
  margin-bottom: 12px;
}

/* ===== Blog-archive pills / "Buttons above Blog Archive"  (mu21 #53) — UK L175-188 ===== */
.bollsen-archive-pills { margin: 10px 0 24px; }
.bollsen-archive-pills .pill-list{
  display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0;
  justify-content:center;
}
.bollsen-archive-pills .pill{
  display:inline-block; padding:6px 14px; border:1px solid currentColor;
  border-radius:999px; text-decoration:none; line-height:1; font-size:14px;
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
.bollsen-archive-pills .pill:hover{ transform:translateY(-1px); }
.bollsen-archive-pills .pill.is-active{ background:#222; color:#fff; border-color:#222; }