/*
 * Cross-Browser Compatibility and Optimization
 * Provides fallbacks and optimizations for modern browsers and older browser support
 * Requirements: 2.1, 2.2, 2.3, 6.1
 */

/* ===== BROWSER FEATURE DETECTION ===== */

/* CSS Feature Queries for Progressive Enhancement */
@supports (display: grid) {
  .supports-grid {
    display: grid;
  }
}

@supports not (display: grid) {
  .no-grid .navigation-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .no-grid .navigation-card {
    flex: 1 1 300px;
    max-width: 400px;
    margin: var(--space-4);
  }
}

@supports (backdrop-filter: blur(20px)) {
  .supports-backdrop-filter .navigation-card {
    backdrop-filter: var(--glass-backdrop-filter);
    -webkit-backdrop-filter: var(--glass-backdrop-filter);
  }
}

@supports not (backdrop-filter: blur(20px)) {
  .no-backdrop-filter .navigation-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  
  .no-backdrop-filter [data-theme="dark"] .navigation-card {
    background: rgba(45, 45, 45, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
}

@supports (color: var(--custom-property)) {
  .supports-css-variables {
    /* Modern CSS variables are supported */
  }
}

@supports not (color: var(--custom-property)) {
  .no-css-variables {
    /* Fallback styles for browsers without CSS custom properties */
  }
  
  .no-css-variables .hero-section {
    background: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%);
    color: #ffffff;
  }
  
  .no-css-variables .navigation-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 40px 24px;
  }
  
  .no-css-variables .navigation-card-icon {
    background: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%);
  }
}

/* ===== WEBKIT/SAFARI SPECIFIC FIXES ===== */

/* Fix for Safari's backdrop-filter implementation */
@supports (-webkit-backdrop-filter: blur(20px)) {
  .navigation-card {
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }
}

