/* Table of Contents */

.toc {
  width: 200px;
  flex-shrink: 0;
  margin-left: -220px; /* Pull ToC into reserved space */
  margin-top: 2.5rem; /* Align with content (below H1 margin) */
  position: sticky;
  top: 2rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  font-size: 0.875rem;
}

.toc-title {
  font-weight: bold;
  margin-bottom: 0.75rem;
  color: #333;
}

.toc nav > ul,
.toc nav > ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc ul,
.toc ol {
  margin: 0;
  padding: 0;
}

.toc ul {
  list-style: none;
}

.toc ol {
  list-style: none;
  counter-reset: toc-counter;
}

.toc ol > li {
  counter-increment: toc-counter;
}

.toc ol > li > a::before {
  content: counter(toc-counter) ". ";
  font-size: 0.8em;
  color: #999;
}

.toc li {
  margin-bottom: 0.25rem;
}

.toc ul ul,
.toc ol ol {
  padding-left: 0.75rem;
}

.toc ol ol {
  counter-reset: toc-sub-counter;
}

.toc ol ol > li {
  counter-increment: toc-sub-counter;
}

.toc ol ol > li > a::before {
  content: counter(toc-counter) "." counter(toc-sub-counter) " ";
}

.toc a {
  display: block;
  padding: 0.25rem 0;
  color: #666;
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 0.75rem;
  transition: color 0.2s, border-color 0.2s;
}

.toc a:hover {
  color: #333;
}

.toc a.active {
  color: #0066cc;
  border-left-color: #0066cc;
  font-weight: 500;
}

/* Responsive: hide ToC on smaller screens */
@media (max-width: 968px) {
  .content-wrapper {
    padding-left: 0;
  }

  .toc {
    display: none;
  }
}