/* blog_single_post_toc.css */

/* Header heights (used to offset sticky ToC and heading scroll-margin) */
:root{
   --header-desktop: 84px;
   --header-mobile: 50px;
}

/* Expose --toc-top on the content wrapper (mobile default) */
.post_content{
   --toc-top: calc(var(--header-mobile) + 12px);
}

@media (min-width:1140px){
   .post_content{ --toc-top: calc(var(--header-desktop) + 12px); }
}

/* Headings stop under the sticky header */
.post_text h2,
.post_text h3,
.post_text h4,
.post_text h5,
.post_text h6{
   scroll-margin-top: var(--toc-top);
}

html{ scroll-behavior: smooth; }
html *{ outline: none; }

.post_content{ position: relative; overflow: visible; }
.post_content .container{ overflow: visible; }
.post_content .cta_wrapper{}

/* ToC visuals */
.post-toc__title{
   font-weight: 500;
   text-transform: uppercase;
   margin-bottom: 12px !important;
}
.post-toc__list{}
.post-toc__item{
   font-size: clamp(11px, 15 * (100vw / 1920), 15px);
   margin-bottom: clamp(8px, 10 * (100vw / 1920), 10px);
}
.post-toc__item:last-child{ margin-bottom: 0; }
.post-toc__link{ text-decoration: none; }
.post-toc__link:hover{ text-decoration: underline; }

/* Sticky ToC with self-scroll and dynamic reserve for CTA (set via --toc-reserve in JS) */
.post_content .post-toc{
   position: sticky;
   top: var(--toc-top);
   background: #ededed;
   max-height: calc(100svh - var(--toc-top) - var(--toc-reserve, 0px));
   overflow: auto;
   overscroll-behavior: contain;
   z-index: 2;
   transition: opacity .15s ease;

   /* Native scrollbar grooming (Windows-friendly) */
   scrollbar-gutter: stable;                  /* Chrome/Edge/Firefox */
   scrollbar-width: thin;                     /* Firefox */
   scrollbar-color: rgba(0,0,0,.35) transparent; /* Firefox */
}

/* WebKit/Blink scrollbar styling (Chrome/Edge/Safari) */
.post_content .post-toc::-webkit-scrollbar{
   width: 8px;
}
.post_content .post-toc::-webkit-scrollbar-thumb{
   background: rgba(0,0,0,.30);
   border-radius: 8px;
}
.post_content .post-toc:hover::-webkit-scrollbar-thumb{
   background: rgba(0,0,0,.45);
}
.post_content .post-toc::-webkit-scrollbar-track{
   background: transparent;
}

/* High-contrast mode: defer to system colors */
@media (forced-colors: active){
   .post_content .post-toc{ scrollbar-color: auto; }
}

/* Hidden state (toggled by JS when overlapping CTA in bottom mode) */
.post_content .post-toc.toc--hidden{
   opacity: 0;
   pointer-events: none;
}

/* Mobile: disable sticky + internal scroll */
@media (max-width:1024px){
   .post_content .post-toc{
      position: static;
      max-height: none;
      overflow: visible;
   }
}