/* Blog post Table of Contents — generated by scripts/blog-toc.py */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* keep headings clear of the fixed 64px header when jumping */
.text-rich-text h2[id] { scroll-margin-top: 96px; }

.blog-toc {
  margin: 2.5rem 0 1rem;
  padding: 1.25rem 1.5rem;
  background: #f6f8fb;
  border: 1px solid #e3e8f0;
  border-left: 4px solid #032f6e;
  border-radius: 12px;
  font-family: Poppins, "Trebuchet MS", sans-serif;
}
.blog-toc details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  font-weight: 600;
  color: #032f6e;
}
.blog-toc details > summary::-webkit-details-marker { display: none; }
.blog-toc details > summary::after {
  content: "";
  width: .55em;
  height: .55em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-25%);
  transition: transform .2s;
  flex: none;
}
.blog-toc details[open] > summary::after { transform: rotate(-135deg) translateY(-25%); }
.blog-toc details > summary:focus-visible { outline: 2px solid #23af99; outline-offset: 4px; border-radius: 4px; }

.text-rich-text .blog-toc__list {
  margin: 1rem 0 0;
  padding-left: 2.1em;
  font-size: clamp(.95rem, 1.05vw, 1.05rem);
  line-height: 1.5;
}
.text-rich-text .blog-toc__list li { margin: 0 0 .45rem; padding-left: .25em; color: #5a6475; }
.text-rich-text .blog-toc__list li:last-child { margin-bottom: 0; }
.text-rich-text .blog-toc__list li::marker { color: #23af99; font-weight: 600; }
.text-rich-text .blog-toc__list a { color: #212121; text-decoration: none; }
.text-rich-text .blog-toc__list a:hover { color: #032f6e; text-decoration: underline; }

@media (max-width: 767px) {
  .blog-toc { margin-top: 2rem; padding: 1rem 1.1rem; }
}
/* phones: match the site's body text size (.text-rich-text p = 3.56vw) */
@media (max-width: 479px) {
  .blog-toc details > summary { font-size: 4.3vw; }
  .text-rich-text .blog-toc__list { font-size: 3.56vw; padding-left: 1.9em; }
  .text-rich-text .blog-toc__list li { margin-bottom: .55rem; }
}