/* Mobile-First Optimized CSS for Better Performance */
/* تحسينات CSS مخصصة للموبايل لتحسين الأداء */

/* Critical mobile styles - inline these for best performance */
@media (max-width: 768px) {
  /* Reduce animations on mobile for better performance */
  * {
    animation-duration: 0.3s !important;
    transition-duration: 0.3s !important;
  }
  
  /* Optimize hero section for mobile */
  .hero-gradient {
    padding: 1rem 0;
    min-height: 60vh;
  }
  
  .hero-gradient::before {
    opacity: 0.1; /* Reduce background complexity */
  }
  
  /* Simplify glass effects on mobile */
  .glass-effect {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  /* Optimize text rendering */
  body {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: subpixel-antialiased;
  }
  
  /* Reduce complex shadows */
  .btn-primary:hover {
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.2);
  }
  
  /* Optimize images for mobile */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Reduce footer complexity on mobile */
  .footer-enhanced {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  }
  
  .footer-enhanced::before {
    display: none; /* Remove complex background on mobile */
  }
  
  /* Optimize grid layouts */
  .grid {
    gap: 1rem;
  }
  
  /* Reduce padding for mobile */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Optimize navigation for mobile */
  .nav-link::after {
    display: none; /* Remove hover effects on mobile */
  }
  
  /* Simplify animations */
  .floating-animation {
    animation: none;
  }
  
  /* Optimize form elements */
  .form-input {
    border: 1px solid #e5e7eb;
    transition: border-color 0.2s ease;
  }
  
  /* Reduce visual complexity */
  .gradient-text {
    color: #059669;
    background: none;
    -webkit-text-fill-color: unset;
  }
}

/* Optimize for very small screens */
@media (max-width: 480px) {
  .text-4xl {
    font-size: 2rem;
  }
  
  .text-3xl {
    font-size: 1.75rem;
  }
  
  .text-2xl {
    font-size: 1.5rem;
  }
  
  .text-xl {
    font-size: 1.25rem;
  }
  
  /* Reduce spacing */
  .py-16 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  
  .py-12 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  
  .mb-12 {
    margin-bottom: 2rem;
  }
  
  .mb-8 {
    margin-bottom: 1.5rem;
  }
}

/* Touch-friendly improvements */
@media (pointer: coarse) {
  .btn-primary,
  .nav-link,
  button,
  a {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
  }
  
  /* Remove hover effects on touch devices */
  .hover\:bg-green-700:hover {
    background-color: #059669;
  }
  
  .hover\:text-green-600:hover {
    color: #059669;
  }
}

/* Optimize for landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-gradient {
    min-height: 50vh;
    padding: 0.5rem 0;
  }
  
  .py-20 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .glass-effect {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #000;
  }
  
  .gradient-text {
    color: #000;
    background: none;
  }
}

/* Dark mode optimizations */
@media (prefers-color-scheme: dark) {
  .glass-effect {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
}