/* ===== الشريط العلوي: ثلاثة أسئلة لا أكثر ===== */

/* رفيع وكحلي وليس ملتصقًا: يتمرّر مع الصفحة فيختفي حين يمرّر الزائر —
   هذا وحده «إخفاؤه عند التمرير على الجوال» المطلوب، بلا سطر جافاسكربت
   واحد. الترويسة البيضاء تحتها هي التي تلتصق. */
.mc-utility {
  background: var(--wp--preset--color--brand-900);
  color: var(--wp--preset--color--paper-50);
  font-size: var(--wp--preset--font-size--label);
}

.mc-utility__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--50);
  align-items: center;
  justify-content: space-between;
  padding-block: 8px;
  padding-inline: var(--wp--preset--spacing--50);
}

.mc-utility a { color: inherit; text-decoration: none; }
.mc-utility a:hover { text-decoration: underline; }

.mc-utility__emergency {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 10px;
  border: 1px solid var(--wp--preset--color--alert-600);
  border-radius: var(--mc-radius-sm);
  flex: none;
}

.mc-utility__branches {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mc-utility__lang { flex: none; }

@media (max-width: 480px) {
  /* على أضيق الشاشات يبقى السؤالان الأهمّ: الطوارئ واللغة. حالة الفروع
     تُقرأ بزيارة رابط «الفروع» نفسه لا بسطر إضافي يضيّق شريطًا أصلًا رفيعًا. */
  .mc-utility__branches { display: none; }
}

/* ===== الترويسة: ثلاث مناطق بوزن متدرّج ===== */

/* الالتصاق على وسم header.wp-block-template-part لا على .mc-header نفسه
   عمدًا: الصندوق المحوي للالتصاق هو الأب المباشر، ووسم header هذا لا
   يحوي غير هذا العنصر فارتفاعه يساوي ارتفاع ابنه تمامًا — أي بلا مساحة
   يتحرّك فيها العنصر فيبقى ملتصقًا، فيمرّ الالتصاق بلا أثر. أبو header
   هو .wp-site-blocks بطول الصفحة كلها، فهناك المساحة التي يحتاجها. الوسم
   فريد في الصفحة (جزء الترويسة وحده يستعمل tagName:"header")، فالتحديد
   بالعنصر آمن بلا حاجة لصنف إضافي. */
header.wp-block-template-part {
  position: sticky;
  /* var-- الخاص بشريط الإدارة صفر حين لا يوجد مستخدم مسجَّل دخوله */
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 30;
}

.mc-header {
  border-bottom: var(--mc-border);
}

.mc-header__inner {
  gap: var(--wp--preset--spacing--50);
  align-items: center;
}

.mc-header__brand { flex: none; }

.mc-header__nav {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.mc-header__nav .wp-block-navigation { font-weight: 500; }

.mc-header__actions {
  flex: none;
  align-items: center;
  gap: var(--wp--preset--spacing--40);
}

/* الرابط الهادئ: بلا حدّ ولا خلفية، فوزنه البصري أقل من الزر المصمت
   بجواره — هذا هو الفرق الذي يقوله القسم ٣ من وثيقة البنية. */
.mc-account-link { margin: 0; flex: none; }
.mc-account-link a { text-decoration: none; }
.mc-account-link a:hover { text-decoration: underline; }

.mc-header__actions .wp-block-buttons { margin: 0; }

@media (max-width: 600px) {
  /* العلامة وزر الحجز يبقيان ظاهرين دائمًا على الجوال، والتنقل خلف زرّ
     القائمة (سلوك wp:navigation الافتراضي). الرابط الهادئ وحده يُطوى:
     لا يخسر الزائر شيئًا، فحسابه متاح أيضًا من رابط المريض في التذييل. */
  .mc-account-link { display: none; }

  /* الترويسة كانت تتجاوز الشاشة أفقيًا في كل صفحة على الجوال: العلامة
     ٢١٠ والأفعال ١١٢ وفجوتان بـ٢٤ = ٣٧٠ في وعاء ٣٤٢، والوعاء
     flex-wrap: nowrap والطرفان flex: none — فلا شيء يتنازل، فيخرج
     الفائض عن الحافة. أربعة بكسل لا تُرى بالعين وتُنتج شريط تمرير أفقيًا
     في الصفحة كلها.

     الفجوة الأصغر تُدخل المحتوى في ٣٩٠ بلا قصّ. والانكماش مع القصّ
     شبكة أمان لما دونها (٣٦٠ و٣٢٠): اسم يُقصّ حرفًا خير من صفحة
     تتزحزح كلها. */
  .mc-header__inner { gap: var(--wp--preset--spacing--20); }

  .mc-header__brand { flex: 0 1 auto; min-width: 0; }

  .mc-header__brand .mc-logo,
  .mc-header__brand .mc-logo__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* ===== شريط الإجراء الثابت في الجوال ===== */

.mc-sticky { display: none; }

@media (max-width: 782px) {
  .mc-sticky {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    gap: 1px;
    background: var(--wp--preset--color--line-200);
    border-top: 1px solid var(--wp--preset--color--line-200);
  }

  .mc-sticky a {
    flex: 1;
    padding: 14px 8px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
  }

  /* الاتصال هو الفعل المصمت هنا؛ الحجز مكافئه المصمت ظاهر في الترويسة
     الملتصقة فوق الشاشة، فيكفيه وزن هادئ هنا (انظر التعليق في MobileCta.php) */
  .mc-sticky__call { background: var(--wp--preset--color--brand-700); color: var(--wp--preset--color--white); }
  .mc-sticky__book { flex: 0 0 35%; background: var(--wp--preset--color--paper-50); color: var(--wp--preset--color--brand-900); }

}

@media print {
  .mc-sticky { display: none; }
}

/* ===== التذييل: أربع مناطق ثم شريط سفلي ===== */

/* الحشو هنا لا في سمات البلوك.

   parts/footer.html يعلن padding في تعليق البلوك، ولا يظهر منه شيء:
   قوالب البلوكات تُعرض بـHTML الساكن كما هو ولا يُعاد تحويل سمات
   التعليق إلى أنماط سطرية. فكان اسم المستشفى وعناوين الأعمدة تلامس
   الحافة العليا وخطوطها مقصوصة، والسطر القانوني ملتصقًا بالأسفل —
   العطب نفسه الذي أصاب أقسام الرئيسية.

   الأعلى أوسع من الأسفل: أعلى التذييل حدٌّ يفصله عن المحتوى فوقه
   ويحتاج فسحة تُعلنه، وأسفله نهاية الصفحة فلا شيء بعده يزاحمه. */
.mc-footer {
  padding-block-start: var(--wp--preset--spacing--90);
  padding-block-end: var(--wp--preset--spacing--70);
}

/* على الجوال يعلو شريط الإجراء الثابت آخر سطر في التذييل، فيُزاد الأسفل
   بقدر ارتفاعه. القاعدة بعد الأساس لا قبله: لو سبقته لألغاها الأساس
   وعاد الشريط يغطّي السطر القانوني. */
@media (max-width: 782px) {
  .mc-footer { padding-block-end: 72px; }
}

/* التذييل داكن: لون الرابط الأساسي عليه تباينه ١٫٣:١ — غير مقروء.
   الروابط بلون brand-100 الأهدأ (١١٫٩:١) لا paper-50: هذا هو الفرق بين
   وزن العنوان (paper-50 الأشدّ سطوعًا) ووزن الرابط تحته — التدرّج نفسه
   الذي يميّز التسمية عن العنوان في .mc-eyebrow. التمرير والتركيز يبرزان
   الرابط بالسطوع الكامل تحته خط، لا العكس. */
.mc-footer a { color: var(--wp--preset--color--brand-100); text-decoration: none; }
.mc-footer a:hover,
.mc-footer a:focus-visible {
  color: var(--wp--preset--color--paper-50);
  text-decoration: underline;
}

.mc-langs { display: flex; gap: 12px; list-style: none; padding: 0; margin: 0; font-size: var(--wp--preset--font-size--small); }
.mc-langs a { text-decoration: none; }
.mc-langs .is-current a { font-weight: 700; text-decoration: underline; }

.mc-footer__grid {
  margin-bottom: var(--wp--preset--spacing--80);
  align-items: start;
}

/* منطقة الهوية أعرض تنفّسًا عن أعمدة الروابط الثلاثة: هذه المسافة هي ما
   يفصل «من نحن» عن «ابحث هنا» بصريًا، لا مجرّد فجوة أعمدة عادية.
   margin-inline-end لا padding: يبقي عرض ٣٠٪ لمحتوى الهوية كاملًا،
   والمسافة الإضافية خارجه. على العرض المضغوط (≤١٠٢٤) الشبكة الجديدة
   تتكفّل بالمسافة فتُلغى هنا كي لا تتضاعف. */
@media (min-width: 1025px) {
  .mc-footer__grid > .wp-block-column:first-child {
    margin-inline-end: var(--wp--preset--spacing--70);
  }
}

/* عنوان عمود بوزنه الخاص: أكبر من الروابط تحته وأشدّ بياضًا (paper-50
   الأسطع لا brand-100)، وخيط تركوازي قصير تحته — توقيع .mc-eyebrow نفسه
   المستعمل في رأس كل صفحة، فيقرأ التذييل امتدادًا للموقع لا ملحقًا عنه.
   تركوازي في خيط لا نص، فالقاعدة الملزمة (بند ١) لا تُمسّ. */
.mc-footer__heading {
  margin: 0 0 var(--wp--preset--spacing--40);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--wp--preset--color--brand-500);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--paper-50);
}

.mc-footer .wp-block-post-title,
.mc-footer .wp-block-post-title a { margin: 0 0 var(--wp--preset--spacing--30); font-weight: 400; }

/* روابط المريض فقرات مباشرة داخل عمودها (لا مُتشعّبة داخل .mc-footer__identity
   كفقرات بطاقة الطوارئ) فالمحدِّد وريث مباشر يخصّها وحدها بلا مساس ببطاقة
   الطوارئ التي تحتاج إيقاعها الخاص. نفس الإيقاع الرأسي المستعمل لروابط
   الفروع والأقسام أعلاه — عمود رابع لا يبدو أسلوبًا مختلفًا. */
.mc-footer__grid > .wp-block-column > p { margin: 0 0 var(--wp--preset--spacing--30); }

.mc-footer__identity { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); }

