/**
 * Cross-Browser & Cross-Device Compatibility
 * Ensures consistent rendering across all browsers and devices
 */

/* ========================================
   CSS RESET & NORMALIZATION
======================================== */

/* Enhanced CSS Reset for better cross-browser consistency */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

/* HTML5 display definitions for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}

/* Audio and video elements for older browsers */
audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

/* Hidden attribute for older browsers */
[hidden], template {
    display: none;
}

/* ========================================
   FONT RENDERING & TYPOGRAPHY
======================================== */

/* Improved font rendering across browsers */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 
                 Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    font-display: swap;
    font-variant-ligatures: none;
    -webkit-font-feature-settings: "liga" off;
    font-feature-settings: "liga" off;
}

/* Font fallbacks for better compatibility */
.font-primary, h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 
                 Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

/* Prevent font size inflation on mobile */
html {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
}

/* ========================================
   FLEXBOX COMPATIBILITY
======================================== */

/* Flexbox prefixes for older browsers */
.flex, .d-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

.flex-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flex-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.justify-content-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.align-items-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

/* ========================================
   TRANSFORM & TRANSITION COMPATIBILITY
======================================== */

/* Transform prefixes */
.transform {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

/* Transition prefixes */
.transition, .btn, .card, .service-card, .product-card {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* ========================================
   BORDER-RADIUS COMPATIBILITY
======================================== */

.border-radius, .btn, .card, .service-card, .product-card {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

/* ========================================
   BOX-SHADOW COMPATIBILITY
======================================== */

.box-shadow, .card, .service-card, .product-card, header {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* ========================================
   GRADIENT COMPATIBILITY
======================================== */

.gradient-bg, .hero {
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
    background: -moz-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
    background: -ms-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
    background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
}

/* ========================================
   FORM ELEMENTS COMPATIBILITY
======================================== */

/* Normalize form elements across browsers */
input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
}

/* Remove default styling */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px 15px;
    width: 100%;
    font-size: 16px; /* Prevents zoom on iOS */
}

/* Button normalization */
button, .btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Focus states for accessibility */
input:focus,
textarea:focus,
select:focus,
button:focus,
.btn:focus {
    outline: 2px solid #27ae60;
    outline-offset: 2px;
}

/* ========================================
   IMAGE COMPATIBILITY
======================================== */

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
    display: block;
    -ms-interpolation-mode: bicubic; /* IE */
    image-rendering: -webkit-optimize-contrast; /* Webkit */
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: crisp-edges; /* Standard */
}

/* SVG compatibility */
svg {
    max-width: 100%;
    height: auto;
    fill: currentColor;
}

/* ========================================
   MOBILE COMPATIBILITY
======================================== */

/* Prevent horizontal scrolling */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* Touch action for better mobile performance */
.touchable, .btn, .card, a {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

/* Tap highlight removal */
a, button, .btn {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* ========================================
   INTERNET EXPLORER COMPATIBILITY
======================================== */

/* IE10+ specific styles */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* Flexbox fixes for IE */
    .flex {
        display: -ms-flexbox;
    }
    
    .flex-column {
        -ms-flex-direction: column;
    }
    
    /* Grid fallback for IE */
    .grid {
        display: block;
    }
    
    .grid > * {
        display: inline-block;
        vertical-align: top;
        width: 48%;
        margin-right: 2%;
    }
}

/* IE9 and below */
.ie9 .flex {
    display: block;
}

.ie9 .flex > * {
    display: inline-block;
    vertical-align: top;
}

/* ========================================
   SAFARI COMPATIBILITY
======================================== */

/* Safari-specific fixes */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        /* Safari-only styles */
        .btn {
            -webkit-appearance: none;
        }
        
        input[type="search"] {
            -webkit-appearance: textfield;
        }
        
        input[type="search"]::-webkit-search-decoration,
        input[type="search"]::-webkit-search-cancel-button {
            -webkit-appearance: none;
        }
    }
}

/* ========================================
   FIREFOX COMPATIBILITY
======================================== */

/* Firefox-specific fixes */
@-moz-document url-prefix() {
    /* Firefox-only styles */
    .btn {
        -moz-appearance: none;
    }
    
    input[type="number"] {
        -moz-appearance: textfield;
    }
}

/* ========================================
   HIGH DPI / RETINA DISPLAY SUPPORT
======================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* High DPI optimizations */
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    .logo, .icon {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ========================================
   PRINT COMPATIBILITY
======================================== */

@media print {
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a, a:visited {
        text-decoration: underline;
    }
    
    .btn, .social-links, .back-to-top {
        display: none !important;
    }
    
    .container {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
======================================== */

/* Screen reader only content */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Focus indicators */
*:focus {
    outline: 2px solid #27ae60;
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   COLOR SCHEME COMPATIBILITY
======================================== */

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a;
        --text-color: #ffffff;
        --border-color: #333333;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #000000;
        --text-color: #000000;
        --bg-color: #ffffff;
    }
    
    .btn {
        border: 2px solid currentColor;
    }
}

/* ========================================
   LEGACY BROWSER FALLBACKS
======================================== */

/* CSS Grid fallback */
.grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@supports (display: grid) {
    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
    }
}

/* Flexbox fallback for older browsers */
.flex-fallback {
    display: table;
    width: 100%;
}

.flex-fallback > * {
    display: table-cell;
    vertical-align: middle;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
======================================== */

/* GPU acceleration for smooth animations */
.gpu-accelerated, .btn:hover, .card:hover {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
}

/* Optimize repaints */
.will-change, .btn, .card {
    will-change: transform, opacity;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
======================================== */

/* Mobile First Approach */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    
    .container {
        padding: 0 15px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    body {
        font-size: 15px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    body {
        font-size: 16px;
    }
}

@media (min-width: 1025px) {
    body {
        font-size: 18px;
    }
}

/* ========================================
   BROWSER-SPECIFIC HACKS (USE SPARINGLY)
======================================== */

/* Edge specific */
@supports (-ms-ime-align: auto) {
    .edge-fix {
        /* Edge-specific styles */
    }
}

/* Chrome specific */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    .chrome-fix {
        /* Chrome-specific styles */
    }
}