/* ============================================================
   nav.css — شريط التنقل العلوي
   
   المحتويات:
   1. Nav Container — الحاوية الرئيسية
   2. Logo — الشعار
   3. Nav Links — روابط التنقل
   4. Dropdown Menu — القائمة المنسدلة للخدمات
   5. Language Switcher — مبدّل اللغات
   6. CTA Button — زر الحجز
   7. Mobile Toggle — زر القائمة في الجوال
   8. Mobile Menu — القائمة الكاملة في الجوال
   9. Nav Scroll Effect — تأثير التمرير
============================================================ */


/* ============================================================
   1. Nav Container — الحاوية الرئيسية
============================================================ */
#main-nav {
  position:        fixed;       /* ثابت في الأعلى دائماً */
  top:             0;
  right:           0;
  left:            0;
  z-index:         1000;        /* فوق كل شيء */
  height:          var(--nav-height);  /* 72px من main.css */

  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-md);
  padding:         0 48px;

  background: rgba(255,255,255,0.97);
  border-bottom:   0.5px solid var(--border-gold);

  /* تأثير الزجاج الضبابي */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* انتقال سلس عند التمرير */
  transition: background 0.4s ease, box-shadow 0.4s ease;
}


/* ============================================================
   2. Logo — الشعار
============================================================ */
.nav-logo a {
  display: block;
}

.nav-logo img {
  height:    100px;
  width:     auto;
  display:   block;

  /* انتقال عند التحويم */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-logo img:hover {
  transform: scale(1.04);
  opacity:   0.9;
}


/* ============================================================
   3. Nav Links — روابط التنقل
============================================================ */
.nav-links {
  display:     flex;
  align-items: center;
  gap:         var(--space-md);
  list-style:  none;
}

.nav-links > li {
  position: relative;   /* مهم لتحديد موضع Dropdown */
}

.nav-links > li > a {
  display:        block;
  font-size:      var(--fs-sm);
  font-weight:    400;
  color:          var(--text-muted);
  letter-spacing: 0.5px;
  padding:        8px 0;
  transition:     color 0.3s ease;

  /* الخط السفلي — يظهر عند التحويم */
  position: relative;
}

/* الخط السفلي الذهبي */
.nav-links > li > a::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  right:            0;          /* RTL: يبدأ من اليمين */
  left:             0;
  height:           1px;
  background-color: var(--color-gold);
  transform:        scaleX(0);
  transform-origin: right;      /* RTL: الحركة من اليمين */
  transition:       transform 0.3s ease;
}

.nav-links > li > a:hover {
  color: var(--color-gold);
}

.nav-links > li > a:hover::after {
  transform: scaleX(1);
}

/* الرابط النشط (الصفحة الحالية) */
.nav-links > li > a.active {
  color: var(--color-gold);
}

.nav-links > li > a.active::after {
  transform: scaleX(1);
}


/* ============================================================
   4. Dropdown Menu — القائمة المنسدلة للخدمات
============================================================ */
.nav-dropdown {
  position: relative;
}

/* القائمة المنسدلة — مخفية افتراضياً */
.dropdown-menu {
  position:   absolute;
  top:        calc(100% + 12px);  /* تحت الرابط مباشرة */
  right:      0;                  /* RTL: تبدأ من اليمين */
  min-width:  200px;
  z-index:    200;

  background: rgba(255,255,255,0.97);
  border:        0.5px solid var(--border-gold);
  backdrop-filter: blur(16px);

  /* مخفية */
  opacity:        0;
  visibility:     hidden;
  transform:      translateY(-8px);
  transition:     opacity 0.25s ease,
                  visibility 0.25s ease,
                  transform 0.25s ease;

  padding: 8px 0;
}

/* تظهر عند التحويم على العنصر الأب */
.nav-dropdown:hover .dropdown-menu {
  opacity:    1;
  visibility: visible;
  transform:  translateY(0);
}

/* عناصر القائمة */
.dropdown-menu li a {
  display:        block;
  padding:        10px 20px;
  font-size:      var(--fs-sm);
  color:          var(--text-muted);
  transition:     color 0.2s ease, background 0.2s ease, padding 0.2s ease;
  border-right:   2px solid transparent;  /* RTL */
}

.dropdown-menu li a:hover {
  color:        var(--color-gold);
  background:   rgba(201, 168, 76, 0.06);
  padding-right: 26px;            /* تأثير انزلاق للداخل */
  border-right-color: var(--color-gold);
}