/* سطر صادق واحد لا فقرة تسويقية: brand-100 على الكحلي ١١٫٩:١، آمن ومهدّأ
   عن paper-50 الأشدّ سطوعًا حول العنوان. */
.mc-footer__tagline {
  margin: 0;
  max-width: 34ch;
  color: var(--wp--preset--color--brand-100);
}

/* البطاقة الفاتحة نفسها (.mc-emergency) من home.css، فهي محمَّلة في كل
   صفحة أصلًا. لا لون أحمر فوق الكحلي — العقد يمنعه صراحة. مسافة إضافية
   فوقها تفصلها عن السطر الذي قبلها: هي بطاقة فعل قائمة بذاتها لا استمرارًا
   لفقرة الوصف. */
.mc-footer__emergency { max-width: 320px; margin-top: var(--wp--preset--spacing--20); }

/* «.mc-footer a» أعلاه أعلى تخصيصًا من «.mc-emergency__phone» (عنصر+صنف
   يتغلّب على صنف واحد)، فكان يمحو الأحمر ويكتب رقم الطوارئ بلون البطاقة
   الفاتحة نفسه فيختفي. البطاقة الفاتحة تحمل ألوانها الخاصة دومًا بصرف
   النظر عن كونها داخل التذييل الداكن أو داخل الشريط الختامي. */
