/* ====================================
   Cross-Browser Compatibility
   Testing & Fallback Styles
   ==================================== */

/* ====================
   CSS Feature Detection
   ==================== */

/* Grid support fallback */
@supports not (display: grid) {
  .grid-layout {
    display: flex;
    flex-wrap: wrap;
  }
}

/* Flex support */
@supports not (display: flex) {
  .flex-layout {
    display: block;
  }
}

/* CSS Variables fallback */
@supports not (--css: variables) {
  :root {
    background-color: #0f0f0f;
    color: #ffffff;
  }
}

/* ====================
   Webkit Prefixes
   ==================== */

/* Webkit scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Webkit appearance reset */
input, button, select, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Webkit text smoothing */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* ====================
   Mozilla-specific
   ==================== */

/* Firefox scrollbar (limited support) */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}

/* Firefox placeholder */
input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
  opacity: 1;
}

/* ====================
   IE11 Fallbacks
   ==================== */

/* Fallback for flex display */
.flex-layout {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

/* Fallback for grid */
.grid-layout {
  display: -ms-grid;
  display: grid;
}

/* Fallback for transform */
.transform-element {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* ====================
   Safari Specific
   ==================== */

/* Safari input styling */
input[type="search"] {
  -webkit-appearance: searchfield;
  -webkit-box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
}

/* Safari backdrop filter */
.glass-effect {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Safari font smoothing */
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;

/* ====================
   Mobile Safari
   ==================== */

/* iOS zoom prevention */
@media (pointer: coarse) {
  button, a, input[type="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* iOS input zoom fix */
input, textarea, select {
  font-size: 16px;
}

/* iOS transition fix */
* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

a, button, input, select {
  -webkit-user-select: text;
  user-select: text;
}

/* ====================
   Touch Device Support
   ==================== */

/* Coarse pointer devices (touch) */
@media (pointer: coarse) {
  button, a {
    padding: 12px 16px;
  }
  
  ::-webkit-scrollbar {
    display: none;
  }
}

/* Fine pointer devices (mouse) */
@media (pointer: fine) {
  button:hover, a:hover {
    cursor: pointer;
  }
}

/* ====================
   Hover & Pointer Media Queries
   ==================== */

/* Devices that support hover */
@media (hover: hover) {
  button:hover, a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

/* Devices that don't support hover */
@media (hover: none) {
  button:active, a:active {
    transform: translateY(-1px);
  }
}

/* ====================
   Display Mode Detection
   ==================== */

/* Standalone PWA mode */
@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
  }
}

/* Fullscreen mode */
@media (display-mode: fullscreen) {
  .header {
    display: none;
  }
}

/* ====================
   Color Scheme Detection
   ==================== */

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* Light mode fallback */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
  }
}

/* No preference */
@media (prefers-color-scheme: no-preference) {
  :root {
    color-scheme: dark light;
  }
}

/* ====================
   High Contrast Mode
   ==================== */

/* High contrast detection */
@media (prefers-contrast: more) {
  :root {
    --color-border: #ffffff;
    --color-text-secondary: #e0e0e0;
  }
  
  button, a {
    text-decoration: underline;
  }
}

/* Low contrast mode */
@media (prefers-contrast: less) {
  * {
    box-shadow: none;
  }
}

/* ====================
   Motion Preference
   ==================== */

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

/* No motion preference */
@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

/* ====================
   Accessibility
   ==================== */

/* Focus visible support */
:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

/* Fallback for older browsers */
:focus {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

/* Remove outline in WebKit for focus-visible */
:focus:not(:focus-visible) {
  outline: none;
}

/* ====================
   Print Styles
   ==================== */

@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a, a:visited {
    text-decoration: underline;
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
  }
  
  img {
    max-width: 100% !important;
  }
  
  @page {
    margin: 0.5cm;
  }
  
  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }
}

/* ====================
   Browser Specific Fixes
   ==================== */

/* Chrome specific */
@supports (-webkit-appearance: none) {
  input[type="search"] {
    -webkit-appearance: textfield;
  }
}

/* Edge specific */
@supports (-ms-ime-align: auto) {
  body {
    margin: 0;
  }
}

/* ====================
   Fallback Fonts
   ==================== */

/* System font fallback */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Monospace fallback */
.monospace {
  font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
}

/* ====================
   Flexbox Fallback
   ==================== */

/* Old flexbox syntax */
.flex-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

.flex-item {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/* ====================
   CSS Grid Fallback
   ==================== */

.grid-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[auto-fit];
}

/* ====================
   Position Sticky Fallback
   ==================== */

.sticky {
  position: -webkit-sticky;
  position: sticky;
}

/* ====================
   Object-fit Fallback
   ==================== */

/* Fallback for object-fit */
img {
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

/* ====================
   Testing Checklist
   ==================== */

/*
Browser Compatibility Testing Checklist:

Desktop Browsers:
- [ ] Chrome (latest 2 versions)
- [ ] Firefox (latest 2 versions)
- [ ] Safari (latest 2 versions)
- [ ] Edge (latest 2 versions)
- [ ] Opera (latest version)

Mobile Browsers:
- [ ] Chrome Mobile
- [ ] Safari Mobile (iOS)
- [ ] Samsung Internet
- [ ] Firefox Mobile
- [ ] Edge Mobile

Responsive Breakpoints:
- [ ] 320px (iPhone SE)
- [ ] 375px (iPhone)
- [ ] 425px (Small tablet)
- [ ] 768px (iPad)
- [ ] 1024px (Large tablet)
- [ ] 1280px (Desktop)
- [ ] 1536px+ (Large desktop)

Features to Test:
- [ ] Navigation
- [ ] Forms & inputs
- [ ] Video playback
- [ ] Animations & transitions
- [ ] Modal/dialog functionality
- [ ] Touch interactions
- [ ] Scroll behavior
- [ ] Performance metrics (Lighthouse)
- [ ] Accessibility (keyboard navigation, screen readers)
- [ ] Print functionality

Debugging:
- Use browser DevTools
- Test with real devices when possible
- Check console for errors/warnings
- Validate CSS/HTML with W3C validators
- Use tools like BrowserStack for cross-browser testing
*/