/**
 * Article TOC — Table of Contents navigation
 * Supports post-optimizer auto-TOC + site's own shell TOC structures
 *
 * Brand: runcyclingapparel.com (cycling green palette)
 *
 * Two structures:
 *   A) Shell-TOC (post-optimizer):
 *      <div id="toc-nav-container">
 *        <div class="toc-nav">                ← collapsible group
 *          <button class="toc-toggle">…</button>
 *          <ul id="toc-list-content" class="toc-list">
 *            <li><a>…</a></li>
 *            <li class="toc-h3"><a>…</a></li>
 *          </ul>
 *
 *   B) Auto-TOC (legacy):
 *      <nav class="article-toc">
 *        <h2 class="article-toc-title">…</h2>
 *        <ul class="article-toc-list">…</ul>
 */

/* ========== Outer container ========== */
#toc-nav-container,
.article-toc {
  box-sizing: border-box;
  padding: 1.25rem 1.25rem 0.75rem;
  background: #fafbfa;
  border: 1px solid #e6ece6;
  border-radius: 12px;
  margin: 0 0 1.5rem;
}

/* When .toc-nav lives inside #toc-nav-container, flatten it (no double frame) */
#toc-nav-container .toc-nav,
#toc-nav-container .article-toc {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

@media (min-width: 992px) {
  .article-sidebar #toc-nav-container,
  .article-sidebar .article-toc,
  .blog-sidebar #toc-nav-container,
  .blog-sidebar .article-toc {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }
}

/* ========== Toggle button (reset Bootstrap defaults — no inner box) ========== */
.toc-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 0 0.75rem;
  margin: 0 0 0.85rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #e6ece6;
  border-radius: 0;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1A1A1A;
  cursor: pointer;
  text-align: left;
}
.toc-toggle:hover { color: #5BA862; }
.toc-toggle:focus,
.toc-toggle:focus-visible { outline: none; box-shadow: none; }
.toc-toggle > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.toc-toggle > span > i { color: #7BC67E; font-size: 1rem; }
.toc-toggle-icon {
  font-size: 0.95rem;
  color: #6b7280;
  transition: transform 0.25s ease;
}
.toc-nav.expanded .toc-toggle-icon { transform: rotate(180deg); }

/* ========== Auto-TOC title (legacy h2) ========== */
.article-toc-title {
  margin: 0 0 0.85rem;
  padding: 0 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1A1A1A;
  border-bottom: 1px solid #e6ece6;
}

/* ========== List ========== */
#toc-list-content,
.article-toc-list,
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem;
  position: relative;
}

/* Subtle vertical guide line on the left of the list */
#toc-list-content::before,
.toc-list::before,
.article-toc-list::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 2px;
  background: #e6ece6;
  border-radius: 2px;
}

#toc-list-content li,
.article-toc-item,
.toc-list li {
  margin: 0;
  padding: 0;
  position: relative;
}

/* ========== Links ========== */
.article-toc-link,
.toc-list li a,
.toc-list a {
  display: block;
  padding: 0.4rem 0.5rem 0.4rem 0.95rem;
  margin: 0;
  color: #4b5563;
  font-size: 0.92rem;
  line-height: 1.45;
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.article-toc-link:hover,
.toc-list li a:hover,
.toc-list a:hover {
  color: #2A4A30;
  background: rgba(123, 198, 126, 0.08);
  border-left-color: #7BC67E;
}

.article-toc-link.active,
.toc-list li a.active,
.toc-list li.active > a,
.toc-list a.active {
  color: #2A4A30;
  font-weight: 600;
  background: rgba(123, 198, 126, 0.12);
  border-left-color: #5BA862;
}

/* ========== H3-level nested items (flat-list with marker class) ========== */
.toc-list li.toc-h3 a,
.article-toc-item.toc-h3 .article-toc-link {
  padding-left: 1.85rem;
  font-size: 0.86rem;
  color: #6b7280;
}
.toc-list li.toc-h3 a::before,
.article-toc-item.toc-h3 .article-toc-link::before {
  content: '';
  position: absolute;
  left: 0.95rem;
  top: 50%;
  width: 0.5rem;
  height: 1px;
  background: #cfd8d2;
  transform: translateY(-50%);
}
.toc-list li.toc-h3 a:hover,
.article-toc-item.toc-h3 .article-toc-link:hover {
  color: #2A4A30;
}

/* ========== Real nested <ul> (legacy auto-TOC nested structure) ========== */
.article-toc-item .article-toc-list,
.toc-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.article-toc-item .article-toc-list a,
.toc-list ul a {
  padding-left: 1.85rem;
  font-size: 0.86rem;
  color: #6b7280;
}

/* ========== Collapsible behavior (shell-TOC) ==========
   Default: only show title, hide list. Expanded: show all. */
.toc-nav .toc-list { display: none; }
.toc-nav.expanded .toc-list { display: block; }

@media (min-width: 992px) {
  /* On desktop with sidebar, default to expanded (always-visible TOC) */
  .article-sidebar .toc-nav .toc-list,
  .blog-sidebar .toc-nav .toc-list { display: block; }
}