/* ═══════════════════════════════════════════════════════════════════
   Xénah · Lumière Layout Layer  v2.0
   Scope: Header transparency · Full-width Hero · Fluid overlap only
   ⚠️  لا يحتوي هذا الملف على أي تعديل لـ .xenah-shop-layout
       أو شبكات المنتجات أو أي display:grid موجود في الموقع
   ═══════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   1. HEADER  —  transparent & absolute above hero
   ════════════════════════════════════════════════════════════════════ */

/* الهيدر ثابت fixed دائماً — هذا هو السر لعمل الـ transition */
body[data-page="home"] .xenah-site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  background: transparent !important;
}

/* Topbar */
body[data-page="home"] .xenah-topbar {
  background: rgba(30, 36, 26, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  transition: background-color 0.4s ease-in-out !important;
}

/* Main Header — شفاف مع تدرج داكن خفيف لحماية اللوجو والقوائم */
body[data-page="home"] .xenah-main-header {
  position: relative !important;
  top: auto !important;
  /* تدرج خفيف أسود → شفاف يعطي تباين بدون قتامة */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.20) 0%,
    rgba(0, 0, 0, 0.06) 60%,
    transparent 100%
  ) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* حذف الـ border تماماً لإزالة الخط الأبيض */
  border-bottom: none !important;
  box-shadow: none !important;
  /* انتقال ناعم لكل الخصائص البصرية */
  transition:
    background         0.4s ease-in-out,
    background-color   0.4s ease-in-out,
    box-shadow         0.4s ease-in-out,
    border-color       0.4s ease-in-out,
    padding            0.4s ease,
    backdrop-filter    0.4s ease !important;
  will-change: background, box-shadow !important;
  /* cubic-bezier(0.4,0,0.2,1) = Material Design smooth easing */
  transition:
    background         0.45s cubic-bezier(0.4, 0, 0.2, 1),
    background-color   0.45s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow         0.45s cubic-bezier(0.4, 0, 0.2, 1),
    border-color       0.45s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter    0.45s ease !important;
}

/* روابط Nav — بيضاء فوق البانر مع transition */
body[data-page="home"] .xenah-main-header .xenah-nav-link {
  color: #ffffff !important;
  opacity: 0.85 !important;
  transition:
    color   0.4s ease-in-out,
    opacity 0.4s ease-in-out !important;
}
body[data-page="home"] .xenah-main-header .xenah-nav-link:hover,
body[data-page="home"] .xenah-main-header .xenah-nav-link.is-active {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* أيقونات وزر اللغة — بيضاء مع ظل وtransition */
body[data-page="home"] .xenah-main-header .xenah-icon-btn,
body[data-page="home"] .xenah-main-header .xenah-lang-toggle {
  color: #ffffff !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25)) !important;
  transition:
    color   0.4s ease-in-out,
    filter  0.4s ease-in-out !important;
}

/* الفاصل العمودي */
body[data-page="home"] .xenah-main-header .xenah-header-divider {
  background: rgba(255, 255, 255, 0.22) !important;
  transition: background 0.4s ease-in-out !important;
}

/* اللوجو — ظل ناعم يجعله مرئياً فوق خلفيات فاتحة */
body[data-page="home"] .xenah-main-header .xenah-logo-wrap img,
body[data-page="home"] .xenah-site-header:not(.header-scrolled) [data-site-logo] {
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.28)) !important;
  transition: filter 0.35s ease !important;
}

/* بعد الـ scroll نزيل الظل */
body[data-page="home"] .xenah-site-header.header-scrolled [data-site-logo] {
  filter: none !important;
}

/* بار البحث — مخفي داخل البانر */
body[data-page="home"] .xenah-desktop-search-row {
  display: none !important;
}

/* ─── Header Scrolled State ──────────────────────────────────────
   يضيف JS كلاس .header-scrolled على .xenah-site-header
   ──────────────────────────────────────────────────────────────── */
body[data-page="home"] .xenah-site-header.header-scrolled {
  /* position:fixed يبقى كما هو — هذا ما يجعل الـ transition يعمل */
  position: fixed !important;
  top: 0 !important;
}

body[data-page="home"] .xenah-site-header.header-scrolled .xenah-topbar {
  background: var(--sage-dark) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-page="home"] .xenah-site-header.header-scrolled .xenah-main-header {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  /* حد سفلي ناعم جداً */
  border-bottom: 1px solid rgba(232, 221, 202, 0.55) !important;
  /* ظل فاخر خفيف الوزن — طبقتان */
  box-shadow:
    0 1px 0   rgba(255, 255, 255, 0.75),
    0 4px 18px rgba(47, 54, 42, 0.05),
    0 10px 36px rgba(47, 54, 42, 0.03) !important;
  /* الانتقال موروث من .xenah-main-header أعلاه */
}

