/**
 * KC Nijmegen Color Scheme Update
 * Groen kleurschema met dark mode ondersteuning
 */

/* =Updated Color Variables
-------------------------------------------------------------- */
:root {
    /* Primaire groene kleuren uit nieuwsbrief */
    --primary-color: #065f46;        /* Donkergroen (header + footer) */
    --primary-light: #059669;        /* Middengroen (gradient) */
    --primary-accent: #047857;       /* Knoppen-groen */

    /* Aanvullende groene tinten voor variety */
    --primary-lighter: #10b981;      /* Lichtere groen voor hover */
    --primary-lightest: #d1fae5;     /* Zeer licht groen voor achtergronden */
    --primary-dark: #064e3b;         /* Extra donker groen */

    /* Secondary en accent kleuren (complementair aan groen) */
    --secondary-color: #ea580c;      /* Warm oranje als contrast */
    --accent-color: #f59e0b;         /* Goud/amber voor highlights */

    /* Status kleuren */
    --success-color: #059669;
    --danger-color: #dc2626;
    --warning-color: #f59e0b;
    --info-color: #0891b2;

    /* Text kleuren voor light mode */
    --text-color: #1f2937;
    --text-light: #4b5563;
    --text-muted: #6b7280;
    --text-on-primary: #ffffff;

    /* Achtergrond kleuren voor light mode */
    --bg-color: #ffffff;
    --bg-light: #f9fafb;
    --bg-dark: #065f46;

    /* Border en andere UI elementen */
    --border-color: #e5e7eb;
    --border-radius: 8px;

    /* Schaduwen */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.15);

    /* Font families */
    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'Poppins', var(--font-primary);

    /* Layout */
    --container-width: 1200px;
    --sidebar-width: 300px;

    /* Transitions */
    --transition: all 0.3s ease;
}

/* =Dark Mode Support
-------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root {
        /* Behoud groene hoofdkleuren maar pas aan voor dark mode */
        --primary-color: #10b981;      /* Helderder groen voor dark mode */
        --primary-light: #34d399;      /* Nog helderder groen */
        --primary-accent: #059669;     /* Accent groen */
        --primary-dark: #047857;
        --primary-darker: #065f46;
        --primary-lightest: #064e3b;   /* Donker groen voor subtiele achtergronden */

        /* Text kleuren voor dark mode */
        --text-color: #f3f4f6;          /* Licht grijs voor hoofdtekst */
        --text-light: #d1d5db;          /* Lichter grijs */
        --text-muted: #9ca3af;          /* Gedempt grijs */
        --text-on-primary: #ffffff;     /* Wit op groene achtergronden */

        /* Achtergrond kleuren voor dark mode */
        --bg-color: #111827;            /* Zeer donker grijs-blauw */
        --bg-light: #1f2937;            /* Donker grijs */
        --bg-dark: #030712;             /* Bijna zwart */

        /* Borders aangepast voor dark mode */
        --border-color: #374151;        /* Donkere border */

        /* Schaduwen voor dark mode (subtieler) */
        --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);
    }

    /* Specifieke dark mode aanpassingen */
    body {
        background-color: var(--bg-color);
        color: var(--text-color);
    }

    /* Links in dark mode */
    a {
        color: var(--primary-light);
    }

    a:hover {
        color: var(--primary-lighter);
    }
}

/* =Component Updates voor nieuwe kleurschema
-------------------------------------------------------------- */

/* Buttons met nieuwe groene kleuren */
.btn-primary {
    background-color: var(--primary-accent);
    border-color: var(--primary-accent);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
}

.btn-outline {
    border: 2px solid var(--primary-accent);
    color: var(--primary-accent);
    background: transparent;
}

.btn-outline:hover {
    background-color: var(--primary-accent);
    color: white;
}

/* Header met gradient */
.site-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
}

/* Navigation aanpassingen voor betere leesbaarheid */
.main-navigation {
    background-color: transparent;
}

.main-navigation a {
    color: white;
    font-weight: 500;
    padding: 10px 15px;
    transition: var(--transition);
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* Dark mode navigation specifiek */
@media (prefers-color-scheme: dark) {
    .site-header {
        background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-darker) 100%);
        border-bottom: 1px solid var(--border-color);
    }

    .main-navigation {
        background-color: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(10px);
    }

    .main-navigation a {
        color: var(--text-color);
    }

    .main-navigation a:hover,
    .main-navigation .current-menu-item > a {
        background-color: var(--primary-accent);
        color: white;
    }

    /* Mobile menu in dark mode */
    .mobile-menu {
        background-color: var(--bg-light);
        border: 1px solid var(--border-color);
    }

    .mobile-menu a {
        color: var(--text-color);
        border-bottom: 1px solid var(--border-color);
    }
}

