/* ════════════════════════════════════════════════════════════
   Kennisbank-Notion v2 — frontend styles
   Custom property --kkb-accent komt uit plugin-instellingen.
═══════════════════════════════════════════════════════════ */

.kkb-container {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 1.25rem;
}

/* ── Breadcrumbs ────────────────────────────────────────── */
.kkb-breadcrumbs {
    font-size: .85rem;
    color: #777;
    margin-bottom: 1.5rem;
}
.kkb-breadcrumbs a { color: #777; text-decoration: none; }
.kkb-breadcrumbs a:hover { text-decoration: underline; }
.kkb-breadcrumbs .sep { margin: 0 .35rem; opacity: .6; }

/* ── Headings ───────────────────────────────────────────── */
.kkb-page-title  { font-size: 2rem;   font-weight: 700; margin: 0 0 .75rem; line-height: 1.2; }
.kkb-page-intro  { font-size: 1.05rem; color: #555; margin: 0 0 2rem; max-width: 60ch; }

/* ════════════════════════════════════════════════════════════
   ARCHIEF — zoekbalk + categorie-kaarten
═══════════════════════════════════════════════════════════ */

/* ── Zoekbalk ───────────────────────────────────────────── */
.kkb-search {
    position: relative;
    margin: 0 0 2.5rem;
}
.kkb-search-label {
    position: absolute;
    left: -9999px;
}
.kkb-search-input {
    width: 100%;
    padding: 1rem 1.25rem 1rem 3rem;
    font-size: 1rem;
    border: 2px solid #e4e6ea;
    border-radius: 10px;
    background: #fff
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat 1rem center;
    transition: border-color .15s, box-shadow .15s;
}
.kkb-search-input:focus {
    outline: none;
    border-color: var(--kkb-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kkb-accent) 15%, transparent);
}
.kkb-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e4e6ea;
    border-radius: 10px;
    list-style: none;
    margin: .5rem 0 0;
    padding: .25rem;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 12px 32px rgba(0,0,0,.08);
    z-index: 50;
}
.kkb-search-results li { padding: 0; margin: 0; }
.kkb-search-results a {
    display: block;
    padding: .7rem .9rem;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
}
.kkb-search-results a:hover,
.kkb-search-results a[aria-selected="true"] { background: #f5f7fa; }
.kkb-search-results .r-title { font-weight: 600; color: #222; }
.kkb-search-results .r-cat {
    font-size: .75rem;
    color: #888;
    margin-left: .5rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.kkb-search-results .r-excerpt {
    display: block;
    font-size: .88rem;
    color: #666;
    margin-top: .2rem;
}
.kkb-search-results mark { background: color-mix(in srgb, var(--kkb-accent) 25%, transparent); padding: 0 .15em; }
.kkb-search-empty {
    padding: 1rem;
    font-size: .9rem;
    color: #888;
    text-align: center;
}

/* ── Categorie-kaarten ──────────────────────────────────── */
.kkb-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.kkb-cat-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #e4e6ea;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.kkb-cat-card:hover {
    border-color: var(--kkb-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.kkb-cat-card h2 {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
    color: var(--kkb-accent);
}
.kkb-cat-card-count {
    font-size: .85rem;
    color: #888;
    margin-top: auto;
}
.kkb-cat-card-preview {
    font-size: .9rem;
    color: #555;
    margin: .25rem 0 .75rem;
    line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   TAXONOMIE + SINGLE — 2 koloms
═══════════════════════════════════════════════════════════ */

.kkb-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 3rem;
    align-items: start;
}
@media (max-width: 860px) {
    .kkb-layout { grid-template-columns: 1fr; }
    .kkb-sidebar { order: 2; border-top: 1px solid #eee; padding-top: 1.5rem; margin-top: 1rem; }
    .kkb-main    { order: 1; }
}

/* ── Sidebar ───────────────────────────────────────────── */
.kkb-sidebar {
    position: sticky;
    top: 2rem;
    font-size: .92rem;
}
.kkb-sidebar h3 {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #999;
    margin: 0 0 .75rem;
}
.kkb-sidebar-cats { list-style: none; padding: 0; margin: 0; }
.kkb-sidebar-cats > li { border-bottom: 1px solid #f0f0f0; }
.kkb-sidebar-cat {
    display: block;
    padding: .55rem .25rem;
    text-decoration: none;
    color: #444;
}
.kkb-sidebar-cat:hover,
.kkb-sidebar-cat.is-active { color: var(--kkb-accent); font-weight: 600; }

.kkb-sidebar-articles {
    list-style: none;
    padding: .25rem 0 .5rem .75rem;
    margin: 0;
    border-left: 2px solid #ececec;
}
.kkb-sidebar-articles a {
    display: block;
    padding: .3rem 0;
    font-size: .87rem;
    color: #555;
    text-decoration: none;
    line-height: 1.4;
}
.kkb-sidebar-articles a:hover { color: var(--kkb-accent); }
.kkb-sidebar-articles li.is-current a { color: var(--kkb-accent); font-weight: 600; }

/* ── Artikellijst (taxonomie) ───────────────────────────── */
.kkb-article-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.kkb-article-list li {
    border-bottom: 1px solid #ececec;
}
.kkb-article-list a {
    display: block;
    padding: 1rem .25rem;
    text-decoration: none;
    color: inherit;
}
.kkb-article-list a:hover { color: var(--kkb-accent); }
.kkb-article-list .q { font-weight: 600; font-size: 1rem; }
.kkb-article-list .a { display: block; font-size: .88rem; color: #777; margin-top: .25rem; }

/* ── Artikel-content ────────────────────────────────────── */
.kkb-article { min-width: 0; }
.kkb-article h1 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 1.25rem; font-weight: 700; }
.kkb-article-meta { color: #888; font-size: .82rem; margin-bottom: 1.5rem; }
.kkb-content p { line-height: 1.75; margin: 0 0 1rem; }
.kkb-content ul, .kkb-content ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.kkb-content li { line-height: 1.7; margin-bottom: .3rem; }
.kkb-content h2 { font-size: 1.3rem; margin: 2rem 0 .75rem; }
.kkb-content h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.kkb-content a { color: var(--kkb-accent); }

.kkb-callout {
    display: flex;
    gap: .75rem;
    background: #f5f7fa;
    border-left: 4px solid var(--kkb-accent);
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    border-radius: 0 6px 6px 0;
}
.kkb-callout-icon { flex: 0 0 auto; font-size: 1.2rem; line-height: 1; }

.kkb-quote {
    border-left: 3px solid #ddd;
    padding-left: 1rem;
    color: #555;
    font-style: italic;
    margin: 1.25rem 0;
}

.kkb-code {
    background: #1e1f25;
    color: #f0f1f5;
    padding: 1rem 1.2rem;
    border-radius: 6px;
    overflow-x: auto;
    font-size: .88rem;
    line-height: 1.55;
    margin: 1.25rem 0;
}

.kkb-toggle {
    background: #fafbfc;
    border: 1px solid #e4e6ea;
    border-radius: 8px;
    padding: .5rem 1rem;
    margin: 1rem 0;
}
.kkb-toggle summary {
    cursor: pointer;
    font-weight: 600;
    padding: .5rem 0;
    list-style: none;
}
.kkb-toggle summary::-webkit-details-marker { display: none; }
.kkb-toggle summary::before {
    content: "▸";
    display: inline-block;
    margin-right: .5rem;
    transition: transform .15s;
    color: var(--kkb-accent);
}
.kkb-toggle[open] summary::before { transform: rotate(90deg); }

.kkb-image { margin: 1.5rem 0; }
.kkb-image img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}
.kkb-image figcaption {
    font-size: .85rem;
    color: #777;
    margin-top: .5rem;
    text-align: center;
}

.kkb-table-wrap { overflow-x: auto; margin: 1.5rem 0; }
.kkb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}
.kkb-table th, .kkb-table td {
    padding: .65rem .9rem;
    border: 1px solid #e4e6ea;
    text-align: left;
    vertical-align: top;
}
.kkb-table thead th {
    background: #f5f7fa;
    font-weight: 600;
}

/* ── Hulp-blok ──────────────────────────────────────────── */
.kkb-help {
    margin: 2.5rem 0 1rem;
    padding: 1.5rem;
    background: #fafbfc;
    border: 1px solid #e4e6ea;
    border-radius: 10px;
}
.kkb-help-title { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 600; }
.kkb-help-text  { margin: 0 0 1rem; color: #555; }
.kkb-help-cta {
    display: inline-block;
    padding: .65rem 1.25rem;
    background: var(--kkb-accent);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
}
.kkb-help-cta:hover { filter: brightness(.92); color: #fff; }

/* ── Gerelateerd ────────────────────────────────────────── */
.kkb-related { margin-top: 2.5rem; }
.kkb-related-title {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #999;
    margin: 0 0 .75rem;
}
.kkb-related-list { list-style: none; padding: 0; margin: 0; }
.kkb-related-list li { border-bottom: 1px solid #f0f0f0; }
.kkb-related-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem .25rem;
    text-decoration: none;
    color: inherit;
    gap: 1rem;
}
.kkb-related-list a:hover .kkb-related-q { color: var(--kkb-accent); }
.kkb-related-q { font-weight: 500; }
.kkb-related-cat {
    font-size: .75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .05em;
    flex-shrink: 0;
}