/* ============================================================
   الهيرو الجديد (Hero v2) — الصفحة الرئيسية فقط (index.html / index-ar.html)
   يعتمد على العناصر الموجودة أصلاً (nav / #mozzat-hero-bg) من غير ما يغيّر بنيتها
   الأساسية أو الـIDs بتاعتها، عشان كل الجافاسكريبت الحالي (القائمة المنبثقة، قائمة
   الجوال، تبديل اللغة) يفضل شغّال زي ما هو بالظبط.
   ============================================================ */

:root {
  --mzh-bg-1: #0A0F0C;
  --mzh-bg-2: #0C1C13;
  --mzh-gold: #A87A45;
  --mzh-gold-soft: #C9A063;
  --mzh-gold-glow: #E2B36C;
  --mzh-cream: #E1CAB3;
  --mzh-white: #F3F3F3;
  --mzh-white-pure: #FFFFFF;
  --mzh-gray: #C1C4C3;
  --mzh-cta-border: #F0EDE8;
}

/* ---------- الخط ---------- */
.mzh-display {
  font-family: "Playfair Display", "29LTZaridSans", serif;
}
.mzh-ui {
  font-family: "Poppins", "29LTZaridSans", sans-serif;
}
html[lang="ar"] .mzh-display,
html[lang="ar"] .mzh-ui {
  /* توحيد خط الهيرو مع خط الموقع الأساسي (29LTZaridSans) بدل Cairo،
     عشان يبقى الهيرو بنفس خط باقي الصفحة بالظبط. */
  font-family: "29LTZaridSans", "Cairo", sans-serif;
}
/* خط Cairo العربي بصريًا أصغر من Playfair Display الإنجليزي بنفس قيمة font-size (اختلاف
   في تصميم الخط نفسه، مش نسبة الصفحة) — نكبّر نصوص الهيرو العربي شوية عشان تتطابق بصريًا
   مع حجم النسخة الإنجليزية. */
html[lang="ar"] .mzh-h1 { font-size: clamp(2.8rem, 7vw, 6.2rem) !important; }
html[lang="ar"] .mzh-eyebrow { font-size: .88rem; }
html[lang="ar"] .mzh-sub { font-size: .95rem; }
html[lang="ar"] .mzh-body { font-size: 1rem; }

/* ---------- الهيدر: خلفية بيضاء أنحف فوق الهيرو على الديسكتوب بس (>=1024px) ----------
   الألوان هنا رجعت لألوان البراند الأصلية بتاعة الموقع (--mm-green/--mm-clay من
   megamenu.css) بدل الذهبي — الهيدر الأبيض هو اللي التصميم الأصلي اتعمل عشانه أصلًا،
   فمعظم القواعد الأصلية (اللون، الحبّة عند الهوفر، زر Store) بترجع تشتغل لوحدها من غير
   ما نحتاج نتجاوزها؛ إحنا هنا بس بنضيف اللي فعلًا لازم يتغيّر (موضع الهيدر فوق الهيرو،
   سُمكه، وإبراز الصفحة الحالية "Home" بشكل دائم). */
