/**
 * KC Nijmegen - Dark Mode Stylesheet
 * All dark mode styles consolidated in one file
 *
 * @package KCNijmegen
 * @version 1.0.0
 */

@media (prefers-color-scheme: dark) {

    /* ==========================================================================
       CSS Variables for Dark Mode
       ========================================================================== */
    :root {
        --primary-color: #10b981;
        --primary-light: #34d399;
        --primary-accent: #059669;
        --primary-dark: #047857;
        --primary-darker: #065f46;
        --primary-lightest: #064e3b;

        --text-color: #f3f4f6;
        --text-light: #d1d5db;
        --text-muted: #9ca3af;
        --text-on-primary: #ffffff;

        --bg-color: #1f2937;
        --bg-light: #374151;
        --bg-dark: #030712;

        --border-color: #374151;

        --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
        --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
        --shadow-lg: 0 10px 25px rgba(0,0,0,0.5);
    }

    /* ==========================================================================
       Base Elements
       ========================================================================== */
    body {
        background-color: #111827 !important;
        color: #f3f4f6 !important;
    }

    /* Force light text on all elements */
    body *,
    html * {
        color: #f3f4f6;
    }

    /* Headings */
    h1, h2, h3, h4, h5, h6,
    h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
        color: #ffffff !important;
    }

    /* Paragraphs and text elements */
    p, span, div, li, td, th, label, legend {
        color: #e5e7eb !important;
    }

    /* Page titles */
    .page-title,
    .entry-title {
        color: #ffffff !important;
    }

    /* Links */
    a {
        color: #34d399 !important;
    }

    a:hover {
        color: #6ee7b7 !important;
    }

    /* Strong and emphasis */
    strong, b {
        color: #ffffff !important;
    }

    em, i {
        color: #d1d5db !important;
    }

    /* ==========================================================================
       Header
       ========================================================================== */
    .header-top,
    .site-header .header-top {
        background-color: #111827 !important;
    }

    .header-top *,
    .header-top a,
    .header-top-content,
    .header-top-content *,
    .quick-links,
    .quick-links *,
    .header-contact,
    .header-contact * {
        color: #f3f4f6 !important;
    }

    .header-top a:hover {
        color: #34d399 !important;
    }

    .header-top .dashicons {
        color: #34d399 !important;
    }

    .site-header {
        background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
        border-bottom: 1px solid #374151;
    }

    .site-header * {
        color: #ffffff !important;
    }

    /* ==========================================================================
       Navigation
       ========================================================================== */
    .main-navigation,
    .main-navigation ul,
    #primary-menu,
    .main-navigation > ul,
    nav.main-navigation,
    #site-navigation {
        background-color: transparent !important;
        background: transparent !important;
    }

    .main-navigation li,
    #primary-menu li,
    .main-navigation ul li {
        background-color: transparent !important;
        background: transparent !important;
    }

    .main-navigation a,
    .menu-item a {
        color: #ffffff !important;
        background-color: transparent !important;
    }

    .main-navigation a:hover,
    .main-navigation .current-menu-item > a {
        background-color: #059669 !important;
        color: white !important;
    }

    /* Dropdown/Submenu */
    .sub-menu,
    ul.sub-menu,
    .main-navigation .sub-menu,
    .main-navigation ul.sub-menu {
        background-color: #1f2937 !important;
        background: #1f2937 !important;
    }

    .sub-menu li,
    ul.sub-menu li,
    .main-navigation .sub-menu li {
        background-color: #1f2937 !important;
        background: #1f2937 !important;
    }

    .sub-menu a,
    ul.sub-menu li a,
    .main-navigation .sub-menu a {
        background-color: #1f2937 !important;
        color: #f3f4f6 !important;
    }

    .sub-menu a:hover,
    .sub-menu li:hover > a,
    .main-navigation .sub-menu a:hover {
        color: #ffffff !important;
        background-color: #374151 !important;
    }

    /* Mobile menu */
    .mobile-menu {
        background-color: #1f2937 !important;
        border: 1px solid #374151 !important;
    }

    .mobile-menu a {
        color: #f3f4f6 !important;
        border-bottom: 1px solid #374151 !important;
    }

    .menu-toggle {
        background-color: #047857 !important;
        border: 1px solid #34d399 !important;
    }

    .menu-toggle:hover {
        background-color: #059669 !important;
    }

    /* ==========================================================================
       Content Areas
       ========================================================================== */
    .site-content,
    .content-area,
    article,
    main {
        background-color: #1f2937 !important;
    }

    .entry-content,
    .entry-content *,
    .page-content,
    .page-content *,
    .post-content,
    .post-content * {
        color: #e5e7eb !important;
    }

    /* Ensure paragraphs and list items are clearly readable */
    .entry-content p,
    .page-content p,
    .post-content p,
    article p {
        color: #e5e7eb !important;
    }

    .entry-content li,
    .page-content li,
    .post-content li,
    article li {
        color: #e5e7eb !important;
    }

    /* Subheadings in content */
    .entry-content h3,
    .entry-content h4,
    .page-content h3,
    .page-content h4 {
        color: #34d399 !important;
    }

    /* ==========================================================================
       Cards and Boxes
       ========================================================================== */
    .card,
    .widget,
    .sidebar-widget,
    .dashboard-card,
    .course-card,
    .post-card {
        background-color: #1f2937 !important;
        border-color: #374151 !important;
    }

    .card-header,
    .widget-header,
    .panel-heading {
        background-color: #059669 !important;
        color: #ffffff !important;
    }

    /* Course Info Card - sidebar */
    .course-info-card,
    .course-info-card * {
        background-color: #1f2937 !important;
        color: #f3f4f6 !important;
    }

    .course-info-card h3 {
        color: #34d399 !important;
    }

    .course-details-list li,
    .course-details-list li * {
        color: #e5e7eb !important;
    }

    .course-details-list .dashicons {
        color: #34d399 !important;
    }

    .course-enrollment {
        border-top-color: #374151 !important;
    }

    .login-message {
        color: #9ca3af !important;
    }

    /* Course Enrollment Form */
    .course-enrollment-form,
    .course-enrollment-form * {
        background-color: #1f2937 !important;
        color: #f3f4f6 !important;
    }

    .course-enrollment-form h3 {
        color: #34d399 !important;
    }

    .course-enrollment-form label {
        color: #e5e7eb !important;
    }

    .course-enrollment-form input,
    .course-enrollment-form select,
    .course-enrollment-form textarea {
        background-color: #374151 !important;
        border-color: #4b5563 !important;
        color: #f3f4f6 !important;
    }

    .course-enrollment-form input::placeholder,
    .course-enrollment-form textarea::placeholder {
        color: #9ca3af !important;
    }

    .course-enrollment-form .schedule-info {
        background-color: #1e3a5f !important;
        color: #7dd3fc !important;
    }

    .course-enrollment-form .schedule-list li {
        border-bottom-color: #374151 !important;
        color: #e5e7eb !important;
    }

    .course-enrollment-form a {
        color: #34d399 !important;
    }

    /* Enrollment status boxes */
    .enrollment-closed,
    .enrollment-login-required,
    .course-full {
        background-color: #374151 !important;
        color: #f3f4f6 !important;
    }

    .already-enrolled {
        background-color: #064e3b !important;
        color: #6ee7b7 !important;
        border-color: #065f46 !important;
    }

    /* ==========================================================================
       Forms
       ========================================================================== */
    input,
    textarea,
    select {
        background-color: #1f2937 !important;
        color: #f3f4f6 !important;
        border-color: #374151 !important;
    }

    input::placeholder,
    textarea::placeholder {
        color: #9ca3af !important;
    }

    input:focus,
    textarea:focus,
    select:focus {
        border-color: #34d399 !important;
        box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1) !important;
    }

    /* Checkboxes and labels */
    .form-group label,
    .enrollment-form label,
    .enrollment-form label * {
        color: #d1d5db !important;
    }

    /* ==========================================================================
       Buttons
       ========================================================================== */
    button,
    .btn,
    input[type="submit"],
    input[type="button"] {
        color: #ffffff !important;
    }

    .btn-primary {
        background-color: #059669 !important;
    }

    .btn-primary:hover {
        background-color: #047857 !important;
    }

    .btn-outline {
        background: transparent !important;
        border-color: #34d399 !important;
        color: #34d399 !important;
    }

    .btn-outline:hover {
        background-color: #34d399 !important;
        color: #111827 !important;
    }

    /* ==========================================================================
       Alerts and Notices
       ========================================================================== */
    .alert-error {
        background-color: #7f1d1d !important;
        color: #fca5a5 !important;
        border-color: #991b1b !important;
    }

    .alert-success {
        background-color: #064e3b !important;
        color: #6ee7b7 !important;
        border-color: #065f46 !important;
    }

    .alert-info {
        background-color: #1e3a5f !important;
        color: #7dd3fc !important;
        border-color: #0369a1 !important;
    }

    .alert-warning {
        background-color: #78350f !important;
        color: #fcd34d !important;
        border-color: #92400e !important;
    }

    .single-course .alert-success {
        background-color: #064e3b !important;
        color: #6ee7b7 !important;
        border-color: #065f46 !important;
    }

    .single-course .alert-info {
        background-color: #1e3a5f !important;
        color: #7dd3fc !important;
        border-color: #0369a1 !important;
    }

    .single-course .alert-warning {
        background-color: #78350f !important;
        color: #fcd34d !important;
        border-color: #92400e !important;
    }

    /* Gallery Notice */
    .gallery-notice,
    .gallery-notice *,
    .notice-box,
    .notice-box * {
        background-color: #1f2937 !important;
        color: #f3f4f6 !important;
        border-color: #374151 !important;
    }

    /* ==========================================================================
       Tables
       ========================================================================== */
    table {
        background-color: #1f2937 !important;
        color: #f3f4f6 !important;
        border-color: #374151 !important;
    }

    table,
    table *,
    .entry-content table,
    .entry-content table * {
        border-color: #374151 !important;
    }

    th,
    thead tr,
    table thead tr {
        background-color: #111827 !important;
        color: #ffffff !important;
    }

    /* Override inline styles on table headers */
    tr[style*="background: #f5f5f5"],
    tr[style*="background:#f5f5f5"],
    tr[style*="background: rgb(245"],
    thead tr[style] {
        background-color: #111827 !important;
    }

    td,
    tbody td {
        color: #f3f4f6 !important;
        border-color: #374151 !important;
        background-color: #1f2937 !important;
    }

    /* Override inline styles on table cells */
    td[style*="border: 1px solid #ddd"],
    td[style*="border:1px solid #ddd"],
    th[style*="border: 1px solid #ddd"],
    th[style*="border:1px solid #ddd"] {
        border-color: #374151 !important;
        background-color: #1f2937 !important;
    }

    th[style*="border: 1px solid #ddd"],
    th[style*="border:1px solid #ddd"] {
        background-color: #111827 !important;
    }

    /* Zebra striping for tables */
    tbody tr:nth-child(even) {
        background-color: #111827 !important;
    }

    tbody tr:nth-child(odd) {
        background-color: #1f2937 !important;
    }

    /* ==========================================================================
       Footer
       ========================================================================== */
    .site-footer {
        background-color: #065f46 !important;
        border-top: 1px solid #374151;
    }

    .site-footer,
    .site-footer * {
        color: #d1d5db !important;
    }

    .site-footer a {
        color: #34d399 !important;
    }

    .site-footer a:hover {
        color: #6ee7b7 !important;
    }

    /* ==========================================================================
       Sidebar and Widgets
       ========================================================================== */
    .sidebar,
    .sidebar * {
        color: #f3f4f6 !important;
    }

    .widget-title {
        color: #ffffff !important;
    }

    /* ==========================================================================
       Pagination
       ========================================================================== */
    .pagination a,
    .page-numbers {
        background-color: #1f2937 !important;
        color: #34d399 !important;
        border-color: #374151 !important;
    }

    .pagination .current {
        background-color: #059669 !important;
        color: #ffffff !important;
    }

    /* ==========================================================================
       Meta and Breadcrumbs
       ========================================================================== */
    .entry-meta,
    .entry-meta *,
    .post-meta,
    .post-meta * {
        color: #9ca3af !important;
    }

    .breadcrumbs,
    .breadcrumbs * {
        color: #9ca3af !important;
    }

    /* ==========================================================================
       Code and Pre
       ========================================================================== */
    code,
    pre,
    kbd,
    samp {
        background-color: #111827 !important;
        color: #34d399 !important;
    }

    /* ==========================================================================
       Blockquotes
       ========================================================================== */
    blockquote,
    blockquote * {
        color: #d1d5db !important;
        border-left-color: #34d399 !important;
    }

    /* ==========================================================================
       Horizontal Rules
       ========================================================================== */
    hr {
        border-color: #374151 !important;
    }

    /* ==========================================================================
       Cookie Consent
       ========================================================================== */
    .cookie-consent {
        background-color: #1f2937 !important;
        border-color: #34d399 !important;
        color: #f3f4f6 !important;
    }

    .cookie-consent * {
        color: #f3f4f6 !important;
    }

    /* ==========================================================================
       Announcement Bar
       ========================================================================== */
    .announcements-bar {
        background-color: #047857 !important;
        border-bottom: 1px solid #34d399 !important;
    }

    /* ==========================================================================
       Dashboard
       ========================================================================== */
    .dashboard,
    .dashboard-container,
    .user-dashboard {
        background-color: #111827 !important;
    }

    .dashboard-header,
    .utility-bar,
    .top-bar,
    .user-welcome,
    .dashboard-nav {
        background-color: #1f2937 !important;
        color: #f3f4f6 !important;
    }

    .dashboard-card,
    .dashboard-widget,
    .card-body,
    .widget-content,
    .panel,
    .panel-body {
        background-color: #1f2937 !important;
        color: #f3f4f6 !important;
    }

    .dashboard-card button,
    .dashboard-widget button,
    .card button {
        background-color: #374151 !important;
        color: #f3f4f6 !important;
    }

    .dashboard-card button:hover,
    .dashboard-widget button:hover,
    .card button:hover {
        background-color: #4b5563 !important;
        color: #ffffff !important;
    }

    /* ==========================================================================
       Hero Section
       ========================================================================== */
    .hero-enhanced {
        background: linear-gradient(135deg, #065f46 0%, #047857 100%) !important;
    }

    /* ==========================================================================
       Login Page
       ========================================================================== */
    .login-container,
    .auth-form-container {
        background-color: #1f2937 !important;
    }

    .login-container *,
    .auth-form-container * {
        color: #f3f4f6 !important;
    }

    .login-container h1,
    .login-container h2,
    .auth-form-container h1 {
        color: #ffffff !important;
    }

    .login-container input,
    .auth-form-container input {
        background-color: #111827 !important;
        border-color: #374151 !important;
        color: #f3f4f6 !important;
    }

    .login-container a,
    .auth-form-container a {
        color: #34d399 !important;
    }

    /* ==========================================================================
       Search
       ========================================================================== */
    .search-form input[type="search"] {
        background-color: #1f2937 !important;
        color: #f3f4f6 !important;
    }

    /* ==========================================================================
       WordPress Admin Bar
       ========================================================================== */
    #wpadminbar,
    #wpadminbar * {
        background-color: #111827 !important;
        color: #f3f4f6 !important;
    }

    #wpadminbar a,
    #wpadminbar a * {
        color: #34d399 !important;
    }

    #wpadminbar a:hover {
        color: #6ee7b7 !important;
        background-color: #1f2937 !important;
    }

    /* ==========================================================================
       Status Badges
       ========================================================================== */
    .badge-success,
    .status-enrolled {
        background-color: #047857 !important;
        color: #d1fae5 !important;
    }

    /* Membership badges on profile page */
    .badge {
        background: #374151 !important;
        color: #e5e7eb !important;
    }

    .badge-volledig {
        background: #047857 !important;
        color: #d1fae5 !important;
    }

    .badge-jeugd {
        background: #1d4ed8 !important;
        color: #dbeafe !important;
    }

    .badge-gezin {
        background: #b45309 !important;
        color: #fef3c7 !important;
    }

    .badge-donateur {
        background: #4b5563 !important;
        color: #e5e7eb !important;
    }

    /* Default badge when no type specified */
    .badge[class="badge"],
    .badge[class^="badge badge-"]:not(.badge-volledig):not(.badge-jeugd):not(.badge-gezin):not(.badge-donateur):not(.badge-success) {
        background: #374151 !important;
        color: #e5e7eb !important;
    }

    /* ==========================================================================
       Loading States
       ========================================================================== */
    .loading,
    .spinner {
        color: #34d399 !important;
    }

    /* ==========================================================================
       Empty States
       ========================================================================== */
    .empty-state,
    .no-content,
    .placeholder-text {
        color: #9ca3af !important;
    }

    /* ==========================================================================
       Archive Items
       ========================================================================== */
    .archive-item,
    .archive-item *,
    .list-item,
    .list-item * {
        background-color: #1f2937 !important;
        color: #f3f4f6 !important;
    }

    /* ==========================================================================
       Divi Builder Compatibility
       ========================================================================== */
    .et_pb_text,
    .et_pb_text *,
    .et_pb_module,
    .et_pb_module *,
    .et_pb_section,
    .et_pb_section *,
    .et_pb_row,
    .et_pb_row * {
        color: #f3f4f6 !important;
    }

    .et_pb_text h1,
    .et_pb_text h2,
    .et_pb_text h3,
    .et_pb_text h4,
    .et_pb_text h5,
    .et_pb_text h6 {
        color: #ffffff !important;
    }

    /* ==========================================================================
       WordPress Blocks
       ========================================================================== */
    .wp-block-group,
    .wp-block-group *,
    .wp-block-column,
    .wp-block-column *,
    .wp-block-columns,
    .wp-block-columns * {
        color: #f3f4f6 !important;
    }

    /* ==========================================================================
       Comment Form
       ========================================================================== */
    .comment-form,
    .comment-form *,
    #respond,
    #respond *,
    .comment-reply-title,
    .comment-reply-title * {
        color: #f3f4f6 !important;
    }

    /* ==========================================================================
       Fix for Inline Styles with Dark Colors
       ========================================================================== */
    [style*="color: #000"],
    [style*="color: #333"],
    [style*="color: black"],
    [style*="color: rgb(0"],
    [style*="color: rgb(51"] {
        color: #f3f4f6 !important;
    }


    /* ==========================================================================
       Hero Section - Homepage
       ========================================================================== */
    .hero-fullwidth .btn-hero-primary {
        background: white !important;
        color: #2e7d32 !important;
    }

    .hero-fullwidth .btn-hero-primary:hover {
        background: #f5f5f5 !important;
        color: #2e7d32 !important;
    }

    .hero-fullwidth .btn-hero-secondary {
        background: transparent !important;
        color: white !important;
        border-color: white !important;
    }

    /* Ensure hero image is visible */
    .hero-image-container .hero-image {
        opacity: 1 !important;
        z-index: 1;
    }

    .hero-image-container::before {
        z-index: 0;
    }


    /* Outline large button (Bekijk Alle Cursussen) */
    .btn-outline-large {
        background: transparent !important;
        color: #34d399 !important;
        border-color: #34d399 !important;
    }

    .btn-outline-large:hover {
        background: #34d399 !important;
        color: #111827 !important;
    }

    /* ==========================================================================
       Homepage Sections - Fix white backgrounds
       ========================================================================== */

    /* Frontpage redesign container */
    .frontpage-redesign,
    .frontpage-redesign #main,
    .frontpage-redesign .site-main {
        background-color: #111827 !important;
    }

    /* All sections with section-spacing class */
    .section-spacing {
        background-color: #111827 !important;
    }

    /* bg-light sections need dark background */
    .bg-light,
    .section-spacing.bg-light {
        background-color: #1f2937 !important;
    }

    /* Section titles and descriptions */
    .section-header {
        background-color: transparent !important;
    }

    .section-title {
        color: #ffffff !important;
    }

    .section-description {
        color: #d1d5db !important;
    }

    /* ==========================================================================
       Onze Cursussen / section-cursussen
       ========================================================================== */
    .section-cursussen {
        background-color: #111827 !important;
    }

    .section-cursussen .section-title,
    .section-cursussen .section-description {
        color: #ffffff !important;
    }

    .section-cursussen .section-description {
        color: #d1d5db !important;
    }

    .cursussen-content {
        background-color: transparent !important;
    }

    /* ==========================================================================
       Uitgelichte Cursussen / featured-courses-section
       ========================================================================== */
    .featured-courses-section {
        background-color: #111827 !important;
    }

    .featured-courses-section * {
        color: #f3f4f6 !important;
    }

    .featured-courses-section .section-title {
        color: #ffffff !important;
    }

    /* Course cards in featured section */
    .course-card,
    .course-card.featured {
        background-color: #1f2937 !important;
        background: #1f2937 !important;
        border-color: #374151 !important;
    }

    .course-card *,
    .course-content,
    .course-content * {
        color: #f3f4f6 !important;
    }

    .course-card .course-title,
    .course-content h3 {
        color: #34d399 !important;
    }

    .course-card .course-meta,
    .course-card .meta-item {
        color: #d1d5db !important;
    }

    .course-card .meta-item.price {
        color: #34d399 !important;
    }

    .course-image {
        background-color: #374151 !important;
    }

    /* Courses grid */
    .courses-grid {
        background-color: transparent !important;
    }

    /* ==========================================================================
       Cursus Overzicht / section-roadmap
       ========================================================================== */
    .section-roadmap,
    .section-roadmap.bg-light {
        background-color: #1f2937 !important;
    }

    .section-roadmap .section-title,
    .section-roadmap .section-description {
        color: #ffffff !important;
    }

    .section-roadmap .section-description {
        color: #d1d5db !important;
    }

    /* Course roadmap */
    .course-roadmap,
    .roadmap-visual,
    .roadmap-header {
        background-color: transparent !important;
    }

    .roadmap-header *,
    .roadmap-legend * {
        color: #f3f4f6 !important;
    }

    .track-label {
        color: #ffffff !important;
    }

    /* ==========================================================================
       Waarom KC Nijmegen / section-waarom
       ========================================================================== */
    .section-waarom {
        background-color: #111827 !important;
    }

    .section-waarom .section-title {
        color: #ffffff !important;
    }

    .section-waarom .section-description {
        color: #d1d5db !important;
    }

    /* Features grid */
    .features-grid {
        background-color: transparent !important;
    }

    .feature-card {
        background-color: #1f2937 !important;
        border-color: #374151 !important;
    }

    .feature-card * {
        color: #f3f4f6 !important;
    }

    .feature-title {
        color: #34d399 !important;
    }

    .feature-description {
        color: #d1d5db !important;
    }

    .feature-icon-wrapper {
        background-color: #065f46 !important;
    }

    /* ==========================================================================
       Aankomende Activiteiten / section-activiteiten
       ========================================================================== */
    .section-activiteiten,
    .section-activiteiten.bg-light {
        background-color: #1f2937 !important;
    }

    .section-activiteiten .section-title {
        color: #ffffff !important;
    }

    .section-activiteiten .section-description {
        color: #d1d5db !important;
    }

    .activiteiten-grid {
        background-color: transparent !important;
    }

    .no-activiteiten {
        color: #9ca3af !important;
        background-color: transparent !important;
    }

    /* ==========================================================================
       Klaar om te Starten / section-contact
       ========================================================================== */
    .section-contact,
    .section-contact.bg-primary {
        background-color: #047857 !important;
    }

    .section-contact * {
        color: #ffffff !important;
    }

    .contact-content,
    .contact-title,
    .contact-text {
        color: #ffffff !important;
    }

    .contact-info,
    .contact-info * {
        color: #d1fae5 !important;
    }

    .contact-buttons .btn {
        color: #ffffff !important;
    }

    /* Word Nu Lid button - keep dark text on white background for readability */
    .btn-light-large,
    .contact-buttons .btn-light-large {
        background: #ffffff !important;
        color: #047857 !important;
    }

    .btn-light-large:hover,
    .contact-buttons .btn-light-large:hover {
        background: #f0fdf4 !important;
        color: #065f46 !important;
    }

    /* ==========================================================================
       Generic fixes
       ========================================================================== */

    /* Content wrapper / container backgrounds */
    .content-wrapper,
    .page-wrapper,
    .main-content,
    #main,
    #primary {
        background-color: #111827 !important;
    }

    /* Fix white/light section backgrounds from theme */
    .bg-white,
    .background-white,
    .background-light {
        background-color: #1f2937 !important;
    }

    /* Ensure all text in these sections is readable */
    .bg-white *,
    .bg-light *,
    .background-white *,
    .background-light * {
        color: #f3f4f6 !important;
    }

    /* Override inline color styles */
    [style*="color: #666"],
    [style*="color:#666"],
    [style*="color: #333"],
    [style*="color:#333"],
    [style*="color: rgb(102"],
    [style*="color: rgb(51"] {
        color: #d1d5db !important;
    }

    /* ==========================================================================
       Frontpage Specific Elements - Override white backgrounds
       ========================================================================== */

    /* Cursus cards */
    .cursus-card,
    .cursussen-grid .cursus-card {
        background-color: #1f2937 !important;
        background: #1f2937 !important;
    }

    .cursus-card *,
    .cursus-content,
    .cursus-content * {
        color: #f3f4f6 !important;
    }

    .cursus-content h3 {
        color: #34d399 !important;
    }

    .cursus-excerpt,
    .cursus-meta,
    .meta-item {
        color: #d1d5db !important;
    }

    .cursus-thumbnail {
        background-color: #374151 !important;
    }

    /* Activiteit cards */
    .activiteit-card,
    .activiteiten-grid .activiteit-card {
        background-color: #1f2937 !important;
        background: #1f2937 !important;
    }

    .activiteit-card *,
    .activiteit-content,
    .activiteit-content * {
        color: #f3f4f6 !important;
    }

    .activiteit-content h3 {
        color: #34d399 !important;
    }

    .activiteit-content .location,
    .activiteit-content .excerpt {
        color: #d1d5db !important;
    }

    .activiteit-content .read-more {
        color: #34d399 !important;
    }

    /* Testimonial cards */
    .testimonial-card,
    .testimonials-grid .testimonial-card {
        background-color: #1f2937 !important;
        background: #1f2937 !important;
    }

    .testimonial-card * {
        color: #f3f4f6 !important;
    }

    .testimonial-content {
        color: #d1d5db !important;
    }

    .testimonial-author {
        color: #34d399 !important;
    }

    /* Feature items */
    .feature-item,
    .features-grid .feature-item {
        background-color: #1f2937 !important;
    }

    .feature-item h3 {
        color: #34d399 !important;
    }

    .feature-item p {
        color: #d1d5db !important;
    }

    /* Section headers */
    .section-header h2 {
        color: #ffffff !important;
    }

    .section-intro {
        color: #d1d5db !important;
    }

    /* Course roadmap section */
    .kc-course-roadmap,
    .course-roadmap-wrapper {
        background-color: #1f2937 !important;
    }

    /* Uitgelichte cursussen header */
    .uitgelichte-cursussen-header,
    .uitgelichte-cursussen-header * {
        color: #ffffff !important;
    }

    /* No items message */
    .no-cursussen,
    .no-activiteiten {
        color: #9ca3af !important;
    }

    /* Empty states */
    .empty-state,
    .no-content {
        color: #9ca3af !important;
        background-color: #1f2937 !important;
    }

    /* ==========================================================================
       Wave Decorations - Dark Mode
       ========================================================================== */

    /* Wave dividers - make them larger in dark mode for better visibility */
    .wave-divider svg {
        height: 100px !important;
    }

    /* Hero wave - green wave at bottom of hero for nice transition */
    .hero-fullwidth .wave-bottom .wave-fill {
        fill: #065f46 !important;
    }

    /* Add a subtle glow effect to waves in dark mode */
    .wave-divider svg path {
        filter: drop-shadow(0 -2px 4px rgba(16, 185, 129, 0.2));
    }

    /* Wave transition into green "Waarom KC Nijmegen" section */
    .wave-transition-green {
        background: #111827 !important;
    }

    .wave-fill-green {
        fill: #065f46 !important;
    }

    /* Wave at bottom of "Waarom KC Nijmegen" section - to activities */
    .wave-fill-light {
        fill: #1f2937 !important;
    }

    /* Wave transition into testimonials */
    .wave-transition-testimonials {
        background: #1f2937 !important;
    }

    .wave-fill-testimonials {
        fill: #134e3a !important;
    }

    /* Testimonials section background */
    .section-testimonials.bg-success-subtle {
        background-color: #1a2e1a !important;
    }

    /* Background color helpers in dark mode */
    .bg-light {
        background-color: #1f2937 !important;
    }

    .bg-success-subtle {
        background-color: #1a2e1a !important;
    }

    .bg-success-light {
        background-color: #14532d !important;
    }

    /* Newsletter section */
    .section-newsletter {
        background: linear-gradient(135deg, #111827 0%, #1a2e1a 100%) !important;
    }

    .newsletter-wrapper {
        background: linear-gradient(145deg, #14532d 0%, #1e5631 50%, #14532d 100%) !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    }

    /* Activiteiten section wave fix */
    .section-activiteiten.bg-light {
        background-color: #1f2937 !important;
    }

    /* Cursus overzicht section */
    .section-roadmap.bg-light {
        background-color: #1f2937 !important;
    }

} /* End of @media (prefers-color-scheme: dark) */