/**
 * article-toc.css — table-of-contents navigation for SmartMowBot articles
 *
 * Tokens: #16A34A turf · #15803D deep green · #1F2937 ink · #E2E5DE line
 *         #F5F7F4 wash · #6B7280 muted · Archivo (labels) + Inter (links)
 *
 * Two structures are supported, because ERP's post_optimizer emits either one:
 *   A) Shell-TOC (what _shell.html seeds and ERP then refills):
 *      <div id="toc-nav-container">
 *        <div class="toc-nav">                ← collapsible group
 *          <button class="toc-toggle" onclick="this.closest('.toc-nav').classList.toggle('expanded')">…</button>
 *          <ul id="toc-list-content" class="toc-list">
 *            <li><a>…</a></li>
 *            <li class="toc-h3"><a>…</a></li>
 *
 *   B) Auto-TOC (generated when the page has no shell TOC):
 *      <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: 0.85rem 1rem 0.6rem;
  background: #F5F7F4;
  border: 1px solid #E2E5DE;
  border-radius: 10px;
  margin: 0 0 1rem;
}

/* 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;
}

/* Sticky is already provided by the outer .article-sidebar; no nested sticky here
   (avoids max-height push + double conflict). Long lists scroll internally instead. */

/* ========== toc-title (h2, must stay compact) ========== */
.toc-title {
  margin: 0;
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1F2937;
}

/* ========== 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.5rem;
  margin: 0 0 0.55rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #E2E5DE;
  border-radius: 0;
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1F2937;
  cursor: pointer;
  text-align: left;
}
.toc-toggle:hover { color: #15803D; }
.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: #16A34A; 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 (structure B h2) ========== */
.article-toc-title {
  margin: 0 0 0.85rem;
  padding: 0 0 0.75rem;
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1F2937;
  border-bottom: 1px solid #E2E5DE;
}

/* ========== List ========== */
#toc-list-content,
.article-toc-list,
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0.25rem;
  position: relative;
  /* Long TOC lists (>10 items) scroll internally so they never blow out sidebar height */
  max-height: 50vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Thin custom scrollbar, matches sidebar style */
.toc-list::-webkit-scrollbar { width: 5px; }
.toc-list::-webkit-scrollbar-track { background: transparent; }
.toc-list::-webkit-scrollbar-thumb {
  background: #E2E5DE;
  border-radius: 3px;
}
.toc-list::-webkit-scrollbar-thumb:hover { background: #16A34A; }

/* 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: #E2E5DE;
  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.3rem 0.5rem 0.3rem 0.85rem;
  margin: 0;
  color: #6B7280;
  font-size: 0.84rem;
  line-height: 1.35;
  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: #15803D;
  background: rgba(22, 163, 74, 0.08);
  border-left-color: #16A34A;
}

.article-toc-link.active,
.toc-list li a.active,
.toc-list li.active > a,
.toc-list a.active {
  color: #15803D;
  font-weight: 600;
  background: rgba(22, 163, 74, 0.12);
  border-left-color: #16A34A;
}

/* ========== 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.75rem;
  font-size: 0.78rem;
  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: #E2E5DE;
  transform: translateY(-50%);
}
.toc-list li.toc-h3 a:hover,
.article-toc-item.toc-h3 .article-toc-link:hover {
  color: #15803D;
}

/* ========== Real nested <ul> (structure B nested lists) ========== */
.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 the title/toggle row shows, list is hidden.
   The toggle button's inline onclick toggles `.expanded` on the closest `.toc-nav`;
   this rule must respond to that class or the TOC will render permanently open. */
.toc-nav .toc-list { display: none; }
.toc-nav.expanded .toc-list { display: block; }

@media (min-width: 992px) {
  /* On desktop with a sidebar, default to expanded (always-visible TOC).
     The 70px max-height clamp in the page's inline <style> is mobile-only for the
     same reason — clamping at every width leaves a half-line stub on desktop. */
  .article-sidebar .toc-nav .toc-list,
  .blog-sidebar .toc-nav .toc-list { display: block; }
}