body[data-page="home"] .xenah-site-header.header-scrolled .xenah-main-header .xenah-nav-link {
  color: var(--text) !important;
  opacity: 0.65 !important;
}
body[data-page="home"] .xenah-site-header.header-scrolled .xenah-main-header .xenah-nav-link:hover,
body[data-page="home"] .xenah-site-header.header-scrolled .xenah-main-header .xenah-nav-link.is-active {
  color: var(--sage-dark) !important;
  opacity: 1 !important;
}

body[data-page="home"] .xenah-site-header.header-scrolled .xenah-main-header .xenah-icon-btn,
body[data-page="home"] .xenah-site-header.header-scrolled .xenah-main-header .xenah-lang-toggle {
  color: var(--text) !important;
  filter: none !important;
}

body[data-page="home"] .xenah-site-header.header-scrolled .xenah-main-header .xenah-header-divider {
  background: rgba(201, 178, 150, 0.35) !important;
}


/* ════════════════════════════════════════════════════════════════════
   2. HERO  —  full-width, edge-to-edge static wallpaper layout
   ════════════════════════════════════════════════════════════════════ */

/* Hero section: خلفية ثابتة ممتدة بالكامل */
body[data-page="home"] .xenah-hero {
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100vw !important;
  margin-inline-start: calc(-50vw + 50%) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  min-height: 580px !important;
  display: block !important;
  overflow: hidden !important;
}

/* Header Scrim: تدرج لوني داكن لحماية الهيدر الشفاف */
body[data-page="home"] .xenah-hero::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 240px !important; /* يغطي مساحة الهيدر بالكامل */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.15) 60%,
    transparent 100%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* إخفاء عناصر السلايدر القديمة تماماً */
body[data-page="home"] .xenah-hero-slider,
body[data-page="home"] .xenah-slider-track-wrap,
body[data-page="home"] .xenah-slider-track,
body[data-page="home"] .xenah-slider-arrow,
body[data-page="home"] .xenah-slider-dots {
  display: none !important;
}

/* الارتفاعات على الشاشات المختلفة */
@media (min-width: 1200px) {
  body[data-page="home"] .xenah-hero {
    min-height: 620px !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  body[data-page="home"] .xenah-hero {
    min-height: 560px !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   3. FLUID OVERLAP  —  القسم التالي يطفو فوق البانر
   ════════════════════════════════════════════════════════════════════ */

body[data-page="home"] .xenah-hero + section,
body[data-page="home"] main > section:nth-child(2) {
  position: relative !important;
  z-index: 10 !important;
  margin-top: -80px !important;
  border-radius: 28px 28px 0 0 !important;
  background: #ffffff !important;
  box-shadow:
    0 -6px 48px rgba(47, 54, 42, 0.10),
    0 8px 32px rgba(47, 54, 42, 0.04) !important;
  overflow: hidden !important;
}

/* خلفية هذا القسم ناصعة لا شفافة */
body[data-page="home"] .xenah-hero + section .xenah-section-soft {
  background: transparent !important;
}


/* ════════════════════════════════════════════════════════════════════
   4. MOBILE  —  نعيد الهيدر sticky وتعديلات مناسبة للشاشات الصغيرة
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* الهيدر sticky ثابت على الموبايل */
  body[data-page="home"] .xenah-site-header {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    margin-inline-start: 0 !important;
  }

  body[data-page="home"] .xenah-topbar {
    background: var(--sage-dark) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body[data-page="home"] .xenah-main-header {
    background: rgba(255, 255, 255, 0.97) !important;
    border-bottom: 1px solid rgba(232, 221, 202, 0.85) !important;
  }

  body[data-page="home"] .xenah-main-header .xenah-nav-link {
    color: var(--text) !important;
    opacity: 0.7 !important;
  }
  body[data-page="home"] .xenah-main-header .xenah-icon-btn,
  body[data-page="home"] .xenah-main-header .xenah-lang-toggle {
    color: var(--text) !important;
  }

  /* البانر على الموبايل */
  body[data-page="home"] .xenah-hero {
    width: 100% !important;
    margin-inline-start: 0 !important;
    min-height: 320px !important;
    aspect-ratio: 16 / 9 !important;
  }

  /* التداخل أقل على الموبايل */
  body[data-page="home"] .xenah-hero + section,
  body[data-page="home"] main > section:nth-child(2) {
    margin-top: -48px !important;
    border-radius: 20px 20px 0 0 !important;
  }

  /* الموبايل: تعويض الهيدر الـ fixed */
  body[data-page="home"] main {
    padding-top: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   4. FIXED HEADER COMPENSATION
   الهيدر fixed يخرج عن تدفق الصفحة — البانر يتجاهل ذلك لأنه
   full-height ويبدأ من top:0، لكن main يحتاج margin-top
   بعد خروج المستخدم من البانر وانتقال الهيدر لـ scrolled mode
   ════════════════════════════════════════════════════════════════════ */

/* لا نضيف margin-top على الصفحة الرئيسية لأن البانر يملأ كامل
   الجزء العلوي — الهيدر يعلو فوقه بشكل طبيعي */
body[data-page="home"] main {
  /* البانر يبدأ من أعلى الصفحة خلف الهيدر المدمج — صحيح */
  margin-top: 0 !important;
}