/* =========================================
   TOC – Pixel perfect (match screenshot)
   Scope: only your custom TOC element
   ========================================= */

.post-toc-custom{
  border-radius: 16px;
  padding: 24px 32px;
}

.post-toc-custom .is-active-link{
  color: #1BEDB6 !important; 
}

/* ACTIVE number color – works whether is-active-link is on <a> or on <li> */
.post-toc-custom[data-numbering="true"] a.is-active-link::before,
.post-toc-custom[data-numbering="true"] .toc-link.is-active-link::before,
.post-toc-custom[data-numbering="true"] li.is-active-li > :is(a,.toc-link)::before,
.post-toc-custom[data-numbering="true"] li.is-active > :is(a,.toc-link)::before{
  color: #1BEDB6 !important;
}



/* ---------- TITLE (turquoise pill) ---------- */
.post-toc-custom[data-toc-title]::before{
  content: attr(data-toc-title);
  display: block;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  font-family: "Manrope", sans-serif;
  color: #1BEDB6;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #123B30;
}

/* ---------- reset list (UL/OL) ---------- */
.post-toc-custom :is(ul,ol){
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.post-toc-custom li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* nested indent like screenshot */
.post-toc-custom :is(ul,ol) :is(ul,ol){
  margin-top: 6px !important;
  padding-left: 26px !important;
}

/* ---------- spacing between items ---------- */
.post-toc-custom li{
  padding: 3px 0 !important;
}

/* ---------- link base ---------- */
.post-toc-custom :is(a,.toc-link){
  display:block !important;
  position:relative !important;
  text-decoration:none;
  color: rgba(255,255,255,.92);
  font-size: 16px;
  line-height: 1.2;
}

/* hover subtle */
.post-toc-custom :is(a,.toc-link):hover{
  color: rgba(255,255,255,1);
}

/* ---------- NUMBERING ---------- */
.post-toc-custom[data-numbering="true"] :is(ul,ol){
  counter-reset: item;
}
.post-toc-custom[data-numbering="true"] li{
  counter-increment: item;
}

/* number column width (align perfectly) */
/* ===== LEVEL 1 (H2) ===== */
.post-toc-custom[data-numbering="true"]
> :is(ul,ol)
> li
> :is(a,.toc-link){
  padding-left: 22px !important;
}

/* ===== LEVEL 2 (H3) ===== */
.post-toc-custom[data-numbering="true"]
> :is(ul,ol)
> li
> :is(ul,ol)
> li
> :is(a,.toc-link){
  padding-left: 32px !important;
}

/* number itself */
.post-toc-custom[data-numbering="true"] :is(a,.toc-link)::before{
  content: counters(item,".") ".";
  position:absolute;
  left: 0;
  top: 0;
  width: 14px;
  text-align: right;
  font-weight: 600;
  color: rgba(255,255,255,.92);
}

/* add a tiny space after number (like screenshot) */
.post-toc-custom[data-numbering="true"] :is(a,.toc-link) > span,
.post-toc-custom[data-numbering="true"] :is(a,.toc-link){
  /* no-op: spacing handled by padding; keep clean */
}

/* ---------- hierarchy typography (H2 vs H3) ----------
   tocbot typically nests lists: top-level li = H2, nested li = H3
*/
.post-toc-custom > :is(ul,ol) > li > :is(a,.toc-link){
  font-weight: 600;         /* H2 bold */
  font-size: 18px;
  margin-top: 6px;
}

/* nested (H3) */
.post-toc-custom :is(ul,ol) :is(ul,ol) > li > :is(a,.toc-link){
  font-weight: 400;
  font-size: 16px;
  color: rgba(255,255,255,.88);
}

/* optional: even smaller for deeper levels (H4) */
.post-toc-custom :is(ul,ol) :is(ul,ol) :is(ul,ol) > li > :is(a,.toc-link){
  font-weight: 500;
  font-size: 14px;
  color: rgba(255,255,255,.82);
}

/* ---------- Active state (clean, not messy) ---------- */
.post-toc-custom .is-active-link{
  color: #ffffff;
}

/* Keep your border indicator on ::after if you use it via Bricks control */
.post-toc-custom :is(a,.toc-link)::after{
  content:"";
  position:absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 70%;
}