/*
 * CarverJS Docs — ONLY overrides for what Bootstrap 5.3 cannot do.
 * Everything else uses Bootstrap classes directly in HTML.
 */

/* 1. Dark-theme color tuning (Bootstrap sets the rest via data-bs-theme="dark") */
[data-bs-theme="dark"] {
  --bs-body-bg: #0d1117;
  --bs-secondary-bg: #161b22;
  --bs-tertiary-bg: #1c2128;
  --bs-border-color: #30363d;
  --bs-code-color: #e2b86b;
  --accent: #22c55e;
}

/* 2. Custom font families (Bootstrap doesn't load these) */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: 'IBM Plex Sans', var(--bs-body-font-family); }

/* 3. Fixed sidebar — Bootstrap offcanvas only does overlays, not persistent fixed */
.cjs-sidebar {
  position: fixed; top: 60px; bottom: 0; left: 0; width: 260px;
  background: #0a0e14; border-right: 1px solid var(--bs-border-color);
  overflow-y: auto; z-index: 1020; scrollbar-width: thin;
  transition: transform .3s;
}
.cjs-sidebar a.active {
  color: var(--accent) !important; font-weight: 500;
  border-left: 2px solid var(--accent); background: rgba(34,197,94,.08);
}
@media (max-width:991.98px) {
  .cjs-sidebar { transform: translateX(-100%); z-index: 1040; }
  .cjs-sidebar.show { transform: translateX(0); }
}

/* 4. Code blocks with header — Bootstrap has <pre>/<code> but no block wrapper */
.cjs-code {
  border: 1px solid var(--bs-border-color); border-radius: .5rem;
  overflow: hidden; background: #010409; margin-bottom: 1.5rem;
}
.cjs-code pre { margin: 0; padding: 1rem; overflow-x: auto; font-size: .82rem; line-height: 1.7; }
.cjs-code pre code { background: none !important; border: none !important; padding: 0 !important; color: inherit !important; }

/* 5. Right-side TOC — no Bootstrap component for this */
.cjs-toc {
  position: fixed; top: 60px; right: 0; width: 200px;
  height: calc(100vh - 60px); overflow-y: auto;
  padding: 2rem 1rem 2rem 0; scrollbar-width: thin;
  scrollbar-color: var(--bs-border-color) transparent;
}
.cjs-toc::-webkit-scrollbar { width: 4px; }
.cjs-toc::-webkit-scrollbar-thumb { background: var(--bs-border-color); border-radius: 4px; }
.cjs-toc a.active { color: var(--accent) !important; border-left-color: var(--accent) !important; }
@media (max-width:1399.98px) { .cjs-toc { display: none; } }

/* 6. Heading anchors — show # on hover */
.anchor-link { opacity: 0; transition: opacity .15s; text-decoration: none; }
h2:hover .anchor-link, h3:hover .anchor-link { opacity: 1; }

/* 7. Search overlay — Bootstrap modal is too heavy for this */
.cjs-search {
  display: none; position: fixed; inset: 0; z-index: 1050;
  background: rgba(0,0,0,.65); backdrop-filter: blur(6px);
  justify-content: center; padding-top: 14vh;
}
.cjs-search.show { display: flex; }
.cjs-search input { background: none; border: none; outline: none; color: var(--bs-body-color); font-size: 1rem; flex: 1; }
.cjs-search input::placeholder { color: #484f58; }
.cjs-search-results { overflow-y: auto; max-height: 340px; }
.cjs-search-hit:hover, .cjs-search-hit.focused { background: rgba(34,197,94,.08); }

/* 8. Card hover for section cards */
.cjs-card-hover { transition: transform .25s, border-color .25s, box-shadow .25s; }
.cjs-card-hover:hover {
  transform: translateY(-3px);
  border-color: rgba(34,197,94,.4) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
}

/* 9. Navbar backdrop blur — Bootstrap .navbar doesn't do this */
.cjs-nav-blur {
  background: rgba(13,17,23,.8) !important;
  backdrop-filter: blur(12px) saturate(1.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
}