/* SERPsKit Sticky TOC */
:root{
  --serpskit-toc-border: #2F6D54;
  --serpskit-toc-highlight: #F2F0EE;
  --serpskit-toc-title-color: #000000;
  --serpskit-toc-content-half: 450px; /* half of 900px */
  --serpskit-toc-gap: 5px;
  --serpskit-toc-width: 390px;
  --serpskit-toc-top: 110px;
}

/* Base TOC box */
.serpskit-toc{
  border: 1px solid var(--serpskit-toc-border);
  border-radius: 0;
  padding: 26px 24px 22px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(3.6px);
  -webkit-backdrop-filter: blur(3.6px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  font-size: 90%;
}

/* Title */
.serpskit-toc-title{
  margin: 0 0 4px 0;
  font-size: 17px;
  font-weight: 600; /* SemiBold */
  color: var(--serpskit-toc-title-color);
}

/* Lists */
.serpskit-toc-list,
.serpskit-toc-sublist{
  margin: 0;
  padding: 0;
  list-style: none;
}

.serpskit-toc-list{
  counter-reset: serpskit_h2;
}

/* Items spacing */
.serpskit-toc .toc-item{
  margin: 6px 0;
}

/* Links */
.serpskit-toc .toc-link{
  display: block;
  width: 100%;
  line-height: 24px;           /* highlight height target */
  min-height: 24px;
  padding: 0 6px;
  text-decoration: none;
  border-radius: 0;
  background: transparent;
}

/* Use theme link color (do not hardcode color here) */
.serpskit-toc .toc-link:visited{
  color: inherit;
}
.serpskit-toc .toc-link:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Numbering: H2 */
.serpskit-toc .toc-h2{
  counter-increment: serpskit_h2;
  counter-reset: serpskit_h3;
}
.serpskit-toc .toc-h2 > .toc-link{
  font-size: 1rem;      /* effectively ~16px on most themes after 90% scaling */
  font-weight: 400;
}
.serpskit-toc .toc-h2 > .toc-link::before{
  content: counter(serpskit_h2) ". ";
}

/* Nested list (H3) */
.serpskit-toc-sublist{
  margin-top: 6px;
}
.serpskit-toc .toc-h3{
  counter-increment: serpskit_h3;
}
.serpskit-toc .toc-h3 > .toc-link{
  font-size: 0.9375rem; /* ~15px relative to 16px */
  font-weight: 400;
  padding-left: calc(6px + 13px); /* 13px indent from left, plus base padding */
}
.serpskit-toc .toc-h3 > .toc-link::before{
  content: counter(serpskit_h2) "." counter(serpskit_h3) " ";
}

/* Active highlight (scrollspy) */
.serpskit-toc .toc-link.is-active{
  background: var(--serpskit-toc-highlight);
}

/* Desktop right-rail placement (outside 900px content container) */
@media (min-width: 1200px){
  .serpskit-toc{
    position: fixed;
    top: var(--serpskit-toc-top);
    left: calc(50% + var(--serpskit-toc-content-half) + var(--serpskit-toc-gap));
    width: var(--serpskit-toc-width);
    max-height: calc(100vh - (var(--serpskit-toc-top) + 24px));
    overflow: auto;
    z-index: 50;
  }
}

/* Mobile & tablet: inline TOC after intro, before first H2 */
@media (max-width: 1199px){
  .serpskit-toc{
    position: static;
    width: 100%;
    max-width: 100%;
    margin: 18px 0 22px;
    max-height: none;
    overflow: visible;
  }
}