/* Cross-Browser Compatibility CSS */

/* CSS Grid fallback for older browsers */
@supports not (display: grid) {
    .grid {
        display: flex;
        flex-wrap: wrap;
    }
    
    .grid-cols-1 > * {
        width: 100%;
    }
    
    .grid-cols-2 > * {
        width: calc(50% - 0.75rem);
        margin-right: 1.5rem;
    }
    
    .grid-cols-2 > *:nth-child(2n) {
        margin-right: 0;
    }
    
    .grid-cols-3 > * {
        width: calc(33.333% - 1rem);
        margin-right: 1.5rem;
    }
    
    .grid-cols-3 > *:nth-child(3n) {
        margin-right: 0;
    }
    
    .grid-cols-4 > * {
        width: calc(25% - 1.125rem);
        margin-right: 1.5rem;
    }
    
    .grid-cols-4 > *:nth-child(4n) {
        margin-right: 0;
    }
}

/* Flexbox fallback for older browsers */
@supports not (display: flex) {
    .flex {
        display: block;
    }
    
    .nav-container {
        display: block;
    }
    
    .nav-menu {
        display: block;
        margin-top: 1rem;
    }
    
    .nav-link {
        display: block;
        margin-bottom: 0.5rem;
    }
    
    .hero-cta {
        text-align: center;
    }
    
    .hero-cta .btn {
        display: inline-block;
        margin: 0.5rem;
    }
}

/* CSS Custom Properties fallback for IE */
.ie-fallback {
    /* Primary colors */
    --primary: #1e3a8a;
    --secondary: #64748b;
    --accent: #f97316;
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --border: #e5e7eb;
}

/* IE-specific styles */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .navbar {
        background-color: #ffffff;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    }
    
    .btn-primary {
        background-color: #1e3a8a;
        color: white;
    }
    
    .btn-accent {
        background-color: #f97316;
        color: white;
    }
    
    .hero {
        background-color: #1e3a8a;
        color: white;
    }
    
    .card {
        background-color: #ffffff;
        border: 1px solid #e5e7eb;
    }
    
    .form-input {
        border: 2px solid #e5e7eb;
    }
    
    .form-input:focus {
        border-color: #1e3a8a;
    }
}

/* Safari-specific fixes */
@supports (-webkit-appearance: none) {
    .form-input {
        -webkit-appearance: none;
        border-radius: 0.375rem;
    }
    
    .btn {
        -webkit-appearance: none;
        border-radius: 0.375rem;
    }
    
    /* Fix for Safari sticky positioning */
    .navbar {
        position: -webkit-sticky;
        position: sticky;
    }
}

/* Firefox-specific fixes */
@-moz-document url-prefix() {
    .form-input {
        -moz-appearance: none;
    }
    
    .btn {
        -moz-appearance: none;
    }
    
    /* Fix for Firefox flexbox issues */
    .nav-container {
        display: -moz-flex;
        display: flex;
    }
    
    .flex {
        display: -moz-flex;
        display: flex;
    }
}

/* Edge-specific fixes */
@supports (-ms-ime-align: auto) {
    .grid {
        display: -ms-grid;
        display: grid;
    }
    
    .flex {
        display: -ms-flexbox;
        display: flex;
    }
}

/* Webkit prefix for older browsers - Removed hardcoded hero gradient to allow theme overrides */

.cert-placeholder {
    background: -webkit-linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
}

.image-placeholder {
    background: -webkit-linear-gradient(135deg, #64748b 0%, #9ca3af 100%);
    background: linear-gradient(135deg, #64748b 0%, #9ca3af 100%);
}

/* Transform prefixes */
.nav-toggle.active .bar:nth-child(1) {
    -webkit-transform: rotate(-45deg) translate(-5px, 6px);
    -moz-transform: rotate(-45deg) translate(-5px, 6px);
    -ms-transform: rotate(-45deg) translate(-5px, 6px);
    transform: rotate(-45deg) translate(-5px, 6px);
}

.nav-toggle.active .bar:nth-child(3) {
    -webkit-transform: rotate(45deg) translate(-5px, -6px);
    -moz-transform: rotate(45deg) translate(-5px, -6px);
    -ms-transform: rotate(45deg) translate(-5px, -6px);
    transform: rotate(45deg) translate(-5px, -6px);
}

.card:hover {
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
}

.btn:hover {
    -webkit-transform: translateY(-1px);
    -moz-transform: translateY(-1px);
    -ms-transform: translateY(-1px);
    transform: translateY(-1px);
}

/* Transition prefixes */
.nav-toggle .bar {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.card {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.btn {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

/* Box-sizing fix for older browsers */
*, *::before, *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Smooth scrolling fallback */
@media screen and (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn {
        border: 2px solid;
    }
    
    .card {
        border: 2px solid;
    }
    
    .form-input {
        border: 3px solid;
    }
}

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

/* Print styles optimization */
@media print {
    * {
        background: transparent !important;
        color: black !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    .navbar,
    .nav-toggle,
    .btn,
    .hero-cta {
        display: none !important;
    }
    
    .container {
        max-width: none !important;
        padding: 0 !important;
    }
    
    h1, h2, h3 {
        page-break-after: avoid;
    }
    
    .card {
        page-break-inside: avoid;
    }
}