/* Dark Mode Support */

@media (prefers-color-scheme: dark) {
    :root {
        --text-dark: #f0f0f0; /* Light text for dark mode */
        --primary-color: #5dade2; /* Brighter accent for contrast */
        --glass-bg: rgba(30, 30, 30, 0.6); /* Darker glass tint */
        --glass-border: rgba(255, 255, 255, 0.15);
        --subtle-glass: rgba(0, 0, 0, 0.4); /* Darker hero background */
        --subtle-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        --page-bg: #121212; /* Dark background for the page */
        --content-bg: #1e1e1e; /* Slightly lighter for content cards */
    }

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

    /* Update text colors to be readable on dark backgrounds */
    h1, h2, h3, h4, h5, p, li, span, div {
        color: var(--text-dark);
    }

    /* Specific fixes for white backgrounds in the original theme */
    .u-white, 
    .u-section-2, 
    .u-section-4, 
    .u-section-6, 
    .u-section-8,
    .u-body,
    .u-header {
        background-color: var(--content-bg) !important;
        color: var(--text-dark) !important;
    }

    /* Fix the Glass Box in Hero Section for Dark Mode */
    .u-section-1 .u-group.u-custom-color-2, 
    .u-section-1 .u-group .u-container-layout {
        background-color: var(--subtle-glass) !important;
        border: 1px solid var(--glass-border) !important;
        box-shadow: var(--subtle-shadow);
    }

    /* Ensure the Hero Title stays white (it's over an image) */
    .u-section-1 h1 {
        color: #ffffff !important;
        text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important; /* Stronger shadow for readability */
    }

    /* Buttons in Dark Mode */
    .u-btn {
        background-color: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        color: #ffffff !important;
    }

    .u-btn:hover {
        background-color: rgba(255, 255, 255, 0.2) !important;
    }

    /* Mobile Menu Dark Mode */
    .u-nav-container-collapse .u-sidenav {
        background-color: #1e1e1e !important;
    }
    
    .u-nav-container-collapse .u-nav-link {
        color: var(--text-dark) !important;
    }

    /* Footer */
    .u-footer {
        background-color: #000000 !important;
        border-top: 1px solid #333;
    }
    
    /* Fix for light icons if any */
    .u-svg-content {
        fill: var(--text-dark) !important;
    }
}