/* ==================================================
   LOGO & OVERLAY FIXES - ملف تحسينات الشعار والطبقات
   ================================================== */

/* إزالة التوهج والحدود من شعار القائمة العلوية */
.logo-main {
  filter: none !important;
  animation: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* إزالة أي تأثيرات hover على الشعار */
.logo-main:hover {
  filter: none !important;
  transform: none !important;
}

/* تخفيف اللون الأسود فوق الصورة المتحركة في Hero */
.hero-overlay {
  background: rgba(0, 0, 0, 0.25) !important; /* تخفيف من 0.5 إلى 0.25 */
}

/* إضافة طبقة gradient حديثة فوق الخلفية المتحركة */
.hero-background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(122, 53, 182, 0.15) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(138, 43, 226, 0.15) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* التأكد من أن المحتوى فوق الطبقة الجديدة */
.hero-content {
  z-index: 3 !important;
}

.hero-decorative-bg {
  z-index: 2 !important;
}

/* تخفيف overlay شاشة البداية (Splash) أيضاً */
.splash-overlay {
  background: rgba(0, 0, 0, 0.2) !important; /* تخفيف من 0.4 إلى 0.2 */
}

/* إضافة gradient حديث لشاشة البداية */
.splash-background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(122, 53, 182, 0.1) 0%,
    transparent 30%,
    transparent 70%,
    rgba(0, 0, 0, 0.3) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* الشعار في splash فوق الطبقات */
.splash-content {
  z-index: 3 !important;
}

/* ==================================================
   RESPONSIVE - استجابة للشاشات الصغيرة
   ================================================== */

@media (max-width: 768px) {
  /* الشعار في الموبايل - حجم أصغر بدون تأثيرات */
  .logo-main {
    height: 45px !important;
  }

  /* تخفيف إضافي للطبقات في الموبايل لتحسين الرؤية */
  .hero-overlay {
    background: rgba(0, 0, 0, 0.2) !important;
  }

  .hero-background::after {
    background: linear-gradient(
      135deg,
      rgba(122, 53, 182, 0.1) 0%,
      rgba(0, 0, 0, 0.15) 50%,
      rgba(138, 43, 226, 0.1) 100%
    );
  }
}

/* ==================================================
   DARK MODE COMPATIBILITY - توافق مع الوضع الداكن
   ================================================== */

/* التأكد من أن التعديلات تعمل مع dark-mode.css */
body.dark-mode .logo-main,
body.dark-mode .header .logo-main {
  filter: none !important;
  animation: none !important;
}

/* تحسين رؤية المحتوى في الوضع الداكن مع الطبقات الخفيفة */
body.dark-mode .hero-content h1,
body.dark-mode .hero-content p,
body.dark-mode .hero-title,
body.dark-mode .hero-subtitle {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 4px 16px rgba(0, 0, 0, 0.6) !important;
}