/* ═══════════════════════════════════════════════════════════════
   Docs — syntax highlighting, code blocks, nav, copy button
   ═══════════════════════════════════════════════════════════════ */

.code-block {
  background: #1e1e2e; color: #cdd6f4;
  border-radius: 0.5rem; padding: 1rem 1.25rem;
  overflow-x: auto; font-size: 0.8125rem; line-height: 1.7;
  font-family: var(--mk-font-mono), 'SF Mono', Menlo, monospace;
}
.code-block .comment { color: #6c7086; }
.code-block .string { color: #a6e3a1; }
.code-block .keyword { color: #cba6f7; }
.code-block .attr { color: #89b4fa; }
.code-block .number { color: #fab387; }

.code-inline {
  background: hsl(0 0% 96%); color: var(--foreground);
  padding: 0.125rem 0.375rem; border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: var(--mk-font-mono), 'SF Mono', Menlo, monospace;
}

/* Sidebar active state */
.nav-link { transition: all 0.15s ease; }
.nav-link.active {
  color: var(--foreground); font-weight: 600;
  background: var(--mkt-sage-soft); border-radius: var(--radius-md);
}
.nav-link:not(.active):hover { color: var(--foreground); }

/* Copy button */
.copy-btn {
  position: absolute; top: 0.5rem; right: 0.5rem;
  background: rgba(255,255,255,0.1); border: none;
  color: #a6adc8; padding: 0.25rem 0.5rem;
  border-radius: 0.25rem; font-size: 0.75rem;
  cursor: pointer; opacity: 0;
  transition: opacity 0.15s ease;
}
.code-wrapper:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }

/* Smooth heading anchors */
h2[id], h3[id] { scroll-margin-top: 5rem; }