/* tools/shared/blog-enhance.css - visual breakup for /blog/ article bodies:
   numbered section markers, a highlighted Key Takeaways card, and a
   collapsible FAQ accordion. blog-enhance.js does the DOM work (tagging
   Key Takeaways, converting FAQ h3/p pairs into <details>) - this file is
   pure presentation. Numbering is pure CSS (counter), so it applies to
   every article instantly with zero JS dependency. */

/* ---------- numbered section markers ---------- */
.article-body{counter-reset:rlt-sec}
.article-body > h2{counter-increment:rlt-sec}
.article-body > h2::before{
  content:counter(rlt-sec,decimal-leading-zero);
  display:inline-block;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--brand);
  background:rgba(37,99,234,.1);
  border-radius:6px;
  padding:3px 9px;
  margin-right:12px;
  vertical-align:middle;
  position:relative;
  top:-3px;
}

/* ---------- Key Takeaways card ---------- */
.rlt-kt-box{
  margin:24px 0 40px;
  padding:24px 28px;
  background:linear-gradient(135deg,rgba(37,99,234,.06),rgba(247,191,52,.08));
  border:1px solid rgba(37,99,234,.16);
  border-left:4px solid var(--brand);
  border-radius:14px;
}
.rlt-kt-box h2{margin:0 0 14px !important}
.rlt-kt-box h2::before{content:none}
.rlt-kt-box ul{margin:0 !important;padding:0 !important;list-style:none}
.rlt-kt-box li{
  position:relative;
  padding:6px 0 6px 30px;
  margin:0 !important;
  font-size:16px;
  line-height:1.55;
  color:#1e2d4a;
}
.rlt-kt-box li::before{
  content:"";
  position:absolute;
  left:0;top:9px;
  width:18px;height:18px;
  background:var(--brand);
  border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:11px;
}

/* ---------- FAQ accordion ---------- */
.rlt-faq-list{margin:20px 0 0}
.rlt-faq-item{
  background:#fff;
  border:1px solid rgba(11,19,46,.08);
  border-radius:12px;
  margin:0 0 10px;
  padding:0;
  overflow:hidden;
}
.rlt-faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
  color:#0b132e;
}
.rlt-faq-item summary::-webkit-details-marker{display:none}
.rlt-faq-item summary .rlt-faq-chevron{
  flex-shrink:0;
  width:18px;height:18px;
  color:var(--brand);
  transition:transform .2s ease;
}
.rlt-faq-item[open] summary .rlt-faq-chevron{transform:rotate(180deg)}
.rlt-faq-item__a{
  padding:0 22px 20px;
  font-size:16px;
  line-height:1.65;
  color:#1e2d4a;
}
.rlt-faq-item__a p{margin:0}

@media(max-width:768px){
  .article-body > h2::before{
    display:block;
    margin:0 0 8px;
    width:fit-content;
  }
  .rlt-kt-box{padding:20px 20px}
  .rlt-faq-item summary{padding:16px 18px;font-size:16px}
  .rlt-faq-item__a{padding:0 18px 18px}
}