/* Footer aanpassingen */
.site-footer {
    background-color: var(--primary-color);
    color: white;
}

.site-footer a {
    color: var(--primary-lightest);
}

.site-footer a:hover {
    color: white;
}

@media (prefers-color-scheme: dark) {
    .site-footer {
        background-color: var(--primary-darker);
        border-top: 1px solid var(--border-color);
    }
}

/* Cards en content blocks */
.card,
.dashboard-card,
.course-card,
.post-card {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

@media (prefers-color-scheme: dark) {
    .card,
    .dashboard-card,
    .course-card,
    .post-card {
        background-color: var(--bg-light);
        border-color: var(--border-color);
    }
}

/* Form elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="number"],
textarea,
select {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

@media (prefers-color-scheme: dark) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="date"],
    input[type="number"],
    textarea,
    select {
        background-color: var(--bg-dark);
        border-color: var(--border-color);
        color: var(--text-color);
    }

    input:focus,
    textarea:focus,
    select:focus {
        border-color: var(--primary-light);
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    }
}

/* Hero section updates */
.hero-enhanced {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
}

@media (prefers-color-scheme: dark) {
    .hero-enhanced {
        background: linear-gradient(135deg, var(--primary-darker) 0%, var(--primary-dark) 100%);
    }
}

/* Dashboard specifieke aanpassingen */
.dashboard-card .card-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
}

@media (prefers-color-scheme: dark) {
    .dashboard-card .card-header {
        background: linear-gradient(135deg, var(--primary-dark), var(--primary-darker));
    }
}

/* Status badges met groene tinten */
.badge-success,
.status-enrolled {
    background-color: var(--primary-lightest);
    color: var(--primary-dark);
}

@media (prefers-color-scheme: dark) {
    .badge-success,
    .status-enrolled {
        background-color: var(--primary-dark);
        color: var(--primary-lightest);
    }
}

/* Breadcrumbs en meta info */
.entry-meta,
.post-meta,
.meta-item {
    color: var(--text-muted);
}

/* Tables */
table {
    background-color: var(--bg-color);
    color: var(--text-color);
}

th {
    background-color: var(--bg-light);
    color: var(--text-color);
    font-weight: 600;
}

td {
    border-color: var(--border-color);
}

@media (prefers-color-scheme: dark) {
    table {
        background-color: var(--bg-light);
    }

    th {
        background-color: var(--bg-dark);
    }
}

/* Alerts en notices */
.alert-success {
    background-color: var(--primary-lightest);
    color: var(--primary-dark);
    border: 1px solid var(--primary-light);
}

@media (prefers-color-scheme: dark) {
    .alert-success {
        background-color: rgba(5, 150, 105, 0.1);
        color: var(--primary-light);
        border-color: var(--primary-accent);
    }
}

/* Mobile menu toggle */
.menu-toggle {
    background-color: var(--primary-accent);
    color: white;
}

.menu-toggle:hover {
    background-color: var(--primary-color);
}

@media (prefers-color-scheme: dark) {
    .menu-toggle {
        background-color: var(--primary-dark);
        border: 1px solid var(--primary-light);
    }

    .menu-toggle:hover {
        background-color: var(--primary-accent);
    }
}

/* Cookie consent banner */
.cookie-consent {
    background-color: var(--bg-color);
    border: 2px solid var(--primary-accent);
    color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
    .cookie-consent {
        background-color: var(--bg-light);
        border-color: var(--primary-light);
    }
}

/* Announcement bar */
.announcements-bar {
    background-color: var(--primary-accent);
    color: white;
}

@media (prefers-color-scheme: dark) {
    .announcements-bar {
        background-color: var(--primary-dark);
        border-bottom: 1px solid var(--primary-light);
    }
}

/* Pagination */
.pagination a {
    background-color: var(--bg-color);
    color: var(--primary-accent);
    border: 1px solid var(--border-color);
}

.pagination a:hover,
.pagination .current {
    background-color: var(--primary-accent);
    color: white;
}

@media (prefers-color-scheme: dark) {
    .pagination a {
        background-color: var(--bg-light);
        color: var(--primary-light);
        border-color: var(--border-color);
    }

    .pagination a:hover,
    .pagination .current {
        background-color: var(--primary-dark);
        color: white;
    }
}

/* Ensure text is always readable */
.text-primary {
    color: var(--primary-accent) !important;
}

@media (prefers-color-scheme: dark) {
    .text-primary {
        color: var(--primary-light) !important;
    }
}

/* Skip link voor accessibility */
.skip-link:focus {
    background-color: var(--primary-accent);
    color: white;
}

/* Loading states */
.loading,
.spinner {
    color: var(--primary-accent);
}

@media (prefers-color-scheme: dark) {
    .loading,
    .spinner {
        color: var(--primary-light);
    }
}