/* ==========================================================================
   Vloerengarant — kennisbank & doe-het-zelf-hub
   Laadt alleen op artikelen, blogoverzicht/archieven en /zelf-je-vloer-leggen/
   (zie functions.php). Tokens komen uit theme.css (bosgroen / zand / koper).
   ========================================================================== */

/* ---- Breadcrumb ---- */
.vg-breadcrumb { font-size: 14px; color: var(--vg-muted); margin: 0 0 24px; }
.vg-breadcrumb a { color: var(--vg-muted); text-decoration: none; }
.vg-breadcrumb a:hover { color: var(--vg-copper-dark); text-decoration: underline; }
.vg-breadcrumb__sep { margin: 0 7px; color: var(--vg-copper); }
.vg-breadcrumb [aria-current="page"] { color: var(--vg-green-900); font-weight: 600; }

/* ---- Categorielabel (pill, gedeeld door artikelkop en kaarten) ---- */
.vg-kb-cat {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--vg-green-050);
    color: var(--vg-green-700);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
}
.vg-kb-cat:hover { background: var(--vg-green-800); color: #fff; }

/* ==========================================================================
   Artikel (single.php)
   ========================================================================== */
.vg-kb-article__head { max-width: 76ch; }
.vg-kb-article__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    color: var(--vg-muted);
    font-size: 14px;
}
.vg-kb-article__head h1 { margin-bottom: 0; }

.vg-kb-article__figure { margin: 26px 0 0; max-width: 860px; }
.vg-kb-article__figure img { border-radius: var(--vg-radius); display: block; }

/* Artikelbody-typografie: rustig leesritme binnen de bestaande 76ch. */
.vg-kb-article .vg-article__body { margin-top: 18px; }
.vg-kb-article .vg-article__body h2 { margin: 1.7em 0 0.5em; scroll-margin-top: 130px; }
.vg-kb-article .vg-article__body h3 { margin: 1.4em 0 0.4em; }
.vg-kb-article .vg-article__body p { margin: 0 0 1.1em; }
.vg-kb-article .vg-article__body ul,
.vg-kb-article .vg-article__body ol { margin: 0 0 1.2em; padding-left: 22px; }
.vg-kb-article .vg-article__body li { margin-bottom: 6px; }
.vg-kb-article .vg-article__body a { color: var(--vg-green-600); text-decoration-color: var(--vg-copper); text-underline-offset: 2px; }
.vg-kb-article .vg-article__body a:hover { color: var(--vg-copper-dark); }
.vg-kb-article .vg-article__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.4em;
    font-size: 15px;
    background: #fff;
    border: 1px solid var(--vg-line);
    border-radius: var(--vg-radius);
    overflow: hidden;
}
.vg-kb-article .vg-article__body th,
.vg-kb-article .vg-article__body td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--vg-line); }
.vg-kb-article .vg-article__body th { background: var(--vg-sand); font-weight: 700; }
.vg-kb-article .vg-article__body tr:last-child td { border-bottom: 0; }

/* Uitgelichte tip/opletblokken in artikelcontent. */
.vg-article__body .vg-kb-tip {
    background: var(--vg-sand);
    border-left: 4px solid var(--vg-copper);
    border-radius: 0 var(--vg-radius) var(--vg-radius) 0;
    padding: 16px 20px;
    margin: 0 0 1.4em;
}
.vg-article__body .vg-kb-tip p:last-child { margin-bottom: 0; }

/* ---- Inhoudsopgave (Knowledge-module, .vs-kb-toc) ---- */
.vs-kb-toc {
    background: var(--vg-sand);
    border: 1px solid var(--vg-line);
    border-radius: var(--vg-radius);
    padding: 20px 26px;
    margin: 0 0 30px;
}
.vs-kb-toc__title {
    margin: 0 0 8px;
    font-weight: 800;
    font-size: 16px;
    color: var(--vg-green-900);
    letter-spacing: 0.01em;
}
.vs-kb-toc__list { margin: 0; padding-left: 20px; }
.vs-kb-toc__list li { margin: 4px 0; }
.vs-kb-toc__list li::marker { color: var(--vg-copper); font-weight: 700; }
.vs-kb-toc__list a { color: var(--vg-green-700); text-decoration: none; }
.vs-kb-toc__list a:hover { color: var(--vg-copper-dark); text-decoration: underline; }

/* ---- Ingesloten productkaarten ([vs_product_kaarten]) ---- */
.vs-kb-cards { margin: 28px 0 34px; }

/* ==========================================================================
   Kaartengrid (archief + "Ook interessant")
   ========================================================================== */
.vg-kb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 28px 0 36px;
}

.vg-kb-card {
    display: flex;
    flex-direction: column;
    background: var(--vg-white);
    border: 1px solid var(--vg-line);
    border-radius: var(--vg-radius);
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.vg-kb-card:hover { box-shadow: var(--vg-shadow); transform: translateY(-2px); }

.vg-kb-card__media { display: block; aspect-ratio: 16 / 9; background: var(--vg-sand-deep); }
.vg-kb-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vg-kb-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(120deg, var(--vg-green-800) 0%, var(--vg-green-600) 60%, var(--vg-copper) 140%);
}

