/* ============================================================
   TABLE OF CONTENTS BLOCK (inline)
   ============================================================ */

.toc {
  margin-bottom: 0;
}

.toc__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

.toc__title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text);
  margin: 0;
}

.toc__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: var(--border-base) solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: 0;
  cursor: pointer;
  color: var(--color-text);
  flex-shrink: 0;
  transition:
    color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease);
}

.toc__toggle:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.toc__icon-v {
  transition: opacity var(--duration-fast) var(--ease);
}

.toc__toggle[aria-expanded="true"] .toc__icon-v {
  opacity: 0;
}

/* list — beats .post__body ol { list-style: decimal } */
.toc .toc__list {
  padding: 0;
  list-style: none !important;
  display: block;
  margin: 0;
}

/* Only the root list gets top margin */
.toc > .toc__list {
  margin-top: var(--space-4);
}

/* Reset all nested list padding — indent is handled per-link below */
.toc__list--nested {
  margin: 0 !important;
  padding: 0 !important;
}

.toc__item {
  margin: 0;
  padding: 0;
}

/* ── H2 links ─────────────────────────────────────────────── */
/* .toc prefix beats global a { color: var(--color-accent) }  */
.toc .toc__link {
  display: block;
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--toc-font-size, var(--text-sm)) !important;
  font-weight: var(--toc-font-weight, 600) !important;
  line-height: 1.5;
  padding-left: 0;
  transition: color var(--duration-fast) var(--ease);
}

/* ── H3 links ─────────────────────────────────────────────── */
.toc .toc__item--h3 .toc__link {
  font-size: var(--toc-h3-font-size, var(--text-sm)) !important;
  font-weight: var(--toc-h3-font-weight, 600) !important;
  color: var(--color-text);
  padding-left: var(--toc-h3-indent, var(--space-5)) !important;
}

/* ── H4 links ─────────────────────────────────────────────── */
.toc .toc__item--h4 .toc__link {
  font-size: var(--toc-h4-font-size, var(--text-sm)) !important;
  font-weight: var(--toc-h4-font-weight, 500) !important;
  color: var(--color-text);
  padding-left: calc(
    var(--toc-h3-indent, var(--space-5)) + var(--toc-h4-indent, var(--space-5))
  ) !important;
}

/* ── Hover: link text AND counter number ─────────────────── */
.toc .toc__link:hover,
.toc .toc__link:hover::before {
  color: var(--color-accent);
}

/* ── Numbered TOC counters ───────────────────────────────── */
.toc--numbered {
  counter-reset: toc-l1;
}

.toc--numbered > .toc__list > .toc__item {
  counter-increment: toc-l1;
  counter-reset: toc-l2;
}

.toc--numbered .toc__list--nested > .toc__item {
  counter-increment: toc-l2;
  counter-reset: toc-l3;
}

.toc--numbered .toc__list--nested .toc__list--nested > .toc__item {
  counter-increment: toc-l3;
}

.toc--numbered .toc__link {
  display: flex;
  align-items: baseline;
  gap: 0;
}

/* ── Counter labels ──────────────────────────────────────── */
/* colour set here so hover rule can override it             */
.toc--numbered .toc__link::before {
  flex-shrink: 0;
  font-size: var(--toc-font-size, var(--text-sm)) !important;
  font-weight: var(--toc-font-weight, 700) !important;
  color: var(--color-text);
}

.toc--numbered .toc__item--h3 .toc__link::before {
  font-size: var(--toc-h3-font-size, var(--text-sm)) !important;
  font-weight: var(--toc-h3-font-weight, 600) !important;
}

.toc--numbered .toc__item--h4 .toc__link::before {
  font-size: var(--toc-h4-font-size, var(--text-sm)) !important;
  font-weight: var(--toc-h4-font-weight, 500) !important;
}

/* content only — no colour so hover rule wins */
.toc--numbered > .toc__list > .toc__item > .toc__link::before {
  content: counter(toc-l1) ".";
}

.toc--numbered .toc__list--nested > .toc__item > .toc__link::before {
  content: counter(toc-l1) "." counter(toc-l2);
}

.toc--numbered
  .toc__list--nested
  .toc__list--nested
  > .toc__item
  > .toc__link::before {
  content: counter(toc-l1) "." counter(toc-l2) "." counter(toc-l3);
}