/* Fix for Safari's CSS Grid implementation */
@supports (-webkit-appearance: none) {
  .navigation-grid {
    -webkit-grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

/* Fix for Safari's flexbox bugs */
.navigation-card {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

/* Fix for Safari's transform3d performance */
.hero-section,
.navigation-card {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Fix for Safari's gradient background-clip */
.hero-title {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

/* Fix for Firefox's backdrop-filter support */
@-moz-document url-prefix() {
  .navigation-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  
  [data-theme="dark"] .navigation-card {
    background: rgba(45, 45, 45, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
}

/* Fix for Firefox's CSS Grid gap property */
@supports (-moz-appearance: none) {
  .navigation-grid {
    grid-gap: var(--space-8);
  }
}

/* Fix for Firefox's smooth scrolling */
@supports (-moz-appearance: none) {
  html {
    scroll-behavior: smooth;
  }
}

/* ===== CHROME/CHROMIUM SPECIFIC OPTIMIZATIONS ===== */

/* Optimize for Chrome's rendering engine */
@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
  .hero-section {
    will-change: transform;
    contain: layout style paint;
  }
  
  .navigation-card {
    contain: layout style;
  }
}

/* Chrome's hardware acceleration optimization */
.hero-section::before,
.hero-section::after,
.navigation-card {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* ===== EDGE SPECIFIC FIXES ===== */

/* Fix for Edge's CSS Grid implementation */
@supports (-ms-grid-columns: 1fr) {
  .navigation-grid {
    -ms-grid-columns: 1fr 1fr;
    -ms-grid-rows: auto auto;
  }
  
  .navigation-card:nth-child(1) {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
  }
  
  .navigation-card:nth-child(2) {
    -ms-grid-column: 2;
    -ms-grid-row: 1;
  }
}

/* Fix for Edge's backdrop-filter */
@supports (-ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelradius=20)") {
  .navigation-card {
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelradius=20)";
    filter: blur(20px);
  }
}

/* ===== MOBILE BROWSER OPTIMIZATIONS ===== */

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
  /* Fix for iOS Safari's viewport units */
  .hero-section {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
  
  /* Fix for iOS Safari's bounce scrolling */
  body {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Fix for iOS Safari's tap highlight */
  .navigation-card {
    -webkit-tap-highlight-color: rgba(108, 92, 231, 0.2);
  }
  
  /* Fix for iOS Safari's zoom on input focus */
  input, select, textarea {
    font-size: 16px;
  }
}

/* Android Chrome specific fixes */
@media screen and (-webkit-device-pixel-ratio: 1) {
  .hero-section {
    background-attachment: scroll; /* Fix for Android background-attachment: fixed */
  }
}

/* Samsung Internet specific fixes */
@supports (-webkit-appearance: none) and (color: -webkit-focus-ring-color) {
  .navigation-card {
    -webkit-user-select: none;
    user-select: none;
  }
}

/* ===== PERFORMANCE OPTIMIZATIONS BY BROWSER ===== */

/* Chrome performance optimizations */
@supports (contain: layout style paint) {
  .hero-section {
    contain: layout style paint;
  }
  
  .navigation-card {
    contain: layout style;
  }
}

/* Firefox performance optimizations */
@supports (-moz-appearance: none) {
  .hero-section {
    -moz-transform: translateZ(0);
  }
  
  .navigation-card {
    -moz-transform: translateZ(0);
  }
}

/* Safari performance optimizations */
@supports (-webkit-appearance: none) {
  .hero-section,
  .navigation-card {
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000px;
  }
}

/* ===== OLDER BROWSER FALLBACKS ===== */

/* Internet Explorer 11 fallbacks */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .hero-section {
    background: #6C5CE7;
    color: #ffffff;
  }
  
  .navigation-grid {
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    -ms-flex-pack: center;
  }
  
  .navigation-card {
    -ms-flex: 1 1 300px;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  
  .navigation-card-icon {
    background: #6C5CE7;
  }
}

/* Legacy browser support (IE 10 and below) */
.lt-ie11 .hero-section {
  background: #6C5CE7;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6C5CE7', endColorstr='#A29BFE');
}

.lt-ie11 .navigation-grid {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.lt-ie11 .navigation-card {
  display: table-cell;
  vertical-align: top;
  background: #ffffff;
  border: 1px solid #e0e0e0;
}

/* ===== PRINT OPTIMIZATIONS ===== */
@media print {
  /* Ensure compatibility across print engines */
  .hero-section {
    background: #ffffff !important;
    color: #000000 !important;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }
  
  .navigation-card {
    background: #ffffff !important;
    border: 1px solid #000000 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  .navigation-card-icon {
    background: #6C5CE7 !important;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }
}

/* ===== HIGH CONTRAST MODE SUPPORT ===== */
@media (prefers-contrast: high) {
  .hero-section {
    background: #000000;
    color: #ffffff;
  }
  
  .navigation-card {
    background: #ffffff;
    border: 2px solid #000000;
    color: #000000;
  }
  
  .navigation-card:focus {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
  }
}

/* Windows High Contrast Mode */
@media screen and (-ms-high-contrast: active) {
  .hero-section {
    background: Window;
    color: WindowText;
  }
  
  .navigation-card {
    background: Window;
    border: 1px solid WindowText;
    color: WindowText;
  }
  
  .navigation-card:focus {
    outline: 2px solid Highlight;
  }
}

/* ===== REDUCED DATA MODE OPTIMIZATIONS ===== */
@media (prefers-reduced-data: reduce) {
  .hero-section::before,
  .hero-section::after {
    display: none;
  }
  
  .hero-section {
    background: var(--color-primary);
    animation: none;
  }
  
  .navigation-card::before {
    display: none;
  }
}

/* ===== FORCED COLORS MODE SUPPORT ===== */
@media (forced-colors: active) {
  .hero-section {
    background: Canvas;
    color: CanvasText;
    forced-color-adjust: none;
  }
  
  .navigation-card {
    background: Canvas;
    border: 1px solid CanvasText;
    color: CanvasText;
    forced-color-adjust: none;
  }
  
  .navigation-card:focus {
    outline: 2px solid Highlight;
  }
  
  .navigation-card-icon {
    background: Highlight;
    forced-color-adjust: none;
  }
}

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

/* Optimize animations for different browsers */
@supports (will-change: transform) {
  .hero-section,
  .navigation-card {
    will-change: transform;
  }
}

@supports not (will-change: transform) {
  .hero-section,
  .navigation-card {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* GPU acceleration for different browsers */
.hero-section,
.navigation-card {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

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

/* Improve touch performance on mobile browsers */
@media (hover: none) and (pointer: coarse) {
  .navigation-card {
    -webkit-tap-highlight-color: rgba(108, 92, 231, 0.2);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Optimize for touch scrolling */
  .navigation-section {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }
}

/* ===== NETWORK CONDITION OPTIMIZATIONS ===== */

/* Optimize for slow connections */
@media (prefers-reduced-data: reduce) {
  .hero-section {
    background: var(--color-primary);
    animation: none;
  }
  
  .hero-section::before,
  .hero-section::after {
    display: none;
  }
  
  .navigation-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.95);
  }
}

/* ===== BROWSER-SPECIFIC SCROLLBAR STYLING ===== */

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-gray-100);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-400);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-500);
}

/* Firefox */
@supports (-moz-appearance: none) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-400) var(--color-gray-100);
  }
}

/* ===== BROWSER-SPECIFIC SELECTION STYLING ===== */

/* Webkit browsers */
::selection {
  background: rgba(108, 92, 231, 0.2);
  color: var(--color-text-primary);
}

/* Firefox */
::-moz-selection {
  background: rgba(108, 92, 231, 0.2);
  color: var(--color-text-primary);
}

/* ===== BROWSER COMPATIBILITY UTILITIES ===== */

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

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

/* Grid fallbacks */
.grid-fallback {
  display: flex;
  flex-wrap: wrap;
}

.grid-fallback > * {
  flex: 1 1 300px;
  margin: var(--space-2);
}

/* Transform fallbacks */
.no-transforms .navigation-card:hover {
  margin-top: -8px;
  box-shadow: var(--shadow-xl);
}

/* Transition fallbacks */
.no-transitions .navigation-card {
  transition: none;
}

/* ===== BROWSER-SPECIFIC FOCUS INDICATORS ===== */

/* Chrome/Safari focus indicators */
@supports (-webkit-appearance: none) {
  .navigation-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}

/* Firefox focus indicators */
@supports (-moz-appearance: none) {
  .navigation-card:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}

/* Edge focus indicators */
@supports (-ms-ime-align: auto) {
  .navigation-card:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}

/* ===== BROWSER PERFORMANCE MONITORING ===== */

/* Performance hints for different browsers */
@supports (contain: layout style paint) {
  .performance-optimized {
    contain: layout style paint;
  }
}

@supports (content-visibility: auto) {
  .content-visibility-optimized {
    content-visibility: auto;
    contain-intrinsic-size: 300px;
  }
}

/* ===== BROWSER-SPECIFIC LOADING STATES ===== */

/* Chrome loading optimization */
@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
  .loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 2s infinite;
  }
}

@keyframes loading-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Firefox loading optimization */
@supports (-moz-appearance: none) {
  .loading-skeleton {
    background: #f0f0f0;
    opacity: 0.7;
    animation: loading-pulse 2s infinite;
  }
}

@keyframes loading-pulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.3;
  }
}