/* ===================================
   Section Background System
   نظام الخلفيات الموحد للأقسام
   
   Browser Compatibility:
   - Chrome 90+ ✓
   - Firefox 88+ ✓
   - Safari 14+ ✓
   - Edge 90+ ✓
   - Opera 76+ ✓
   
   Features:
   - Relative paths work from all folder levels
   - Vendor prefixes included for maximum compatibility
   - Responsive design for all screen sizes
   - Fallback colors for missing images
   =================================== */

/* ===================================
   1. Base Background Styles
   =================================== */

/* الكلاس الأساسي للخلفية */
.section-bg {
  position: relative;
  /* Browser compatibility for background-size */
  -webkit-background-size: 100% 100%; /* Safari, Chrome */
  -moz-background-size: 100% 100%; /* Firefox */
  -o-background-size: 100% 100%; /* Opera */
  background-size: 100% 100%; /* الصورة تملأ القسم بالضبط بدون قص */
  background-position: center center;
  background-repeat: no-repeat;
  /* Parallax effect - مع vendor prefixes */
  background-attachment: fixed;
  -webkit-background-attachment: fixed;
  -moz-background-attachment: fixed;
  -o-background-attachment: fixed;
  background-color: #f8f9fa; /* fallback color */
  padding-top: 4rem !important; /* مسافة علوية إضافية */
  padding-bottom: 4rem !important; /* مسافة سفلية إضافية */
  /* تأكد إن الـ parallax يشتغل */
  will-change: background-position;
}

/* طبقة overlay للتحكم في الـ opacity */
.section-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.75); /* opacity 0.25 للصورة */
  z-index: 0;
  pointer-events: none;
}

/* المحتوى يكون فوق الخلفية */
.section-bg > * {
  position: relative;
  z-index: 1;
}

/* ===================================
   2. Background Image Variants
   =================================== */

/* الخلفية الأولى - back.jpg */
.section-bg-1 {
  background-image: url('../images/back.jpg');
}

/* الخلفية الثانية - back 2.jpg */
.section-bg-2 {
  background-image: url('../images/back 2.jpg');
}

/* ===================================
   3. Opacity Variants
   =================================== */

/* مستوى خفيف - opacity 0.15 للصورة */
.section-bg-light::before {
  background: rgba(255, 255, 255, 0.85);
}

/* مستوى متوسط - opacity 0.25 للصورة */
.section-bg-medium::before {
  background: rgba(255, 255, 255, 0.75);
}

/* مستوى داكن - opacity 0.35 للصورة */
.section-bg-dark::before {
  background: rgba(255, 255, 255, 0.65);
}

/* ===================================
   3.5. Background Position Variants
   لخلق تأثير الاستمرارية بين الأقسام
   =================================== */

/* موضع الخلفية - أعلى */
.section-bg-pos-top {
  background-position: center top;
}

/* موضع الخلفية - وسط */
.section-bg-pos-center {
  background-position: center center;
}

/* موضع الخلفية - أسفل */
.section-bg-pos-bottom {
  background-position: center bottom;
}

/* موضع الخلفية - أعلى يمين */
.section-bg-pos-top-right {
  background-position: right top;
}

/* موضع الخلفية - أسفل يسار */
.section-bg-pos-bottom-left {
  background-position: left bottom;
}

/* ===================================
   4. Responsive Adjustments
   =================================== */

/* Mobile (< 768px) */
@media (max-width: 767px) {
  .section-bg {
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%; /* الصورة تملأ القسم بالضبط */
    background-position: center center;
    /* Parallax على mobile */
    background-attachment: fixed;
    -webkit-background-attachment: fixed;
  }
  
  /* زيادة الـ opacity قليلاً على mobile لتحسين القراءة */
  .section-bg::before {
    background: rgba(255, 255, 255, 0.80);
  }
  
  .section-bg-light::before {
    background: rgba(255, 255, 255, 0.88);
  }
  
  .section-bg-medium::before {
    background: rgba(255, 255, 255, 0.80);
  }
  
  .section-bg-dark::before {
    background: rgba(255, 255, 255, 0.70);
  }
}

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .section-bg {
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%; /* الصورة تملأ القسم بالضبط */
    background-position: center center;
    /* Parallax على tablet */
    background-attachment: fixed;
    -webkit-background-attachment: fixed;
  }
  
  .section-bg::before {
    background: rgba(255, 255, 255, 0.78);
  }
  
  .section-bg-light::before {
    background: rgba(255, 255, 255, 0.87);
  }
  
  .section-bg-medium::before {
    background: rgba(255, 255, 255, 0.78);
  }
  
  .section-bg-dark::before {
    background: rgba(255, 255, 255, 0.68);
  }
}

/* Desktop (> 992px) */
@media (min-width: 992px) {
  .section-bg {
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%; /* الصورة تملأ القسم بالضبط */
    background-position: center center;
    /* Parallax على desktop */
    background-attachment: fixed;
    -webkit-background-attachment: fixed;
  }
}

/* ===================================
   5. Performance Optimizations
   =================================== */

/* تحسين الأداء للأقسام التي تحتوي على animations */
.section-bg.has-animation {
  will-change: transform;
}

/* منع layout shift */
.section-bg {
  min-height: 200px; /* حد أدنى للارتفاع */
}

/* تحسين الأداء - استخدام GPU acceleration */
.section-bg::before {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* تحسين الأداء - تقليل repaints */
.section-bg {
  contain: layout style paint;
}

/* ===================================
   6. Accessibility & Contrast
   =================================== */

/* التأكد من contrast ratio كافي للنصوص */
.section-bg h1,
.section-bg h2,
.section-bg h3,
.section-bg h4,
.section-bg h5,
.section-bg h6 {
  color: #0A0F3C; /* Navy blue - high contrast */
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.section-bg p,
.section-bg li,
.section-bg span {
  color: #1a1a1a; /* Dark gray - high contrast */
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* تحسين القراءة على الخلفيات الداكنة */
.section-bg-dark h1,
.section-bg-dark h2,
.section-bg-dark h3,
.section-bg-dark h4,
.section-bg-dark h5,
.section-bg-dark h6,
.section-bg-dark p,
.section-bg-dark li,
.section-bg-dark span {
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
}

/* ===================================
   7. Print Styles
   =================================== */

@media print {
  .section-bg {
    background: none !important;
  }
  
  .section-bg::before {
    display: none !important;
  }
}

/* Ensure sections never animate - only content inside */
section {
  opacity: 1 !important;
  transform: none !important;
}

section.animate-on-scroll,
section.fade-in-up {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ===================================
   8. Map Section Specific Styles
   =================================== */

/* Map section with background */
.map-contact-section.section-bg {
  padding: 80px 0 !important;
}

/* Ensure map section content is visible above background */
.map-contact-section.section-bg .contact-details,
.map-contact-section.section-bg .map-container {
  position: relative;
  z-index: 2;
}

/* Contact items styling with background */
.map-contact-section.section-bg .contact-item {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.map-contact-section.section-bg .contact-item:hover {
  background: linear-gradient(135deg, #1a365d 0%, #2d4a7c 100%);
}

/* Map container with enhanced shadow on background */
.map-contact-section.section-bg .map-container {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* Responsive adjustments for map section */
@media (max-width: 991px) {
  .map-contact-section.section-bg {
    padding: 60px 0 !important;
  }
}

@media (max-width: 767px) {
  .map-contact-section.section-bg {
    padding: 40px 0 !important;
  }
}