/* ── الافتتاحية ── */
#hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s3);
  padding: var(--s6);
  text-align: center;
  /* التقدّم يُضبط من hero.js أثناء التمرير */
  --hero-progress: 0;
}

/* توهج شعاعي يتنفس خلف الشعار.
   يُوسَّط بـ inset:0 + margin:auto لا بـ translate — التموضع بالحركة
   ينكسر في وضع تقليل الحركة الذي يلغي كل translate، فكان التوهج يخرج
   156 بكسل خارج الشاشة ويمدّد الصفحة أفقياً. */
#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(90vw, 640px);
  height: min(90vw, 640px);
  background: radial-gradient(circle,
    rgba(240,182,98,0.20) 0%,
    rgba(240,182,98,0.06) 40%,
    transparent 70%);
  pointer-events: none;
  opacity: 0;
}

#hero-logo {
  color: var(--brand);
  width: min(78vw, 420px);
  opacity: 0;
}
#hero-logo svg { width: 100%; height: auto; }

#hero-est {
  font-size: var(--fs-sm);
  letter-spacing: 0.35em;
  color: var(--text-dim);
  opacity: 0;
}

#hero-tagline {
  font-size: var(--fs-lg);
  color: var(--text);
  opacity: 0;
}

/* نفس السبب: توسيط بلا translate */
#hero-cue {
  position: absolute;
  inset-block-end: var(--s6);
  inset-inline: 0;
  display: grid;
  justify-items: center;
  opacity: 0;
}
#hero-cue span {
  display: block;
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, transparent, var(--brand));
}

/* ── شريط الأقسام ── */
#rail {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-rail);
  background: rgba(11, 9, 8, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--hairline);
  /* لا نستخدم translate للإخفاء: الشريط sticky وموضعه الطبيعي مباشرة بعد
     الافتتاحية، فإزاحته لأعلى تُظهره داخلها بدل أن تخفيه. */
  opacity: 0;
  visibility: hidden;
  translate: 0 -10px;
  transition: opacity var(--d-state) var(--ease-out),
              translate var(--d-state) var(--ease-out),
              visibility 0s linear var(--d-state);
}
#rail.is-visible {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity var(--d-state) var(--ease-out),
              translate var(--d-state) var(--ease-out),
              visibility 0s;
}

#rail-track {
  position: relative;
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--s3) var(--s4);
  scroll-behavior: smooth;
}
#rail-track::-webkit-scrollbar { display: none; }

.rail-pill {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding-inline: var(--s4);
  border-radius: var(--r-full);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--d-state) var(--ease-out);
}
.rail-pill.is-active { color: var(--bg); }

/* المؤشر المتحرك — عنصر واحد ينزلق بين الأزرار (المواصفات ٥.٤) */
#rail-indicator {
  position: absolute;
  z-index: 0;
  inset-block-start: var(--s3);
  /* left فيزيائي لا inset-inline-start: المؤشر يُزاح بـ translate وهي
     فيزيائية دائماً، و offsetLeft فيزيائي كذلك. خلطهما مع خاصية منطقية
     كان يدفع المؤشر خارج الشاشة في RTL. */
  left: 0;
  height: 44px;
  width: var(--w, 0px);
  border-radius: var(--r-full);
  background: var(--brand);
  translate: var(--x, 0) 0;
  /* الانزلاق فقط. العرض يتغيّر فوراً — تحريكه يُجبر المتصفح على
     إعادة التخطيط ويكسر الـ 60fps، والعين تتابع الحركة لا العرض. */
  transition: translate var(--d-state) var(--ease-out);
  pointer-events: none;
}

/* ── الأقسام ── */
#content { padding-block-end: var(--s8); }

.menu-section {
  padding: var(--s7) var(--s4) 0;
  /* مسافة أمان أسفل الشريط الملتصق عند التمرير إلى القسم */
  scroll-margin-block-start: 60px;
}