@media (min-width: 1024px) {
  .mz-hero-wrap { position: relative; }
  .mz-hero-wrap > nav {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 50;
  }
  /* تقليل سُمك شريط الهيدر (الحشو الخارجي + ارتفاع الصف الداخلي) عن القيم الأصلية. */
  .mz-hero-wrap > nav > .max-w-7xl { padding-top: .75rem !important; padding-bottom: .75rem !important; }
  .mz-hero-wrap > nav .h-16 { height: 3.5rem !important; }
  /* مساحة كافية أعلى نص الهيرو عشان ما يتراكبش مع شريط الهيدر (بقى position:absolute
     ومش بياخد مكانه من التدفّق الطبيعي للصفحة زي الأول) — قلّت مع تقليل سُمك الهيدر. */
  #mozzat-hero-bg #home { padding-top: 108px !important; }
  /* الصفحة الحالية (Home) بس هي اللي محتاجة إبراز دائم (مش بس وقت الهوفر) — باقي
     الروابط وميكانيكية الحبّة (pill) عند الهوفر وزر Store بتشتغل بألوانها الأصلية
     (--mm-green/--mm-clay) من غير أي تعديل من هنا خالص. */
  .mz-hero-wrap > nav .nav-link[data-mzh="home"]::before {
    background: var(--mm-green-dark);
    transform: scale(1);
    opacity: 1;
  }
  .mz-hero-wrap > nav .nav-link[data-mzh="home"],
  .mz-hero-wrap > nav .nav-link[data-mzh="home"] p {
    color: #fff !important;
  }

  /* ---------- الشريط الرأسي الديكوري (رقم "01" + نص دوّار) على أقصى حافة الهيرو ---------- */
  .mzh-rail {
    position: absolute;
    left: 28px; top: 150px; bottom: 60px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
  }
  html[lang="ar"] .mzh-rail { left: auto; right: 28px; }
  .mzh-rail::before {
    content: "";
    position: absolute;
    top: 30px; bottom: 30px; left: 50%;
    width: 1px;
    background: rgba(168, 122, 69, .35);
    transform: translateX(-50%);
  }
  .mzh-rail-num {
    position: relative;
    z-index: 1;
    font-family: "Poppins", "29LTZaridSans", sans-serif;
    font-size: .8rem;
    letter-spacing: .05em;
    color: var(--mzh-gold);
    opacity: .85;
    background: var(--mzh-bg-1);
    padding: 6px 0;
  }
  .mzh-rail-text {
    position: relative;
    z-index: 1;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-transform: uppercase;
    letter-spacing: .25em;
    font-size: .68rem;
    color: var(--mzh-gold);
    opacity: .75;
    white-space: nowrap;
    background: var(--mzh-bg-1);
    padding: 8px 0;
  }
}

/* ---------- خلفية الهيرو: طبقة صورة + طبقة تظليل منفصلتين (Hero v2) ----------
   القيم الفعلية (اتجاه التظليل/لونه/موضع الصورة/عكسها) بتتحدّد بالكامل من الإضافة (لوحة
   "الهيدر/الهيرو") — بتتكتب كـ CSS custom properties inline على #mozzat-hero-bg نفسه
   (--mzh-scrim-dir/-1/-2/-3/-4، --mzh-photo-pos، --mzh-photo-flip). القيم هنا مجرد
   احتياطية (fallback) تطابق الشكل الافتراضي بالظبط لو الإضافة لسه ما طبّقتش أي إعداد. */
#mozzat-hero-bg {
  position: relative;
  background-color: var(--mzh-bg-1) !important;
  overflow: hidden;
}
#mozzat-hero-bg #home { position: relative; z-index: 2; }
.mzh-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../images/hero/hero-desktop.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--mzh-photo-pos, center right);
  transform: scaleX(var(--mzh-photo-flip, 1));
}
.mzh-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(var(--mzh-scrim-dir, 90deg),
    var(--mzh-scrim-1, var(--mzh-bg-1)) 0%,
    var(--mzh-scrim-2, rgba(10, 15, 12, .85)) 40%,
    var(--mzh-scrim-3, rgba(10, 15, 12, .15)) 65%,
    var(--mzh-scrim-4, rgba(10, 15, 12, 0)) 100%);
}
/* احتياطي إضافي (fallback of the fallback): لو الإضافة لسه ما طبّقتش أي inline style خالص
   (صفحة جديدة تمامًا لسه ما اتفتحتش من الأداة)، على الأقل الاتجاه يفضل صح حسب لغة الصفحة
   زي السلوك الأصلي. بنحطهم على #mozzat-hero-bg نفسه (نفس العنصر اللي الأداة بتكتب عليه
   الـinline style) عشان الـinline (لو موجود) يكسبها دايمًا صح بقاعدة الأولوية العادية،
   ولو مش موجود يفضلوا هما اللي بيورّثوا القيمة للطبقتين. */
html[lang="ar"] #mozzat-hero-bg {
  --mzh-scrim-dir: 270deg;
  --mzh-photo-pos: center left;
  --mzh-photo-pos-mobile: 30% center;
}

