/* =========================================================
   site.css — الأنماط الخاصة بالموقع (خارج Tailwind)
   ========================================================= */

/* ---------- القوائم المنسدلة: بالتمرير على الحاسوب وبالنقر على الجوال ---------- */
.sub { display: none; }
.has-sub.open > .sub { display: block; }

@media (min-width: 1024px) {
  .has-sub:hover > .sub,
  .has-sub:focus-within > .sub { display: block; }

  .has-sub:hover > .sub.mega,
  .has-sub:focus-within > .sub.mega,
  .has-sub.open > .sub.mega { display: grid; }
}

/* ---------- شريط شعارات العملاء المتحرك ---------- */

/* الوضع الافتراضي (بدون JavaScript أو مع "تقليل الحركة"): شبكة ثابتة في المنتصف */
.logo-marquee { overflow: hidden; }
.logo-track { display: flex; flex-wrap: wrap; justify-content: center;}
.logo-item { display: flex; align-items: center; justify-content: center; padding: 12px 5px; }

/* الوضع المتحرك: يفعّله site.js بإضافة الصنف is-ready */
.logo-marquee.is-ready {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.logo-marquee.is-ready .logo-track {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  animation: logo-scroll var(--logo-duration, 40s) linear infinite;
}

.logo-marquee.is-ready .logo-item { flex: none; }

/* يتوقف الشريط عند مرور الفأرة */
.logo-marquee.is-ready:hover .logo-track { animation-play-state: paused; }

@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--logo-shift, 0px) * -1)); }
}


/* ---------- سلايدر الهيدر الخلفي ---------- */
.hero-slide {
  will-change: opacity;
}


/* =========================================================
   site.css — الأنماط الخاصة بالموقع
   ========================================================= */

/* ---------- القوائم المنسدلة ---------- */
.sub { display: none; }
.has-sub.open > .sub { display: block; }

@media (min-width: 1024px) {
  .has-sub:hover > .sub,
  .has-sub:focus-within > .sub { display: block; }

  .has-sub:hover > .sub.mega,
  .has-sub:focus-within > .sub.mega,
  .has-sub.open > .sub.mega { display: grid; }
}

/* ---------- شريط شعارات العملاء المتحرك ---------- */
.logo-marquee { overflow: hidden; }
.logo-track { display: flex; flex-wrap: wrap; justify-content: center; }
.logo-item { display: flex; align-items: center; justify-content: center; padding: 12px 32px; }

.logo-marquee.is-ready {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.logo-marquee.is-ready .logo-track {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  animation: logo-scroll var(--logo-duration, 40s) linear infinite;
}

.logo-marquee.is-ready .logo-item { flex: none; }
.logo-marquee.is-ready:hover .logo-track { animation-play-state: paused; }

@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--logo-shift, 0px) * -1)); }
}

/* ---------- سلايدر الهيدر والخلفيات المتدرجة الاحترافية ---------- */
.hero-slide {
  will-change: opacity;
}

/* التدرج القياسي المعتمد (الوضع الفاتح والداكن) */
.hero-gradient-light {
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.92) 52%, #ffffff 65%);
}

.hero-gradient-dark {
  background: linear-gradient(to right, rgba(15,23,42,0) 0%, rgba(15,23,42,0) 25%, rgba(15,23,42,0.92) 52%, #0f172a 65%);
}