/**
 * CSS Error Handling and Fallbacks
 * This file provides comprehensive error handling for CSS
 */

/* CSS Custom Properties with Fallbacks */
:root {
  /* Primary colors with fallbacks */
  --main-background: #0b0c0f;
  --main-fonts-color: #fff;
  --main-decor-color: #b842df;

  /* Fallback fonts */
  --main-font-family:
    'Titillium Web', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
    sans-serif;

  /* Safe areas for mobile devices */
  --safe-area-inset-top: env(safe-area-inset-top, 0);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
  --safe-area-inset-left: env(safe-area-inset-left, 0);
  --safe-area-inset-right: env(safe-area-inset-right, 0);
}

/* CSS Error Handling Utilities */
.error-fallback {
  /* Fallback for when CSS fails to load */
  background-color: #000;
  color: #fff;
  font-family: monospace;
  padding: 20px;
  border: 2px solid #f00;
}

/* Progressive Enhancement */
@supports not (backdrop-filter: blur(10px)) {
  /* Fallback for browsers that don't support backdrop-filter */
  .intro,
  .technology-links,
  .project-card,
  .resume-dropdown-content {
    background-color: rgb(0 0 0 / 0.8);
  }
}

@supports not (display: flex) {
  /* Fallback for very old browsers */
  .technology-links p {
    display: block;
    text-align: center;
  }

  .technology-links a {
    display: inline-block;
    margin: 5px;
  }
}

/* Feature Detection and Fallbacks */
@supports not (position: sticky) {
  header {
    position: fixed;
  }
}

@supports not (transform: scale(1.15)) {
  .technology-links a:hover {
    transform: none;
    opacity: 0.8;
  }
}

/* CSS Grid Fallbacks */
@supports not (display: grid) {
  .projects-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .project-card {
    flex: 1 1 300px;
    margin: 10px;
  }
}

/* CSS Container Queries Fallback */
@supports not (container-type: inline-size) {
  .responsive-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* Error Recovery Styles */
.css-error {
  /* Styles for when CSS parsing fails */
  background: linear-gradient(45deg, #f00, #f66);
  color: white;
  padding: 10px;
  border-radius: 5px;
  margin: 10px 0;
  font-weight: 700;
  text-align: center;
}

/* Critical CSS Loading Indicator */
.css-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #b842df, #ff6b6b, #4ecdc4);
  z-index: 9999;
  animation: css-loading 2s ease-in-out infinite;
}

@keyframes css-loading {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* CSS Validation Error Styles */
.css-validation-error {
  outline: 2px solid #f00;
  outline-offset: 2px;
  background-color: rgb(255 0 0 / 0.1);
}

/* Performance Monitoring Styles */
.performance-warning {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgb(255 165 0 / 0.9);
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 12px;
  z-index: 1000;
  display: none;
}

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

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .intro,
  .technology-links,
  .project-card {
    border: 2px solid currentcolor;
    background-color: Canvas;
    color: CanvasText;
  }
}

/* Print Error Handling */
@media print {
  .no-print {
    display: none !important;
  }

  .intro,
  .technology-links {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
}

/* CSS Error Boundary Styles */
.error-boundary {
  border: 2px dashed #f00;
  padding: 20px;
  margin: 20px 0;
  background: rgb(255 0 0 / 0.1);
  border-radius: 10px;
}

.error-boundary::before {
  content: '⚠️ CSS Error Detected';
  display: block;
  font-weight: 700;
  color: #f00;
  margin-bottom: 10px;
}

/* Fallback for missing images */
img {
  /* Fallback for broken images */
  background-color: #f0f0f0;
  color: #666;
}

img::before {
  content: 'Image failed to load';
  display: block;
  background-color: #f0f0f0;
  color: #666;
  padding: 10px;
  text-align: center;
}

/* CSS Custom Properties Error Handling */
@property --fallback-color {
  syntax: '<color>';
  initial-value: #000;
  inherits: false;
}

/* Error Logging Styles */
.error-log {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(0 0 0 / 0.9);
  color: #f00;
  padding: 20px;
  border-radius: 10px;
  font-family: monospace;
  font-size: 12px;
  max-width: 80%;
  max-height: 80%;
  overflow: auto;
  z-index: 10000;
  display: none;
}

/* CSS Debug Mode */
.debug-mode * {
  outline: 1px solid rgb(255 0 0 / 0.3);
}

.debug-mode .technology-links {
  outline: 2px solid rgb(0 255 0 / 0.5);
}

.debug-mode .intro {
  outline: 2px solid rgb(0 0 255 / 0.5);
}