/* Mobile styling for TOC at the bottom of content */
@media (max-width: 768px) {
  .dat-post-toc {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
  }

  .dat-post-toc .post-toc__title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #444;
  }

  .dat-post-toc ul {
    font-size: 0.9rem;
  }

  .dat-post-toc li {
    margin: 4px 0;
  }
}


/* DatAchieve Post TOC — continuous rail, active overlay, bullet-proof reset */

/* Configurable colors via CSS variables (override on .dat-post-toc if needed) */
.dat-post-toc {
  --toc-accent: #e0312a;  /* active text + active overlay */
  --toc-rail:   #dddddd;  /* continuous baseline rail */
  --toc-text:   #000000;  /* default link color */
}

/* ===== Bullet-proof reset (wins over aggressive theme CSS like .entry-content ul > li) ===== */
.entry-content .dat-post-toc ul > li,
.entry-content nav.dat-post-toc ul > li,
.dat-post-toc ul,
.dat-post-toc ul li,
.dat-post-toc li {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  margin: 0;
  padding: 0;
  background: none !important; /* kill background-image bullets */
}

/* Some themes/browsers render bullets via ::marker */
.dat-post-toc li::marker { content: none !important; }

/* Container + optional title */
.dat-post-toc { position: relative; }
.dat-post-toc .post-toc__title { font-weight: 700; margin: 0 0 8px; }

/* Items */
.dat-post-toc li {
  position: relative;
  margin: 8px 0;
  padding-left: 18px !important; /* space for the rail */
}

/* Links */
.dat-post-toc a {
  text-decoration: none;
  color: var(--toc-text);
  line-height: 1.3;
}
.dat-post-toc a:visited { color: var(--toc-text); }
.dat-post-toc a:focus-visible {
  outline: 2px solid var(--toc-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ===== Continuous gray rail on the UL ===== */
.dat-post-toc ul { position: relative; }
.dat-post-toc ul::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: var(--toc-rail);
  border-radius: 2px;
}

/* ===== Red overlay for the active item only ===== */
.dat-post-toc li.selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0; bottom: 0;
  width: 3px;
  background: var(--toc-accent);
  border-radius: 2px;
}

/* Hover: text only */
.dat-post-toc li:hover > a { color: var(--toc-accent); }

/* Selected item: text red (overlay already red above) */
.dat-post-toc li.selected > a { color: var(--toc-accent); }

/* Optional: compact spacing on small screens */
@media (max-width: 640px) {
  .dat-post-toc li { margin: 6px 0; }
}

/* Optional helper if you want sticky behavior by adding .is-sticky to the nav */
.dat-post-toc.is-sticky { position: sticky; top: 80px; }

.dat-post-toc.is-sticky { 
  position: sticky; 
  top: 96px; 
}
body.admin-bar .dat-post-toc.is-sticky { 
  top: 128px; /* 96 + 32 admin bar */
}