/* ========================================
   BROWSER COMPATIBILITY CONFIGURATION
   ======================================== */

/**
 * Supported Browsers:
 * - Chrome 90+
 * - Firefox 88+
 * - Safari 14+
 * - Edge 90+
 * - Opera 76+
 * - Mobile browsers (iOS Safari 14+, Chrome Mobile)
 * 
 * Graceful degradation for:
 * - IE 11 (basic functionality)
 * - Older mobile browsers
 */

/* === Flexbox Fallbacks === */
.flex-fallback {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

/* === Grid Fallbacks === */
@supports not (display: grid) {
  .grid-2,
  .grid-3,
  .grid-4 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  
  .grid-2 > *,
  .grid-3 > *,
  .grid-4 > * {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 300px;
    flex: 1 1 300px;
  }
}

/* === Transform Fallbacks === */
.transform-fallback {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

/* === Transition Fallbacks === */
.transition-fallback {
  -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;
}

/* === Filter Fallbacks === */
.filter-fallback {
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

/* === Backdrop Filter Fallbacks === */
@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .nav,
  .nav-header {
    background: rgba(255, 255, 255, 0.98) !important;
  }
}

/* === Sticky Fallback === */
@supports not (position: sticky) {
  .nav,
  .nav-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  
  body {
    padding-top: 60px;
  }
}

/* === Object-fit Fallback === */
@supports not (object-fit: cover) {
  img {
    width: 100%;
    height: auto;
  }
}

/* === Custom Properties Fallback (IE11) === */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE11-specific fallbacks */
  .btn.primary {
    background: #155dfc;
    color: #ffffff;
  }
  
  .btn.outline {
    background: transparent;
    border-color: #e2e8f0;
    color: #0f172a;
  }
  
  .container {
    max-width: 1200px;
  }
  
  .hero-section {
    background: #eff6ff;
  }
}

/* === Smooth Scroll Fallback === */
@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;
  }
}

/* === Print Styles === */
@media print {
  .nav,
  .nav-header,
  .footer,
  .mobile-toggle,
  .mobile-menu,
  .btn {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
  
  a {
    text-decoration: underline;
    color: #000;
  }
  
  img {
    max-width: 100%;
    page-break-inside: avoid;
  }
}

/* === High Contrast Mode === */
@media (prefers-contrast: high) {
  .btn.primary {
    border: 2px solid currentColor;
  }
  
  .card {
    border: 2px solid currentColor;
  }
}

/* === Dark Mode Support (Optional) === */
@media (prefers-color-scheme: dark) {
  /* Dark mode can be added here if needed */
  /* Currently disabled - uncomment to enable */
  /*
  :root {
    --bg: #0f172a;
    --ink: #f8fafc;
    --ink-secondary: #cbd5e1;
    --muted: #1e293b;
    --border: #334155;
  }
  */
}