/* ================================================
   TABLE OF CONTENTS — shared component
   ================================================
   One stylesheet for the blog sidebar and the customer
   story sidebar so the two cannot drift apart, the same
   way pagination.css works for the listings.

   Supersedes the .post-sidebar-takeaways-* rules that
   used to live in blog-post-template/css/blog-post.css
   and the .story-toc__* rules in customer-story.css.

   Three deliberate decisions, all from design feedback:

   1. NO UNDERLINE, EVER. The blog previously drew one on
      hover and again on the active item via
      border-bottom-color. Colour and background carry it.
   2. HOVER DOES NOT RECOLOUR THE TEXT. Hover is a neutral
      grey wash only, so it reads as "you're pointing at
      this" rather than competing with the active item.
   3. ACTIVE IS THE ONLY GREEN. Light green ground plus
      green text marks the section you're actually in.
   ================================================ */

.onclusive-toc__heading {
    font-family: 'Karla', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1e1e23;
    margin: 0 0 0.75rem;
}

.onclusive-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.onclusive-toc__item {
    margin: 0 0 2px;
    padding: 0;
    list-style: none;
}

.onclusive-toc__item::before,
.onclusive-toc__item::marker {
    content: none;
}

/*
 * Entries sit a step down from the heading in size and weight, and their
 * padding-left offsets the text so the list reads as subordinate to the
 * heading rather than level with it.
 */
.onclusive-toc__link {
    display: block;
    font-family: 'Karla', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.45;
    color: #4a4a4a;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Neutral wash. Deliberately no colour change — see note 2 above. */
.onclusive-toc__link:hover {
    background-color: rgba(30, 30, 35, 0.06);
    color: #4a4a4a;
    text-decoration: none;
    border-bottom-color: transparent;
}

/*
 * The section currently in view. #0b7a3c rather than the brand #00e65f:
 * brand green on this tint fails contrast at 14px, the darker green clears
 * it comfortably and still reads as the same colour family.
 */
.onclusive-toc__link.is-active {
    background-color: rgba(0, 230, 95, 0.16);
    color: #0b7a3c;
    font-weight: 600;
    text-decoration: none;
    border-bottom-color: transparent;
}

.onclusive-toc__link:focus-visible {
    outline: none;
    background-color: rgba(30, 30, 35, 0.06);
    box-shadow: 0 0 0 3px rgba(0, 230, 95, 0.35);
}

@media (max-width: 1024px) {
    .onclusive-toc__link {
        padding: 0.4375rem 0.625rem;
    }
}