/* css */

:root {
  --spy-bg: #f5f2e8;          /* light warm background */
  --spy-border: #c8bca4;      /* soft neutral border */
  --spy-heading: #2f2a1f;     /* dark heading */
  --spy-text: #4a4130;        /* body text */
  --spy-link: #004b23;        /* link color */
  --spy-link-hover: #b8614b;  /* hover color */
  --spy-link-active-bg: #e7dfcd; /* active item background */
  --spy-link-active: #1f3b5a; /* active text */
  --spy-offset-top: 300px;   /* matches .scroll-spy-nav top */
  --spy-offset-bottom: 24px; /* space above footer */
}

.scroll-spy-layout {
  position: relative;
}

.scroll-spy-nav {
  position: fixed;
  top: var(--spy-offset-top);
  left: 0;
  width: 280px;
  height: calc(100vh - var(--spy-offset-top) - var(--spy-offset-bottom));
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--spy-border);
  background: var(--spy-bg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  z-index: 1000;
  color: var(--spy-text);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.scroll-spy-nav h4 {
  margin-top: 0;
  color: var(--spy-heading);
  font-weight: 600;
  letter-spacing: 0.2px;
  border-bottom: none;    /* remove line under "Jump to" */
  box-shadow: none;       /* in case theme applies a shadow line */
  padding-bottom: 0;      /* prevent space reserved for a removed border */
  margin-bottom: 12px;    /* add space below title */
  line-height: 1.3;       /* ensure enough height */
}

.scroll-spy-nav .nav {
  padding-top: 6px;        /* small buffer so first link isn’t clipped */
}

.scroll-spy-nav .nav .nav-link {
  color: var(--spy-link);
  padding: 6px 8px;
  border-radius: 6px;
  text-decoration: none;
  display: block;
}

.scroll-spy-nav .nav .nav-link:hover {
  color: var(--spy-link-hover);
  background: rgba(0,0,0,0.04);
}

.scroll-spy-nav .nav .nav-link.active {
  color: var(--spy-link-active);
  background: var(--spy-link-active-bg);
  font-weight: 600;
}

.scroll-spy-content {
  margin-left: 300px;     /* keep space for left box */
  padding: 0 24px;        /* add left/right padding inside content */
  max-width: 980px;       /* optional: limit line length */
  margin-right: auto;     /* push content away from right edge */
  box-sizing: border-box; /* ensure padding is included in width */
}

@media (max-width: 992px) {
  .scroll-spy-nav {
    position: static;
    height: auto;         /* no fixed height on small screens */
    overflow: visible;
    box-shadow: none;
    width: auto;
  }
  .scroll-spy-content {
    margin-left: 0;
    padding: 0 16px;      /* comfortable padding on small screens */
    max-width: none;
  }
}