/**
 * article-toc.css — Table of Contents · procyclingapparel.com
 * Two structures (post-optimizer contract, same as the sister site):
 *   A) Shell-TOC: #toc-nav-container > .toc-nav > button.toc-toggle + ul#toc-list-content.toc-list
 *   B) Auto-TOC:  nav.article-toc > .article-toc-title + ul.article-toc-list > .article-toc-item > .article-toc-link
 * §0: g-100 fill block, ink text, active item = 2px ink inset bar (same as table row highlight).
 * ⛔ No accent colour in the TOC — red is reserved for CTA fills.
 */

#toc-nav-container,
.article-toc {
  box-sizing: border-box;
  padding: 18px 20px 14px;
  background: var(--g-100, #F3F4F6);
  border-radius: 10px;
  margin: 0 0 16px;
}
#toc-nav-container .toc-nav,
#toc-nav-container .article-toc { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; }

.toc-title { margin: 0; font-size: 15px; font-weight: 600; }

/* ========== Toggle button ========== */
.toc-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 32px;
  padding: 0 0 12px;
  margin: 0 0 8px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--g-200, #E5E7EB);
  border-radius: 0;
  font: 600 13px/1.4 var(--ff-body, "IBM Plex Sans", Arial, sans-serif);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--g-600, #4B5563);
  cursor: pointer;
  text-align: left;
}
.toc-toggle:hover { color: var(--ink, #111827); }
.toc-toggle:focus-visible { outline: 3px solid var(--amber, #F59E0B); outline-offset: 2px; }
.toc-toggle > span { display: inline-flex; align-items: center; gap: 8px; }
/* chevron drawn in CSS (no icon font on this site); class name kept for the ERP grep check */
.toc-toggle-icon {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms;
}
.toc-nav.expanded .toc-toggle-icon { transform: translateY(2px) rotate(-135deg); }

.article-toc-title {
  margin: 0 0 8px;
  padding: 0 0 12px;
  font: 600 13px/1.4 var(--ff-body, "IBM Plex Sans", Arial, sans-serif);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--g-600, #4B5563);
  border-bottom: 1px solid var(--g-200, #E5E7EB);
}

/* ========== List ========== */
#toc-list-content,
.article-toc-list,
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 50vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--g-200, #E5E7EB) transparent;
}
#toc-list-content li,
.article-toc-item,
.toc-list li { margin: 0; padding: 0; position: relative; }

.article-toc-link,
.toc-list li a,
.toc-list a {
  display: block;
  padding: 7px 10px 7px 12px;
  color: var(--g-600, #4B5563);
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  white-space: pre-line;
  border-radius: 2px;
  transition: background-color 160ms, color 160ms;
}
.article-toc-link:hover,
.toc-list li a:hover,
.toc-list a:hover { color: var(--ink, #111827); background: #fff; }
.article-toc-link.active,
.toc-list li a.active,
.toc-list li.active > a,
.toc-list a.active {
  color: var(--ink, #111827);
  font-weight: 600;
  background: #fff;
  box-shadow: inset 2px 0 0 var(--ink, #111827);
}

/* H3-level items */
.toc-list li.toc-h3 a,
.article-toc-item.toc-h3 .article-toc-link { padding-left: 26px; font-size: 14px; }
.article-toc-item .article-toc-list,
.toc-list ul { list-style: none; padding: 0; margin: 0; max-height: none; }
.article-toc-item .article-toc-list a,
.toc-list ul a { padding-left: 26px; font-size: 14px; }

/* ========== Collapsible behaviour (shell-TOC) ==========
   Below 992px the list is hidden until the toggle adds .expanded on .toc-nav.
   From 992px the sidebar TOC is always open. */
.toc-nav .toc-list { display: none; }
.toc-nav.expanded .toc-list { display: block; }
@media (min-width: 992px) {
  .article-sidebar .toc-nav .toc-list,
  .blog-sidebar .toc-nav .toc-list { display: block; }
  .article-sidebar .toc-toggle { cursor: default; pointer-events: none; }
  .article-sidebar .toc-toggle-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .toc-toggle-icon, .toc-list a { transition: none; }
}