/* ============================================================
   5. Language Switcher — مبدّل اللغات
============================================================ */
.nav-lang {
  display:     flex;
  align-items: center;
  gap:         4px;
}

.lang-btn {
  background:     transparent;
  border:         0.5px solid var(--border-gold);
  color:          var(--text-muted);
  padding:        5px 10px;
  font-size:      10px;
  font-family:    var(--font-arabic);
  letter-spacing: 1px;
  cursor:         pointer;
  transition:     var(--transition);
  line-height:    1;
}

/* عند التحويم */
.lang-btn:hover {
  border-color: var(--color-gold);
  color:        var(--color-gold);
  background:   rgba(201, 168, 76, 0.06);
}

/* اللغة النشطة المختارة */
.lang-btn.active {
  border-color: var(--color-gold);
  color:        var(--bg-darkest);
  background:   var(--color-gold);
  font-weight:  700;
}


/* ============================================================
   6. CTA Button — زر الحجز في Nav
============================================================ */
.nav-cta {
  display:        inline-block;
  background:     var(--color-gold);
  color:          var(--bg-darkest);
  padding:        10px 22px;
  font-size:      var(--fs-sm);
  font-weight:    700;
  font-family:    var(--font-arabic);
  letter-spacing: 0.5px;
  white-space:    nowrap;
  transition:     background 0.3s ease, transform 0.2s ease;
}

.nav-cta:hover {
  background: var(--color-gold-light);
  transform:  translateY(-1px);
}

.nav-cta:active {
  transform: translateY(0);
}


/* ============================================================
   7. Mobile Toggle — زر القائمة في الجوال (☰)
============================================================ */
.nav-toggle {
  display:        none;   /* مخفي على الشاشات الكبيرة */
  flex-direction: column;
  justify-content: center;
  gap:            5px;
  width:          36px;
  height:         36px;
  padding:        4px;
  cursor:         pointer;
  background:     transparent;
  border:         none;
}

/* الخطوط الثلاثة */
.nav-toggle span {
  display:          block;
  width:            100%;
  height:           1.5px;
  background-color: var(--text-primary);
  transition:       transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* تحويل الـ ☰ إلى ✕ عند فتح القائمة */
.nav-toggle.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}


/* ============================================================
   8. Mobile Menu — القائمة الكاملة في الجوال
============================================================ */
@media (max-width: 900px) {

  /* إظهار زر الهامبرغر */
  .nav-toggle {
    display: flex;
  }

  /* إخفاء عناصر الـ Nav الكبيرة */
  .nav-links,
  .nav-lang,
  .nav-cta {
    display: none;
  }

  /* تعديل الـ Nav padding */
  #main-nav {
    padding: 0 var(--space-md);
  }

  /* القائمة الجوال الكاملة */
  .nav-mobile-menu {
    position:   fixed;
    top:        var(--nav-height);
    right:      0;
    left:       0;
    bottom:     0;
    z-index:    999;

    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(16px);

    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    gap:            var(--space-md);

    /* مخفية افتراضياً */
    opacity:    0;
    visibility: hidden;
    transform:  translateY(-10px);
    transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
  }

  /* تظهر عند إضافة كلاس open بواسطة JS */
  .nav-mobile-menu.open {
    opacity:    1;
    visibility: visible;
    transform:  translateY(0);
  }

  /* روابط الجوال */
  .nav-mobile-menu a {
    font-size:      var(--fs-xl);
    font-family:    var(--font-display);
    font-weight:    300;
    color:          var(--text-muted);
    transition:     color 0.2s ease;
  }

  .nav-mobile-menu a:hover {
    color: var(--color-gold);
  }

  /* مبدل اللغات في الجوال */
  .nav-mobile-lang {
    display:     flex;
    gap:         8px;
    margin-top:  var(--space-md);
    padding-top: var(--space-md);
    border-top:  0.5px solid var(--border-gold);
  }

  .nav-mobile-lang .lang-btn {
    padding:   8px 14px;
    font-size: var(--fs-xs);
  }

  /* زر CTA في الجوال */
  .nav-mobile-cta {
    margin-top: var(--space-sm);
  }
}


/* ============================================================
   9. Nav Scroll Effect — تأثير عند التمرير
   (يُفعَّل بواسطة js/nav.js عبر إضافة كلاس scrolled)
============================================================ */

/* عند التمرير: خلفية أكثف وظل خفيف */
#main-nav.scrolled {
  background: rgba(255,255,255,0.97);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* الشعار يصغر قليلاً عند التمرير */
#main-nav.scrolled .nav-logo img {
  height: 44px;
  transition: height 0.3s ease;
}