/* =========================================================================
   تحديثات الموقع (2026-09-28)
   1) الهيدر على الجوال  2) مبدّل اللغة  3) دعم الاتجاه LTR  4) أيقونة العيادات
   ========================================================================= */

/* ---------- 1) الهيدر على الجوال والتابلت ----------
   المشكلة: الهيدر كان يتلاشى ويُسحب للأعلى مع النزول، وقائمة الجوال موضوعة داخله
   (position:absolute) بلا حد أقصى للارتفاع؛ فعند التمرير للوصول لآخر القائمة كان
   الهيدر -ومعه القائمة- يختفيان قبل الوصول لآخرها.
   الحل: على الشاشات < 1280px الهيدر لا يتلاشى؛ يختفي عند النزول ويعود فوراً عند
   أي صعود، ويبقى ثابتاً ما دامت القائمة مفتوحة. القائمة نفسها قابلة للتمرير
   داخلياً وتمرير الصفحة خلفها مقفل. */
@media (max-width: 1279.98px) {
  #site-header {
    --header-opacity: 0.97;
    opacity: 1 !important;
    transition: transform .32s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, background .2s ease;
  }
  #site-header.is-compact-hidden { transform: translateY(calc(-100% - 1.5rem)) !important; pointer-events: none; }
  #site-header.menu-open { transform: none !important; }
  #site-header #mobile-menu.is-open {
    max-height: calc(100dvh - var(--header-bottom, 5.5rem) - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}
html.menu-locked, html.menu-locked body { overflow: hidden; touch-action: none; }
html.menu-locked #mobile-menu { touch-action: pan-y; }

/* ---------- 2) مبدّل اللغة ---------- */
.lang-switch {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .8rem; border-radius: 999px;
  border: 1px solid rgba(14, 108, 9, .25);
  font-size: .8rem; font-weight: 700; color: #0e6c09;
  background: rgba(255,255,255,.6);
  transition: background .2s ease, transform .2s ease;
  white-space: nowrap;
}
.lang-switch:hover { background: rgba(14, 108, 9, .08); transform: translateY(-1px); }
.lang-switch--compact { padding: .4rem .65rem; min-width: 2.4rem; justify-content: center; }

/* ---------- 3) الاتجاه من اليسار لليمين (الإنجليزية) ----------
   الأسهم في التصميم مرسومة للعربية (السهم لليسار = «التالي»)، لذلك تُعكس. */
[dir="ltr"] .lucide-arrow-left, [dir="ltr"] .lucide-arrow-right,
[dir="ltr"] .lucide-chevron-left, [dir="ltr"] .lucide-chevron-right,
[dir="ltr"] .lucide-arrow-up-left, [dir="ltr"] .lucide-arrow-up-right { transform: scaleX(-1); }
[dir="ltr"] .group:hover .group-hover\:-translate-x-1 { transform: translateX(.25rem) scaleX(-1); }
[dir="ltr"] body { font-family: "Cairo", "Segoe UI", Roboto, sans-serif; }
[dir="ltr"] h1, [dir="ltr"] h2 { letter-spacing: -0.015em; }
[dir="ltr"] .text-right { text-align: left; }

/* ---------- 4) أيقونة العيادات الموحّدة ---------- */
.clinic-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: .8rem;
  color: var(--clinic-color, #0e7490);
  background: color-mix(in srgb, var(--clinic-color, #0e7490) 14%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clinic-color, #0e7490) 22%, transparent);
}
.clinic-icon svg { width: 55%; height: 55%; }
.clinic-icon--md { width: 2.75rem; height: 2.75rem; }
.clinic-icon--sm { width: 2rem; height: 2rem; border-radius: .6rem; }
.clinic-icon--lg { width: 3.5rem; height: 3.5rem; border-radius: 1rem; }

/* =========================================================================
   تحديثات الموقع (2026-09-29) — تنسيق صفحة تفاصيل القسم (/department)
   المشكلة: department.blade.php يبني كل محتوى الصفحة بجافاسكربت باستخدام
   أصناف department-* لم يكن لها أي تنسيق CSS إطلاقاً، فكانت صورة الغلاف
   تظهر بحجمها الطبيعي الكامل (طويلة جداً)، ونص العنوان الأبيض يظهر تحت
   الصورة على خلفية الصفحة الفاتحة بدل أن يتراكب فوق الصورة، والقسم لا
   يمتد بعرض الصفحة كاملاً لأنه داخل container-custom. الحل أدناه.
   ========================================================================= */

/* الغلاف: يكسر عرض container-custom الأب ليمتد من الحافة للحافة، بنفس
   أسلوب hero-section-full بالرئيسية. */
.department-hero {
  position: relative;
  width: 100vw;
  margin-inline-start: calc(50% - 50vw);
  margin-inline-end: calc(50% - 50vw);
  overflow: hidden;
}

.department-hero-media {
  position: relative;
  width: 100%;
  height: 340px;
  background: var(--color-ink);
}
@media (min-width: 640px) { .department-hero-media { height: 410px; } }
@media (min-width: 1024px) { .department-hero-media { height: 480px; } }
.department-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.department-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 20, 1, 0.15) 0%, rgba(2, 20, 1, 0.45) 55%, rgba(2, 20, 1, 0.88) 100%);
}

/* المحتوى (الشارة + العنوان + الوصف) يتراكب فوق الصورة بدل أن يظهر أسفلها */
.department-hero-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  padding: 1.75rem 1.25rem 2rem;
}
@media (min-width: 640px) { .department-hero-content { padding: 2.25rem 3rem 2.5rem; } }
@media (min-width: 1024px) { .department-hero-content { padding: 2.75rem 8% 3rem; } }

.department-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

/* بطاقات معلومات سريعة (ساعات العمل / الموقع / التواصل) */
.department-info-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 1.1rem;
  padding: 1rem 1.15rem;
  box-shadow: var(--shadow-sm);
}
.department-info-card .info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.8rem;
  flex-shrink: 0;
  background: rgba(14, 116, 144, 0.1);
  color: var(--color-primary);
}

/* عنوان قسم فرعي (أيقونة + عنوان صغير + h2) */
.department-section-title {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.department-section-title .title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.9rem;
  flex-shrink: 0;
  background: rgba(14, 116, 144, 0.1);
  color: var(--color-primary);
}

/* «نظرة عامة»: نقاط تدمج (ما يميزنا + الخدمات + المرافق) — عمودان من md */
.department-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .department-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.department-point {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  border: 1px solid var(--color-line);
  background: rgba(14, 116, 144, 0.035);
  overflow-wrap: anywhere;
}
.department-list-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 0.1rem;
  background: rgba(5, 150, 105, 0.12);
  color: var(--color-success);
}

/* شريط دعوة لاتخاذ إجراء أسفل الصفحة */
.department-cta {
  position: relative;
  border-radius: 1.5rem;
  background-image: var(--gradient-primary);
  overflow: hidden;
}
.department-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 100% at 100% 0%, rgba(255, 255, 255, 0.12), transparent 60%);
}

/* عناصر بعرض 100vw (غلاف القسم) تشمل عرض شريط التمرير فتُنتج تمريراً أفقياً بسيطاً: نقصّه */
html, body { overflow-x: clip; }