/* Cross-Browser Compatibility Enhancements */
/* Based on MDN Cross-Browser Testing Best Practices */

/* CSS Feature Detection and Fallbacks */

/* Grid Layout with Flexbox Fallback */
.projects-grid {
  display: flex; /* Fallback for older browsers */
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
}

.projects-grid .project-card {
  flex: 1 1 300px; /* Fallback for grid */
  min-width: 300px;
  max-width: calc(50% - 1rem);
}

/* Modern browsers with grid support */
@supports (display: grid) {
  .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
  }
  
  .projects-grid .project-card {
    flex: none;
    min-width: auto;
    max-width: none;
  }
}

/* Backdrop Filter with Fallback */
.chat-container {
  background-color: rgba(18, 18, 18, 0.9); /* Fallback background */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

@supports (backdrop-filter: blur(4px)) {
  .chat-container {
    background-color: rgba(18, 18, 18, 0.7);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
}

/* CSS Custom Properties Fallbacks */
:root {
  /* Fallback colors for browsers that don't support CSS variables */
  --space-black-fallback: #000000;
  --space-dark-fallback: #121212;
  --space-blue-fallback: #005288;
  --space-white-fallback: #ffffff;
  --space-gray-fallback: #aaaaaa;
}

/* Vendor Prefixes for Animations */
@-webkit-keyframes fadeInDown {
  from { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); }
  to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

@-moz-keyframes fadeInDown {
  from { opacity: 0; -moz-transform: translateY(-20px); transform: translateY(-20px); }
  to { opacity: 1; -moz-transform: translateY(0); transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@-webkit-keyframes fadeInUp {
  from { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); }
  to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

@-moz-keyframes fadeInUp {
  from { opacity: 0; -moz-transform: translateY(20px); transform: translateY(20px); }
  to { opacity: 1; -moz-transform: translateY(0); transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Transform Vendor Prefixes */
.project-card:hover {
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}

.cta-button:hover {
  -webkit-transform: translateY(-3px);
  -moz-transform: translateY(-3px);
  -ms-transform: translateY(-3px);
  transform: translateY(-3px);
}

/* Transition Vendor Prefixes */
.project-card {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

nav ul li a {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
}

/* Box Shadow Vendor Prefixes */
.project-card:hover {
  -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Border Radius Fallbacks */
.project-card,
.contact-card,
.feature-card {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

/* Flexbox Vendor Prefixes */
.cta-buttons {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  gap: 2rem;
}

@media (max-width: 768px) {
  .cta-buttons {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1rem;
  }
}

/* Font Smoothing for WebKit */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Input Appearance Reset for Consistency */
input, button, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Touch Action for Better Mobile Performance */
.project-card,
.cta-button,
.contact-card,
.feature-card,
button,
a {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

/* Will-Change for Animation Performance */
.project-card,
.cta-button,
.typing-indicator .dot {
  will-change: transform;
}

/* Scrollbar Styling for WebKit Browsers */
.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: var(--space-dark, #121212);
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

/* Firefox Scrollbar Styling with fallbacks */
.chat-messages {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) var(--space-dark, #121212);
  /* Fallback for unsupported browsers */
  overflow: auto;
}

/* Internet Explorer 11 Support */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .projects-grid {
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  
  .project-card {
    -ms-flex: 1 1 300px;
    flex: 1 1 300px;
  }
}

/* Safari iOS Specific Fixes */
@supports (-webkit-overflow-scrolling: touch) {
  .chat-messages {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Fix Safari input zoom */
  input, textarea, select {
    font-size: 16px; /* Prevents zoom on focus in iOS */
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .project-card,
  .contact-card,
  .feature-card {
    border: 2px solid;
  }
  
  .cta-button {
    border: 2px solid;
  }
}

/* Print Styles */
@media print {
  .stars,
  body::after,
  .chat-container,
  #theme-toggle,
  .mobile-menu-toggle {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
  
  .project-card,
  .contact-card,
  .feature-card {
    border: 1px solid #000 !important;
    background: white !important;
    color: black !important;
  }
}