/* Blog Pro v1.0.0 — Public Styles
   Matches site-frame purple/violet dark theme.
   Uses CSS vars so it adapts if theme colours change.
*/
:root{
  --bp-accent:      var(--sf-accent,      #8b5cf6);
  --bp-accent2:     var(--sf-accent2,     #c4b5fd);
  --bp-accent3:     var(--sf-accent3,     #7c3aed);
  --bp-accent-r:    var(--sf-accent-r,    139);
  --bp-accent-g:    var(--sf-accent-g,    92);
  --bp-accent-b:    var(--sf-accent-b,    246);
  --bp-bg:          var(--sf-bg,          #05060f);
  --bp-surface:     var(--sf-surface,     #0c0e1a);
  --bp-border:      var(--sf-border,      #1e2140);
  --bp-text:        var(--sf-text,        #eef0f8);
  --bp-muted:       var(--sf-muted,       #7a85a8);
  --bp-radius:      10px;
}

/* ── Meta bar ─────────────────────────────────────────────────── */
.bp-meta-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:13px;color:var(--bp-muted);
  margin-bottom:28px;
  padding-bottom:16px;
  border-bottom:1px solid var(--bp-border);
}
.bp-meta-sep{color:var(--bp-border);}
.bp-read-time{color:var(--bp-accent2);font-weight:500;}
.bp-reviewed{color:#10b981;font-size:12px;}

/* ── TOC ──────────────────────────────────────────────────────── */
.bp-toc{
  background:var(--bp-surface);
  border:1px solid var(--bp-border);
  border-left:3px solid var(--bp-accent);
  border-radius:var(--bp-radius);
  padding:20px 24px;
  margin:0 0 36px;
}
.bp-toc-head{
  font-size:13px;font-weight:700;color:var(--bp-text);
  margin-bottom:14px;letter-spacing:.01em;
}
.bp-toc-list{
  margin:0;padding:0 0 0 20px;
  display:flex;flex-direction:column;gap:6px;
}
.bp-toc-list li{list-style:disc;}
.bp-toc-list a{
  font-size:14px;color:var(--bp-muted);
  text-decoration:none;transition:color .15s;
}
.bp-toc-list a:hover{color:var(--bp-accent2);}
.bp-toc-sub{margin-left:16px;list-style:circle;}
.bp-toc-sub a{font-size:13px;}

/* ── Quick Answer box ─────────────────────────────────────────── */
.bp-answer-box{
  display:flex;gap:16px;
  background:rgba(var(--bp-accent-r),var(--bp-accent-g),var(--bp-accent-b),.07);
  border:1px solid rgba(var(--bp-accent-r),var(--bp-accent-g),var(--bp-accent-b),.25);
  border-radius:var(--bp-radius);
  padding:20px 22px;
  margin:0 0 32px;
}
.bp-answer-icon{font-size:22px;flex-shrink:0;margin-top:2px;}
.bp-answer-label{
  font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--bp-accent2);margin-bottom:6px;
}
.bp-answer-text{
  font-size:15px;color:var(--bp-text);line-height:1.65;margin:0;
}

/* ── Key Facts box ────────────────────────────────────────────── */
.bp-facts-box{
  background:var(--bp-surface);
  border:1px solid var(--bp-border);
  border-radius:var(--bp-radius);
  padding:20px 24px;
  margin:36px 0;
}
.bp-facts-head{
  font-size:13px;font-weight:700;color:var(--bp-text);
  margin-bottom:14px;
}
.bp-facts-list{
  margin:0;padding:0 0 0 20px;
  display:flex;flex-direction:column;gap:8px;
}
.bp-facts-list li{
  font-size:14px;color:var(--bp-muted);line-height:1.6;
}
.bp-facts-list li::marker{color:var(--bp-accent);}

/* ── FAQ wrapper ──────────────────────────────────────────────── */
.bp-faq-wrap{margin:40px 0;}
.bp-faq-wrap .faqp-wrap{max-width:100%;}

/* ── Author box ───────────────────────────────────────────────── */
.bp-author-box{
  display:flex;gap:18px;align-items:flex-start;
  background:var(--bp-surface);
  border:1px solid var(--bp-border);
  border-radius:var(--bp-radius);
  padding:24px;
  margin:40px 0 28px;
}
.bp-author-avatar{
  width:64px;height:64px;border-radius:50%;
  border:2px solid rgba(var(--bp-accent-r),var(--bp-accent-g),var(--bp-accent-b),.3);
  flex-shrink:0;object-fit:cover;
}
.bp-author-label{
  font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bp-muted);margin-bottom:4px;
}
.bp-author-name{
  font-size:15px;font-weight:700;color:var(--bp-text);
  text-decoration:none;display:block;margin-bottom:6px;
  transition:color .15s;
}
.bp-author-name:hover{color:var(--bp-accent2);}
.bp-author-bio{font-size:13px;color:var(--bp-muted);line-height:1.6;margin:0;}

/* ── Share box ────────────────────────────────────────────────── */
.bp-share-box{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:20px 0;
  border-top:1px solid var(--bp-border);
  border-bottom:1px solid var(--bp-border);
  margin:28px 0;
}
.bp-share-label{
  font-size:12px;font-weight:700;color:var(--bp-muted);
  text-transform:uppercase;letter-spacing:.08em;margin-right:4px;
}
.bp-share-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:8px;
  font-size:14px;font-weight:700;
  border:1px solid var(--bp-border);
  background:var(--bp-surface);
  color:var(--bp-muted);cursor:pointer;
  text-decoration:none;transition:all .18s;
}
.bp-share-btn:hover{border-color:var(--bp-accent);color:var(--bp-accent2);background:rgba(var(--bp-accent-r),var(--bp-accent-g),var(--bp-accent-b),.08);}
.bp-share-x:hover{border-color:#fff;color:#fff;}
.bp-share-li:hover{border-color:#0a66c2;color:#0a66c2;}
.bp-share-hn:hover{border-color:#ff6600;color:#ff6600;}

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width:600px){
  .bp-author-box{flex-direction:column;gap:12px;}
  .bp-toc{padding:16px;}
}

/* ════════════════════════════════════════════
   COMPARISON TABLE
════════════════════════════════════════════ */
.bp-compare-wrap{margin:36px 0;overflow:hidden}
.bp-compare-title{font-size:16px;font-weight:700;color:var(--bp-text,#e6edf3);margin-bottom:14px}
.bp-compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bp-compare-table{
  width:100%;border-collapse:collapse;font-size:13.5px;
  border:1px solid var(--bp-border,#1e2140);border-radius:10px;overflow:hidden;
}
.bp-compare-table thead th{
  background:rgba(var(--bp-accent-r),var(--bp-accent-g),var(--bp-accent-b),.12);
  color:var(--bp-accent2,#c4b5fd);
  font-size:12px;font-weight:700;
  padding:12px 16px;text-align:center;
  border-bottom:1px solid var(--bp-border,#1e2140);
}
.bp-compare-table thead th:first-child{text-align:left;width:30%}
.bp-compare-table tbody td{
  padding:11px 16px;text-align:center;
  border-bottom:1px solid rgba(30,33,64,.5);
  color:var(--bp-muted,#7a85a8);vertical-align:middle;
}
.bp-compare-table tbody td:first-child{
  text-align:left;font-weight:600;color:var(--bp-text,#e6edf3);
}
.bp-compare-table tbody tr:last-child td{border-bottom:none}
.bp-compare-table tbody tr:hover td{background:rgba(var(--bp-accent-r),var(--bp-accent-g),var(--bp-accent-b),.04)}
/* Highlight first data column (our product) */
.bp-compare-highlight{
  background:rgba(var(--bp-accent-r),var(--bp-accent-g),var(--bp-accent-b),.08)!important;
  border-left:2px solid rgba(var(--bp-accent-r),var(--bp-accent-g),var(--bp-accent-b),.3);
  border-right:2px solid rgba(var(--bp-accent-r),var(--bp-accent-g),var(--bp-accent-b),.3);
}
.bp-c-yes{color:#10b981;font-size:15px;font-weight:700}
.bp-c-no{color:#ef4444;font-size:15px}

/* ════════════════════════════════════════════
   BAR CHART
════════════════════════════════════════════ */
.bp-chart-wrap{margin:36px 0;background:var(--bp-surface,#0c0e1a);border:1px solid var(--bp-border,#1e2140);border-radius:10px;padding:20px 24px}
.bp-chart-title{font-size:14px;font-weight:700;color:var(--bp-text,#e6edf3);margin-bottom:20px;text-align:center}
.bp-bar-chart{display:flex;align-items:flex-end;justify-content:center;gap:16px;padding:0 8px}
.bp-bar-item{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;min-width:0;max-width:100px}
.bp-bar-track{width:100%;height:100%;display:flex;align-items:flex-end}
.bp-bar-fill{
  width:100%;border-radius:6px 6px 0 0;
  min-height:4px;
  display:flex;align-items:flex-start;justify-content:center;
  transition:height .4s ease;
  position:relative;
}
.bp-bar-val{
  position:absolute;top:-22px;
  font-size:11px;font-weight:700;color:var(--bp-text,#e6edf3);
  white-space:nowrap;
}
.bp-bar-label{font-size:11px;color:var(--bp-muted,#7a85a8);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}

/* ════════════════════════════════════════════
   DONUT CHART
════════════════════════════════════════════ */
.bp-donut-wrap{display:block}
.bp-donut-inner{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center}
.bp-donut-svg{width:140px;height:140px;flex-shrink:0}
.bp-donut-seg{transition:stroke-width .2s}
.bp-donut-legend{display:flex;flex-direction:column;gap:10px}
.bp-donut-leg-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--bp-text,#e6edf3)}
.bp-donut-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.bp-donut-val{margin-left:auto;font-weight:700;color:var(--bp-muted,#7a85a8);font-size:12px;padding-left:12px}

/* ════════════════════════════════════════════
   RELATED POSTS
════════════════════════════════════════════ */
.bp-related-wrap{margin:48px 0 28px;padding-top:28px;border-top:1px solid var(--bp-border,#1e2140)}
.bp-related-head{
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--bp-accent2,#c4b5fd);margin-bottom:16px;
}
.bp-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bp-related-card{
  background:var(--bp-surface,#0c0e1a);
  border:1px solid var(--bp-border,#1e2140);
  border-radius:10px;overflow:hidden;
  text-decoration:none;display:block;
  transition:border-color .2s,transform .2s;
}
.bp-related-card:hover{border-color:rgba(var(--bp-accent-r),var(--bp-accent-g),var(--bp-accent-b),.4);transform:translateY(-3px)}
.bp-related-thumb{
  height:100px;background-size:cover;background-position:center;
  background-color:rgba(var(--bp-accent-r),var(--bp-accent-g),var(--bp-accent-b),.08);
}
.bp-related-body{padding:12px}
.bp-related-title{font-size:13px;font-weight:700;color:#e6edf3;line-height:1.4;margin-bottom:5px}
.bp-related-excerpt{font-size:11px;color:var(--bp-muted,#7a85a8);line-height:1.5}
@media(max-width:600px){.bp-related-grid{grid-template-columns:1fr}}

/* ════════════════════════════════════════════
   PREV / NEXT NAVIGATION
════════════════════════════════════════════ */
.bp-prevnext{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin:32px 0;padding-top:24px;
  border-top:1px solid var(--bp-border,#1e2140);
}
.bp-prevnext-item{
  background:var(--bp-surface,#0c0e1a);
  border:1px solid var(--bp-border,#1e2140);
  border-radius:10px;padding:16px 18px;
  text-decoration:none;display:flex;flex-direction:column;gap:5px;
  transition:border-color .2s;
}
.bp-prevnext-item:hover{border-color:rgba(var(--bp-accent-r),var(--bp-accent-g),var(--bp-accent-b),.4)}
.bp-prevnext-dir{font-size:11px;font-weight:700;color:var(--bp-accent2,#c4b5fd);letter-spacing:.06em;text-transform:uppercase}
.bp-prevnext-title{font-size:13px;font-weight:600;color:#e6edf3;line-height:1.4}
.bp-prevnext-next{text-align:right}
@media(max-width:500px){.bp-prevnext{grid-template-columns:1fr}}

/* ════════════════════════════════════════════
   EM-DASH REDUCTION — use regular dash in content
   (no actual em-dash replacement in PHP needed;
   the CSS makes text body use standard typography)
════════════════════════════════════════════ */
.bp-post-content{font-feature-settings:"kern" 1,"liga" 1}

/* ── v1.0.14 additions ─────────────────────────────────────────── */
/* Author initials fallback */
.bp-author-initials{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--bp-accent),var(--bp-accent3));
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;color:#fff;
  flex-shrink:0;
  border:2px solid rgba(var(--bp-accent-r),var(--bp-accent-g),var(--bp-accent-b),.3);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* Related grid: auto-fit so 1, 2, or 3 cards look balanced */
.bp-related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
}
@media(max-width:600px){
  .bp-related-grid{grid-template-columns:1fr}
}

/* Prevnext: single item still looks clean */
.bp-prevnext-item.bp-prevnext-only{
  max-width:60%;
}