/* ---------- Base layout ---------- */
html { scroll-behavior: smooth; }
.body-container .container { max-width: var(--site-width); }

.toc-outer { display: flex; flex-direction: column; }
.toc-outer .toc { width: 100%; margin-bottom: 24px; background: #fff; position: relative; z-index: 10; }
.toc-outer .post-contents { width: 100% !important; padding-left: 0 !important; position: relative; }

/* ---------- TOC visual styles ---------- */
.toc-outer .toc-inner { background: #E7EFFD; border-radius: 10px; box-shadow: none; padding: 24px 16px; }

/* Dropdown list (closed by default on mobile) */
.toc-outer .toc-menu-items {
  display: none;
  opacity: 0;
  transition: opacity .25s ease;
  position: absolute;
  left: 0;
  top: 54px;
  width: 100%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 4px 0 #00000040;
  padding: 20px;
  z-index: 20;
}
.toc-outer .toc-inner.active .toc-menu-items { display: block; opacity: 1; }

.toc-outer .toc-menu-items li { list-style: none; padding: 6px 24px; margin: 0; }
.toc-outer .toc-menu-items li a { text-decoration: none; }
.toc-outer .toc-menu-items li a span { font-size: 14px; font-weight: 700; line-height: 150%; display: block; padding: 4px 0; }
.toc-outer .toc-menu-items li a.active { font-weight: 800 !important; }

/* ---------- Header with +/– button on the right ---------- */
.toc-inner .toc-header {
  display: flex; align-items: center; min-height: 48px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  position: relative; padding-right: 44px; /* space for the button */
  background: none !important; /* avoid old SVG bg */
}
.toc-toggle{
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 1px solid #CEDFFB; border-radius: 8px;
  background: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; cursor: pointer; pointer-events: auto;
}
.toc-inner:not(.active) .toc-toggle .icon { content: "+"; }
.toc-inner.active .toc-toggle .icon { content: "–"; }
.toc-toggle[aria-expanded="false"] .icon { content: "+"; }
.toc-toggle[aria-expanded="true"]  .icon { content: "–"; }

/* ---------- Scroll offset for sticky header ---------- */
@supports (scroll-margin-top: 1px) {
  .post-contents h1[id],
  .post-contents h2[id],
  .post-contents h3[id],
  .post-contents [data-toc-id] { scroll-margin-top: 72px; }
}
:target::before { content:""; display:block; height:72px; margin-top:-72px; }

/* ---------- Desktop ---------- */
@media (min-width: 768px){
  .toc-outer { flex-direction: row; gap: var(--site-gutter); }
  .toc-outer .toc { width: 350px; flex-shrink: 0; background: #fff; z-index: auto; }
  .toc-outer .post-contents { width: 100% !important; }
  .toc-outer .toc-inner { background: #fff; border-radius: 0; padding: 0; }

  .toc-outer .toc-inner .toc-header {
    font-size: 18px; font-weight: 600; border-bottom: 2px solid #CEDFFB; padding: 0 0 16px 0;
    cursor: default; padding-right: 0;
  }
  .toc-toggle{ display: none; } /* no button on desktop */

  .toc-outer .toc-menu-items {
    position: static; display: block; opacity: 1; box-shadow: none; background: transparent;
    padding: 0; margin-top:16px; margin-bottom: 80px;
  }
  .toc-outer .toc-menu-items li a span{ font-size: 16px; font-weight: 700; }

  @supports (scroll-margin-top: 1px) {
    .post-contents h1[id],
    .post-contents h2[id],
    .post-contents h3[id],
    .post-contents [data-toc-id] { scroll-margin-top: 130px; }
  }
  :target::before { height:130px; margin-top:-130px; }
}

/* ---------- HubSpot module sticky (kept for desktop only) ---------- */
{% if module.is_sticky %}
.toc-outer .toc-wrapper { position: relative; top: auto; z-index: auto; } /* disable wrapper sticky */
@media (min-width:768px){
  .toc-outer .toc { position: sticky; top:130px; width: 350px; } /* desktop sticky on .toc */
}
@media (min-width:768px) and (max-width:1024px){
  .toc-outer .toc { top:80px; }
}
{% else %}
.toc-outer .toc-wrapper { position: relative; top:auto; z-index:auto; }
{% endif %}

/* Plus/Minus via ::after (optional, kept for compatibility) */
.toc-header::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 1.1em;
  line-height: 1;
}
.toc-header.is-open::after { content: "–"; }            /* if you toggle a class */
.toc-header[aria-expanded="true"]::after { content: "–"; } /* if you use ARIA */

/* ---------- Sticky ONLY on .toc-inner (mobile) ---------- */
:root{
  --toc-mobile-top: 52px;  /* set to your fixed header height */
}

/* Important: we want sticky only on .toc-inner for mobile */
@media (max-width: 767.98px){
  /* Make .toc-inner sticky below your header */
  .toc-inner {
    position: sticky;
    top: var(--toc-mobile-top);
    z-index: 20; /* keep above content */
  }

  /* Ensure wrapper is NOT sticky on mobile to avoid conflicts */
  .toc-outer .toc-wrapper {
    position: static;
    top: auto;
    z-index: auto;
  }

  /* Keep dropdown anchored under the header and scrollable within viewport */
  .toc-outer .toc-menu-items{
    top: 48px; /* approx height of .toc-header */
    max-height: calc(100dvh - var(--toc-mobile-top) - 64px);
    overflow: auto;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
  }
}

/* ---------- Desktop sticky for .toc (unchanged) ---------- */
@media (min-width:768px){
  .toc-outer .toc { position: sticky; top:130px; }
}

/* Ensure no ancestor creates a scrolling/clip context */
.toc-outer, .toc-wrapper, .toc {
  overflow: visible !important;   /* overflow: auto/hidden would clip sticky */
}
.toc-outer, .toc-wrapper, .toc {
  transform: none !important;     /* transforms create new containing blocks */
  filter: none !important;
  will-change: auto !important;
}

/* Try sticky on the inner (works only while .toc is still onscreen) */
@media (max-width: 767.98px){
  .toc-inner{
    position: sticky;
    top: 52px;
    z-index: 20;
  }
}