/* ==========================================================================
   ZC-HERSTEL-20261021 — Zorgcursuspunt thema (één centraal ontwerpsysteem)

   Waarom dit bestand bestaat: de site had 4 lagen die elkaar met !important
   bestreden (zorgcursus-brand-style.css, brand.css, inline <style> per pagina en
   een <style> in de footer die ALLE .btn op wit zette). Gevolg o.a. oranje tekst
   op een oranje knop (course-detail "Aanmelden" = 1:1, onzichtbaar).

   Dit blad wordt via includes/navigation.php in de <body> geladen, dus NA alle
   <head>-stijlen van de pagina's: bij gelijke specificiteit wint dit blad.
   Huisstijl blijft: zwart + oranje #E17000 (klantwens juli 2026).
   Knoptekst op oranje = bijna-zwart (#140a00): 5,9:1 (wit haalt maar 3,2:1).
   ========================================================================== */

:root {
    --zc-bg: #0b0b0d;
    --zc-bg-2: #111114;
    --zc-surface: #16161a;
    --zc-surface-2: #1d1d22;
    --zc-line: rgba(255, 255, 255, .09);
    --zc-line-2: rgba(255, 255, 255, .16);
    --zc-text: #f4f4f5;
    --zc-text-2: #d4d4d8;
    --zc-muted: #a1a1aa;          /* 7,4:1 op --zc-surface */
    --zc-primary: #E17000;
    --zc-primary-hover: #F2851F;
    --zc-primary-soft: rgba(225, 112, 0, .14);
    --zc-primary-line: rgba(225, 112, 0, .38);
    --zc-primary-text: #F39A45;   /* oranje als TEKST op donker: 8,3:1 */
    --zc-on-primary: #140a00;     /* tekst op oranje vlak: 5,9:1 */
    --zc-ok: #4ade80;
    --zc-radius-s: 8px;
    --zc-radius: 12px;
    --zc-radius-l: 16px;
    --zc-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .28);
    --zc-container: 1200px;
    --zc-header-h: 64px;
    --zc-font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --zc-font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* oude variabelen gelijktrekken */
    --zc-bg-card: var(--zc-surface);
    --zc-text-muted: var(--zc-muted);
    --zc-text-subtle: var(--zc-muted);
}

/* ---------- basis & typografie ---------- */
html { scroll-padding-top: calc(var(--zc-header-h) + 16px); -webkit-text-size-adjust: 100%; }
html body {
    background: var(--zc-bg) !important;
    color: var(--zc-text) !important;
    font-family: var(--zc-font-body);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
html body :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--zc-font-head);
    color: var(--zc-text) !important;
    letter-spacing: -.01em;
    line-height: 1.2;
}
html body h1 { font-weight: 700; }
html body :is(h2, h3) { font-weight: 600; }
html body :is(p, li, dd, dt, td, label, small) { color: inherit; }
html body p { color: var(--zc-text-2); }
html body .text-muted, html body .text-white-50, html body .text-secondary { color: var(--zc-muted) !important; }
html body a:not([class]) { color: var(--zc-primary-text); }
html body a:not([class]):hover { color: var(--zc-primary-hover); }
html body :focus-visible { outline: 3px solid var(--zc-primary-text); outline-offset: 2px; border-radius: 4px; }
html body ::selection { background: var(--zc-primary); color: var(--zc-on-primary); }

.zc-container { width: 100%; max-width: var(--zc-container); margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
@media (max-width: 575px) { .zc-container { padding: 0 16px; } }
.zc-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 .75rem/1 var(--zc-font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--zc-primary-text) !important; margin: 0 0 12px; }
.zc-lead { font-size: 1.125rem; line-height: 1.6; color: var(--zc-text-2) !important; }
.zc-sec { padding: 72px 0; }
.zc-sec--tight { padding: 48px 0; }
.zc-sec--alt { background: var(--zc-bg-2); border-top: 1px solid var(--zc-line); border-bottom: 1px solid var(--zc-line); }
@media (max-width: 768px) { .zc-sec { padding: 48px 0; } .zc-sec--tight { padding: 32px 0; } }
.zc-sec-head { max-width: 680px; margin: 0 auto 40px; text-align: center; }
.zc-sec-head h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 8px; }
.zc-sec-head p { margin: 0; color: var(--zc-muted) !important; }

