/**
 * blocks/toc/toc.css
 */
.toc {
  padding-block: 24px;
  position: relative;
  z-index: var(--z-toc);
}
.toc__box { padding: 0; }
.toc__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-card-padding);
  color: var(--color-white);
}
.toc__title {
  font-weight: var(--fw-btn);
  font-size: var(--fs-h3);
  color: var(--color-heading-accent);
}
.toc__arrow {
  transition: transform var(--transition-base);
  color: var(--color-heading-accent);
}
.toc__toggle[aria-expanded="true"] .toc__arrow { transform: rotate(180deg); }

.toc__list {
  display: grid;
  gap: 4px;
  /* padding must be 0 while collapsed — a nonzero padding-bottom here would
     force a visible sliver of height even at max-height:0 (border-box can't
     shrink content below 0, so the padding alone would still render). Only
     .is-open restores real padding. */
  padding: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-base) ease, padding var(--transition-base) ease;
}
.toc__list.is-open {
  max-height: 1000px;
  padding: 0 var(--space-card-padding) var(--space-card-padding);
}
.toc__list a {
  display: block;
  padding: 8px 10px;
  color: var(--color-text-body);
  border-left: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.toc__list a:hover {
  color: var(--color-heading-accent);
  border-left-color: var(--color-heading-accent);
}

/* Collapse/expand works at every breakpoint via the .is-open class (toggled
   by toc.js and the arrow's aria-expanded state). JS sets the initial state:
   open by default >= 768px, collapsed by default < 768px — but the toggle
   button always works regardless of viewport. */