/* ===========================
   TOC — Dyson Forestry (Minimal / Premium)
   Clean pills + elegant hover sweep (no “neon candy”)
   Works with:
   <section class="toc"> ... <div class="swiper toc-swiper"> ...
=========================== */

:root{
  --tocMaxWidth: 1180px;

  /* site palette */
  --df-accent:  #ff8a00;
  --df-accent2: #ff3b2f;

  --df-ink:     rgba(255,255,255,.92);
  --df-muted:   rgba(255,255,255,.70);

  --df-line:    rgba(255,255,255,.10);
  --df-chip:    rgba(255,255,255,.06);
  --df-chip2:   rgba(0,0,0,.18);
}

/* ===== Section ===== */
.toc{
  background: transparent;
}

.toc .section-head{
  display:flex;
  justify-content:center;
  align-items:center;
  padding-bottom: 8px;
}

.toc .section-head h2{
  margin: 0;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  position: relative;
  padding: 10px 14px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* subtle underline strip under header */
.toc .section-head h2::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: -10px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,138,0,.65), rgba(255,59,47,.55), transparent);
  opacity: .55;
}

/* ===== Swiper container ===== */
.toc-swiper{
  width: min(var(--tocMaxWidth), 92vw);
  margin: 0 auto;
  padding: 10px 2px 18px !important;
}

/* row spacing */
.toc .swiper-wrapper{
  padding: 12px 0 10px;
  align-items: center;
}

.toc .swiper-slide{
  width: fit-content;
}

/* ===== Minimal pill link ===== */
.toc a{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 16px;
  border-radius: 999px;

  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;

  color: rgba(255,255,255,.74);

  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
  box-shadow: 0 12px 28px rgba(0,0,0,.30);

  transform: translateZ(0);
  transition:
    transform .18s cubic-bezier(.2,.9,.2,1),
    border-color .22s ease,
    color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

/* hover sweep layer */
.toc a::before{
  content:"";
  position:absolute;
  inset: -1px;
  border-radius: inherit;

  background: linear-gradient(
    110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.06) 18%,
    rgba(255,138,0,.22) 44%,
    rgba(255,59,47,.18) 60%,
    rgba(255,255,255,0) 84%
  );
  transform: translateX(-55%);
  opacity: 0;
  transition: opacity .22s ease, transform .35s cubic-bezier(.2,.9,.2,1);
  pointer-events:none;
}

/* tiny accent dot */
.toc a::after{
  content:"";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  box-shadow: none;
  flex: 0 0 auto;

  /* place inside without extra markup */
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .0;
  transition: opacity .22s ease, background .22s ease, box-shadow .22s ease;
}

/* give space for dot */
.toc a{
  padding-left: 26px;
}

.toc a:hover,
.toc a:focus{
  color: rgba(255,255,255,.92);
  border-color: rgba(255,138,0,.28);
  box-shadow:
    0 18px 46px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,138,0,.08) inset;
  transform: translateY(-2px);
}

.toc a:hover::before,
.toc a:focus::before{
  opacity: 1;
  transform: translateX(0%);
}

.toc a:hover::after,
.toc a:focus::after{
  opacity: 1;
  background: rgba(255,138,0,.92);
  box-shadow:
    0 0 10px rgba(255,138,0,.24),
    0 0 12px rgba(255,59,47,.16);
}

/* pressed */
.toc a:active{
  transform: translateY(0px) scale(.99);
}

/* A11y focus */
.toc a:focus-visible{
  outline: 2px solid rgba(255,138,0,.70);
  outline-offset: 3px;
}

/* Optional: current item if you add aria-current="page" */
.toc a[aria-current="page"]{
  color: rgba(255,255,255,.95);
  border-color: rgba(255,138,0,.34);
  box-shadow:
    0 18px 46px rgba(0,0,0,.44),
    0 0 0 1px rgba(255,138,0,.14) inset;
}
.toc a[aria-current="page"]::after{
  opacity: 1;
  background: rgba(255,138,0,.92);
  box-shadow:
    0 0 10px rgba(255,138,0,.24),
    0 0 12px rgba(255,59,47,.16);
}

/* ===== Minimal scrollbar ===== */
.toc-swiper .swiper-scrollbar{
  background: rgba(255,255,255,.07);
  height: 2px;
  border-radius: 999px;
}

.toc-swiper .swiper-scrollbar-drag{
  background: linear-gradient(90deg, rgba(255,138,0,.85), rgba(255,59,47,.75));
  border-radius: 999px;
  opacity: .9;
}

/* align scrollbar width */
.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal{
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* ===== Mobile ===== */
@media (max-width: 750px){
  .toc-swiper{ width: min(100vw, 92vw); }
  .toc a{
    font-size: 10.5px;
    padding: 10px 14px 10px 24px;
    letter-spacing: .14em;
  }
  .toc .section-head h2{
    font-size: 11px;
    letter-spacing: .20em;
  }
}