/* =====================================================
   Custom Enhancements for Butterfly Theme
   1. Smooth ToC expand/collapse animation
   2. Enhanced ToC active state visibility
   3. Dark mode refinements
   ===================================================== */

/* ---- ToC: Smooth expand/collapse animation ---- */

/* Override display:none with max-height animation */
#card-toc .toc-content .toc-child {
  display: block !important;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 0;
}

/* When parent toc-item is active, expand its children */
#card-toc .toc-content .toc-item.active > .toc-child {
  max-height: 1000px;  /* large enough for any sub-list */
  opacity: 1;
}

/* ---- ToC: Enhanced active link styling ---- */
#card-toc .toc-content .toc-link {
  transition: all 0.25s ease-in-out;
  border-left: 3px solid transparent;
  padding-left: 6px;
}

#card-toc .toc-content .toc-link.active {
  border-left-color: var(--theme-color, #49b1f5);
  font-weight: 600;
  transform: translateX(2px);
}

/* ---- ToC: Smooth scroll indicator line ---- */
#card-toc .toc-content {
  scrollbar-width: thin;
  scrollbar-color: var(--theme-color, #49b1f5) transparent;
}

#card-toc .toc-content::-webkit-scrollbar {
  width: 3px;
}

#card-toc .toc-content::-webkit-scrollbar-track {
  background: transparent;
}

#card-toc .toc-content::-webkit-scrollbar-thumb {
  background-color: var(--theme-color, #49b1f5);
  border-radius: 3px;
}

/* ---- ToC: Sub-level indentation visual ---- */
#card-toc .toc-content .toc-child .toc-link {
  font-size: 0.9em;
  color: var(--secondary-color, #7b7b7b);
  padding-left: 10px;
}

#card-toc .toc-content .toc-child .toc-child .toc-link {
  padding-left: 16px;
  font-size: 0.85em;
}

/* ---- Smooth page scroll behavior ---- */
html {
  scroll-behavior: smooth;
}

/* ---- Dark Mode: ToC refinements ---- */
[data-theme='dark'] #card-toc .toc-content .toc-link {
  color: var(--toc-link-color, #c0c0c0);
}

[data-theme='dark'] #card-toc .toc-content .toc-link.active {
  color: var(--theme-color, #49b1f5);
  background: rgba(73, 177, 245, 0.12);
}

[data-theme='dark'] #card-toc .toc-content .toc-child .toc-link {
  color: var(--secondary-color, #9a9a9a);
}

/* ---- Dark Mode: Code block refinement ---- */
[data-theme='dark'] .highlight-tools {
  background: rgba(0, 0, 0, 0.3);
}

/* ---- Aside sticky position ---- */
#aside-content {
  position: sticky;
  top: 70px;
}