/* apf_toc — structure only. Every colour, thickness, gap and font is a widget
   Style control writing an --apf-toc-* property (class-apf-toc-widget.php). */
.apf-toc{
  --apf-toc-bar-w:2px; --apf-toc-indent:14px; --apf-toc-top:36px;
  min-width:0;
}
/* sticky needs a tall containing block and NO overflow ancestor — see the
   site-wide html,body{overflow-x:clip} note in global.css. */
.apf-toc.is-sticky{position:sticky;top:var(--apf-toc-top);
  max-height:calc(100vh - (var(--apf-toc-top) * 2));overflow-y:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.apf-toc.is-sticky::-webkit-scrollbar{width:0;height:0}

/* no padding/margin values here — Box, Heading and List each own theirs
   as 4-field controls in the Style tab. */
.apf-toc__label{margin:0}
.apf-toc__list{list-style:none;margin:0}
.apf-toc__item{margin:0}
/* padding-left is animated too, so the text slides away from the border on
   hover/active. Duration comes from the Animation speed control. */
.apf-toc__link{display:block;text-decoration:none;
  transition:color var(--apf-toc-anim,200ms) ease,
             border-color var(--apf-toc-anim,200ms) ease,
             padding-left var(--apf-toc-anim,200ms) ease}
@media (prefers-reduced-motion:reduce){.apf-toc__link{transition:none}}
.apf-toc__link:hover{text-decoration:none}

/* the left border is always present so the row never shifts; its colour is a
   per-state control (transparent when idle = invisible but still reserved). */
/* padding is owned entirely by the Item padding control (its LEFT value is the
   gap after the border) — this file must not also set padding-left or the two
   would fight and the control would silently win, leaving the gap dead. */
.apf-toc__link{border-left:var(--apf-toc-bar-w) solid transparent}
/* H3s indent by MARGIN so the border moves with the text, not just the label */
.apf-toc__item--h3{margin-left:var(--apf-toc-indent)}
.apf-toc__list{list-style:none}
.apf-toc-empty{opacity:.6;font-size:14px}

/* position:sticky can only travel inside its CONTAINING BLOCK. The rail sits in
   .elementor-widget-container, which is only as tall as the rail itself — so it
   had no room and never moved. Stretch the widget wrapper to the column height
   (this is what the share rail does: its sticky element's parent is the full
   3185px column). Scoped to this widget, so no other layout is affected.

   flex-grow, NOT align-self:stretch — the Elementor column is a flex COLUMN, so
   align-self governs the horizontal axis there and stretching it did nothing to
   the height. */
.elementor-widget-apf_toc{flex-grow:1}
.elementor-widget-apf_toc > .elementor-widget-container{height:100%}