/* ════════════════════════════════════════════════════════════
   TaskForm Kennisbank — frontend styles
   Accentkleur via --tfkb-accent (standaard: #0073aa)
═══════════════════════════════════════════════════════════ */

:root { --tfkb-accent: #0073aa; }

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

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

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

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

/* ── Zoekbalk ────────────────────────────────────────────── */
.tfkb-search { position: relative; margin: 0 0 2.5rem; }
.tfkb-search-label { position: absolute; left: -9999px; }
.tfkb-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;
    box-sizing: border-box;
}
.tfkb-search-input:focus {
    outline: none;
    border-color: var(--tfkb-accent);
    box-shadow: 0 0 0 3px rgba(0, 115, 170, .15);
}

/* ── Categorie-kaarten ───────────────────────────────────── */
.tfkb-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.tfkb-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;
}
.tfkb-cat-card:hover {
    border-color: var(--tfkb-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.tfkb-cat-card h2 { margin: 0 0 .5rem; font-size: 1.15rem; color: var(--tfkb-accent); }
.tfkb-cat-card-count { font-size: .85rem; color: #888; margin-top: auto; padding-top: .75rem; }
.tfkb-cat-card-preview { font-size: .9rem; color: #555; margin: .25rem 0 .75rem; line-height: 1.5; }

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

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

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

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

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

/* ── Artikel-content ─────────────────────────────────────── */
.tfkb-article { min-width: 0; }
.tfkb-article-meta { color: #888; font-size: .82rem; margin-bottom: 1.5rem; }
.tfkb-content p { line-height: 1.75; margin: 0 0 1rem; }
.tfkb-content ul, .tfkb-content ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.tfkb-content li { line-height: 1.7; margin-bottom: .3rem; }
.tfkb-content h2 { font-size: 1.3rem; margin: 2rem 0 .75rem; }
.tfkb-content h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.tfkb-content a { color: var(--tfkb-accent); }
.tfkb-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 1rem 0; }
.tfkb-content pre, .tfkb-content code {
    background: #1e1f25;
    color: #f0f1f5;
    border-radius: 6px;
    font-size: .88rem;
}
.tfkb-content pre { padding: 1rem 1.2rem; overflow-x: auto; margin: 1.25rem 0; }
.tfkb-content code { padding: .15em .4em; }
.tfkb-content pre code { padding: 0; background: none; }
.tfkb-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .92rem; }
.tfkb-content th, .tfkb-content td { padding: .65rem .9rem; border: 1px solid #e4e6ea; text-align: left; vertical-align: top; }
.tfkb-content thead th { background: #f5f7fa; font-weight: 600; }

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

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