/* PresentTool™ — Documentatie */
:root {
  --pt-primary:   #8B4513;
  --pt-secondary: #C8956C;
  --pt-text:      #1A1A1A;
  --pt-muted:     #6B6B6B;
  --pt-bg:        #FAFAF8;
  --pt-surface:   #FFFFFF;
  --pt-border:    #E5E5E0;
  --pt-sidebar-w: 240px;
  --pt-ok:        #22C55E;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { display: flex; min-height: 100vh; background: var(--pt-bg); color: var(--pt-text); }
a { color: var(--pt-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
.skip-link { position:absolute;top:-40px;left:8px;z-index:9999;background:var(--pt-primary);color:#fff;padding:6px 12px;border-radius:0 0 6px 6px;font-size:13px;font-weight:600;transition:top 140ms; }
.skip-link:focus { top:0; }
:focus-visible { outline: 2px solid var(--pt-primary); outline-offset: 2px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* ─── Sidebar ──────────────────────────────────────────────────────────── */
.docs-sidebar {
  width: var(--pt-sidebar-w); min-width: var(--pt-sidebar-w);
  background: var(--pt-surface); border-right: 1px solid var(--pt-border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  overflow-y: auto; scrollbar-width: thin;
}
.docs-brand {
  padding: 16px; border-bottom: 1px solid var(--pt-border);
  display: flex; align-items: center; gap: 10px;
}
.docs-logo { height: 26px; }
.docs-brand-tag {
  background: rgba(139,69,19,0.1); color: var(--pt-primary);
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .04em;
}
.docs-nav { flex: 1; padding: 12px 0; }
.docs-nav-group { margin-bottom: 20px; }
.docs-nav-label {
  padding: 0 16px 6px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--pt-muted);
}
.docs-nav-item {
  display: block; padding: 6px 16px; font-size: 13px; color: var(--pt-muted);
  border-left: 2px solid transparent; transition: color 140ms, background 140ms;
}
.docs-nav-item:hover { color: var(--pt-text); background: rgba(0,0,0,0.03); text-decoration: none; }
.docs-nav-item.is-active { color: var(--pt-primary); border-left-color: var(--pt-primary); background: rgba(139,69,19,0.05); font-weight: 600; }
.docs-sidebar-footer {
  padding: 12px 16px; border-top: 1px solid var(--pt-border);
  display: flex; flex-direction: column; gap: 6px;
}
.docs-footer-link { font-size: 12px; color: var(--pt-muted); }
.docs-footer-link:hover { color: var(--pt-primary); }

/* ─── Main ─────────────────────────────────────────────────────────────── */
.docs-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.docs-topbar {
  display: flex; align-items: center; gap: 12px; padding: 0 24px; height: 52px;
  background: var(--pt-surface); border-bottom: 1px solid var(--pt-border);
  position: sticky; top: 0; z-index: 10;
}
.docs-menu-btn { display: none; background: none; border: none; cursor: pointer; color: var(--pt-muted); padding: 4px; }
.docs-search-wrap { flex: 1; max-width: 400px; }
.docs-search {
  width: 100%; padding: 7px 12px; border: 1px solid var(--pt-border);
  border-radius: 7px; font-size: 13px; background: var(--pt-bg);
  color: var(--pt-text); outline: none;
}
.docs-search:focus { border-color: var(--pt-primary); }
.docs-topbar-logo { margin-left: auto; }

.docs-content {
  flex: 1; padding: 40px 48px; max-width: 800px;
}

/* ─── Typography ────────────────────────────────────────────────────────── */
.docs-content h1 { font-family:"Source Serif 4",serif; font-size:32px; font-weight:600; margin-bottom:10px; line-height:1.2; }
.docs-content h2 { font-family:"Source Serif 4",serif; font-size:22px; font-weight:600; margin:32px 0 10px; border-bottom:1px solid var(--pt-border); padding-bottom:8px; }
.docs-content h3 { font-size:16px; font-weight:700; margin:24px 0 8px; }
.docs-content p { margin-bottom:14px; color:#333; }
.docs-content ul, .docs-content ol { margin:0 0 14px 20px; }
.docs-content li { margin-bottom:5px; }
.docs-content code {
  font-family:ui-monospace,monospace; font-size:12.5px;
  background:rgba(139,69,19,0.06); color:var(--pt-primary);
  padding:2px 5px; border-radius:4px;
}
.docs-content pre {
  background:#1C1C1A; color:#f0e8d8; border-radius:8px;
  padding:16px 18px; margin:14px 0; overflow-x:auto; font-size:13px; line-height:1.6;
}
.docs-content pre code { background:none; color:inherit; padding:0; }
.docs-content blockquote {
  border-left: 3px solid var(--pt-secondary); padding: 10px 16px;
  background: rgba(200,149,108,0.07); border-radius: 0 6px 6px 0; margin:14px 0;
}
.docs-content blockquote p { color:var(--pt-text); margin:0; }
.docs-content table { width:100%; border-collapse:collapse; margin:14px 0; font-size:13px; }
.docs-content th { text-align:left; padding:8px 12px; background:rgba(0,0,0,0.04); border:1px solid var(--pt-border); font-weight:600; }
.docs-content td { padding:8px 12px; border:1px solid var(--pt-border); }
.docs-content .badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600; }
.docs-content .badge-new   { background:rgba(34,197,94,.12);  color:#16a34a; }
.docs-content .badge-fix   { background:rgba(59,130,246,.12); color:#2563eb; }
.docs-content .badge-break { background:rgba(239,68,68,.12);  color:#dc2626; }

/* ─── Step cards ────────────────────────────────────────────────────────── */
.step-card {
  border: 1px solid var(--pt-border); border-radius: 10px; padding: 18px 20px;
  margin-bottom: 14px; display: flex; gap: 16px; align-items: flex-start;
}
.step-num {
  width: 32px; height: 32px; border-radius: 50%; background: var(--pt-primary);
  color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.step-body h3 { margin: 0 0 4px; font-size: 14px; }
.step-body p  { margin: 0; font-size: 13px; color: var(--pt-muted); }

/* ─── Callout ───────────────────────────────────────────────────────────── */
.callout { border-radius: 8px; padding: 12px 16px; margin: 14px 0; font-size: 13px; display: flex; gap: 10px; align-items: flex-start; }
.callout-tip  { background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.2); }
.callout-warn { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.2); }
.callout-info { background: rgba(139,69,19,.07); border: 1px solid rgba(139,69,19,.2); }
.callout-icon { font-size: 16px; flex-shrink: 0; }

/* ─── Search results ────────────────────────────────────────────────────── */
.docs-search-results { position:absolute; top:52px; left:0; right:0; background:var(--pt-surface); border-bottom:1px solid var(--pt-border); padding:8px 0; z-index:9; max-height:300px; overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,.08); }
.docs-search-result { padding:8px 24px; font-size:13px; cursor:pointer; }
.docs-search-result:hover { background:rgba(0,0,0,.04); }
.docs-search-result strong { color:var(--pt-primary); }

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .docs-sidebar { display: none; position: fixed; z-index: 200; }
  .docs-sidebar.is-open { display: flex; }
  .docs-menu-btn { display: flex; }
  .docs-content { padding: 24px 20px; }
}