/**
 * Dark Mode Prevention & Brand Consistency
 *
 * This file ensures the Clevertech website maintains its designed appearance
 * regardless of the user's system dark mode preference.
 *
 * The Clevertech brand already uses a sophisticated color palette with
 * dark blue (#2C3E50) as the primary color, which provides sufficient
 * contrast and modern appearance without needing automatic dark mode.
 *
 * @package Clevertech_Astra_Child
 * @version 1.0.0
 * @created 2025-01-19
 */

/* ===== Force Light Mode Color Scheme ===== */
:root {
    /* Force browser to treat site as light mode */
    color-scheme: light only;
}

/* Ensure HTML and Body maintain light mode */
html {
    color-scheme: light only;
}

body {
    color-scheme: light only;
}

/* ===== Global CSS Variables - Locked Values ===== */
/* These values remain constant regardless of system dark mode */
@media all {
    :root {
        /* Core Brand Colors - NEVER CHANGE */
        --primary-color: #2C3E50 !important;
        --secondary-color: #E74C3C !important;
        --accent-color: #F39C12 !important;
        --success-color: #27AE60 !important;
        --info-color: #3498DB !important;
        --dark-color: #2C3E50 !important;
        --danger-color: #E74C3C !important;

        /* Text Colors - Maintain Readability */
        --text-primary: #2C3E50 !important;
        --text-secondary: #5A6C7D !important;
        --text-light: #7F8C8D !important;
        --white: #FFFFFF !important;

        /* Background Colors - Keep Light Theme */
        --background-white: #FFFFFF !important;
        --background-light: #F8F9FA !important;
        --background-gray: #ECF0F1 !important;

        /* UI Elements - Consistent Appearance */
        --border-color: #E1E8ED !important;

        /* Menu Specific - Prevent Dark Menu */
        --menu-bg: #FFFFFF !important;
        --menu-text: #2C3E50 !important;
        --menu-hover: #F8F9FA !important;
        --menu-active: #E74C3C !important;
    }
}

/* ===== Override Dark Mode Media Queries ===== */
/* This section neutralizes any dark mode adaptations */
@media (prefers-color-scheme: dark) {
    :root {
        /* Maintain all light mode values */
        --primary-color: #2C3E50 !important;
        --secondary-color: #E74C3C !important;
        --accent-color: #F39C12 !important;
        --success-color: #27AE60 !important;
        --info-color: #3498DB !important;

        --text-primary: #2C3E50 !important;
        --text-secondary: #5A6C7D !important;
        --text-light: #7F8C8D !important;
        --white: #FFFFFF !important;

        --background-white: #FFFFFF !important;
        --background-light: #F8F9FA !important;
        --background-gray: #ECF0F1 !important;

        --border-color: #E1E8ED !important;

        /* Menu colors stay light */
        --menu-bg: #FFFFFF !important;
        --menu-text: #2C3E50 !important;
    }

    /* Ensure body and main content areas stay light */
    html,
    body {
        background-color: #FFFFFF !important;
        color: #2C3E50 !important;
    }

    /* Main content areas */
    .site-content,
    .entry-content,
    .ast-container,
    main,
    article,
    .content-area {
        background-color: #FFFFFF !important;
        color: #2C3E50 !important;
    }

    /* Headers and navigation */
    .site-header,
    .main-header-bar,
    .ast-main-header-wrap,
    .ast-primary-header-bar {
        background-color: #FFFFFF !important;
    }

    /* Mobile menu specific */
    .ast-mobile-menu-buttons,
    .ast-mobile-header-wrap,
    .ast-mobile-header-content {
        background-color: #FFFFFF !important;
    }

    /* Forms */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="number"],
    textarea,
    select {
        background-color: #FFFFFF !important;
        color: #2C3E50 !important;
        border-color: #E1E8ED !important;
    }

    /* Contact forms */
    .wpcf7-form {
        background-color: #F8F9FA !important;
    }

    .wpcf7-form input,
    .wpcf7-form textarea {
        background-color: #FFFFFF !important;
        color: #2C3E50 !important;
    }

    /* Cards and blocks */
    .wp-block-group,
    .wp-block-column,
    .card,
    .value-prop-card,
    .case-study-card {
        background-color: inherit !important;
    }

    /* Specific page sections */
    .contact-content,
    .faq-contact,
    .response-time,
    .case-studies-archive {
        background-color: #FFFFFF !important;
    }

    /* Footer */
    .site-footer,
    .ast-footer-overlay {
        /* Footer can remain with its designed dark background */
        /* No override needed as it's intentionally dark */
    }
}

/* ===== Specific Component Overrides ===== */

/* Contact page specifics */
.page-id-54 {
    background-color: #FFFFFF !important;
}

.contact-hero {
    /* Maintain designed gradient */
    background: linear-gradient(135deg, #2C3E50 0%, #3498DB 100%) !important;
}

/* Case studies */
.case-study-hero {
    /* Keep intended gradient */
    background: linear-gradient(90deg, #2C3E50 0%, #3498DB 100%) !important;
}

/* Mobile menu */
.ast-mobile-menu-overlay,
.ast-mobile-menu-wrap {
    background-color: #FFFFFF !important;
}

.ast-mobile-menu-overlay a,
.ast-mobile-menu-wrap a {
    color: #2C3E50 !important;
}

/* ===== Browser Chrome & Meta Tags Support ===== */
/* These don't directly affect CSS but signal light mode preference */

/* Signal to browsers that this is a light mode site */
@media (prefers-color-scheme: dark) {
    html {
        filter: none !important;
        -webkit-filter: none !important;
    }
}

/* ===== Debug Helper (Remove in Production) ===== */
/* Uncomment to add a visual indicator when dark mode is detected */
/*
@media (prefers-color-scheme: dark) {
    body::before {
        content: "Dark mode detected but prevented";
        position: fixed;
        top: 0;
        left: 0;
        background: #27AE60;
        color: white;
        padding: 5px 10px;
        font-size: 12px;
        z-index: 99999;
        display: none;
    }
}
*/

/* ===== Future Dark Mode Toggle Support ===== */
/*
 * If a manual dark mode toggle is added in the future,
 * use a class-based approach like:
 *
 * body.dark-mode-enabled {
 *     --background-white: #1a1a1a;
 *     --text-primary: #e0e0e0;
 *     // etc...
 * }
 *
 * This gives users control while preventing automatic adaptation.
 */