/**
 * DePraktijkDigitaal — Leer Engine Override v1.0
 * Laad dit NA de originele leer-engine.css
 *
 * Overschrijft alleen de visuele tokens en font.
 * Alle functionele CSS (layouts, animaties, vraagtypen) blijft intact.
 */

/* ===== ZAKELIJKE DESIGN TOKENS ===== */
:root {
    /* Brand — DPD blauw ipv kids blauw */
    --kd-primary: #1A73B5;
    --kd-primary-dark: #155E95;
    --kd-primary-light: #EBF4FB;
    --kd-primary-glow: rgba(26, 115, 181, 0.35);

    /* Success — DPD groen */
    --kd-success: #0FA573;
    --kd-success-dark: #0C845C;
    --kd-success-light: #E8F7F0;
    --kd-success-glow: rgba(15, 165, 115, 0.35);

    /* Error — rustiger rood */
    --kd-error: #D43D3D;
    --kd-error-dark: #B32D2D;
    --kd-error-light: #FEF0F0;
    --kd-error-glow: rgba(212, 61, 61, 0.35);

    /* Warning / Accent */
    --kd-warning: #F5A623;
    --kd-purple: #7C3AED;
    --kd-purple-glow: rgba(124, 58, 237, 0.35);

    /* Neutrals — iets warmere grays */
    --kd-text: #111827;
    --kd-text-secondary: #6B7280;
    --kd-bg: #FFFFFF;
    --kd-card: #FFFFFF;
    --kd-border: #E2E5EB;

    /* Streak kleuren — professioneler */
    --streak-1: #1A73B5;
    --streak-2: #0FA573;
    --streak-3: #F5A623;
    --streak-4: #D85A30;
    --streak-5: #7C3AED;

    /* Radii — iets strakker voor zakelijk */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
}

/* ===== FONT OVERRIDE ===== */
body.kd-leer-fullscreen,
.kd-leer-engine,
.kd-leer-engine * {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ===== BUTTON OVERRIDE — DPD CTA stijl ===== */
.kd-btn-primary {
    background: #1A73B5;
    box-shadow: inset 0 -3px 0 rgba(21, 94, 149, 0.4);
    border-radius: 12px;
}

.kd-btn-primary:hover:not(:disabled) {
    background: #155E95;
    box-shadow: inset 0 -3px 0 rgba(21, 94, 149, 0.4);
}

.kd-btn-success {
    background: #0FA573;
    box-shadow: inset 0 -3px 0 #0C845C;
}

.kd-btn-success:hover:not(:disabled) {
    background: #0C845C;
    box-shadow: inset 0 -3px 0 #096346;
}

/* ===== HEADER — zakelijker ===== */
.kd-header-title {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ===== STREAK — "Op een rij" subtiel ===== */
.kd-streak-popup {
    font-weight: 600;
}

/* ===== PROGRESS BAR — DPD gradient ===== */
.kd-progress-fill {
    background: linear-gradient(90deg, #1A73B5, #0FA573);
}

/* ===== MEMORY CARD — zakelijker front ===== */
.kd-memory-card-front {
    background: linear-gradient(145deg, #1A73B5, #155E95);
}

/* ===== EINDSCHERM ===== */
.kd-end-badge {
    font-weight: 700;
}

/* ===== XP / NIVEAU — niet van toepassing bij DPD ===== */
.kd-xp-result,
.kd-xp-earned,
.kd-new-record,
.kd-level-bar,
.kd-level-progress,
.kd-level-fill,
.kd-level-label,
.kd-level-xp {
    display: none !important;
}

/* ===== MELDEN POPUP — boven de lesson overlay (z-index 999999) ===== */
.kd-report-overlay {
    z-index: 1000000 !important;
}

/* ===== OVERLAY: bedek ook de WordPress admin bar ===== */
body.admin-bar .kd-leer-overlay {
    top: 0 !important;
}

/* ===== TRAINING PAGINA: verberg header en footer ===== */
body.single-dpd_training .ct-header,
body.single-dpd_training header.site-header,
body.single-dpd_training #masthead {
    display: none !important;
}

body.single-dpd_training .ct-footer,
body.single-dpd_training footer.site-footer,
body.single-dpd_training #colophon {
    display: none !important;
}

/* Verwijder eventuele top-padding die Blocksy voor de header toevoegt */
body.single-dpd_training {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ===== FONT SIZES — compacter voor zakelijk ===== */
.kd-question-text {
    font-size: clamp(1.15rem, 3vw, 1.35rem);
}

.kd-question-hint {
    font-size: 0.88rem;
}

.kd-option-btn {
    padding: 16px 22px;
    font-size: 0.95rem;
    font-weight: 500;
}

.kd-options-compact .kd-option-btn {
    padding: 14px 18px;
    font-size: 0.9rem;
}

.kd-answer-input {
    font-size: 1.15rem;
    padding: 16px 22px;
}

.kd-drag-item {
    font-size: 0.92rem;
    padding: 14px 22px;
}

.kd-connect-item {
    font-size: 0.92rem;
}

.kd-vulin-blank {
    font-size: 0.95rem;
}

.kd-btn {
    font-size: 0.95rem;
    padding: 13px 38px;
}

.kd-check-btn {
    font-size: 0.95rem;
}

@media (max-width: 600px) {
    .kd-question-text {
        font-size: 1.1rem;
    }
    .kd-option-btn {
        padding: 14px 16px;
        font-size: 0.9rem;
    }
    .kd-btn {
        padding: 14px 30px;
        font-size: 0.9rem;
    }
}

/* ===== LEESTEKST — aangenaam leesbaar ===== */
.kd-leestekst-content {
    font-size: 1.05rem;
    line-height: 1.8;
}

/* ===== MODAL OVERLAY (voor gebruik in dpd-les-modal) ===== */
.dpd-les-modal .kd-leer-engine {
    min-height: auto;
}

/* ===== GASTTOEGANG (open training) ===== */
/* Subtiele startkaart boven de lessenlijst voor bezoekers zonder account */
.dpd-gast-kaart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 16px 0 24px;
    padding: 14px 18px;
    background: var(--kd-primary-light, #EBF4FB);
    border: 1px solid rgba(26, 115, 181, 0.25);
    border-radius: 10px;
}
.dpd-gast-kaart p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    flex: 1 1 320px;
}
.dpd-gast-kaart__btn {
    display: inline-block;
    padding: 10px 18px;
    background: var(--kd-primary, #1A73B5);
    color: #fff !important;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.dpd-gast-kaart__btn:hover {
    background: var(--kd-primary-dark, #155E95);
}

/* Funnel-eindscherm (dpd-funnel.js): CTA-kaart op het eindscherm voor gasten */
.dpd-funnel-eind {
    margin: 20px auto 0;
    max-width: 440px;
    padding: 20px 22px;
    background: var(--kd-primary-light, #EBF4FB);
    border: 1px solid rgba(26, 115, 181, 0.25);
    border-radius: 12px;
    text-align: center;
}
.dpd-funnel-eind h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
}
.dpd-funnel-eind p {
    margin: 0 0 14px;
    font-size: 0.92rem;
    line-height: 1.55;
}
.dpd-funnel-eind .dpd-gast-kaart__btn {
    padding: 12px 22px;
}