Christmas Review (Accessible Version)

<nav class="toc">
  <h3>Contents</h3>
  <ul id="toc-list"></ul>
</nav>

.toc {
  font-family: sans-serif;
  position: sticky;
  top: 80px;
  max-width: 300px;
}

.toc h3 {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

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

.toc li {
  margin-bottom: 0.75rem;
}

.toc a {
  text-decoration: none;
  color: #1a1a1a;
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s ease;
}

/* Hover state */
.toc a:hover {
  text-decoration: none;
  background-color: #f5f7ff;
  color: #0070f3; /* blue hover text */
}

/* Active/selected state */
.toc a.active {
  background-color: #f5f7ff;
  font-weight: 600;
  color: #f48024; /* orange highlight */
}

/* Active + hover */
.toc a.active:hover {
  color: #f48024;
  background-color: #f5f7ff;
}

document.addEventListener("DOMContentLoaded", () => {
  const tocList = document.getElementById("toc-list");
  const headings = document.querySelectorAll("h2");

  headings.forEach((h2, index) => {
    const id = h2.id || `section-${index}`;
    h2.id = id;

    const li = document.createElement("li");
    const link = document.createElement("a");
    link.href = `#${id}`;
    link.textContent = h2.textContent;
    li.appendChild(link);
    tocList.appendChild(li);
  });

  // Scrollspy logic
  const links = document.querySelectorAll(".toc a");
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        const link = document.querySelector(`.toc a[href="#${entry.target.id}"]`);
        if (entry.isIntersecting) {
          links.forEach((l) => l.classList.remove("active"));
          link.classList.add("active");
        }
      });
    },
    {
      rootMargin: "-50% 0px -50% 0px",
      threshold: 0
    }
  );

  headings.forEach((h2) => observer.observe(h2));
});