.vg-kb-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.vg-kb-card__meta { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13.5px; color: var(--vg-muted); }
.vg-kb-card__title { margin: 0; font-size: 18px; line-height: 1.35; }
.vg-kb-card__title a { color: var(--vg-green-900); text-decoration: none; }
.vg-kb-card__title a:hover { color: var(--vg-copper-dark); }
.vg-kb-card__excerpt { margin: 0; font-size: 15px; color: var(--vg-muted); }
.vg-kb-card__more { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: 14.5px; color: var(--vg-copper-dark); }

/* ==========================================================================
   Archiefkop + filterpillen + paginering (archive.php)
   ========================================================================== */
.vg-kb-archive__head { max-width: 76ch; }
.vg-kb-archive__intro { color: var(--vg-muted); font-size: 17px; margin: 6px 0 0; }

.vg-kb-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 4px; }
.vg-kb-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1.5px solid var(--vg-line);
    background: var(--vg-white);
    color: var(--vg-green-800);
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.vg-kb-pill:hover { border-color: var(--vg-green-600); color: var(--vg-green-800); }
.vg-kb-pill.is-active { background: var(--vg-green-800); border-color: var(--vg-green-800); color: #fff; }

.vg-kb-empty { color: var(--vg-muted); margin: 30px 0 60px; }

.vg-kb .navigation.pagination { margin: 8px 0 30px; }
.vg-kb .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vg-kb .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--vg-line);
    color: var(--vg-green-800);
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
    background: var(--vg-white);
}
.vg-kb .page-numbers:hover { border-color: var(--vg-green-600); }
.vg-kb .page-numbers.current { background: var(--vg-green-800); border-color: var(--vg-green-800); color: #fff; }
.vg-kb .page-numbers.dots { border: 0; background: none; }

/* ==========================================================================
   "Ook interessant" + CTA (single.php)
   ========================================================================== */
.vg-kb-related { margin: 48px 0 0; padding-top: 34px; border-top: 1px solid var(--vg-line); }
.vg-kb-related__title { margin-bottom: 4px; }
.vg-kb-grid--related { margin-top: 20px; }

.vg-kb-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    background: var(--vg-green-800);
    border-radius: var(--vg-radius);
    padding: 34px 38px;
    margin: 44px 0 10px;
}
.vg-kb-cta h2 { color: #fff; margin-bottom: 6px; }
.vg-kb-cta p { color: #cfdcd2; margin: 0; max-width: 62ch; }
.vg-kb-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* Ghost-knop op donkere fond: lichte rand + tekst. */
.vg-kb-cta .vg-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.65); }
.vg-kb-cta .vg-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* ==========================================================================
   Doe-het-zelf-hub (/zelf-je-vloer-leggen/, gewone pagina)
   ========================================================================== */
/* De hub rendert via page.php (body 76ch); dit stylesheet laadt van alle
   pagina's alléén hier (zie functions.php), dus .page is veilig te scopen:
   grid op volle breedte, lopende tekst leesbaar op 76ch. */
.page .vg-article__body { max-width: none; }
.page .vg-article__body > p,
.page .vg-article__body > h2,
.page .vg-article__body > h3,
.page .vg-article__body > ul,
.page .vg-article__body > ol { max-width: 76ch; }

.vg-dhz-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 28px 0 10px;
}
.vg-dhz-card {
    background: var(--vg-white);
    border: 1px solid var(--vg-line);
    border-radius: var(--vg-radius);
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vg-dhz-card h2 { font-size: 21px; margin: 0; }
.vg-dhz-level { margin: 0; font-size: 14px; color: var(--vg-muted); }
.vg-dhz-level b { color: var(--vg-copper); letter-spacing: 3px; font-weight: 400; margin-left: 6px; }
.vg-dhz-card ul { list-style: none; margin: 4px 0 6px; padding: 0; }
.vg-dhz-card ul li { position: relative; padding-left: 24px; margin-bottom: 6px; font-size: 15px; }
.vg-dhz-card ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--vg-copper);
    font-weight: 800;
}
.vg-dhz-card__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: auto; padding-top: 6px; }
.vg-dhz-card__links a { font-weight: 700; font-size: 14.5px; color: var(--vg-green-600); text-decoration: none; }
.vg-dhz-card__links a:hover { color: var(--vg-copper-dark); text-decoration: underline; }

/* ---- Responsief ---- */
@media (max-width: 980px) {
    .vg-kb-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .vg-dhz-grid { grid-template-columns: 1fr; }
    .vg-kb-cta { padding: 28px 26px; }
}
@media (max-width: 620px) {
    .vg-kb-grid { grid-template-columns: 1fr; }
    .vg-kb-article__meta { flex-wrap: wrap; }
}