/**
 * Table of Contents (TOC) Styles
 *
 * Two-column grid layout:
 * - Desktop (≥1040px): sticky left nav + content column
 * - Mobile: TOC hidden, sections use mobile accordion
 *
 * @package Lucern_Clinic
 * @since 2.0.0
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
  --toc-width: 260px;
  --toc-top: 120px;
  --toc-max-height: calc(100vh - 160px);
  --toc-bg: transparent;

  /* Typography */
  --toc-title-font: normal normal 600 16px/20px Montserrat, sans-serif;
  --toc-title-color: #2D2D2D;
  --toc-link-font: normal normal 400 14px/20px Montserrat, sans-serif;
  --toc-link-color: #555756;
  --toc-link-active-color: #2D2D2D;
  --toc-link-active-weight: 600;

  /* Underline bar */
  --toc-underline-color: #BAAE92;
  --toc-underline-height: 4px;
  --toc-underline-radius: 2px;
}

/* ==========================================================================
   TOC Wrapper — Two-column grid (injected by JS)
   ========================================================================== */

.toc-wrapper {
  display: block;
  padding-inline: 23px;
}

@media (min-width: 37.5em) {
  .toc-wrapper {
    padding-inline: 40px;
  }
}

@media (min-width: 65em) {
  .toc-wrapper {
    position: relative;
    display: grid;
    /* Match the 12-col design grid — sidebar cols 1-3, content cols 4-10 */
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    align-items: start;
    padding-inline: 140px;
    container-type: inline-size;
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
  }

  .toc-wrapper > .toc-aside {
    grid-column: 1 / 4;
  }

  .toc-wrapper > .toc-content {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1200px) {
  .toc-wrapper > .toc-content {
    grid-column: 4 / -1;
  }
}

.toc-wrapper .toc-content {
  min-width: 0;
}

.toc-content .mobile-accordion:first-of-type {
  margin-top: 0;
}

/* ==========================================================================
   TOC Aside — Sticky sidebar
   ========================================================================== */

.toc-aside {
  display: none;
}

@media (min-width: 1200px) {
  .toc-aside {
    display: block;
    position: sticky;
    top: var(--toc-top);
    align-self: start;
    width: min(var(--toc-width), 100%);
    max-height: var(--toc-max-height);
    overflow-y: auto;
    /* Scroll works, scrollbar never renders */
    scrollbar-width: none;
  }

  .toc-aside::-webkit-scrollbar { display: none; width: 0; height: 0; }

  .toc-aside--pinned-end {
    position: absolute;
  }

  /* Per-item fade: each TOC item fades independently based on whether
     that specific item's Y range sits over a full-width section.
     As the user scrolls, items dissolve one-by-one (bottom→top on enter,
     top→bottom on exit), giving a smooth "behind the section" effect. */
  .toc-aside__item {
    transition: opacity 0.25s ease;
  }

  .toc-aside__item--over-fullwidth {
    opacity: 0;
    pointer-events: none;
  }

}

/* ==========================================================================
   TOC Inner Container
   ========================================================================== */

.toc-aside__inner {
  background: var(--toc-bg);
}

.toc-aside__nav {
  overflow: visible;
}

.toc-aside__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   TOC Title
   ========================================================================== */

.toc-aside__title {
  font: var(--toc-title-font);
  color: var(--toc-title-color);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0 0 20px 0;
  padding: 0;
  border: none;
}

/* ==========================================================================
   TOC List
   ========================================================================== */

.toc-aside__item {
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   TOC Links
   ========================================================================== */

.toc-aside__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  font: normal normal 600 16px/20px var(--font-heading);
  letter-spacing: 0px;
  color: #555756;
  border-bottom: 1px solid var(--clr-neutral-300, #ccc);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s ease;
  position: relative;
}

/* Underline bar on active */
.toc-aside__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: var(--toc-underline-height);
  background-color: var(--toc-underline-color);
  border-radius: var(--toc-underline-radius);
  transition: width 0.3s ease;
}

/* Arrow icon */
.toc-aside__link svg {
  flex-shrink: 0;
  width: 7px;
  height: 11px;
  color: #555756;
  transition: color 0.2s ease;
}

.toc-aside__link:hover { color: #2D2D2D; }
.toc-aside__link:hover::after { width: 60%; }

.toc-aside__link.is-active {
  color: #2D2D2D;
  font-weight: 600;
}
.toc-aside__link.is-active::after { width: 60%; }

.toc-aside__link.is-active svg {
  color: var(--clr-primary-500);
}

/* H3 subheadings — indented */
.toc-aside__item--h3 { padding-left: 16px; }
.toc-aside__item--h3 .toc-aside__link { font-size: 13px; padding: 8px 16px; }

/* ==========================================================================
   Loading & Empty States
   ========================================================================== */

.toc-aside__loading,
.toc-aside__empty {
  padding: 12px 16px;
  font: var(--toc-link-font);
  color: #999;
  font-style: italic;
}

/* ==========================================================================
   Sections inside TOC content column — adjust padding
   ========================================================================== */

/* Sections inside toc-content lose their own padding (wrapper handles it) */
.toc-content > .section,
.toc-content > .mobile-accordion .section {
  padding-inline: 0;
}

/* Mobile accordion: pull triggers to 5px from screen edges */
@media (max-width: 768px) {
  .toc-content > .mobile-accordion {
    margin-inline: -18px;
    padding-inline: 5px;
  }

  .toc-content > .mobile-accordion .mobile-accordion__body-inner {
    padding-inline: 5px;
  }
}


.toc-content .mobile-accordion:not(.is-open) .mobile-accordion__body-inner .section {
  padding-block: 0 !important;
}

/* Containers fill content column, aligned to grid cols 4-10 */
.toc-content .container {
  max-width: 100%;
}

@media (min-width: 1200px) {
  .toc-content {
    max-width: 950px; /* 7 grid columns (7×122 + 6×16) = cols 4-10 */
  }

  /* Wide/full-width containers break out to span the full 12-col grid */
  .toc-content > .section:has(> .container[data-type="wide"]),
  .toc-content > .section:has(> .container[data-type="full-width"]),
  .toc-content > .mobile-accordion:has(.container[data-type="wide"]),
  .toc-content > .mobile-accordion:has(.container[data-type="full-width"]) {
    width: 100cqw;
    margin-left: calc((100cqw + 16px) / -4);
  }

  /* Full-width accordion breaks out to full body width (grid + wrapper padding) */
  .toc-content > .mobile-accordion--full-width {
    width: calc(100cqw + 280px) !important;
    margin-left: calc((100cqw + 16px) / -4 - 140px) !important;
  }
}

/* Spacing for non-accordion sections inside toc-content
   (overrides block-specific margin-top:0 rules from grid.css / block templates) */
.toc-content > section {
  margin-top: 127px !important;
}

@media (max-width: 981px) {
  .toc-content > section {
    margin-top: 72px !important;
  }
}

/* Spacing between sections inside toc-content — single-brust only */
body.single-brust .toc-content > *:first-child:not(.pt-0, .pt-sm, .pt-lg):not(:has(.pt-0, .pt-sm, .pt-lg)),
body.single-brust .toc-content > style:first-child ~ *:first-of-type:not(.pt-0, .pt-sm, .pt-lg):not(:has(.pt-0, .pt-sm, .pt-lg)),
body.single-brust .toc-content > :first-of-type:is(.mobile-accordion, .sig-block, section):not(.pt-0, .pt-sm, .pt-lg):not(:has(.pt-0, .pt-sm, .pt-lg)) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.toc-content > * + * {
  margin-top: var(--size-14);
}

/* Override: no margin on first real content element after style/script
   Same exclusion for explicit padding overrides */
/*
.toc-content > style + *:not(.pt-0, .pt-sm, .pt-lg):not(:has(.pt-0, .pt-sm, .pt-lg)),
.toc-content > script + *:not(.pt-0, .pt-sm, .pt-lg):not(:has(.pt-0, .pt-sm, .pt-lg)),
.toc-content > style + style + *:not(.pt-0, .pt-sm, .pt-lg):not(:has(.pt-0, .pt-sm, .pt-lg)),
.toc-content > style + script + *:not(.pt-0, .pt-sm, .pt-lg):not(:has(.pt-0, .pt-sm, .pt-lg)),
.toc-content > script + style + *:not(.pt-0, .pt-sm, .pt-lg):not(:has(.pt-0, .pt-sm, .pt-lg)),
.toc-content > script + script + *:not(.pt-0, .pt-sm, .pt-lg):not(:has(.pt-0, .pt-sm, .pt-lg)) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
*/

@media (max-width: 768px) {
  .toc-content > * + * {
    margin-top: 8px;
  }
}

/* ==========================================================================
   Last mobile-accordion inside toc-content — bottom spacing
   ========================================================================== */

@media (max-width: 768px) {
  .toc-content > .mobile-accordion:last-child {
    padding-bottom: 45px;
  }
}

@media (min-width: 37.5em) {
  .toc-content > .mobile-accordion:last-child {
    padding-bottom: 45px;
  }
}

@media (min-width: 65em) {
  .toc-content > .mobile-accordion:last-child {
    padding-bottom: 127px;
  }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .toc-aside { display: none !important; }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .toc-aside__link { transition: none; }
  .toc-aside__link::after { transition: none; }
}