/* LP Table of Contents — base functional styles. Override colours / typography / gradient freely. */
/* Sticky lives on the SECTION wrapping the TOC, not the nav: the section's parent
   (<main>) spans the whole page so the bar can travel. A sticky on the nav is bounded
   by the short container now wrapping it (= its own height → no travel). :has() keeps
   it id-independent (survives Bricks copy-paste). */
section:has([data-lp-toc]) {
  position: sticky;
  top: 0; /* author override: set to your fixed-header height */
  z-index: 50;
}

[data-lp-toc] {
  background: #fff;
  /* author overrides: padding, border, shadow… */
}

/* edge-fade: registered as <number> so the 0↔1 toggles animate the mask smoothly */
@property --lp-fade-l { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --lp-fade-r { syntax: "<number>"; inherits: false; initial-value: 0; }

.lp-toc__list {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* Edge-fade affordance (cf. Material tabs / GitHub horizontal nav): a soft gradient
     appears on whichever side still has hidden items, so the cut never looks like a bug.
     lp-toc.js sets --lp-fade-l / --lp-fade-r to 1 when content is hidden on that side. */
  --lp-toc-fade: 3rem; /* width of the fade — author may tweak */
  --lp-fade-l: 0;
  --lp-fade-r: 0;
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0),
    #000 calc(var(--lp-toc-fade) * var(--lp-fade-l)),
    #000 calc(100% - var(--lp-toc-fade) * var(--lp-fade-r)),
    rgba(0,0,0,0));
          mask-image: linear-gradient(to right,
    rgba(0,0,0,0),
    #000 calc(var(--lp-toc-fade) * var(--lp-fade-l)),
    #000 calc(100% - var(--lp-toc-fade) * var(--lp-fade-r)),
    rgba(0,0,0,0));
  transition: --lp-fade-l .25s ease, --lp-fade-r .25s ease;
}
.lp-toc__list::-webkit-scrollbar { display: none; }

.lp-toc__item { 
   flex: 0 0 auto; 
   max-width: 200px; 
   
   text-align: center;
   align-self: center;
}

.lp-toc__link {
  display: inline-block;
  padding: 1rem 0;
  color: inherit;
  min-width: 120px;
  text-decoration: none;
  font-weight: 400;
  line-height: 1.3;
  transition: color .15s ease;
  font-size: var(--text-xs);
}

/* active section — label goes bold */
.lp-toc__link.is-active { font-weight: 600; }

/* moving gradient indicator (author recolours the gradient) */
.lp-toc__indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #5b2be6, #29c2d4);
  transform: translateX(0);
  transition: transform .3s ease, width .3s ease;
  pointer-events: none;
}

/* offset anchors so sticky bar doesn't cover the section title on jump */
[data-lp-sections] section[id] { scroll-margin-top: 96px; }