/* Table of contents -- shared by the block and the blog sidebar.

   These rules are mirrored verbatim in assets/scss/layout/_site.scss. That
   duplication is deliberate: the editor canvas is served css/editor.css plus
   each block's own style.css and never css/styles.css, so the block only looks
   right while being edited if it carries its own copy. Change one, change the
   other.

   .blog-table-of-contents and .entry-content.has-toc are single-post sidebar
   chrome and stay in _site.scss. .cta-card styling for the optional sidebar CTA
   comes from the already-ported cta-card block's own style.css. */
.table-of-contents__heading {
  margin: 0 0 var(--spacing-16, 16px);
  color: var(--wp--preset--color--dark-blue);
  font-size: 25px; /* the .h4 step of components/_typography.scss */
  font-weight: var(--weight-bold, 700);
  line-height: 1.2;
}

.table-of-contents {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4, 4px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.table-of-contents .list-group-item {
  display: block;
  border: 0;
  padding: 0.75rem 1rem;
  border-radius: var(--wp--custom--radius--default, 16px);
  background-color: transparent;
  color: var(--wp--preset--color--gray);
  font-size: 1rem;
  font-weight: var(--weight-regular, 400);
  line-height: 1.35;
  text-decoration: none;
}

/* Underline fought the pill treatment, so hover is a colour shift now. */
.table-of-contents .list-group-item:hover {
  color: var(--wp--preset--color--dark-blue);
}

.table-of-contents .list-group-item.active {
  background-color: var(--wp--preset--color--light-blue);
  color: var(--wp--preset--color--dark-blue);
  font-weight: var(--weight-bold, 700);
}

/* Block context only. template.php emits .table-of-contents-block just for the
   block render, so the blog sidebar -- which sticks .blog-table-of-contents from
   layout/_site.scss -- is untouched. Offset and breakpoint match that rule.

   Sticky needs a containing block taller than itself to do anything: put the
   block in a column beside the page content, not alone in normal flow. An
   ancestor with `overflow: hidden` will also silently disable it. */
@media (min-width: 780px) {
  .table-of-contents-block {
    position: sticky;
    top: 130px;
  }
}