/* ---------- knoppen: primair / secundair / ghost ---------- */
.zc-btn,
html body :is(.btn-zc-primary, .btn-primary, .zc-hero-btn-primary, .btn-inschrijven, .btn-submit, .btn-login, .filter-btn:not(.secondary), .pc-link),
html body button[type="submit"]:not(.zc-chat-send):not([class*="chat"]) {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 10px 20px;
    font: 600 .95rem/1.2 var(--zc-font-head) !important;
    border-radius: var(--zc-radius-s) !important;
    text-decoration: none !important; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    transform: none !important;
}
.zc-btn--primary,
html body :is(.btn-zc-primary, .btn-primary, .zc-hero-btn-primary, .btn-inschrijven, .btn-submit, .btn-login, .filter-btn:not(.secondary), .pc-link),
html body button[type="submit"]:not(.zc-chat-send):not([class*="chat"]) {
    background: var(--zc-primary) !important;
    color: var(--zc-on-primary) !important;
    border: 1px solid var(--zc-primary) !important;
    box-shadow: none !important;
}
.zc-btn--primary *, html body :is(.btn-zc-primary, .btn-primary, .zc-hero-btn-primary, .btn-inschrijven, .btn-submit, .btn-login, .filter-btn:not(.secondary), .pc-link) * ,
html body button[type="submit"]:not(.zc-chat-send):not([class*="chat"]) * { color: inherit !important; }
.zc-btn--primary:hover,
html body :is(.btn-zc-primary, .btn-primary, .zc-hero-btn-primary, .btn-inschrijven, .btn-submit, .btn-login, .filter-btn:not(.secondary), .pc-link):hover,
html body button[type="submit"]:not(.zc-chat-send):not([class*="chat"]):hover {
    background: var(--zc-primary-hover) !important; border-color: var(--zc-primary-hover) !important; color: var(--zc-on-primary) !important;
    box-shadow: 0 6px 20px rgba(225, 112, 0, .28) !important;
}
.zc-btn--primary:focus-visible,
html body :is(.btn-zc-primary, .btn-primary, .zc-hero-btn-primary, .btn-inschrijven, .btn-submit):focus-visible,
html body button[type="submit"]:focus-visible { outline: 3px solid #fff !important; outline-offset: 2px !important; }

.zc-btn--secondary,
html body :is(.btn-zc-outline, .btn-outline-primary, .zc-hero-btn-outline, .btn-outline-light, .btn-outline-secondary, .btn-secondary, .filter-btn.secondary, .btn-light) {
    background: transparent !important;
    color: var(--zc-text) !important;
    border: 1px solid var(--zc-line-2) !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 10px 20px;
    font: 600 .95rem/1.2 var(--zc-font-head) !important;
    border-radius: var(--zc-radius-s) !important; text-decoration: none !important;
    transform: none !important; box-shadow: none !important;
}
.zc-btn--secondary *, html body :is(.btn-zc-outline, .btn-outline-primary, .zc-hero-btn-outline, .btn-outline-light, .btn-outline-secondary, .btn-secondary, .filter-btn.secondary, .btn-light) * { color: inherit !important; }
.zc-btn--secondary:hover,
html body :is(.btn-zc-outline, .btn-outline-primary, .zc-hero-btn-outline, .btn-outline-light, .btn-outline-secondary, .btn-secondary, .filter-btn.secondary, .btn-light):hover {
    border-color: var(--zc-primary) !important; color: var(--zc-primary-text) !important; background: var(--zc-primary-soft) !important;
}
.zc-btn--ghost { background: transparent; border: 1px solid transparent; color: var(--zc-primary-text) !important; padding-left: 8px; padding-right: 8px; }
.zc-btn--ghost:hover { color: var(--zc-primary-hover) !important; text-decoration: underline !important; text-underline-offset: 4px; }
.zc-btn--lg, html body .btn-lg { min-height: 52px; padding: 14px 28px; font-size: 1.05rem !important; }
.zc-btn--sm, html body .btn-sm { min-height: 36px; padding: 6px 14px; font-size: .85rem !important; }
.zc-btn--block { width: 100%; }

/* filter-chips (cursussen) */
html body .zc-btn-filter, html body .view-toggle a {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px;
    border-radius: 999px !important; border: 1px solid var(--zc-line-2) !important;
    background: transparent !important; color: var(--zc-text-2) !important;
    font: 500 .875rem/1.2 var(--zc-font-head) !important; text-decoration: none !important;
}
html body .zc-btn-filter:hover, html body .view-toggle a:hover { border-color: var(--zc-primary) !important; color: var(--zc-primary-text) !important; }
html body .zc-filter-card .zc-btn-filter.zc-btn-filter.active,
html body .zc-btn-filter.active, html body .view-toggle a.active {
    background: var(--zc-primary) !important; border-color: var(--zc-primary) !important; color: var(--zc-on-primary) !important;
}
html body .zc-btn-filter.active *, html body .view-toggle a.active * { color: inherit !important; }

/* ---------- formulieren ---------- */
html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]), textarea, select, .form-control, .form-select) {
    background-color: var(--zc-bg-2) !important;
    color: var(--zc-text) !important;
    border: 1px solid var(--zc-line-2) !important;
    border-radius: var(--zc-radius-s) !important;
    min-height: 44px;
    font-family: var(--zc-font-body);
}
html body textarea { min-height: 120px; }
html body :is(input, textarea, select, .form-control, .form-select):focus {
    border-color: var(--zc-primary) !important; box-shadow: 0 0 0 3px rgba(225, 112, 0, .25) !important; outline: none !important;
}
html body :is(input, textarea)::placeholder { color: #8b8b95 !important; }
html body label, html body .form-label { color: var(--zc-text-2); font-weight: 500; }

/* ---------- header ---------- */
.zc-skip { position: absolute; left: 8px; top: -64px; z-index: 10001; padding: 10px 16px; background: #fff; color: #000 !important; font-weight: 600; border-radius: 8px; text-decoration: none; }
.zc-skip:focus { top: 8px; }
.zc-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    height: var(--zc-header-h);
    background: rgba(11, 11, 13, .97);
    border-bottom: 1px solid var(--zc-line);
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    transition: box-shadow .2s ease;
}
.zc-header.is-scrolled { box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.zc-header__in { height: 100%; display: flex; align-items: center; gap: 24px; }
.zc-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; color: var(--zc-text) !important; flex: 0 0 auto; }
.zc-logo__mark { width: 36px; height: 36px; border-radius: 10px; background: var(--zc-primary); display: grid; place-items: center; flex: 0 0 auto; }
.zc-logo__mark i { width: 20px !important; height: 20px !important; font-size: 20px; background: var(--zc-on-primary) !important; color: var(--zc-on-primary) !important; }
.zc-logo__mark svg { width: 22px; height: 22px; display: block; }
.zc-logo__text { font: 700 1.125rem/1 var(--zc-font-head); letter-spacing: -.01em; color: var(--zc-text) !important; }
.zc-logo__text b { color: var(--zc-primary-text) !important; font-weight: 700; }
.zc-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.zc-nav__link {
    position: relative; padding: 8px 12px; border-radius: 8px;
    font: 500 .95rem/1 var(--zc-font-head); color: var(--zc-text-2) !important; text-decoration: none !important;
}
.zc-nav__link:hover { color: var(--zc-text) !important; background: rgba(255, 255, 255, .05); }
.zc-nav__link.is-active { color: var(--zc-text) !important; }
.zc-nav__link.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px; height: 2px; border-radius: 2px; background: var(--zc-primary); }
.zc-nav__cta { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.zc-nav__cta .zc-btn { min-height: 40px; padding: 8px 16px; font-size: .9rem !important; }
.zc-burger {
    display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 10px;
    border: 1px solid var(--zc-line-2); background: transparent; color: var(--zc-text);
    align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.zc-burger span, .zc-burger span::before, .zc-burger span::after { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative; content: ""; }
.zc-burger span::before { position: absolute; top: -6px; left: 0; }
.zc-burger span::after { position: absolute; top: 6px; left: 0; }
@media (max-width: 1100px) {
    .zc-nav, .zc-nav__cta { display: none; }
    .zc-burger { display: inline-flex; }
}

/* mobiel menu: ALTIJD volledig scherm, verticaal (ook na scrollen: geen
   transform/backdrop-filter op een voorouder, menu staat los van de kop) */
.zc-menu {
    position: fixed; inset: 0; z-index: 2000;
    width: 100vw; height: 100vh; height: 100dvh;
    background: var(--zc-bg);
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    overflow-y: auto; overscroll-behavior: contain;
}
.zc-menu.is-open { opacity: 1; visibility: visible; }
.zc-menu__top { display: flex; align-items: center; justify-content: space-between; height: var(--zc-header-h); padding: 0 16px; border-bottom: 1px solid var(--zc-line); flex: 0 0 auto; }
.zc-menu__close { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--zc-line-2); background: transparent; color: var(--zc-text); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.zc-menu__list { display: flex; flex-direction: column; padding: 8px 16px; }
.zc-menu__link {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 56px; padding: 0 4px;
    font: 600 1.15rem/1.2 var(--zc-font-head); color: var(--zc-text) !important; text-decoration: none !important;
    border-bottom: 1px solid var(--zc-line);
}
.zc-menu__link::after { content: "\203A"; color: var(--zc-muted); font-size: 1.4rem; }
.zc-menu__link.is-active { color: var(--zc-primary-text) !important; }
.zc-menu__foot { margin-top: auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; }
.zc-menu__foot .zc-btn { width: 100%; min-height: 50px; }
html.zc-menu-open, html.zc-menu-open body { overflow: hidden !important; }
html.zc-menu-open .zc-chatbot { display: none !important; }

/* oude kop/zijbalk die nog in losse pagina's kan staan: nooit tonen */
html body nav#navbar.nav, html body .mobile-sidebar, html body .sidebar-overlay { display: none !important; }

/* ---------- pagina-hero (subpagina's) ---------- */
.zc-pagehero,
html body :is(.zc-page-hero, .agenda-hero, .kb-hero, .reg-hero, .regio-hero, .contact-hero, .page-hero, .blog-hero, .hero-section) {
    position: relative;
    background: radial-gradient(1200px 400px at 85% -10%, rgba(225, 112, 0, .22), transparent 60%), linear-gradient(180deg, #121216 0%, var(--zc-bg) 100%) !important;
    border-bottom: 1px solid var(--zc-line);
    padding: calc(var(--zc-header-h) + 56px) 0 56px !important;
    color: var(--zc-text) !important;
}
@media (max-width: 768px) {
    .zc-pagehero,
    html body :is(.zc-page-hero, .agenda-hero, .kb-hero, .reg-hero, .regio-hero, .contact-hero, .page-hero, .blog-hero, .hero-section) { padding: calc(var(--zc-header-h) + 32px) 0 36px !important; }
}
html body :is(.zc-page-hero, .agenda-hero, .kb-hero, .reg-hero, .regio-hero, .contact-hero, .page-hero, .blog-hero) :is(h1, .zc-page-title) { font-size: clamp(1.875rem, 4vw, 2.75rem) !important; font-weight: 700 !important; margin: 0 0 12px !important; color: var(--zc-text) !important; }
html body :is(.zc-page-hero, .agenda-hero, .kb-hero, .reg-hero, .regio-hero, .contact-hero, .page-hero, .blog-hero) :is(p, .zc-page-subtitle) { color: var(--zc-text-2) !important; font-size: 1.075rem; max-width: 640px; }
html body .agenda-hero h1 i, html body .zc-page-hero h1 i { color: var(--zc-primary-text) !important; background-color: var(--zc-primary-text) !important; }
/* hero met foto (cursussen): foto rustiger, tekst leesbaar */
html body .zc-hero-with-image > div[style*="background-image"] { opacity: .28; }
html body .zc-hero-with-image > div[style*="linear-gradient"] { background: linear-gradient(90deg, rgba(11, 11, 13, .95) 0%, rgba(11, 11, 13, .75) 55%, rgba(11, 11, 13, .55) 100%) !important; }

/* ---------- kaarten ---------- */
html body :is(.card, .zc-card, .course-card, .agenda-card, .featured-card, .blog-card, .kb-item, .kb-article-card, .provider-card, .regio-card, .city-card, .zc-content-card, .zc-stat-card, .stat-card, .filters-bar, .zc-filter-card) {
    background: var(--zc-surface) !important;
    border: 1px solid var(--zc-line) !important;
    border-radius: var(--zc-radius) !important;
    box-shadow: none !important;
    color: var(--zc-text);
}
html body :is(.card, .zc-card, .course-card, .agenda-card, .featured-card, .blog-card, .kb-article-card, .provider-card, .regio-card, .city-card):hover {
    border-color: var(--zc-primary-line) !important; transform: none !important; box-shadow: var(--zc-shadow) !important;
}
html body .card-body { background: transparent !important; }
html body .card img, html body article img, html body .course-card img { transition: none; transform: none !important; }
html body :is(.card-title, .course-title, .fc-title, .ai-title) { color: var(--zc-text) !important; }
html body :is(.card-text, .course-description, .fc-meta, .ai-desc) { color: var(--zc-muted) !important; }

/* filterpaneel cursussen: was WIT met oranje tekst; nu donker en rustig */
html body .zc-filter-card { padding: 24px !important; }
html body .zc-filter-card :is(h3, .h6, .filter-label, .text-primary) { color: var(--zc-text-2) !important; font: 600 .8rem/1.2 var(--zc-font-head) !important; letter-spacing: .06em; text-transform: uppercase; }
html body .zc-filter-card .form-control { background: var(--zc-bg-2) !important; color: var(--zc-text) !important; border-color: var(--zc-line-2) !important; }

/* cursuskaarten (overzicht): gelijke hoogtes, prijs + CTA onderaan */
html body .courses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 24px; align-items: stretch; }
html body .courses-grid .course-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
html body .courses-grid .course-image { width: 100%; aspect-ratio: 16 / 9; height: auto !important; object-fit: cover; display: block; background: var(--zc-surface-2); }
html body .courses-grid .course-content { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px !important; }
html body .courses-grid .course-category { align-self: flex-start; background: var(--zc-primary-soft) !important; color: var(--zc-primary-text) !important; border-radius: 999px !important; padding: 4px 10px !important; font: 600 .75rem/1.2 var(--zc-font-head) !important; margin-bottom: 12px !important; }
html body .courses-grid .course-title { font-size: 1.125rem !important; margin-bottom: 8px !important; }
html body .courses-grid .course-description { font-size: .925rem !important; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 16px !important; }
html body .courses-grid .course-info { display: flex !important; flex-wrap: wrap; gap: 8px 16px !important; margin: 0 0 16px !important; }
html body .courses-grid .course-info-item { color: var(--zc-muted) !important; font-size: .875rem !important; }
html body .courses-grid .course-info-item i { color: var(--zc-primary-text) !important; background-color: var(--zc-primary-text) !important; }
html body .courses-grid .course-footer { margin-top: auto; border-top: 1px solid var(--zc-line) !important; padding-top: 16px !important; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html body .courses-grid .course-price { color: var(--zc-text) !important; font: 700 1.25rem/1 var(--zc-font-head) !important; }
html body .courses-grid.view-3d .course-card:hover { transform: none !important; }

/* gedeelde cursuskaart (home) */
.zc-ccard { display: flex; flex-direction: column; height: 100%; background: var(--zc-surface); border: 1px solid var(--zc-line); border-radius: var(--zc-radius); overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; text-decoration: none !important; color: var(--zc-text) !important; }
.zc-ccard:hover { border-color: var(--zc-primary-line); box-shadow: var(--zc-shadow); }
.zc-ccard__img { aspect-ratio: 16 / 9; background: var(--zc-surface-2); overflow: hidden; }
.zc-ccard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zc-ccard__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px; }
.zc-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--zc-primary-soft); color: var(--zc-primary-text) !important; font: 600 .75rem/1.2 var(--zc-font-head); margin-bottom: 12px; }
.zc-ccard__title { font-size: 1.125rem !important; margin: 0 0 8px !important; }
.zc-ccard__desc { color: var(--zc-muted) !important; font-size: .925rem; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zc-ccard__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--zc-muted) !important; font-size: .875rem; margin: 0 0 16px; padding: 0; list-style: none; }
.zc-ccard__meta li { display: inline-flex; align-items: center; gap: 6px; color: var(--zc-muted) !important; }
.zc-ccard__meta i { color: var(--zc-primary-text) !important; background-color: var(--zc-primary-text) !important; }
.zc-ccard__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--zc-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zc-price { font: 700 1.25rem/1 var(--zc-font-head); color: var(--zc-text) !important; }
.zc-price small { display: block; font: 500 .75rem/1.3 var(--zc-font-body); color: var(--zc-muted) !important; margin-top: 4px; }
.zc-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }

/* statistieken (cursussen-onderaan, home) */
html body .zc-stat-card { padding: 20px !important; text-align: left; }
html body .zc-stat-number { color: var(--zc-text) !important; font: 700 1.75rem/1.1 var(--zc-font-head) !important; }
html body .zc-stat-label { color: var(--zc-muted) !important; font-size: .875rem !important; }

/* tabellen */
html body table th { background: var(--zc-surface-2) !important; color: var(--zc-text) !important; border-color: var(--zc-line) !important; }
html body table td { color: var(--zc-text-2) !important; border-color: var(--zc-line) !important; background: transparent !important; }
html body .table { --bs-table-bg: transparent; --bs-table-color: var(--zc-text-2); }

/* badges */
html body .badge { font-family: var(--zc-font-head); font-weight: 600; }
html body :is(.badge-zc, .ai-category, .badge-accr, .course-category, .tag, .blog-tag) { background: var(--zc-primary-soft) !important; color: var(--zc-primary-text) !important; }

/* agenda */
html body .agenda-date-block { background: var(--zc-primary-soft) !important; }
html body .agenda-date-block .day, html body .agenda-price, html body .fc-price, html body .fc-date { color: var(--zc-primary-text) !important; }
html body .agenda-date-block .month-short { color: var(--zc-primary-text) !important; }
html body .month-header { color: var(--zc-text) !important; border-bottom: 1px solid var(--zc-line) !important; }
html body .empty-state { background: var(--zc-surface); border: 1px dashed var(--zc-line-2); border-radius: var(--zc-radius-l); padding: 56px 24px !important; margin: 32px 0; }
html body .empty-state h3, html body .empty-state h2 { color: var(--zc-text) !important; }
html body .empty-state i { background-color: var(--zc-muted) !important; }
html body .cal-header { background: var(--zc-surface-2) !important; color: var(--zc-text) !important; }
html body .cal-day.today .cal-num { color: var(--zc-on-primary) !important; }
html body .cal-event:hover { color: var(--zc-on-primary) !important; }