/* ملاحظة: لا نستخدم content-visibility: auto هنا.
   قياس فعلي أظهر أنها تقدّر ارتفاع القسم قبل رسمه، فيتغيّر الارتفاع أثناء
   التمرير الناعم وينتهي المستخدم في قسم خاطئ. الصور تحمل width/height صريحين
   فلا يوجد قفز تخطيط أصلاً، ومكسب الأداء لا يوازي كسر التنقّل. */

.section-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-block-end: var(--s5);
  color: var(--text);
}
.section-title span {
  display: inline-block;
  opacity: 0;
  translate: 0 24px;
}

#featured { padding-block-start: var(--s6); }
#featured .section-title { padding-inline: var(--s4); }

/* ── الفوتر ── */
#footer {
  padding: var(--s7) var(--s4) var(--s8);
  text-align: center;
  border-block-start: 1px solid var(--hairline);
  display: grid;
  gap: var(--s3);
}
.footer-hours { color: var(--text-dim); font-size: var(--fs-sm); }
.footer-links { display: flex; gap: var(--s4); justify-content: center; }
.footer-link {
  display: inline-grid;
  place-content: center;
  padding-inline: var(--s5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-full);
  color: var(--brand);
  text-decoration: none;
  font-size: var(--fs-sm);
}
.footer-note { color: var(--text-dim); font-size: var(--fs-xs); }
.footer-credit { color: var(--text-dim); font-size: var(--fs-xs); opacity: 0.8; }

/* ═══ زر تبديل الثيم ═══ */
/* أسفل الشاشة لا أعلاها: الأعلى محجوز للشريط الملتصق، والأسفل
   في متناول الإبهام مباشرة. البطاقة المنبثقة تغطيه لأن طبقتها أعلى. */
#theme-toggle {
  position: fixed;
  inset-block-end: max(var(--s5), calc(env(safe-area-inset-bottom) + var(--s4)));
  inset-inline-start: var(--s4);
  z-index: calc(var(--z-rail) + 1);
  box-shadow: 0 4px 18px rgba(0,0,0,0.28);
  width: 44px; height: 44px;
  display: grid; place-content: center;
  border-radius: var(--r-full);
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--bg-elev) 78%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--brand);
  transition: background var(--d-state) var(--ease-out),
              border-color var(--d-state) var(--ease-out),
              scale var(--d-tap) var(--ease-out);
}
#theme-toggle:active { scale: 0.92; }
@media (hover: hover) {
  #theme-toggle:hover { border-color: var(--brand); }
}

/* أيقونة تتحوّل بين شمس وقمر بلا صور — مرسومة بالكامل بـ CSS */
.theme-icon {
  position: relative;
  width: 18px; height: 18px;
  border-radius: var(--r-full);
  background: currentColor;
  transition: background var(--d-state) var(--ease-out),
              box-shadow var(--d-state) var(--ease-out);
  /* الغامق: قمر — قرص مقضوم بظل داخلي */
  box-shadow: inset -6px -3px 0 0 var(--bg-elev);
}
/* الفاتح: شمس — قرص كامل بأشعة */
:root[data-theme="light"] .theme-icon {
  width: 12px; height: 12px;
  box-shadow:
    0 0 0 2px transparent,
    0 -8px 0 -3.5px currentColor,  0 8px 0 -3.5px currentColor,
    -8px 0 0 -3.5px currentColor,  8px 0 0 -3.5px currentColor,
    -5.5px -5.5px 0 -3.5px currentColor,  5.5px 5.5px 0 -3.5px currentColor,
    -5.5px 5.5px 0 -3.5px currentColor,   5.5px -5.5px 0 -3.5px currentColor;
}

/* ═══ خلفية الافتتاحية بصورة الواجهة (اختيارية) ═══ */
#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--hero-photo, none);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
  pointer-events: none;
}
#hero.has-photo::after { opacity: var(--hero-photo-opacity, 0.28); }

/* الصورة تُعتّم وتُضبّب حتى لا تنافس الشعار */
#hero.has-photo::after {
  filter: blur(2px) saturate(0.8);
}
:root[data-theme="dark"] #hero.has-photo::after {
  --hero-photo-opacity: 0.30;
}
:root[data-theme="light"] #hero.has-photo::after {
  --hero-photo-opacity: 0.16;
}