.mc-footer .mc-emergency a,
.mc-footer .mc-emergency a:hover { color: var(--wp--preset--color--alert-600); }

/* ===== الشبكة على العرض المضغوط: عمودان لا عمود واحد ===== */

/* ٩٠٠ بكسل (عرض اللوح) أعرض الأعمدة الأربعة معًا حتى تلاصقت أسماء الفروع
   الطويلة بحوافّها. القالب الافتراضي في ووردبريس يقفز من أربعة أعمدة إلى
   عمود واحد مباشرة عند ٧٨٢، فتضيع كل مساحة اللوح على قائمة طويلة رأسية.
   شبكة CSS بعمودين تتجاهل flex-basis الموروث من المحرِّر (لا معنى له في
   شبكة) وتُنتج توزيعًا ٢×٢ طبيعيًا: الهوية والفروع أعلى، الأقسام والمريض
   أسفل — كل عمود بعرض مريح دون العودة لقائمة واحدة طويلة. */
/* التخصيص «.mc-footer .mc-footer__grid» (صنفان) لا واحدًا: طبقة تخطيط
   ووردبريس تضيف .wp-block-columns.is-layout-flex (صنفان أيضًا) فتُلغي
   display:flex الموروث بتعادل التخصيص لصنف واحد فقط. */
@media (max-width: 1024px) {
  .mc-footer .mc-footer__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
  }
}

/* الجوّال وحده يعود لعمود واحد: عرضه لا يحتمل عمودين بلا ازدحام */
@media (max-width: 480px) {
  .mc-footer .mc-footer__grid { grid-template-columns: 1fr; }
}

/* ===== الشريط السفلي ===== */

.mc-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  padding-top: var(--wp--preset--spacing--60);
  border-top: 1px solid var(--wp--preset--color--brand-800);
  font-size: var(--wp--preset--font-size--label);
  color: var(--wp--preset--color--brand-100);
}

.mc-footer__bottom p { margin: 0; }

.mc-footer__copyright { flex: 1 1 auto; }

.mc-footer__bottom-links { flex: none; }

/* سطر مسؤولية طبية لا زينة: عرضه الكامل تحت الآخرَين ليُقرأ وحده، وبمسافة
   واضحة فوقه فلا يُقرأ استمرارًا لسطر حقوق النشر. paper-50 الأسطع لا
   brand-100 المحيط به — هذا أهمّ سطر في الشريط السفلي فوزنه البصري يقوله،
   بلا لون تحذيري (alert-600 على الكحلي ٢٫٧:١ ممنوع صراحة). */
.mc-footer__disclaimer {
  flex-basis: 100%;
  margin-top: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  color: var(--wp--preset--color--paper-50);
}

@media (max-width: 600px) {
  .mc-footer__bottom { flex-direction: column; align-items: flex-start; }
}