/* oranje "aanbieder worden"-blok onderaan agenda: wit op oranje = 3,2:1 */
html body :is(.cta-section, .provider-cta, .agenda-cta, .zc-cta, .kb-cta) {
    background: linear-gradient(135deg, #1a1208 0%, #16161a 60%) !important;
    border: 1px solid var(--zc-primary-line) !important;
    color: var(--zc-text) !important;
}
html body :is(.cta-section, .provider-cta, .agenda-cta, .zc-cta, .kb-cta) :is(p, span) { color: var(--zc-text-2) !important; }

/* ---------- footer ---------- */
.zc-footer { background: #070708; border-top: 1px solid var(--zc-line); color: var(--zc-muted); padding: 64px 0 0; margin-top: 0; }
.zc-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
@media (max-width: 900px) { .zc-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .zc-footer__grid { grid-template-columns: 1fr; gap: 28px; } }
.zc-footer h2 { font: 600 .8rem/1.2 var(--zc-font-head) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--zc-text) !important; margin: 0 0 16px; }
.zc-footer p { color: var(--zc-muted) !important; font-size: .925rem; margin: 12px 0 0; max-width: 320px; }
.zc-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.zc-footer li { color: var(--zc-muted) !important; font-size: .925rem; display: flex; gap: 10px; align-items: flex-start; }
.zc-footer li i { color: var(--zc-primary-text) !important; background-color: var(--zc-primary-text) !important; margin-top: 4px; flex: 0 0 auto; }
.zc-footer a { color: var(--zc-text-2) !important; text-decoration: none !important; }
.zc-footer a:hover { color: var(--zc-primary-text) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.zc-footer__seo { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--zc-line); font-size: .825rem; color: var(--zc-muted); line-height: 1.9; }
.zc-footer__seo strong { color: var(--zc-text-2); font-weight: 600; margin-right: 6px; }
.zc-footer__seo a { color: var(--zc-muted) !important; }
.zc-footer__bottom { margin-top: 24px; padding: 20px 0 28px; border-top: 1px solid var(--zc-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .85rem; }
.zc-footer__bottom nav { display: flex; gap: 20px; flex-wrap: wrap; }
@media (max-width: 768px) { .zc-footer__bottom { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }
/* de oude footers (2 varianten) niet meer tonen als ze nog ergens staan */
html body footer.footer, html body footer.zorgcursus-footer { display: none !important; }
html body footer.zc-footer { display: block !important; }

/* ---------- home ---------- */
.zc-home-hero { position: relative; min-height: min(720px, 92vh); display: flex; align-items: center; padding: calc(var(--zc-header-h) + 48px) 0 64px; overflow: hidden; isolation: isolate; }
.zc-home-hero__bg { position: absolute; inset: 0; z-index: -2; }
.zc-home-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.zc-home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 11, 13, .96) 0%, rgba(11, 11, 13, .86) 42%, rgba(11, 11, 13, .35) 100%); }
.zc-home-hero__in { max-width: 640px; }
.zc-home-hero h1 { font-size: clamp(2.25rem, 5vw, 3.5rem) !important; font-weight: 700 !important; line-height: 1.1 !important; margin: 0 0 16px !important; }
.zc-home-hero h1 em { font-style: normal; color: var(--zc-primary-text) !important; }
.zc-home-hero .zc-lead { margin: 0 0 32px; max-width: 540px; }
.zc-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.zc-points { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 32px 0 0; padding: 0; list-style: none; }
.zc-points li { display: inline-flex; align-items: center; gap: 8px; color: var(--zc-text-2) !important; font-size: .925rem; }
.zc-points li i { color: var(--zc-ok) !important; background-color: var(--zc-ok) !important; }
@media (max-width: 768px) {
    .zc-home-hero { min-height: auto; padding: calc(var(--zc-header-h) + 40px) 0 48px; }
    .zc-home-hero::before { background: linear-gradient(180deg, rgba(11, 11, 13, .82) 0%, rgba(11, 11, 13, .94) 70%); }
    .zc-actions .zc-btn { flex: 1 1 100%; }
}
.zc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--zc-line); border: 1px solid var(--zc-line); border-radius: var(--zc-radius-l); overflow: hidden; }
.zc-stats > div { background: var(--zc-surface); padding: 24px; }
.zc-stats strong { display: block; font: 700 1.75rem/1.1 var(--zc-font-head); color: var(--zc-text); }
.zc-stats span { color: var(--zc-muted); font-size: .875rem; }
@media (max-width: 768px) { .zc-stats { grid-template-columns: repeat(2, 1fr); } .zc-stats > div { padding: 16px; } }
.zc-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .zc-features { grid-template-columns: 1fr; } }
.zc-feature { background: var(--zc-surface); border: 1px solid var(--zc-line); border-radius: var(--zc-radius); padding: 24px; }
.zc-feature__icon { width: 44px; height: 44px; border-radius: 10px; background: var(--zc-primary-soft); display: grid; place-items: center; margin-bottom: 16px; }
.zc-feature__icon i { color: var(--zc-primary-text) !important; background-color: var(--zc-primary-text) !important; font-size: 20px; width: 20px !important; height: 20px !important; }
.zc-feature h3 { font-size: 1.1rem !important; margin: 0 0 8px !important; }
.zc-feature p { margin: 0; color: var(--zc-muted) !important; font-size: .95rem; }
.zc-cta-band { background: linear-gradient(135deg, #1c1308 0%, #16161a 70%); border: 1px solid var(--zc-primary-line); border-radius: var(--zc-radius-l); padding: 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.zc-cta-band h2 { margin: 0 0 8px !important; font-size: clamp(1.5rem, 2.6vw, 2rem) !important; }
.zc-cta-band p { margin: 0; color: var(--zc-text-2) !important; }
@media (max-width: 768px) { .zc-cta-band { padding: 28px 20px; } .zc-cta-band .zc-actions { width: 100%; } .zc-cta-band .zc-btn { flex: 1 1 100%; } }

/* ---------- cursusdetail ---------- */
.zc-cd { padding: calc(var(--zc-header-h) + 24px) 0 80px; }
.zc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .875rem; color: var(--zc-muted); margin: 0 0 24px; padding: 0; list-style: none; }
.zc-crumbs li { color: var(--zc-muted) !important; display: inline-flex; gap: 6px; align-items: center; }
.zc-crumbs li + li::before { content: "/"; color: #55555e; }
.zc-crumbs a { color: var(--zc-text-2) !important; text-decoration: none !important; }
.zc-crumbs a:hover { color: var(--zc-primary-text) !important; text-decoration: underline !important; }
.zc-cd__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; }
.zc-cd__head h1 { font-size: clamp(1.875rem, 3.6vw, 2.625rem) !important; margin: 0 0 12px !important; }
.zc-cd__head .zc-lead { margin: 0 0 20px; }
.zc-cd__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.zc-cd__meta li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--zc-surface); border: 1px solid var(--zc-line); color: var(--zc-text-2) !important; font-size: .875rem; }
.zc-cd__meta i { color: var(--zc-primary-text) !important; background-color: var(--zc-primary-text) !important; }
.zc-cd__media { border-radius: var(--zc-radius-l); overflow: hidden; aspect-ratio: 16 / 8; background: var(--zc-surface-2); margin: 0 0 12px; }
.zc-cd__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zc-cd__thumbs { display: flex; gap: 8px; margin: 0 0 8px; overflow-x: auto; padding-bottom: 4px; }
.zc-cd__thumbs a { flex: 0 0 auto; width: 84px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid var(--zc-line); }
.zc-cd__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zc-cd__sec { padding: 32px 0; border-top: 1px solid var(--zc-line); }
.zc-cd__sec:first-of-type { border-top: 0; }
.zc-cd__sec h2 { font-size: 1.375rem !important; margin: 0 0 16px !important; }
.zc-cd__sec p { margin: 0 0 12px; }
.zc-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.zc-checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .zc-checks--2 { grid-template-columns: 1fr; } }
.zc-checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--zc-text-2) !important; }
.zc-checks li::before { content: ""; flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--zc-primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F39A45' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.zc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: zcstap; }
.zc-steps li { counter-increment: zcstap; display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; background: var(--zc-surface); border: 1px solid var(--zc-line); border-radius: var(--zc-radius); padding: 16px; }
.zc-steps li::before { content: counter(zcstap); width: 40px; height: 40px; border-radius: 50%; background: var(--zc-primary-soft); color: var(--zc-primary-text); display: grid; place-items: center; font: 700 1rem/1 var(--zc-font-head); }
.zc-steps strong { display: block; color: var(--zc-text); font-family: var(--zc-font-head); font-weight: 600; margin-bottom: 2px; }
.zc-steps span { color: var(--zc-muted) !important; font-size: .95rem; }
.zc-modules { list-style: none; margin: 0; padding: 0; border: 1px solid var(--zc-line); border-radius: var(--zc-radius); overflow: hidden; }
.zc-modules li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 16px; border-top: 1px solid var(--zc-line); background: var(--zc-surface); }
.zc-modules li:first-child { border-top: 0; }
.zc-modules__nr { width: 32px; height: 32px; border-radius: 8px; background: var(--zc-surface-2); color: var(--zc-text-2); display: grid; place-items: center; font: 600 .875rem/1 var(--zc-font-head); }
.zc-modules strong { color: var(--zc-text); font-family: var(--zc-font-head); font-weight: 600; }
.zc-modules small { color: var(--zc-muted) !important; margin-left: 6px; }
.zc-modules p { margin: 4px 0 0; color: var(--zc-muted) !important; font-size: .925rem; }
.zc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--zc-line); border: 1px solid var(--zc-line); border-radius: var(--zc-radius); overflow: hidden; margin: 0; }
.zc-facts > div { background: var(--zc-surface); padding: 16px; }
.zc-facts dt { color: var(--zc-muted) !important; font-size: .8rem; font-weight: 500; margin: 0 0 4px; }
.zc-facts dd { color: var(--zc-text) !important; font-weight: 600; margin: 0; }
@media (max-width: 480px) { .zc-facts { grid-template-columns: 1fr; } }
.zc-faq { border: 1px solid var(--zc-line); border-radius: var(--zc-radius); overflow: hidden; }
.zc-faq details { background: var(--zc-surface); border-top: 1px solid var(--zc-line); }
.zc-faq details:first-child { border-top: 0; }
.zc-faq summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 16px; position: relative; font: 600 1rem/1.4 var(--zc-font-head); color: var(--zc-text); min-height: 44px; }
.zc-faq summary::-webkit-details-marker { display: none; }
.zc-faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--zc-primary-text); }
.zc-faq details[open] summary::after { content: "\2212"; }
.zc-faq details > div { padding: 0 16px 16px; color: var(--zc-text-2); }
.zc-faq details > div p { margin: 0; }

