/* ============================================================
   AtoZ Clean — Thema-systeem publieke site (aug 2026)
   ------------------------------------------------------------
   - Thema-knop in de hoofdheader (naast de CTA)
   - Donker thema via html.dark
   - Keuze wordt in localStorage onthouden (standaard: licht)
   - Het logo zelf wisselt geen thema meer (normale homepage-link)
   ============================================================ */

/* ---- Thema-knop (hoofdheader, naast de CTA) ---- */
.site-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(12, 36, 97, 0.18);
    background: rgba(12, 36, 97, 0.05);
    color: var(--primary-dark);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}

.site-theme-toggle:hover {
    background: rgba(12, 36, 97, 0.10);
    color: var(--primary);
    border-color: rgba(12, 36, 97, 0.30);
}

.site-theme-toggle:focus-visible {
    outline: 2px solid rgba(12, 36, 97, 0.5);
    outline-offset: 2px;
}

.site-theme-toggle:active {
    transform: scale(0.92);
}

.site-theme-toggle svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.site-theme-toggle .icon-sun { display: none; }
.site-theme-toggle .icon-moon { display: block; }

html.dark .site-theme-toggle .icon-sun { display: block; }
html.dark .site-theme-toggle .icon-moon { display: none; }

/* Donker thema: witte knop op donkere header/menu */
html.dark .site-theme-toggle {
    border-color: rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
}

html.dark .site-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.32);
}