/* ---------- نصوص الهيرو ---------- */
.mzh-eyebrow {
  color: var(--mzh-gold);
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .8rem;
  font-weight: 500;
  margin-bottom: .75rem;
}
.mzh-h1 {
  color: var(--mzh-white) !important;
  font-style: normal !important;
  font-weight: 400;
  line-height: 1.1;
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  margin: 0;
}
.mzh-h1 .mzh-accent {
  display: block;
  color: var(--mzh-gold) !important;
  font-style: italic !important;
}
.mzh-rule {
  width: 64px;
  height: 2px;
  background: var(--mzh-gold);
  border: 0;
  margin: 1.1rem 0;
}
.mzh-sub {
  color: var(--mzh-white-pure) !important;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .85rem;
  font-weight: 500;
}
.mzh-body {
  color: var(--mzh-gray) !important;
  font-weight: 300;
}

/* ---------- زر الدعوة لإجراء (CTA) ---------- */
.mzh-cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: transparent !important;
  border: 1px solid var(--mzh-cta-border);
  color: var(--mzh-white) !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .8rem;
  font-weight: 500;
  padding: .85rem 1.6rem !important;
}
.mzh-cta:hover { border-color: var(--mzh-gold); background: rgba(168, 122, 69, .1) !important; }
.mzh-cta:focus-visible { outline: 2px solid var(--mzh-gold); outline-offset: 3px; }
.mz-hero-wrap > nav .nav-link:focus-visible { outline: 2px solid var(--mzh-gold); outline-offset: 2px; }
/* موحّد على كل المقاسات (جوال وديسكتوب) — نفس النص "Discover More" ونفس السهم الدائري */
.mzh-cta-arrow-circle {
  display: inline-flex;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--mzh-gold);
  align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* زر "عرض أقل" — بيظهر تحت النص الإضافي بعد الضغط على Discover More، ويقفله تاني
   ويرجّع زر Discover More زي ما كان. أصغر وأهدأ من زر الـCTA الرئيسي بتصميم. */
.mzh-cta-close {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: transparent !important;
  border: 0;
  color: var(--mzh-gold) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  font-weight: 500;
  padding: 0 !important;
  margin-top: .9rem;
  cursor: pointer;
}
.mzh-cta-close::before { content: "\2212"; font-size: .9rem; line-height: 1; }
.mzh-cta-close:hover { color: var(--mzh-gold-soft) !important; }
.mzh-cta-close:focus-visible { outline: 2px solid var(--mzh-gold); outline-offset: 3px; }

