/* ============================================================
   GWBA Blog Post Template — reading experience enhancements
   Scoped to blog article pages. Matches existing brand tokens:
   ink #0D1421, cream #FFF5E6, yellow #FFD93D, pink #FF6B9D,
   purple #6C5CE7, mint #00D9A3, sky #4FC3F7.
   ============================================================ */

:root{
  --gb-ink:#0D1421;
  --gb-cream:#FFF5E6;
  --gb-yellow:#FFD93D;
  --gb-pink:#FF6B9D;
  --gb-purple:#6C5CE7;
  --gb-mint:#00D9A3;
  --gb-sky:#4FC3F7;
}

/* ---- Reading progress bar (top of viewport) ---- */
#gwba-readbar{
  position:fixed;top:0;left:0;height:4px;width:0%;z-index:9999;
  background:linear-gradient(90deg,var(--gb-pink),var(--gb-purple),var(--gb-sky));
  transition:width .12s ease-out;pointer-events:none;
}

/* ---- Article typography polish ---- */
.gwba-article-body{font-size:1.075rem;line-height:1.78;color:#1c2733}
.gwba-article-body p{margin:0 0 1.35em}
.gwba-article-body h2{
  font-size:clamp(1.6rem,3vw,2.1rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.18;margin:2.4em 0 .7em;scroll-margin-top:90px;position:relative;padding-left:18px;
}
.gwba-article-body h2::before{
  content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:6px;border-radius:6px;
  background:var(--gb-yellow);border:2px solid var(--gb-ink);
}
.gwba-article-body h3{
  font-size:clamp(1.25rem,2.2vw,1.5rem);font-weight:800;letter-spacing:-.01em;
  margin:1.8em 0 .5em;scroll-margin-top:90px;
}
.gwba-article-body ul,.gwba-article-body ol{margin:0 0 1.35em;padding-left:1.4em}
.gwba-article-body li{margin:.4em 0;line-height:1.7}
.gwba-article-body a{color:var(--gb-purple);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.gwba-article-body a:hover{background:var(--gb-yellow);color:var(--gb-ink);text-decoration:none}
.gwba-article-body strong{font-weight:800;color:var(--gb-ink)}
.gwba-article-body blockquote{
  border-left:5px solid var(--gb-pink);background:#fff;margin:1.6em 0;padding:1em 1.3em;
  border-radius:0 12px 12px 0;font-style:italic;color:#33414f;
}

/* ---- Table of contents (auto-built) ---- */
.gwba-toc{
  background:#fff;border:2px solid var(--gb-ink);border-radius:16px;
  padding:18px 20px;margin:0 0 2em;box-shadow:4px 4px 0 rgba(13,20,33,.12);
}
.gwba-toc-title{
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#0D142188;margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.gwba-toc-title::before{content:"";width:14px;height:14px;border-radius:4px;background:var(--gb-mint);border:2px solid var(--gb-ink)}
.gwba-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.gwba-toc li{counter-increment:toc;margin:.3em 0}
.gwba-toc a{
  display:flex;gap:10px;align-items:baseline;color:var(--gb-ink);text-decoration:none;
  font-size:.95rem;font-weight:600;padding:4px 0;transition:color .12s;
}
.gwba-toc a::before{content:counter(toc,decimal-leading-zero);font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--gb-purple);font-weight:700;flex-shrink:0}
.gwba-toc a:hover{color:var(--gb-purple)}
.gwba-toc a.gb-sub{padding-left:22px;font-weight:500;font-size:.88rem}
.gwba-toc a.gb-sub::before{content:"\2014";color:#0D142155}

/* ---- Key takeaways callout ---- */
.gwba-takeaways{
  background:var(--gb-cream);border:2px solid var(--gb-ink);border-radius:16px;
  padding:20px 24px;margin:0 0 2em;box-shadow:4px 4px 0 var(--gb-yellow);
}
.gwba-takeaways h2{margin:0 0 12px!important;padding:0!important;font-size:1.15rem!important}
.gwba-takeaways h2::before{display:none!important}
.gwba-takeaways ul{margin:0;padding:0;list-style:none}
.gwba-takeaways li{position:relative;padding-left:30px;margin:.5em 0;line-height:1.6}
.gwba-takeaways li::before{
  content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:5px;
  background:var(--gb-mint);border:2px solid var(--gb-ink);
}

/* ---- Polished AEO Quick-answer block (upgrades existing .gwba-aeo) ---- */
.gwba-aeo{
  position:relative;border:2px solid var(--gb-ink)!important;border-radius:16px!important;
  background:#fff!important;box-shadow:5px 5px 0 var(--gb-sky)!important;
  padding:20px 24px!important;margin:24px 0!important;
}
.gwba-aeo::after{
  content:"AI-ready answer";position:absolute;top:-11px;right:18px;
  background:var(--gb-ink);color:var(--gb-cream);font-size:9px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:9999px;
}

/* ---- FAQ accordion ---- */
.gwba-faq{margin:2em 0}
.gwba-faq-item{
  border:2px solid var(--gb-ink);border-radius:12px;background:#fff;margin:0 0 12px;overflow:hidden;
}
.gwba-faq-q{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:16px 18px;font-size:1.05rem;font-weight:800;color:var(--gb-ink);
  display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:inherit;
}
.gwba-faq-q:hover{background:var(--gb-cream)}
.gwba-faq-q .gb-plus{flex-shrink:0;width:22px;height:22px;position:relative;transition:transform .2s}
.gwba-faq-q .gb-plus::before,.gwba-faq-q .gb-plus::after{
  content:"";position:absolute;background:var(--gb-purple);border-radius:2px;
}
.gwba-faq-q .gb-plus::before{top:10px;left:2px;right:2px;height:3px}
.gwba-faq-q .gb-plus::after{left:10px;top:2px;bottom:2px;width:3px;transition:opacity .2s}
.gwba-faq-item.open .gb-plus::after{opacity:0}
.gwba-faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 18px}
.gwba-faq-item.open .gwba-faq-a{max-height:600px;padding:0 18px 16px}
.gwba-faq-a p{margin:0;line-height:1.7;color:#33414f}

/* ---- Expanded body sections (from content expansion) ---- */
.gwba-expanded h2,.gwba-expanded h3{scroll-margin-top:90px}

@media(max-width:768px){
  .gwba-article-body{font-size:1.02rem}
  .gwba-toc{padding:14px 16px}
}