.zc-book { position: sticky; top: calc(var(--zc-header-h) + 24px); background: var(--zc-surface); border: 1px solid var(--zc-line-2); border-radius: var(--zc-radius-l); padding: 24px; box-shadow: var(--zc-shadow); }
.zc-book__price { font: 700 2rem/1 var(--zc-font-head); color: var(--zc-text); margin: 0; }
.zc-book__price small { font: 500 .85rem/1.4 var(--zc-font-body); color: var(--zc-muted); margin-left: 6px; }
.zc-book__sub { color: var(--zc-muted) !important; font-size: .875rem; margin: 8px 0 20px; }
.zc-book .zc-btn { width: 100%; }
.zc-book .zc-btn + .zc-btn { margin-top: 8px; }
.zc-book__list { list-style: none; margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid var(--zc-line); display: grid; gap: 12px; }
.zc-book__list li { display: flex; justify-content: space-between; gap: 12px; font-size: .925rem; color: var(--zc-muted) !important; }
.zc-book__list li b { color: var(--zc-text); font-weight: 600; text-align: right; }
.zc-book__h { font: 600 .8rem/1.2 var(--zc-font-head) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--zc-text-2) !important; margin: 24px 0 12px !important; }
.zc-sessions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.zc-sessions a { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; border: 1px solid var(--zc-line); background: var(--zc-bg-2); text-decoration: none !important; color: var(--zc-text) !important; }
.zc-sessions a:hover { border-color: var(--zc-primary-line); }
.zc-sessions__date { text-align: center; line-height: 1.1; }
.zc-sessions__date b { display: block; font: 700 1.2rem/1 var(--zc-font-head); color: var(--zc-primary-text); }
.zc-sessions__date span { font-size: .7rem; text-transform: uppercase; color: var(--zc-muted); }
.zc-sessions__t { font-size: .875rem; font-weight: 600; color: var(--zc-text); }
.zc-sessions__m { font-size: .8rem; color: var(--zc-muted); }
.zc-trust { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.zc-trust li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--zc-text-2) !important; }
.zc-trust li i { color: var(--zc-ok) !important; background-color: var(--zc-ok) !important; margin-top: 3px; flex: 0 0 auto; }
.zc-mbar { display: none; }
@media (max-width: 991px) {
    .zc-cd__grid { grid-template-columns: 1fr; gap: 24px; }
    .zc-cd__aside { order: -1; }
    .zc-cd__main { display: contents; }
    .zc-cd__head { order: -2; }
    .zc-book { position: static; box-shadow: none; }
    .zc-mbar {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 990;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background: rgba(11, 11, 13, .98); border-top: 1px solid var(--zc-line-2);
    }
    .zc-mbar .zc-price { font-size: 1.125rem; }
    .zc-mbar .zc-btn { flex: 0 0 auto; min-width: 150px; }
    body.zc-has-mbar .zc-chatbot { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
    body.zc-has-mbar { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
}

@media (prefers-reduced-motion: reduce) {
    html body *, html body *::before, html body *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.zc-menu[hidden] { display: none !important; }

/* ==========================================================================
   ZC-HERSTEL-20261021 — oude lichte vlakken in het donkere thema.
   Deze blokken hadden een lichte achtergrond (#f8f9fa / #fff / #f3f3f3) terwijl
   het thema tekst globaal wit zet: wit op wit (1,05:1). Nu donker, net als de rest.
   ========================================================================== */
html body :is(.info-card, .program-item, .info-box, .validity-info, .content-section, .course-info, .detail-card,
    .sessions, .cta-content, .application-container, .enrollment-course-card, .value-card, .capacity-info,
    .facilities-section, .directions-section, .location-content, .bg-light, .bg-white, .stat-item, .feature-box,
    .benefit-card, .highlight-box, .faq-item, .testimonial-card, .step-card) {
    background: var(--zc-surface) !important;
    border: 1px solid var(--zc-line) !important;
    color: var(--zc-text) !important;
    box-shadow: none !important;
}
html body :is(.info-card, .program-item, .info-box, .validity-info, .content-section, .course-info, .detail-card,
    .sessions, .cta-content, .application-container, .enrollment-course-card, .value-card, .capacity-info,
    .facilities-section, .directions-section, .location-content, .bg-light, .bg-white, .stat-item, .feature-box,
    .benefit-card, .highlight-box, .faq-item, .testimonial-card, .step-card) :is(h1, h2, h3, h4, h5, .value-title, .section-title, .validity-label, .directions-title, .facilities-title) {
    color: var(--zc-text) !important;
}
html body :is(.info-card, .program-item, .info-box, .validity-info, .content-section, .course-info, .detail-card,
    .sessions, .cta-content, .application-container, .enrollment-course-card, .value-card, .capacity-info,
    .facilities-section, .directions-section, .location-content, .bg-light, .bg-white, .stat-item, .feature-box,
    .benefit-card, .highlight-box, .faq-item, .testimonial-card, .step-card) :is(p, li, span:not(.badge):not([class*="btn"]), small, td, dd, label, .validity-value, .value-description, .stat-label, .capacity-label, .capacity-value, .facility-tag) {
    color: var(--zc-text-2) !important;
}
html body :is(.content-section, .detail-card, .course-info, .info-card) a:not([class*="btn"]) { color: var(--zc-primary-text) !important; }
/* kop van de trainer-aanmelding was een wit vlak */
html body header.header { background: var(--zc-bg-2) !important; border: 1px solid var(--zc-line) !important; border-radius: var(--zc-radius) !important; color: var(--zc-text) !important; }
html body header.header :is(h1, h2, p, .portal-title, .portal-subtitle) { color: var(--zc-text) !important; }
html body .application-title, html body .section-title { color: var(--zc-text) !important; }
html body .step-label { color: var(--zc-text-2) !important; }
html body .step-number { background: var(--zc-primary) !important; color: var(--zc-on-primary) !important; }
html body .step-number.active, html body .step.active .step-number { background: var(--zc-primary) !important; color: var(--zc-on-primary) !important; }
/* gedempte Bootstrap-grijs (#6c757d) op donker = 4,0:1 */
html body p:not([class]), html body :is(.cert-description, .step-description) { color: var(--zc-text-2); }
html body li { color: inherit; }
html body .text-danger { color: #f87171 !important; }        /* 6,2:1 op zwart */
/* oranje vlakken met witte tekst (3,2:1) -> donkere tekst */
html body :is(.course-tag, .other-city-link.active, .city-pill.active, .rounded-circle.bg-primary, .badge.bg-primary, .badge-primary, .bg-warning) { color: var(--zc-on-primary) !important; }
html body .other-city-link.active, html body a.other-city-link.active * { color: var(--zc-on-primary) !important; }
html body .badge.bg-secondary { background: var(--zc-surface-2) !important; color: var(--zc-text-2) !important; }
html body .badge.bg-success { background: rgba(74, 222, 128, .15) !important; color: #86efac !important; }
/* tabellen in de cursuslijst stonden op wit */
html body .table-responsive, html body .table-zc, html body .table-zc :is(tr, td, th) { background: transparent !important; }
html body .table-zc td span, html body .table-zc td .text-muted { color: var(--zc-text-2) !important; }
html body .table-zc td .fw-semibold { color: var(--zc-text) !important; }
/* inschrijven: weergaveknoppen (Kaarten/Lijst) wit op oranje = 3,2:1 */
html body .zc-view-toggle button { color: var(--zc-text-2) !important; background: transparent !important; border: 1px solid var(--zc-line-2) !important; border-radius: 999px !important; min-height: 36px; padding: 6px 14px; }
html body .zc-view-toggle button.active { background: var(--zc-primary) !important; border-color: var(--zc-primary) !important; color: var(--zc-on-primary) !important; }
html body .zc-view-toggle button.active * { color: inherit !important; background-color: currentColor; }
html body .enrollment-course-card.selected { border-color: var(--zc-primary) !important; box-shadow: 0 0 0 2px rgba(225, 112, 0, .35) !important; }
/* filterchips: winnen ook van een oude (gecachte) brand-style met 3 klassen */
html body .zc-filter-card .zc-btn-filter.zc-btn-filter.zc-btn-filter { color: var(--zc-text-2) !important; }
html body .zc-filter-card .zc-btn-filter.zc-btn-filter.zc-btn-filter.active { color: var(--zc-on-primary) !important; }
/* containers: ook op pagina's zonder Bootstrap (over-ons, landingspagina's) een nette kolom */
html body .container { width: 100%; max-width: var(--zc-container); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
@media (max-width: 575px) { html body .container { padding-left: 16px; padding-right: 16px; } }
/* oude pagina-heroes (paars/oranje vlakken) -> zelfde rustige hero als de rest */
html body :is(section.hero, div.hero) {
    position: relative;
    background: radial-gradient(1200px 400px at 85% -10%, rgba(225, 112, 0, .22), transparent 60%), linear-gradient(180deg, #121216 0%, var(--zc-bg) 100%) !important;
    border-bottom: 1px solid var(--zc-line);
    padding: calc(var(--zc-header-h) + 56px) 24px 56px !important;
    margin: 0 !important; min-height: 0 !important; border-radius: 0 !important;
    color: var(--zc-text) !important; text-align: left;
}
@media (max-width: 768px) { html body :is(section.hero, div.hero) { padding: calc(var(--zc-header-h) + 32px) 16px 36px !important; } }
html body :is(section.hero, div.hero) > * { max-width: var(--zc-container); margin-left: auto !important; margin-right: auto !important; }
html body :is(section.hero, div.hero) h1 { font-size: clamp(1.875rem, 4vw, 2.75rem) !important; margin: 0 0 12px !important; color: var(--zc-text) !important; }
html body :is(section.hero, div.hero) :is(p, .subtitle, .lead) { color: var(--zc-text-2) !important; }
html body :is(section.hero, div.hero) .hero-feature { color: var(--zc-text-2) !important; }
html body :is(section.hero, div.hero) .hero-feature i { background-color: var(--zc-primary-text) !important; }
/* hero's zonder eigen container (kennisbank, agenda): inhoud niet tegen de schermrand */
html body :is(.zc-page-hero, .agenda-hero, .kb-hero, .reg-hero, .regio-hero, .contact-hero, .page-hero, .blog-hero, .hero-section) > :not(.container):not(.zc-container):not([style*="absolute"]) {
    max-width: var(--zc-container); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box;
}
@media (max-width: 575px) {
    html body :is(.zc-page-hero, .agenda-hero, .kb-hero, .reg-hero, .regio-hero, .contact-hero, .page-hero, .blog-hero, .hero-section) > :not(.container):not(.zc-container):not([style*="absolute"]) { padding-left: 16px; padding-right: 16px; }
}
/* ZC-HERSTEL-20261021 ronde 2: nog drie lichte vakken + gedempt grijs in lijsten */
html body :is(.safety-box, .prevention-box, .stat-box) { background: var(--zc-surface) !important; border: 1px solid var(--zc-line) !important; color: var(--zc-text) !important; box-shadow: none !important; }
html body :is(.safety-box, .prevention-box, .stat-box) :is(h3, h4, .stat-number) { color: var(--zc-text) !important; }
html body :is(.safety-box, .prevention-box, .stat-box) :is(p, li, span, .stat-label) { color: var(--zc-text-2) !important; }
html body :is(.safety-box, .prevention-box, .stat-box) i { color: var(--zc-primary-text) !important; background-color: var(--zc-primary-text) !important; }
html body :is(.requirements-list, .cert-features, .benefits-list) li { color: var(--zc-text-2) !important; }
html body .courses-grid .course-info { background: none !important; border: 0 !important; padding: 0 !important; }
/* kaarten zonder eigen binnenruimte (contact e.a.) */
html body .zc-content-card { padding: 32px !important; }
html body .zc-content-card.h-100 { padding: 24px !important; }
html body .zc-cta { padding: 32px !important; border-radius: var(--zc-radius-l) !important; }
html body .faq-question { padding: 16px 20px !important; cursor: pointer; }
html body .faq-answer { padding: 0 20px 16px !important; color: var(--zc-text-2) !important; }
@media (max-width: 575px) { html body .zc-content-card, html body .zc-cta { padding: 20px !important; } }
/* toegankelijkheidspagina: oranje feedbackvlak met witte tekst (2,2–3,2:1) */
html body .contact-section { background: linear-gradient(135deg, #1c1308 0%, #16161a 70%) !important; border: 1px solid var(--zc-primary-line) !important; color: var(--zc-text) !important; }
html body .contact-section :is(h2, strong) { color: var(--zc-text) !important; }
html body .contact-section p { color: var(--zc-text-2) !important; }
html body .contact-section a:not(.zc-btn) { color: var(--zc-primary-text) !important; }

/* VLOOT-ZIJWAARTS-ZORGCURSUSPUNT-20261025 — lange samengestelde woorden (medicatietoediening, agressiehantering,
   communicatietechnieken) in grote koppen/lijsten liepen 5-12px buiten een 390px-scherm. Afbreken i.p.v. overflow verbergen. */
h1,h2,h3,h4,.section-title,.cta-content h2{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.detail-card li,.detail-card p,.course-grid li{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.course-grid>*,.detail-card{min-width:0}