/* Blog article table of contents: only the H2 chapters are listed; the H3 sub-headings of the chapter
   the reader is in open underneath it (js/blog-toc.js adds .ds-toc-ready, .is-open, .ds-toc-active and .ds-toc-sub-active).
   Without JavaScript nothing is hidden. */
.ds-toc-ready .fs-toc_link-wrapper.is-h2 > .fs-toc_link-wrapper.is-h3 {
  display: none;
}

.ds-toc-ready .fs-toc_link-wrapper.is-h2.is-open > .fs-toc_link-wrapper.is-h3 {
  display: block;
  animation: ds-toc-in .3s ease both;
}

/* The chapter being read is marked with the blue bar (same style as .fs-toc_link.w--current),
   and stays marked while the reader is in one of its sub-headings */
.fs-toc_link.ds-toc-active {
  color: #000;
  background-image: url('../images/Rectangle-1205.svg');
  background-position: 0%;
  background-repeat: no-repeat;
  background-size: auto;
  padding-left: 15px;
}

.ds-toc-ready.toc-wrapper .fs-toc_link.is-h3.ds-toc-sub-active {
  color: #000;
}

/* Once the script runs, it decides which link is marked, so the scroll-spy class can't mark a second one */
.ds-toc-ready .fs-toc_link.w--current:not(.ds-toc-active) {
  color: #6d6f7b;
  background-image: none;
  padding-left: 0;
}

@keyframes ds-toc-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-toc-ready .fs-toc_link-wrapper.is-h2.is-open > .fs-toc_link-wrapper.is-h3 {
    animation: none;
  }
}