/* Dark theme overrides for jaspr_content DocsLayout chrome */

/* ─── Fonts ─────────────────────────────────────────────────── */

body,
.sidebar,
.header,
.content {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code, kbd, pre, samp,
.sidebar-group h3 {
  font-family: 'JetBrains Mono', monospace;
}

/* ─── Header ────────────────────────────────────────────────── */

/* .header-container is position:fixed from DocsLayout; the .navbar inside it
   must be position:relative so it flows normally inside the fixed container. */
.header-container .navbar {
  position: relative;
  /* Container provides the backdrop-filter, so suppress the duplicate. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  border-bottom: none;
}

.header-container {
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.07));
}

.header {
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

.header-title {
  color: #ececec !important;
  text-decoration: none !important;
}
.header-title:hover {
  color: #ffffff !important;
}
.header-title img {
  filter: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #707070;
  text-decoration: none;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.nav-link:hover {
  color: #ececec;
  background: rgba(255, 255, 255, 0.06);
}
.nav-link.active {
  color: #82acf3;
}

/* ─── Sidebar ───────────────────────────────────────────────── */

.sidebar-group h3 {
  color: #4a4a4a !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.sidebar-group li div {
  color: #707070;
  opacity: 1 !important;
}
.sidebar-group li div:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ececec;
}
.sidebar-group li div.active {
  color: #82acf3 !important;
  background: rgba(91, 141, 238, 0.1) !important;
  font-weight: 500 !important;
}
.sidebar-group li a {
  color: inherit;
  text-decoration: none;
}

/* ─── Content header (page title + description) ─────────────── */

.content-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 1.75rem;
  margin-bottom: 2rem !important;
}
.content-header h1 {
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2 !important;
}
.content-header p {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  margin-top: 0.625rem !important;
}

/* ─── Typography ────────────────────────────────────────────── */

.content h2 { letter-spacing: -0.025em; }
.content h3 { letter-spacing: -0.02em; }

.content code {
  font-size: 0.875em;
  background: rgba(255, 255, 255, 0.07);
  padding: 0.125em 0.35em;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.content pre {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.content pre::-webkit-scrollbar {
  height: 4px;
}
.content pre::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
}
.content pre::-webkit-scrollbar-track {
  background: transparent;
}
.content pre code {
  background: none;
  border: none;
  padding: 0;
}

/* ─── Table of contents ─────────────────────────────────────── */

aside.toc h3 {
  color: #4a4a4a !important;
  text-transform: uppercase;
  font-size: 0.6875rem !important;
  letter-spacing: 0.07em;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500 !important;
}
aside.toc a {
  color: #5a5a5a;
  text-decoration: none;
}
aside.toc a:hover {
  color: #ececec;
}