/* ==============================================
   Browser Compatibility & Progressive Enhancement
   ============================================== */

/*
 * This file provides additional compatibility fixes
 * for older browsers and mobile devices.
 * Load this AFTER the main Style.css file.
 */

/* ==============================================
   VIEWPORT FIX FOR MOBILE BROWSERS
   ============================================== */

@viewport {
    width: device-width;
}

@-ms-viewport {
    width: device-width;
}

/* ==============================================
   FLEXBOX FALLBACKS
   ============================================== */

/* Add display: block fallback for flex containers that don't support flexbox */
@supports not (display: flex) {
    .nav-container,
    .logo,
    .nav-links,
    .hero-cta,
    .hero-stats,
    .mockup-header,
    .mockup-row,
    .mockup-content,
    .advantage-item,
    .advantages-list {
        display: block;
    }

    .nav-links li {
        display: inline-block;
        vertical-align: middle;
    }
}

/* ==============================================
   GRID FALLBACKS
   ============================================== */

/* Fallback for browsers that don't support CSS Grid */
@supports not (display: grid) {
    .hero-container,
    .tech-grid,
    .advantages-content,
    .quality-stats,
    .footer-content,
    .stats-grid,
    .features-grid {
        display: block;
    }

    .tech-card,
    .quality-stat,
    .footer-section,
    .stat-card,
    .feature-card {
        width: 100%;
        margin-bottom: 2rem;
        display: inline-block;
        vertical-align: top;
    }

    @media (min-width: 769px) {
        .tech-card,
        .quality-stat,
        .footer-section,
        .stat-card,
        .feature-card {
            width: 48%;
            margin-right: 2%;
        }

        .tech-card:nth-child(2n),
        .quality-stat:nth-child(2n),
        .footer-section:nth-child(2n),
        .stat-card:nth-child(2n),
        .feature-card:nth-child(2n) {
            margin-right: 0;
        }
    }
}

/* ==============================================
   BACKDROP-FILTER FALLBACK
   ============================================== */

/* For browsers that don't support backdrop-filter, use solid background */
@supports not (backdrop-filter: blur(20px)) {
    .nav,
    .mobile-menu-toggle,
    .modal,
    .stat-card {
        background: rgba(255, 255, 255, 0.98) !important;
    }

    .stat-card {
        background: rgba(255, 255, 255, 0.15) !important;
    }
}

/* ==============================================
   CSS CUSTOM PROPERTIES FALLBACK
   ============================================== */

/* For IE11 and browsers that don't support CSS variables */
@supports not (color: var(--primary-blue)) {
    body {
        color: #1a1a1a;
        background: #ffffff;
    }

    .nav {
        border-bottom-color: #e2e8f0;
    }

    .mobile-menu-toggle {
        border-color: #e2e8f0;
    }

    .mobile-menu-toggle span {
        background: #0066cc;
    }

    .nav-links a {
        color: #4a5568;
    }

    .nav-links a:hover,
    .nav-links a::after {
        color: #0066cc;
        background: #0066cc;
    }

    .cta-nav,
    .btn-primary,
    .submit-btn,
    .feature-number {
        background: #0066cc;
    }

    .hero {
        background: #0066cc;
    }

    .hero-content h1.gradient-title {
        color: #0066cc;
        background: none;
        -webkit-text-fill-color: initial;
    }

    .stat-number,
    .quality-number,
    .benefit-label,
    .modal-content h2 {
        color: #0066cc;
    }

    .mockup-content,
    .section-alt,
    .advantages,
    .features-section {
        background: #f7fafc;
    }
}

/* ==============================================
   OBJECT-FIT POLYFILL FOR IMAGES
   ============================================== */

/* Ensure images maintain aspect ratio in older browsers */
img {
    width: 100%;
    height: auto;
}

.logo img {
    width: auto;
}

/* ==============================================
   TRANSFORM FALLBACKS
   ============================================== */

/* Graceful degradation for transforms */
@supports not (transform: translateY(-2px)) {
    .cta-nav:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-white:hover,
    .cta-button:hover,
    .submit-btn:hover,
    .tech-card:hover {
        transform: none;
        -webkit-transform: none;
        -ms-transform: none;
    }
}

/* ==============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================== */

/* Remove hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
    .cta-nav:hover,
    .nav-links a:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-white:hover,
    .tech-card:hover,
    .advantage-item:hover {
        transform: none;
        -webkit-transform: none;
        -ms-transform: none;
    }

    /* Make tap targets larger for better touch usability */
    .nav-links a,
    .cta-nav,
    .btn-primary,
    .btn-secondary,
    .btn-white,
    button,
    input,
    textarea,
    select {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ==============================================
   HIGH CONTRAST MODE SUPPORT
   ============================================== */

@media (prefers-contrast: high) {
    body {
        color: #000000;
    }

    .nav {
        background: #ffffff;
        border-bottom: 2px solid #000000;
    }

    .hero,
    .cta-section,
    .summary-section {
        background: #000000;
        color: #ffffff;
    }

    button,
    .cta-nav,
    .btn-primary,
    .btn-white {
        border: 2px solid currentColor;
    }
}

/* ==============================================
   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;
    }

    .fade-in {
        opacity: 1;
        transform: none;
    }
}

/* ==============================================
   PRINT STYLES
   ============================================== */

@media print {
    .nav,
    .mobile-menu-toggle,
    .modal,
    .cta-nav,
    .btn-primary,
    .btn-secondary,
    .btn-white,
    .cta-button {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    .hero,
    .cta-section,
    .summary-section {
        background: white;
        color: black;
        page-break-inside: avoid;
    }

    .feature-section,
    .tech-card,
    .advantage-item {
        page-break-inside: avoid;
    }
}

/* ==============================================
   SAFARI-SPECIFIC FIXES
   ============================================== */

/* Fix for Safari's sticky position bug */
@supports (-webkit-touch-callout: none) {
    .nav {
        position: -webkit-sticky;
        position: sticky;
    }
}

/* Fix for Safari's 100vh bug on mobile */
@supports (-webkit-touch-callout: none) {
    .hero.home-hero {
        min-height: -webkit-fill-available;
    }
}

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

/* IE11 flexbox fixes */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .nav-container {
        display: -ms-flexbox;
    }

    .nav-links li {
        margin-left: 2rem;
    }

    /* Fix flex shrink in IE11 */
    img {
        flex-shrink: 0;
        -ms-flex-negative: 0;
    }
}

/* ==============================================
   FIREFOX-SPECIFIC FIXES
   ============================================== */

@-moz-document url-prefix() {
    /* Fix for Firefox's button padding */
    button,
    input[type="button"],
    input[type="submit"] {
        padding: 1rem 2rem;
    }
}