/* Mobiel: thema-knop past naast het hamburgermenu */
@media (max-width: 920px) {
    .site-theme-toggle {
        width: 36px;
        height: 36px;
    }

    .header__actions {
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .site-theme-toggle {
        width: 34px;
        height: 34px;
    }

    .site-theme-toggle svg {
        width: 15px;
        height: 15px;
    }
}

/* ============================================================
   Donker thema — tokens
   ============================================================ */
html.dark {
    --text: #e2e8f0;
    --text-light: #94a3b8;
    --bg: #0b1220;
    --bg-alt: #101a2e;
    --border: #26334d;
    --surface: #131f36;
    --surface-2: #1a2942;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
    --accent-soft: rgba(59, 130, 246, 0.14);
    --ring: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

html.dark body {
    background: var(--bg);
    color: var(--text);
}

html.dark ::selection {
    background: rgba(59, 130, 246, 0.32);
    color: #fff;
}

/* ---- Header + navigatie ---- */
html.dark .header {
    background: #0d1526;
    border-color: var(--border);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

html.dark .nav__link,
html.dark .nav__trigger {
    color: var(--text);
}

html.dark .nav__link:hover,
html.dark .nav__link.active,
html.dark .nav__trigger:hover,
html.dark .nav__dropdown.is-active > .nav__trigger,
html.dark .nav__dropdown.open > .nav__trigger {
    color: #93c5fd;
}

html.dark .nav__submenu {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

html.dark .nav__submenu-grid {
    border-top-color: var(--border);
}

html.dark .nav__submenu-grid a:hover,
html.dark .nav__submenu-grid a.active,
html.dark .nav__submenu-all:hover,
html.dark .nav__submenu-all.active {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.12);
}

html.dark .nav__submenu a:hover,
html.dark .nav__submenu a.active {
    color: #93c5fd;
}

html.dark .menu-toggle span {
    background: var(--text);
}

html.dark .header-whatsapp__title {
    color: #e2e8f0;
}

html.dark .header-whatsapp__label {
    color: var(--text-light);
}

/* ---- Secties & kaarten ---- */
html.dark .section--reviews,
html.dark .section--about-page,
html.dark .section--branches-page,
html.dark .section--timeline {
    background: var(--bg);
}

html.dark .service-card,
html.dark .ui-card,
html.dark .process-step,
html.dark .review-card,
html.dark .value-card,
html.dark .contact-card,
html.dark .usp-card,
html.dark .branch-card,
html.dark .home-panel,
html.dark .careers-flow-card,
html.dark .careers-flow-card__header,
html.dark .quote-accept__card,
html.dark .faq-item,
html.dark .legal-section,
html.dark .legal-page__intro,
html.dark .legal-page__toc--mobile,
html.dark .branch-detail__panel,
html.dark .branch-aside-card,
html.dark .contact-form-wrap,
html.dark .contact-forms,
html.dark .vacancy-apply-shell__header,
html.dark .clients-marquee__logo-wrap,
html.dark .careers-availability__option,
html.dark .careers-date-picker__panel,
html.dark .careers-date-picker__nav,
html.dark .faq-search__input,
html.dark .vacancy-stepper__dot,
html.dark .vacancy-apply-timeline__marker {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

html.dark .review-card,
html.dark .value-card,
html.dark .contact-card,
html.dark .branch-card,
html.dark .home-panel,
html.dark .legal-section {
    box-shadow: var(--shadow);
}

html.dark .services-carousel__nav,
html.dark .branches-carousel__nav {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

html.dark .services-carousel__nav:hover,
html.dark .branches-carousel__nav:hover {
    background: var(--surface-2);
    color: #fff;
}

/* Home-reviews: witte glazen panel → donker, kaarten iets lichter */
html.dark .section--reviews-home .reviews-panel {
    background: rgba(19, 31, 54, 0.85);
    border-color: var(--border);
    box-shadow: var(--shadow);
}

html.dark .section--reviews-home .reviews-head .section__header h2,
html.dark .section--reviews-home .reviews-head .section__label {
    color: #f1f5f9;
}

html.dark .section--reviews-home .reviews-head .section__header h2::after {
    background: linear-gradient(90deg, #60a5fa, rgba(96, 165, 250, 0.25));
}

html.dark .section--reviews-home .review-card {
    background: var(--surface-2);
    border-color: var(--border);
}

html.dark .process-step__num {
    background: var(--surface-2);
}

html.dark .section--about-home,
html.dark .section--branches-home {
    background: var(--bg);
}

/* ---- Formulieren ---- */
html.dark .form-group input,
html.dark .form-group select,
html.dark .form-group textarea,
html.dark .contact-forms .form-group input,
html.dark .contact-forms .form-group select,
html.dark .contact-forms .form-group textarea,
html.dark .faq-search__input,
html.dark .careers-availability__option input[type="radio"] + span,
html.dark .careers-date-picker__input,
html.dark .vacancy-apply-shell input,
html.dark .vacancy-apply-shell select,
html.dark .vacancy-apply-shell textarea {
    background-color: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

html.dark .form-group input::placeholder,
html.dark .form-group textarea::placeholder,
html.dark .contact-forms input::placeholder,
html.dark .contact-forms textarea::placeholder {
    color: #64748b;
}

html.dark .form-group input:focus,
html.dark .form-group select:focus,
html.dark .form-group textarea:focus,
html.dark .contact-forms input:focus,
html.dark .contact-forms select:focus,
html.dark .contact-forms textarea:focus,
html.dark .faq-search__input:focus {
    background-color: var(--surface-2);
    border-color: #3b82f6;
    box-shadow: var(--ring);
}

/* ---- Status-tints (groen/rood/amber) ---- */
html.dark .review-card__rating--positive,
html.dark .alert--success,
html.dark .quote-accept__status--accepted,
html.dark [class*="--success"] {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

html.dark .alert--error,
html.dark [class*="--danger"],
html.dark [class*="--error"] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

html.dark [class*="--warning"],
html.dark .quote-accept__status--expired,
html.dark .quote-accept__state-icon--warning {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

html.dark .quote-accept__status--pending {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

/* ---- Reviews-platform pills ---- */
html.dark .reviews-platform {
    background: var(--surface-2);
    border-color: var(--border);
    box-shadow: none;
}

html.dark .reviews-platform:hover {
    border-color: rgba(59, 130, 246, 0.35);
}

html.dark .reviews-platform__score {
    color: #f1f5f9;
}

html.dark .reviews-platform__icon {
    background: rgba(255, 255, 255, 0.08);
}

/* ---- Cookie-banner, scroll-top, toasts ---- */
html.dark .cookie-banner__inner {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}

html.dark .scroll-top {
    background: var(--surface-2);
    color: var(--text);
}

html.dark .scroll-top:hover {
    background: var(--primary);
    color: #fff;
}

/* ---- Footer (is al donker; kleine verfijningen) ---- */
html.dark .footer-callback__input-wrap {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: none;
}

html.dark .footer-callback__input-wrap:focus-within {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

html.dark .footer-callback__input {
    color: #f1f5f9;
}

html.dark .footer-callback__input::placeholder {
    color: rgba(226, 232, 240, 0.45);
}

html.dark .footer-callback__input.is-invalid {
    color: #fca5a5;
}

html.dark .footer-callback__alert--success {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

html.dark .footer-callback__alert--error {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

/* ---- Contact-kaarten / sociale links ---- */
html.dark .contact-social__link {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

html.dark .contact-social__link:hover {
    background: var(--surface-2);
}

html.dark .contact-map {
    box-shadow: var(--shadow);
}

html.dark .contact-map__route {
    background: var(--surface);
    border-color: var(--border);
}

html.dark .contact-map__route:hover {
    background: var(--surface-2);
    color: #93c5fd;
}

/* ---- Careers-specifiek ---- */
html.dark .careers-flow-card__header {
    border-bottom-color: var(--border);
}

html.dark .careers-process--light .careers-process-step__num {
    background: var(--surface-2);
    color: var(--text);
}

html.dark .flow-back-btn__icon {
    background: var(--surface-2);
    color: var(--text);
}

html.dark .flow-back-btn:hover .flow-back-btn__icon {
    background: var(--surface);
    color: #93c5fd;
}

html.dark .vacancy-apply-shell__header {
    border-bottom-color: var(--border);
}

html.dark .vacancy-panel,
html.dark .vacancy-aside-card,
html.dark .vacancy-related-card {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
    box-shadow: var(--shadow);
}

html.dark .flow-back-btn,
html.dark .vacancy-apply-timeline {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

html.dark .vacancy-panel__title,
html.dark .vacancy-aside-card__title {
    color: #f1f5f9;
}

html.dark .vacancy-apply-timeline__label {
    color: var(--text);
}

html.dark .vacancy-apply-timeline__label.is-active {
    color: #93c5fd;
}

html.dark .careers-form-badge {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}

html.dark .file-drop {
    background: rgba(19, 31, 54, 0.7);
    border-color: var(--border);
    color: var(--text);
}

html.dark .file-drop:hover {
    border-color: #3b82f6;
    background: rgba(19, 31, 54, 0.9);
}

html.dark .file-drop__title,
html.dark .file-drop__hint {
    color: var(--text);
}

/* ---- Sollicitatie-flow: donkerblauwe accenten oplichten in donkere modus ----
   (basisregels gebruiken var(--primary) = #0c2461; zonder override zijn ze
   onleesbaar op de donkere kaart.) */
html.dark .vacancy-apply-panel__eyebrow {
    color: #93c5fd;
}

html.dark .vacancy-apply-shell__back-link {
    color: #94a3b8;
}

html.dark .vacancy-apply-shell__back-link:hover {
    color: #fff;
}

html.dark .file-drop--sleek .file-drop__hint span {
    color: #93c5fd;
}

/* ---- Home: werkwijze-stappen + contact-tabs (witte glazen vlakken) ---- */
html.dark .home-steps {
    background: rgba(19, 31, 54, 0.85);
    border-color: var(--border);
    box-shadow: var(--shadow);
}

html.dark .home-steps__item:not(:last-child)::after {
    background: var(--border);
}

html.dark .home-steps__mark {
    background: var(--surface-2);
    color: #93c5fd;
}

html.dark .home-steps__item strong {
    color: #f1f5f9;
}

html.dark .home-steps__body span {
    color: var(--text-light);
}

html.dark .contact-forms__tabs {
    background: var(--surface);
    border-color: var(--border);
}

html.dark .contact-forms__tab {
    color: var(--text-light);
}

html.dark .contact-forms__tab:hover {
    background: rgba(255, 255, 255, 0.06);
}

html.dark .contact-forms__tab.is-active {
    background: var(--surface-2);
    color: #f1f5f9;
}

html.dark .contact-forms__tab.is-active strong,
html.dark .contact-forms__tabs .contact-forms__tab strong {
    color: inherit;
}

/* ---- Quote-accept ---- */
html.dark .quote-accept__state-icon--success {
    background: rgba(34, 197, 94, 0.12);
}

html.dark .quote-accept__card {
    box-shadow: var(--shadow-lg);
}

html.dark .quote-accept__table-wrap {
    border-color: var(--border);
}

html.dark .quote-accept__table th,
html.dark .quote-accept__table td {
    border-bottom-color: var(--border);
}

html.dark .quote-accept__table th {
    background: var(--surface-2);
    color: #94a3b8;
}

html.dark .quote-accept__table td {
    color: var(--text);
}

/* ---- FAQ ---- */
html.dark .faq-item__question {
    color: var(--text);
}

html.dark .faq-item__answer {
    color: var(--text-light);
    border-top-color: var(--border);
}

html.dark .faq-filter {
    background: var(--bg-alt);
    border-color: var(--border);
}

html.dark .faq-filter__btn {
    color: var(--text);
}

html.dark .faq-filter__btn:hover,
html.dark .faq-filter__btn.is-active,
html.dark .faq-filter.is-active {
    background: var(--surface-2);
    color: #fff;
}

/* ---- Legal ---- */
html.dark .legal-page__panel {
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    border-color: var(--border);
    box-shadow: var(--shadow);
}

html.dark .legal-page__toc a:hover,
html.dark .legal-page__toc a:focus-visible {
    background: rgba(59, 130, 246, 0.12);
    color: #93c5fd;
}

html.dark .legal-page__toc-title,
html.dark .legal-page__related-label,
html.dark .legal-page__contact-label {
    color: #93c5fd;
}

html.dark .legal-page__related-link {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

html.dark .legal-page__related-link:hover {
    background: var(--surface-2);
    color: #93c5fd;
}

html.dark .legal-section h2,
html.dark .legal-section h3 {
    color: #f1f5f9;
}

html.dark .legal-section__body a {
    color: #93c5fd;
}

html.dark .legal-section__body a:hover {
    color: #bfdbfe;
}

/* ---- Overige kleine vlakken ---- */
html.dark .branch-aside-card--cta {
    background: var(--surface);
}

html.dark .branch-card__image {
    background: var(--surface-2);
}

html.dark .home-panel__title,
html.dark .home-panel__text {
    color: var(--text);
}

/* ---- Mobiel: CTA-balk, nav-borders ---- */
html.dark .mobile-cta {
    background: rgba(13, 21, 38, 0.96);
    border-top-color: var(--border);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
}

html.dark .nav__submenu-all,
html.dark .nav__submenu-grid a {
    border-bottom-color: var(--border);
}

html.dark .nav__submenu-grid a:hover,
html.dark .nav__submenu-grid a.active {
    background: rgba(59, 130, 246, 0.12);
}

/* ---- Toasts ---- */
html.dark .site-toast {
    background: rgba(19, 31, 54, 0.98);
    border-color: var(--border);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    color: #f1f5f9;
}

html.dark .site-toast--error {
    background: linear-gradient(180deg, #1a2436 0%, #251a1e 100%);
    border-color: rgba(239, 68, 68, 0.35);
}

html.dark .site-toast--success {
    background: linear-gradient(180deg, #1a2436 0%, #14251e 100%);
    border-color: rgba(34, 197, 94, 0.35);
}

html.dark .site-toast--error .site-toast__icon {
    background: rgba(239, 68, 68, 0.16);
    color: #f87171;
}

html.dark .site-toast--success .site-toast__icon {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
}

/* ---- Scrollbars ---- */
html.dark {
    scrollbar-color: #334155 #0b1220;
}

html.dark ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

html.dark ::-webkit-scrollbar-track {
    background: #0b1220;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #26334d;
    border-radius: 8px;
    border: 3px solid #0b1220;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #33466b;
}

/* ============================================================
   Donker thema — typografie & fijnere details (aug 2026)
   ============================================================ */
html.dark {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
}

/* Kopteksten: net iets strakker en met betere contrast in donker */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4 {
    color: #f1f5f9;
    letter-spacing: -0.015em;
}

html.dark .section__title,
html.dark .section__heading,
html.dark .hero__title,
html.dark .page-hero__title {
    color: #f8fafc;
}

html.dark .section__label,
html.dark .section__eyebrow,
html.dark .page-hero__label {
    color: #93c5fd;
}

/* Paragrafen en secundaire tekst iets zachter */
html.dark p,
html.dark li {
    color: var(--text);
}

html.dark .section__lead,
html.dark .section__subtitle {
    color: var(--text-light);
}

/* Links binnen content: duidelijk herkenbaar */
html.dark .legal-section a,
html.dark .content a {
    color: #93c5fd;
}

html.dark .legal-section a:hover,
html.dark .content a:hover {
    color: #bfdbfe;
}

/* Nummers en statistieken: lining figures */
html.dark .process-step__num,
html.dark .stat-number,
html.dark .stats__number,
html.dark .home-stats__value {
    font-variant-numeric: lining-nums tabular-nums;
    color: #f8fafc;
}

/* Focus-ring: goed zichtbaar in donker */
html.dark a:focus-visible,
html.dark button:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

/* ---- Diensten-carousel home: witte content-panel + foto-overlay ---- */
html.dark .services-carousel--home-panel .service-card__body {
    background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 100%);
    border-left-color: var(--border);
}

html.dark .services-carousel--home-panel .service-card__photo::after {
    background: linear-gradient(to right, transparent 35%, rgba(11, 18, 32, 0.95) 100%);
}

html.dark .service-card--home-slide .service-card__slide-icon {
    color: #93c5fd;
}

html.dark .service-card--home-slide h3 {
    color: #f1f5f9;
}

html.dark .service-card--home-slide p {
    color: #94a3b8;
}

/* ---- Icon-containers: iconen waren donkerblauw op donker ---- */
html.dark .service-card__icon,
html.dark .value-card__icon,
html.dark .careers-process-step__icon {
    background: rgba(59, 130, 246, 0.14);
    color: #93c5fd;
}

html.dark .flow-back-btn__icon {
    background: var(--surface-2);
    border-color: var(--border);
    color: #e2e8f0;
}

html.dark .flow-back-btn:hover .flow-back-btn__icon {
    background: #2563eb;
    color: #fff;
}

html.dark .vacancy-apply-summary__meta li {
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
}

html.dark .vacancy-apply-summary__meta svg {
    color: #93c5fd;
}

/* ---- Footer: contact-iconen iets oplichten (waren donkerblauw) ---- */
html.dark .footer__contact-icon svg {
    color: #93c5fd;
}

html.dark .footer-callback__input-icon svg {
    color: #93c5fd;
}

/* ---- Reviews-carousel: witte nav-knoppen werden donker onzichtbaar ---- */
html.dark .reviews-carousel__nav {
    background: var(--surface-2);
    border-color: var(--border);
    color: #e2e8f0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

html.dark .reviews-carousel__nav:hover:not(:disabled) {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

/* ---- Logo's: donkerblauw logo wordt licht op donkere vlakken ----
   Specifiek genoeg (0,3,1) om de hover-regel in style.css te overslaan:
   .logo--animated:hover .logo__img--header { filter: brightness(1.08); } */
html.dark .logo--header .logo__img--header,
html.dark .logo--footer .logo__img--footer,
html.dark .footer__logo .logo__img,
html.dark .maintenance-logo img {
    filter: brightness(0) invert(1);
    opacity: 0.96;
}

html.dark .logo--header:hover .logo__img--header,
html.dark .logo--animated:hover .logo__img--header {
    filter: brightness(0) invert(1);
    opacity: 1;
}

/* ---- Diensten-carousel: bar, nav, dots, progress (donker glas) ---- */
html.dark .services-carousel__bar,
html.dark .services-carousel--home-panel .services-carousel__bar {
    background: var(--surface);
    border-top-color: var(--border);
}

html.dark .services-carousel__nav {
    background: var(--surface-2);
    border-color: var(--border);
    color: #e2e8f0;
}

html.dark .services-carousel__nav:hover:not(:disabled) {
    background: #1e3a8a;
    border-color: #1e3a8a;
    color: #fff;
}

html.dark .services-carousel__dot {
    background: rgba(255, 255, 255, 0.18);
}

html.dark .services-carousel__progress {
    background: rgba(255, 255, 255, 0.12);
}

html.dark .branches-carousel__dot {
    background: rgba(255, 255, 255, 0.18);
}

html.dark .branches-carousel__dot.is-active {
    background: #93c5fd;
}

html.dark .branches-carousel__dot:focus-visible {
    outline-color: rgba(147, 197, 253, 0.7);
}

html.dark .services-carousel__count {
    color: var(--text-light);
}

html.dark .services-carousel__all-link {
    color: #93c5fd;
}

html.dark .services-carousel__all-link:hover {
    color: #bfdbfe;
}

/* ---- Careers: filters + vacature-kaarten ---- */
html.dark .careers-filters {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html.dark .careers-filter {
    color: #94a3b8;
}

html.dark .careers-filter:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.06);
}

html.dark .careers-filter.is-active {
    color: #f1f5f9;
    background: var(--surface-2);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 4px 14px rgba(0, 0, 0, 0.25),
        0 0 0 1px var(--border);
}

html.dark .careers-filter__count {
    background: rgba(255, 255, 255, 0.1);
    color: #93c5fd;
}

html.dark .careers-filter.is-active .careers-filter__count {
    background: rgba(255, 255, 255, 0.12);
    color: #bfdbfe;
}

html.dark .careers-filters__empty {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border);
    color: var(--text-light);
}

html.dark .careers-card {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

html.dark .careers-card:hover {
    border-color: rgba(96, 165, 250, 0.35);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

html.dark .careers-card__media {
    background: linear-gradient(135deg, rgba(12, 36, 97, 0.4), rgba(52, 152, 219, 0.18));
}

html.dark .careers-card__head h3 {
    color: #f1f5f9;
}

html.dark .careers-card__category {
    background: rgba(255, 255, 255, 0.08);
    color: #93c5fd;
}

html.dark .careers-card__link {
    border-top-color: var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: #93c5fd;
}

html.dark .careers-card__link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #bfdbfe;
}

html.dark .careers-card--open {
    background: linear-gradient(180deg, rgba(12, 36, 97, 0.35) 0%, rgba(19, 31, 54, 1) 100%);
}

/* ---- Diensten pagina: stappen-sectie (was wit gradient) ---- */
html.dark .section--steps-page {
    background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
}

/* ---- Over-ons: panel-kaarten ---- */
html.dark .about-page__panel {
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
    border-color: var(--border);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

html.dark .about-page__panel-head h3 {
    color: #f1f5f9;
}

/* ---- Contactpagina: social-bar, openingstijden, kaart-header ---- */
html.dark .contact-social,
html.dark .contact-hours,
html.dark .contact-map {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

html.dark .contact-map__head {
    background: var(--surface);
    border-bottom-color: var(--border);
}

html.dark .home-trust-band {
    background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
}

/* ---- Vacature-pagina: sollicitatie-kop in de dark banner ---- */
html.dark .vacancy-apply-form-wrap .careers-form-wrap__head h2 {
    color: #f1f5f9;
}

html.dark .vacancy-apply-form-wrap .careers-form-wrap__head p {
    color: #94a3b8;
}

/* ---- Formulier-labels: waren donkerblauw op donker ---- */
html.dark .form-group label {
    color: #e2e8f0;
}

/* ---- Diensten-kaart links: waren donkerblauw op donker ---- */
html.dark .service-card__link {
    color: #93c5fd;
}

html.dark .service-card__link:hover {
    color: #bfdbfe;
}

/* ---- Branche-kaarten: titels waren donkerblauw op donker ---- */
html.dark .branch-card__text strong,
html.dark .branch-card__body strong {
    color: #f1f5f9;
}

/* ---- Over-ons: story-labels ---- */
html.dark .about-story__label {
    color: #93c5fd;
}

/* ---- FAQ: categorie-labels ---- */
html.dark .faq-item__category {
    color: #93c5fd;
}

/* ---- Legal-pagina's: sectienummers + gerelateerde links ---- */
html.dark .legal-section__num {
    background: rgba(255, 255, 255, 0.06);
    color: #93c5fd;
}

html.dark .legal-page__related-link {
    background: var(--surface);
    border-color: var(--border);
    color: #e2e8f0;
}

html.dark .legal-page__related-link svg {
    color: #93c5fd;
}

html.dark .legal-page__related-link:hover,
html.dark .legal-page__related-link:focus-visible {
    border-color: rgba(96, 165, 250, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ---- Vacature-pagina: stepper, samenvatting, tijdlijn, gerelateerd ---- */
html.dark .vacancy-stepper__step,
html.dark .vacancy-stepper__step.is-done {
    color: #94a3b8;
}

html.dark .vacancy-stepper__step[aria-current='step'] .vacancy-stepper__label {
    color: #f1f5f9;
}

html.dark .vacancy-stepper__step.is-done .vacancy-stepper__dot {
    border-color: #60a5fa;
    background: #2563eb;
    color: #fff;
}

html.dark .vacancy-apply-summary__eyebrow {
    color: #93c5fd;
}

html.dark .vacancy-apply-summary__title {
    color: #f1f5f9;
}

html.dark .vacancy-apply-timeline__content strong {
    color: #f1f5f9;
}

html.dark .vacancy-apply-timeline__content p {
    color: #94a3b8;
}

html.dark .vacancy-related-card strong,
html.dark .vacancy-related-card h3,
html.dark .vacancy-related-card h4 {
    color: #f1f5f9;
}

html.dark .vacancy-related-card__category {
    color: #93c5fd;
}

/* ---- Sollicitatie: succes-bevestiging na verzenden ---- */
html.dark .careers-form-success {
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.1) 0%, var(--surface) 70%);
    border-color: rgba(34, 197, 94, 0.35);
}

html.dark .careers-form-success__icon {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
}

html.dark .contact-hours h4,
html.dark .contact-map__copy h3 {
    color: #f1f5f9;
}

html.dark .contact-card span {
    color: #f1f5f9;
}

html.dark .contact-hours li span:last-child {
    color: #e2e8f0;
}

html.dark .contact-hours li.is-today span:first-child {
    color: #f1f5f9;
}

html.dark .contact-hours__status--closed {
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border);
}

html.dark .contact-form-wrap__title {
    color: #f1f5f9;
}

/* ---- Gerelateerde branches/diensten sectie (was wit gradient) ---- */
html.dark .section--branch-related,
html.dark .branch-detail {
    background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
}

html.dark .careers-culture__shell {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow);
}

html.dark .careers-benefit {
    background: rgba(255, 255, 255, 0.04);
}

html.dark .careers-benefit__icon {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
}

html.dark .careers-benefit h4 {
    color: #f1f5f9;
}

/* ---- About-preview: stat-badge (donker glas) ---- */
html.dark .about-preview__badge {
    background: rgba(15, 23, 42, 0.9);
    border-color: var(--border);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

html.dark .about-preview__badge strong {
    background: linear-gradient(135deg, #93c5fd, #60a5fa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #93c5fd;
}

html.dark .about-preview__badge span {
    color: #94a3b8;
}

/* Vloeiende overgang bij thema-wissel (kort, geen permanente transition) */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease !important;
}

@media (prefers-reduced-motion: reduce) {
    html.theme-switching,
    html.theme-switching *,
    html.theme-switching *::before,
    html.theme-switching *::after {
        transition: none !important;
    }
}

/* ---- Home: dienst-slide-labels + review-auteurs (contrast in donker) ----
   (basisregels gebruiken --accent/--primary-dark = donkerblauw) */
html.dark .service-card--home-slide .service-card__slide-label {
    color: #93c5fd;
}

html.dark .review-card__author strong {
    color: #cbd5e1;
}

html.dark .review-card__author span {
    color: #94a3b8;
}

/* ---- Branches + contact: accentlinks oplichten in donker ---- */
html.dark .branch-card__cta {
    color: #93c5fd;
}

html.dark .branch-aside-card__label {
    color: #93c5fd;
}

html.dark .contact-map__route {
    color: #93c5fd;
}

html.dark .contact-map__route svg {
    color: #93c5fd;
}

/* ---- Sollicitatie: proces-badge + file-drop iconen (waren donkerblauw) ---- */
html.dark .careers-process__badge {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border);
    color: #e2e8f0;
}

html.dark .careers-process__badge svg {
    color: #93c5fd;
}

html.dark .file-drop__content svg {
    color: #93c5fd;
}

/* ---- Vacature: proces-badge (chip) leesbaar in donker ----
   (basis heeft eigen licht-blauwe tint, maar staat op de donkere kaart) */
html.dark .vacancy-apply-panel__chip {
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.28);
    color: #93c5fd;
}

/* ---- Vacature-formulier: datum-veld leesbaar in donker ---- */
html.dark .careers-date-picker__trigger {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
html.dark .careers-date-picker__trigger svg {
    color: #93c5fd;
}

/* ---- Formulieren: native dropdown consistent donker ---- */
html.dark select,
html.dark input,
html.dark textarea {
    color-scheme: dark;
}

/* ---- Contact: 'Nu open'-status leesbaar in donker ---- */
html.dark .contact-hours__status--open {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.16);
}

/* ---- Sollicitatieformulier: iconen leesbaar in donker ---- */
html.dark .careers-form-badge svg {
    color: #93c5fd;
}
html.dark .file-drop--sleek .file-drop__icon {
    background: rgba(59, 130, 246, 0.14);
    color: #93c5fd;
}
html.dark .file-drop--sleek .file-drop__state {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
}
html.dark .file-drop--sleek.has-file .file-drop__icon {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
}

/* ---- Thema-toggle op het logo (header) ---- */
.logo--header {
    position: relative;
    gap: 10px;
}

/* ============================================
   Homepage: strakke sectie-afstanden (aug 2026)
   ============================================ */
.page-home .section--home-services {
    padding-top: 24px !important;
    padding-bottom: 56px !important;
}

.page-home .section--clients {
    padding: 28px 0 24px !important;
}

.page-home .section--about-home {
    padding: 48px 0 44px !important;
}

.page-home .section--branches-home {
    padding: 40px 0 48px !important;
}

.page-home .section--reviews-home {
    padding: 32px 0 44px !important;
}

/* ============================================
   Cursor: geen tekst-icoon overal — alleen bij typen
   ============================================ */
body {
    cursor: default;
}

body * {
    cursor: default;
}

/* Interactieve elementen behouden de handcursor */
a,
button,
[role="button"],
input[type="checkbox"],
input[type="radio"],
input[type="range"],
select,
summary,
label[for] {
    cursor: pointer;
}

/* Bekende interactieve componenten van de site behouden de handcursor */
.site-theme-toggle,
.logo--header,
.logo__link,
.nav__link,
.nav__trigger,
.nav__close,
.hamburger,
[class*="__link"],
[class*="__btn"],
[class*="__button"],
[class*="__cta"],
[class*="__card"] a,
[class*="__toggle"],
[class*="__trigger"],
.accordion__header,
.cookie-banner__accept,
.cookie-banner__decline,
[class*="carousel"] button,
[class*="slider"] button,
button[class*="arrow"],
[class*="__nav"] button {
    cursor: pointer;
}

/* Typen: tekstcursor alleen hier */
input:not([type]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
[contenteditable="true"] {
    cursor: text;
}

/* Specifieke bestaande regels in style.css die de handcursor
   op niet-interactieve elementen zetten, blijven werken. */