/**
 * CSS Variables Fallbacks for Cross-Browser Compatibility
 * Provides fallback values for browsers that don't support CSS custom properties
 */

/* ========================================
   CSS CUSTOM PROPERTIES WITH FALLBACKS
======================================== */

/* Root variables with IE11 fallbacks */
:root {
    --primary-color: #27ae60;
    --secondary-color: #2ecc71;
    --accent-color: #f39c12;
    --dark-color: #2c3e50;
    --light-color: #ecf0f1;
    --gray: #f5f5f5;
    --white: #ffffff;
    --footer-color: #1a252f;
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Open Sans', sans-serif;
    --transition: all 0.3s ease;
    --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    --border-radius: 8px;
}

/* ========================================
   FALLBACK STYLES FOR OLDER BROWSERS
======================================== */

/* Primary color fallbacks */
.btn, .back-to-top {
    background-color: #27ae60; /* Fallback */
    background-color: var(--primary-color);
}

.btn:hover, .back-to-top:hover {
    background-color: #2c3e50; /* Fallback */
    background-color: var(--dark-color);
}

/* Text colors */
.contact-title, .section-title {
    color: #27ae60; /* Fallback */
    color: var(--primary-color);
}

/* Background colors */
.about, .process, .documents {
    background-color: #ffffff; /* Fallback */
    background-color: var(--white);
}

.services, .products, .contact {
    background-color: #f5f5f5; /* Fallback */
    background-color: var(--gray);
}

.service-card, .product-card, .contact-info {
    background-color: #ffffff; /* Fallback */
    background-color: var(--white);
}

footer {
    background-color: #1a252f; /* Fallback */
    background-color: var(--footer-color);
}

/* Font families */
body {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* Fallback */
    font-family: var(--font-secondary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; /* Fallback */
    font-family: var(--font-primary);
}

/* Transitions */
.btn, .card, .service-card, .product-card {
    transition: all 0.3s ease; /* Fallback */
    transition: var(--transition);
}

/* Border radius */
.btn, .card, .service-card, .product-card {
    border-radius: 8px; /* Fallback */
    border-radius: var(--border-radius);
}

/* Box shadows */
.card, .service-card, .product-card, header {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Fallback */
    box-shadow: var(--shadow);
}

/* ========================================
   INTERNET EXPLORER 11 SPECIFIC FIXES
======================================== */

/* IE11 doesn't support CSS custom properties */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* Force fallback values for IE11 */
    .btn {
        background-color: #27ae60 !important;
    }
    
    .btn:hover {
        background-color: #2c3e50 !important;
    }
    
    .contact-title, .section-title {
        color: #27ae60 !important;
    }
    
    .about, .process, .documents {
        background-color: #ffffff !important;
    }
    
    .services, .products, .contact {
        background-color: #f5f5f5 !important;
    }
    
    .service-card, .product-card, .contact-info {
        background-color: #ffffff !important;
    }
    
    footer {
        background-color: #1a252f !important;
        color: #ffffff !important;
    }
    
    body {
        font-family: 'Open Sans', Arial, sans-serif !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Poppins', Arial, sans-serif !important;
    }
}

/* ========================================
   FEATURE DETECTION FALLBACKS
======================================== */

/* For browsers that don't support CSS custom properties */
@supports not (--css: variables) {
    .btn {
        background-color: #27ae60;
    }
    
    .btn:hover {
        background-color: #2c3e50;
    }
    
    .contact-title, .section-title {
        color: #27ae60;
    }
    
    .about, .process, .documents {
        background-color: #ffffff;
    }
    
    .services, .products, .contact {
        background-color: #f5f5f5;
    }
    
    .service-card, .product-card, .contact-info {
        background-color: #ffffff;
    }
    
    footer {
        background-color: #1a252f;
        color: #ffffff;
    }
}

/* ========================================
   PROGRESSIVE ENHANCEMENT
======================================== */

/* Base styles (work everywhere) */
.enhanced-button {
    background: #27ae60;
    color: white;
    border: none;
    padding: 12px 24px;
    cursor: pointer;
}

/* Enhanced styles (modern browsers) */
@supports (display: flex) {
    .enhanced-button {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@supports (border-radius: 8px) {
    .enhanced-button {
        border-radius: 8px;
    }
}

@supports (box-shadow: 0 2px 4px rgba(0,0,0,0.1)) {
    .enhanced-button {
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
}

@supports (transition: all 0.3s ease) {
    .enhanced-button {
        transition: all 0.3s ease;
    }
    
    .enhanced-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
}

/* ========================================
   POLYFILL DETECTION
======================================== */

/* Styles for when polyfills are loaded */
.js .polyfilled {
    /* Styles that depend on JavaScript polyfills */
}

.no-js .fallback {
    /* Fallback styles when JavaScript is disabled */
    display: block;
}

/* ========================================
   BROWSER-SPECIFIC COLOR ADJUSTMENTS
======================================== */

/* Safari color profile adjustments */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        :root {
            --primary-color: #27ae60;
            --secondary-color: #2ecc71;
        }
    }
}

/* Firefox color adjustments */
@-moz-document url-prefix() {
    :root {
        --primary-color: #27ae60;
        --secondary-color: #2ecc71;
    }
}

/* Edge color adjustments */
@supports (-ms-ime-align: auto) {
    :root {
        --primary-color: #27ae60;
        --secondary-color: #2ecc71;
    }
}