/* ---------- نقاط التنقّل (ديكورية) ---------- */
.mzh-dots { display: none; gap: .5rem; margin-top: 1.75rem; }
.mzh-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(201, 199, 192, .4); }
.mzh-dot.active { background: #B4854B; }
@media (min-width: 1024px) {
  .mzh-dots { display: flex; }
}

/* ---------- الجوال: صورة الخلفية full-bleed + طبقة تعتيم للقراءة ----------
   موضع الصورة بيتبع نفس إعداد "موضع الصورة" (photoSide) من الإضافة بالظبط (--mzh-photo-pos-mobile،
   بنفس منطق --mzh-photo-pos بس بنسبة مئوية أدقّ تناسب صورة full-bleed ضيّقة) — أي تعديل من
   اللوحة يتطبّق على الديسكتوب والجوال مع بعض دايمًا. اتجاه التدرّج نفسه (رأسي) ثابت مقصود
   على الجوال بغض النظر عن اتجاه التظليل بالديسكتوب (الشكل الرأسي هو الأنسب لصورة full-bleed
   ضيّقة) — لكن لون التظليل ودرجة العكس (flip) بيوَرّثوا نفس قيم الإضافة زي الديسكتوب بالظبط.
*/
@media (max-width: 1023px) {
  .mzh-photo {
    background-image: url('../images/hero/hero-mobile.jpg');
    background-position: var(--mzh-photo-pos-mobile, 70% center);
  }
  .mzh-scrim {
    background-image: linear-gradient(180deg,
      var(--mzh-scrim-1, rgba(10, 15, 12, .85)) 0%,
      var(--mzh-scrim-2, rgba(10, 15, 12, .55)) 45%,
      var(--mzh-scrim-1, rgba(10, 15, 12, .78)) 100%);
  }
}

/* ============================================================
   سلايدر الهيرو متعدد الصور والنصوص (Hero v2 Slides)
   .mzh-slide-stack يلفّ نص الهيرو؛ لو سلايد واحد بس (الوضع الافتراضي) بيفضل في التدفّق
   الطبيعي زي ما كان بالظبط قبل الميزة دي — الطبقة المتراكبة (position:absolute) والحركة
   بيتفعّلوا بس لما .mzh-slides-multi موجودة (سلايدين أو أكتر + السلايدر مفعّل).
   ============================================================ */
.mzh-slide-stack { position: relative; }
.mzh-slide-extra-wrap { display: contents; }

.mzh-slide-stack.mzh-slides-multi { min-height: clamp(300px, 40vw, 430px); }
.mzh-slide-stack.mzh-slides-multi .mzh-slide-text {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(0);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
}
.mzh-slide-stack.mzh-slides-multi .mzh-slide-text.mzh-slide-active {
  opacity: 1;
  pointer-events: auto;
}
.mzh-slide-stack.mzh-slides-multi .mzh-slide-text.mzh-slide-exit-l { transform: translateX(-6%); opacity: 0; }
.mzh-slide-stack.mzh-slides-multi .mzh-slide-text.mzh-slide-exit-r { transform: translateX(6%); opacity: 0; }

/* وضع "النص مجمّد": الصورة بتفضل تتنقّل عادي، بس نص سلايد واحد بس (order=0) هو اللي بيفضل
   ظاهر — بدون أي تراكب/حركة (تدفّق طبيعي عادي، زي الوضع الافتراضي بالظبط). */
.mzh-slide-stack.mzh-text-frozen .mzh-slide-text { display: none; }
.mzh-slide-stack.mzh-text-frozen .mzh-slide-text.mzh-slide-active { display: block; }

/* صورة الهيرو: حركة دخول اتجاهية فوق الـflip الحالي (بيتركّبوا مع بعض في نفس transform) */
.mzh-photo { transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1); }

/* شريط التقدّم (بديل الأرقام) — عنصر منفصل بجانب النقاط الديكورية القديمة (.mzh-dots)،
   بيظهر بس لما فيه أكتر من سلايد فعلي (سلايد واحد = فاضي = مفيش تأثير). */
.mzh-slidebar { display: flex; gap: 6px; margin-top: 1.5rem; }
.mzh-slidebar-seg {
  flex: 1 1 0;
  max-width: 46px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(216, 184, 136, .25);
  overflow: hidden;
  cursor: pointer;
}
.mzh-slidebar-fill { display: block; height: 100%; width: 0%; background: var(--mzh-gold); border-radius: 2px; }
.mzh-slidebar-seg.mzh-seg-done .mzh-slidebar-fill { width: 100%; transition: none; }
.mzh-slidebar-seg.mzh-seg-active .mzh-slidebar-fill { transition-property: width; transition-timing-function: linear; }
/* النقاط القديمة بتتخفي تلقائيًا بس لما شريط تقدّم حقيقي (فيه أجزاء) يبقى جنبها مباشرة */
.mzh-dots:has(+ .mzh-slidebar .mzh-slidebar-seg) { display: none !important; }

@media (max-width: 1023px) {
  .mzh-slidebar-seg { max-width: 34px; }
}

/* ---------- إتاحة الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  .mzh-cta, .mz-hero-wrap > nav #desktop-socials a { transition: none !important; }
  .mzh-slide-stack.mzh-slides-multi .mzh-slide-text { transition: opacity .4s ease !important; transform: none !important; }
  .mzh-slide-stack.mzh-slides-multi .mzh-slide-text.mzh-slide-exit-l,
  .mzh-slide-stack.mzh-slides-multi .mzh-slide-text.mzh-slide-exit-r { transform: none !important; }
  .mzh-photo { transition: opacity .4s ease !important; }
  .mzh-slidebar-seg.mzh-seg-active .mzh-slidebar-fill { transition-duration: .01s !important; }
}