/* error.css - 404 Error Page Styles */

/* ===== ERROR HERO SECTION ===== */
.error-hero {
  background: 
    linear-gradient(
      135deg,
      rgba(27, 59, 117, 0.9) 0%,
      rgba(27, 59, 117, 0.7) 50%,
      rgba(255, 184, 0, 0.3) 100%
    ),
    url("/imgs/junk-removal-bg.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: white;
  text-align: center;
}
/* error.css - Simplified 404 Error Page Styles */

/* ===== ERROR CONTENT ===== */
.error-content {
  max-width: 800px;
  margin: var(--space-2xl) auto;
  padding: 0 var(--space-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

/* ===== ERROR TEXT ===== */
.error-text {
  font-size: var(--font-size-xl);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-lg);
  font-family: var(--font-secondary);
}

/* ===== ERROR FEATURE BOX ===== */
.error-feature {
  background: var(--gradient-water);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  color: white;
  text-align: left;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.error-feature::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 200%;
  background: radial-gradient(circle, var(--color-accent-light) 0%, transparent 70%);
  opacity: 0.1;
  animation: float 6s ease-in-out infinite;
}

.error-feature-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-md);
  color: var(--color-accent);
  position: relative;
  z-index: 2;
}

.error-feature-text {
  margin-bottom: var(--space-lg);
  opacity: 0.9;
  line-height: var(--line-height-relaxed);
  position: relative;
  z-index: 2;
}

/* ===== QUICK BENEFITS ===== */
.error-quick-benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  position: relative;
  z-index: 2;
}

.quick-benefit {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  opacity: 0.9;
}

.quick-benefit svg {
  color: var(--color-accent);
  flex-shrink: 0;
}

/* ===== ERROR LINKS ===== */
.error-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
}

.error-links .btn-primary {
  background: var(--color-accent);
  color: var(--color-text);
  border: 2px solid var(--color-accent);
  font-weight: var(--font-weight-semibold);
  transition: all var(--transition-normal);
}

.error-links .btn-primary:hover {
  background: var(--color-accent-light);
  border-color: var(--color-accent-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.error-links .btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  font-weight: var(--font-weight-semibold);
  transition: all var(--transition-normal);
}

.error-links .btn-outline:hover {
  background: var(--color-primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.error-links .btn-large {
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-md);
}

/* ===== ERROR SUGGESTIONS ===== */
.error-suggestions {
  max-width: 600px;
  margin: 0 auto;
}

.suggestions-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-lg);
  color: var(--color-text);
}

.suggestions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.suggestion-card {
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  color: var(--color-text);
  text-decoration: none;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  border: 1px solid var(--color-bg-dark);
}

.suggestion-card:hover {
  background: var(--color-primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.suggestion-card:hover svg {
  color: var(--color-accent);
}

.suggestion-card svg {
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

.suggestion-card span {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

/* ===== TABLET STYLES ===== */
@media (min-width: 768px) {
  .error-content {
    padding: 0 var(--space-lg);
    margin: var(--space-2xl) auto;
  }
  
  .error-text {
    font-size: var(--font-size-2xl);
  }
  
  .error-feature {
    padding: var(--space-2xl);
  }
  
  .error-feature-title {
    font-size: var(--font-size-2xl);
  }
  
  .error-quick-benefits {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
  
  .error-links {
    flex-direction: row;
    gap: var(--space-lg);
    justify-content: center;
  }
  
  .error-links .btn-large {
    padding: var(--space-lg) var(--space-2xl);
  }
  
  .suggestions-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===== DESKTOP STYLES ===== */
@media (min-width: 1024px) {
  .error-content {
    gap: var(--space-2xl);
  }
}

/* ===== ANIMATIONS ===== */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(180deg); }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  .error-feature::before {
    animation: none;
  }
  
  .suggestion-card,
  .error-links .btn-primary,
  .error-links .btn-outline {
    transition: none;
    transform: none;
  }
}

/* Focus styles */
.suggestion-card:focus,
.error-links .btn:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}