/* ════════════════════════════════════════════════════════════
   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: 1.15rem; margin: 0; line-height: 1.3; }
.kkb-article-list .a { display: block; font-size: .88rem; color: #777; margin-top: .25rem; }

/* ── Glossary / Woordenlijst ────────────────────────────── */
.kkb-glossary-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 2rem;
}
.kkb-glossary-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 6px;
    background: #f3f4f6;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    color: #333;
    transition: background .15s, color .15s;
}
.kkb-glossary-nav a:hover {
    background: var(--kkb-accent, #0073aa);
    color: #fff;
}
.kkb-glossary-group { margin-bottom: 2rem; }
.kkb-glossary-letter {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    padding-bottom: .25rem;
    border-bottom: 2px solid var(--kkb-accent, #0073aa);
    display: inline-block;
}
.kkb-glossary-terms { margin: 0; padding: 0; }
.kkb-glossary-terms dt {
    font-weight: 600;
    font-size: 1.05rem;
    margin: .75rem 0 .15rem;
}
.kkb-glossary-terms dt a {
    text-decoration: none;
    color: inherit;
}
.kkb-glossary-terms dt a:hover { color: var(--kkb-accent, #0073aa); }
.kkb-glossary-terms dd {
    margin: 0 0 0 0;
    font-size: .9rem;
    color: #666;
}

/* ── 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; }

/* ════════════════════════════════════════════════════════════
   HOW-TO — genummerde stappen + tools-blok
═══════════════════════════════════════════════════════════ */

/* Badge bovenaan */
.kkb-type-badge {
    display: inline-block;
    padding: .15rem .55rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-radius: 4px;
    margin-right: .75rem;
    vertical-align: middle;
}
.kkb-type-howto {
    background: color-mix(in srgb, var(--kkb-accent) 12%, white);
    color: var(--kkb-accent);
}
.kkb-type-definitie {
    background: #e8f5e9;
    color: #2e7d32;
}

/* Link naar woordenlijst op archief */
.kkb-glossary-link {
    margin-top: 2rem;
    text-align: center;
}
.kkb-glossary-link a {
    display: inline-block;
    padding: .75rem 1.5rem;
    background: #f3f4f6;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    color: #333;
    transition: background .15s;
}
.kkb-glossary-link a:hover {
    background: #e4e6ea;
}

/* Tools-blok bovenaan het artikel */
.kkb-howto-tools {
    background: #fafbfc;
    border: 1px solid #e4e6ea;
    border-left: 4px solid var(--kkb-accent);
    border-radius: 0 8px 8px 0;
    padding: 1.25rem 1.5rem;
    margin: 0 0 2rem;
}
.kkb-howto-tools-title {
    margin: 0 0 .75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--kkb-accent);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.kkb-howto-tools-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 2rem;
}
@media (max-width: 600px) {
    .kkb-howto-tools-list { columns: 1; }
}
.kkb-howto-tools-list li {
    line-height: 1.55;
    margin: .2rem 0;
    padding-left: 1.25rem;
    position: relative;
    break-inside: avoid;
}
.kkb-howto-tools-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--kkb-accent);
    font-weight: 700;
}

/* Genummerde stappen — H2 met nummer-bolletje */
.kkb-article--howto .kkb-content h2.kkb-howto-step {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 2.5rem 0 1rem;
    padding-top: 1rem;
    border-top: 1px solid #ececec;
    font-size: 1.35rem;
    line-height: 1.3;
}
.kkb-article--howto .kkb-content h2.kkb-howto-step:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 1rem;
}
.kkb-howto-step .kkb-step-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--kkb-accent);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
}
.kkb-howto-step .kkb-step-title {
    flex: 1 1 auto;
    font-weight: 700;
    color: #222;
}

/* ════════════════════════════════════════════════════════════
   SMART 404 — "Bedoel je…?" suggesties
═══════════════════════════════════════════════════════════ */

.kkb-404 {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 0;
}
.kkb-404-eyebrow {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .75rem;
    font-weight: 700;
    color: #999;
    margin: 0 0 .5rem;
}
.kkb-404-title {
    font-size: 1.85rem;
    line-height: 1.25;
    margin: 0 0 .75rem;
    font-weight: 700;
}
.kkb-404-lead {
    color: #555;
    line-height: 1.6;
    margin: 0 0 2rem;
    max-width: 60ch;
}
.kkb-404-search {
    margin: 0 0 2rem;
}
.kkb-404-suggestions-title {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #999;
    margin: 0 0 .75rem;
    font-weight: 700;
}
.kkb-404-suggestions {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    border-top: 1px solid #ececec;
}
.kkb-404-suggestions li {
    border-bottom: 1px solid #ececec;
}
.kkb-404-suggestions a {
    display: block;
    padding: 1rem .25rem;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.kkb-404-suggestions a:hover {
    background: #fafbfc;
}
.kkb-404-suggestions a:hover .kkb-404-q {
    color: var(--kkb-accent);
}
.kkb-404-q {
    display: block;
    font-weight: 600;
    font-size: 1.05rem;
    color: #222;
    margin-bottom: .25rem;
}
.kkb-404-a {
    display: block;
    font-size: .9rem;
    color: #666;
    line-height: 1.5;
}
.kkb-404-back {
    margin-top: 2rem;
}
.kkb-404-back a {
    color: var(--kkb-accent);
    text-decoration: none;
    font-weight: 500;
}
.kkb-404-back a:hover {
    text-decoration: underline;
}

/* ── 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;
}