/* ===== وسوم الحالات على بطاقة القسم ===== */

.mc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--wp--preset--spacing--40) 0 0;
  padding: 0;
  list-style: none;
}

.mc-tag {
  font-size: var(--wp--preset--font-size--label);
  line-height: var(--mc-leading-meta);
  padding: 3px 10px;
  border: 1px solid var(--wp--preset--color--line-200);
  border-radius: 999px;
  color: var(--wp--preset--color--ink-500);
}

/* ===== حركة التمرير والتركيز على بطاقة القسم ===== */

/* انزياح خفيف وحدّ تركوازي بدل الرمادي — على transform وborder-color فقط
   فلا تُحرَّك أبعاد الصفحة. تركوازي حدًّا لا نصًّا فالقاعدة الملزمة سليمة.
   البطاقة نفسها ليست عنصرًا قابلًا للتركيز (رابط العنوان بداخلها هو)،
   فـ focus-within يمنح الكيبورد نفس الأثر الذي يمنحه التمرير للفأرة —
   لا أقل منه. تخضع تلقائيًا لقاعدة prefers-reduced-motion العامة في
   tokens.css («*» تشمل كل عنصر). */
[data-mc="department-card"] {
  transition: transform 180ms ease, border-color 180ms ease;
}

[data-mc="department-card"]:hover,
[data-mc="department-card"]:focus-within {
  transform: translateY(-3px);
  border-color: var(--wp--preset--color--brand-500);
}

/* ===== صفحة الفرع المفردة ===== */

.mc-branch {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--wp--preset--spacing--70);
  margin-block: var(--wp--preset--spacing--60);
}

.mc-branch__contact { display: grid; gap: 10px; align-content: start; }

/* حالة اليوم أول ما يُقرأ في عمود الاتصال: هذا جواب سؤال الزائر الأول
   («مفتوح الآن؟») قبل العنوان والهاتف. */
.mc-branch__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--wp--preset--color--brand-50);
  font-weight: 600;
}
.mc-branch__status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
/* brand-800 على brand-50 تباينها ٥٫٧٥:١ — brand-700 هنا كان يفشل ٤٫٥:١ */
.mc-branch__status.is-open { color: var(--wp--preset--color--brand-800); }
.mc-branch__status.is-shut { color: var(--wp--preset--color--ink-500); }

.mc-branch__hours { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--small); }
.mc-branch__hours caption { text-align: start; font-weight: 700; padding-bottom: 8px; }
.mc-branch__hours th,
.mc-branch__hours td { padding: 8px 0; border-bottom: var(--mc-border); text-align: start; font-weight: 400; }

/* اليوم الحالي على brand-50: «ساعات الأسبوع كاملة» موجودة، لكن العين
   تحتاج أن تجد يومها بلا عدّ. */
.mc-branch__hours tr.is-today { background: var(--wp--preset--color--brand-50); }
.mc-branch__hours tr.is-today th,
.mc-branch__hours tr.is-today td { font-weight: 600; }
.mc-branch__today-tag {
  margin-inline-start: 6px;
  font-size: var(--wp--preset--font-size--label);
  font-weight: 400;
  color: var(--wp--preset--color--brand-800);
}

.mc-branch__departments { grid-column: 1 / -1; }
.mc-branch__departments ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; padding: 0; list-style: none; }

@media (max-width: 782px) {
  .mc-branch { grid-template-columns: 1fr; }
}

/* ===== أرشيف الفروع: صفوف مقارنة لا شبكة بطاقات ===== */

.mc-branch-compare { display: grid; gap: var(--wp--preset--spacing--40); list-style: none; padding: 0; margin: var(--wp--preset--spacing--60) 0 0; }

/* صفّ مقارنة بلا صنف mc-card (تخطيطه flex أفقي لا شبكة البطاقة العادية)
   فيستورد leading يدويًا — نفس الأصل الموروث في .mc-card. */
.mc-branch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
  padding: var(--wp--preset--spacing--50);
  background: var(--wp--preset--color--white);
  border: var(--mc-border);
  border-radius: var(--mc-radius-sm);
  line-height: var(--mc-leading-body);
  transition: transform 180ms ease, border-color 180ms ease;
}

/* الصفّ نفسه ليس رابطًا، والرابط الفعلي (عنوان الفرع، رقم الهاتف) بداخله
   — focus-within يساوي بين التمرير بالفأرة والتنقّل بالكيبورد على الصفّ
   كلّه لا على الرابط وحده فقط. */
.mc-branch-row:hover,
.mc-branch-row:focus-within {
  transform: translateY(-3px);
  border-color: var(--wp--preset--color--brand-500);
}

/* نفس عنوان wp:post-title بـ fontSize:"h2" الموجود في
   templates/archive-mc_branch.html — وصنفه has-h-2-font-size محمل
   بـ !important من وردبريس، فيلزم !important مقابله (انظر التعليق نفسه
   في home.css على بطاقة القسم). */
.mc-branch-row h2 { flex: 1 1 220px; margin: 0; font-size: var(--mc-card-title-size) !important; line-height: var(--mc-card-title-line); }
.mc-branch-row h2 a { text-decoration: none; color: var(--wp--preset--color--brand-900); }
.mc-branch-row h2 a:hover { text-decoration: underline; }

/* كل حقيقة موسومة بأيقونتها لا بعمود عنوان: نص «مفتوح الآن» و«فرع واحد»
   يشرح نفسه، فصفّ عناوين منفصل زيادة لا تضيف معنى. */
.mc-branch-row__state,
.mc-branch-row__hours,
.mc-branch-row__city,
.mc-branch-row__depts {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
  line-height: var(--mc-leading-meta);
  white-space: nowrap;
}

.mc-branch-row__state { flex: 0 0 auto; font-weight: 600; }
.mc-branch-row__state::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.mc-branch-row__state.is-open { color: var(--wp--preset--color--brand-800); }
.mc-branch-row__state.is-shut { color: var(--wp--preset--color--ink-500); }

.mc-branch-row__hours,
.mc-branch-row__city,
.mc-branch-row__depts { color: var(--wp--preset--color--ink-500); }

.mc-branch-row__phone {
  margin-inline-start: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: var(--mc-leading-meta);
  color: var(--wp--preset--color--brand-700);
  text-decoration: none;
}
.mc-branch-row__phone:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .mc-branch-row__phone { margin-inline-start: 0; }
}

/* ===== صفحة القسم المفردة: عمودان — محتوى وشريط فعل لاصق ===== */

/* عمود ١فر للمحتوى وعمود ٣٢٠ للشريط، مطابق لنمط .mc-branch القائم أصلًا
   في هذا الملف: المحتوى أولًا في شجرة المستند فيقع على بداية السطر
   (يمين الصفحة في الاتجاه العربي) تلقائيًا، والشريط في نهايته — بلا
   حاجة لـ order يكسر ترتيب القراءة ولوحة المفاتيح. */
.mc-department__layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  align-items: stretch;
  gap: var(--wp--preset--spacing--80);
  margin-block: var(--wp--preset--spacing--60);
}

/* spacing-80 لا spacing-90: عقد البنية يعطي ٩٦ بكسل للمسافة بين
   «الأقسام الكبرى» — أي بين أقسام الصفحة الرئيسية التي يفصل بين كل
   اثنين منها لون خلفية. وهذه أقسام فرعية داخل صفحة واحدة على خلفية
   واحدة، ومحتوى بعضها ثلاثة أسطر: بـ٩٦ صار بين آخر بطاقة طبيب وعنوان
   الأسئلة فراغ يقارب مئتي بكسل يقرأه الزائر انتهاءً للصفحة. */
.mc-department__section + .mc-department__section { margin-top: var(--wp--preset--spacing--80); }

.mc-department__heading {
  margin: 0 0 var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--h-2);
  color: var(--wp--preset--color--brand-900);
}

/* leading موروث من هنا لا مكرَّرًا على كل نص — نفس قرار .mc-card في
   home.css (راجع تعليقه). العناوين تستثني نفسها بقاعدة العنصر h-2
   الأعمّ في theme.json (١٫٣٥) فتبقى كما هي. */
.mc-department__content,
.mc-department__aside-inner { line-height: var(--mc-leading-body); }

/* الحالات: سحابة رقائق تُمسح دفعة واحدة، لا نقاط تُقرأ سطرًا سطرًا —
   الحالة اسم لا فعل، فشكلها الطبيعي وسم لا بند قائمة. */
.mc-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.mc-chip {
  padding: 8px 16px;
  border: 1px solid var(--wp--preset--color--line-200);
  border-radius: 999px;
  background: var(--wp--preset--color--brand-50);
  color: var(--wp--preset--color--ink-900);
  font-size: var(--wp--preset--font-size--small);
  line-height: var(--mc-leading-meta);
}

/* الخدمات: قائمة إجراءات بعلامة مربّعة صغيرة لا رقاقة — الفرق عن
   الحالات فوقها مقصود: الحالة اسم يُمسح، والخدمة فعل يُقرأ سطرًا كاملًا.
   عمودان على الشاشات الأوسع فلا يطول عمود واحد بلا داعٍ حين تكثر
   الخدمات. */
.mc-service-list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.mc-service-list li {
  position: relative;
  padding-inline-start: 20px;
}

.mc-service-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--wp--preset--color--brand-500);
}

@media (min-width: 640px) {
  .mc-service-list { grid-template-columns: repeat(2, 1fr); column-gap: var(--wp--preset--spacing--50); }
}

/* أطباء القسم داخل عمود المحتوى أضيق من الأرشيف أو الرئيسية، وبعض
   الأقسام طبيب واحد لا ستة: أعمدة بعرض ثابت (auto-fill) بدل الأعمدة
   الثلاثة الجامدة أدناه — بطاقة واحدة تبقى بحجمها الطبيعي بدل أن تُمطّ
   لتملأ عمودًا كاملًا، فتقرأ «قسم بطبيب واحد» لا «شبكة ناقصة». نطاقها
   هنا داخل .mc-department وحدها فلا تتأثر بها شبكة أرشيف الأطباء. */
/* auto-fill بسقف ٢٤٠ كان يحلّ مشكلة الطبيب الواحد ويخلق اثنتين ظهرتا
   حالما امتلأ القسم بأربعة أطباء: ثلاثة في صف ورابعٌ يتيم تحتهم، والبطاقة
   على الجوال محبوسة عند ٢٤٠ بكسل داخل عمود ٣٤٢ فتترك فراغًا يميل بها.

   أعمدة صريحة تحلّ الثلاثة معًا: عمود يملأ عرضه على الجوال، وعمودان ثم
   ثلاثة بحسب السعة. والصف الأخير يبقى ممتلئًا أو شبه ممتلئ مهما كان
   العدد، والبطاقة الواحدة تُقيَّد بعرضها لا بالشبكة. */
.mc-department .mc-doctors__grid {
  grid-template-columns: 1fr;
}

@media (min-width: 520px) {
  .mc-department .mc-doctors__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .mc-department .mc-doctors__grid { grid-template-columns: repeat(3, 1fr); }
}

/* القسم بطبيب واحد: البطاقة تُقيَّد بعرضها الطبيعي بدل أن تُمطّ عبر
   العمود كله، فتُقرأ «طبيب واحد» لا «شبكة ناقصة». */
.mc-department .mc-doctors__grid > :only-child { max-width: 280px; }

/* الأسئلة الشائعة هنا تستعمل بلاطة الرئيسية (.mc-faq) بحروفها — نفس
   الضمان: <details> بلا سطر جافاسكربت واحد. الهامش العلوي المعرَّف هناك
   لصفحة كاملة العرض؛ هنا العنوان فوقه من مسافة الأقسام نفسها. */
.mc-department .mc-faq__list { margin-top: var(--wp--preset--spacing--30); }

/* السؤال أصغر من عنوان قسمه.

   بلاطة الرئيسية تجعل السؤال ٣٠ بكسل لأنها هناك قسم كامل والسؤال هو
   محتواه. هنا الأسئلة قسم فرعي واحد من أربعة، فبقاء السؤال على ٣٠
   يجعله بحجم «أسئلة شائعة» فوقه تمامًا — العنوان وما يحتويه بوزن واحد،
   وهو قلب الهرم نفسه الذي عولج في البطاقات. */
.mc-department .mc-faq summary {
  font-size: var(--mc-card-title-size);
  line-height: var(--mc-card-title-line);
}

/* وحشو القسم الكامل يُلغى هنا للسبب نفسه.

   home.css يعطي .mc-faq حشو قسم صفحة (٩٦ بكسل رأسيًا) لأنه هناك شريط
   مستقل بعرض الصفحة. وإعادة استعمال الصنف هنا ورّثت الحشو معه، فأضاف
   ٩٦ بكسل فوق عنوان الأسئلة وحده — وهو ما جعل الفراغ بين آخر طبيب
   وأول سؤال يقارب مئتي بكسل رغم ضبط المسافة بين الأقسام.

   الدرس أن أصناف أقسام الرئيسية ليست محليّة: ما يُعاد استعماله يرث
   قواعدها كلها، لا شكلها وحده. */
.mc-department .mc-faq { padding-block: 0; }

/* ===== شريط الفعل الجانبي: الحجز وحالة الفروع ===== */

/* الصندوق الخارجي (عمود الشبكة) لا يلتصق هو نفسه: بامتداده الكامل
   بفضل align-items:stretch أعلاه يصير أطول من محتواه، فيملك الابن
   اللاصق مساحة يتحرك ضمنها أثناء التمرير. لو التصق هذا العنصر مباشرة
   لساوى ارتفاعه ارتفاع محتواه فلم يتحرك — علّة الالتصاق المعروفة حين
   ينكمش الأب على ارتفاع ابنه. */
.mc-department__aside-inner {
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 96px);
  display: grid;
  gap: var(--wp--preset--spacing--60);
  padding: var(--wp--preset--spacing--50);
  background: var(--wp--preset--color--white);
  border: var(--mc-border);
  border-radius: var(--mc-radius-md);
}

.mc-department__cta { display: grid; gap: 10px; }
.mc-department__cta .mc-btn--solid { text-align: center; }

/* الصدق التشغيلي: الطلب ليس حجزًا مؤكدًا. حدّ بادئ للملاحظة — قاعدة
   رأس الصفحة الموحّد نفسها («حدّ بادئ للملاحظات»). */
.mc-department__disclaimer {
  margin: 0;
  padding-inline-start: 12px;
  border-inline-start: 3px solid var(--wp--preset--color--line-200);
  font-size: var(--wp--preset--font-size--label);
  line-height: var(--mc-leading-meta);
  color: var(--wp--preset--color--ink-500);
}

.mc-department__branches { padding-top: var(--wp--preset--spacing--50); border-top: var(--mc-border); }

.mc-dept-branch-list { display: grid; gap: var(--wp--preset--spacing--40); padding: 0; margin: 0; list-style: none; }

.mc-dept-branch { display: grid; gap: 4px; padding-bottom: var(--wp--preset--spacing--40); border-bottom: var(--mc-border); }
.mc-dept-branch:last-child { padding-bottom: 0; border-bottom: 0; }

.mc-dept-branch__name { font-weight: 600; text-decoration: none; color: var(--wp--preset--color--ink-900); }
.mc-dept-branch__name:hover { text-decoration: underline; }

.mc-dept-branch__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600;
}
.mc-dept-branch__state::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
/* brand-800 على الأبيض هنا لا على brand-50، لكنه اللون نفسه المعتمد
   لحالة «مفتوح» في بقية الموقع (BranchCards وBranchMeta) فلا يتفرّع
   لونًا ثالثًا لنفس المعنى. */
.mc-dept-branch__state.is-open { color: var(--wp--preset--color--brand-800); }
.mc-dept-branch__state.is-shut { color: var(--wp--preset--color--ink-500); }

.mc-dept-branch__meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.mc-dept-branch__hours,
.mc-dept-branch__city {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--wp--preset--font-size--label);
  color: var(--wp--preset--color--ink-500);
}

/* دون ٩٢٠ بكسل لا تتّسع الشبكة لعمود ٣٢٠ بلا ضغط عمود المحتوى تحت قياس
   مقروء — الشريط ينزل تحت المحتوى في شجرة المستند نفسها (لا إعادة ترتيب
   بصري)، فينتهي القارئ به تمامًا كما تنتهي كل صفحة قائمة بشريط دعوة.
   الالتصاق يُلغى معه: لا معنى لعنصر لاصق داخل عمود واحد ممتلئ العرض. */
@media (max-width: 920px) {
  .mc-department__layout { grid-template-columns: 1fr; }
  .mc-department__aside-inner { position: static; top: auto; }
}

/* أعمدة محسوبة لا auto-fill: بحدّ ٢٠٠ بكسل يعطي المكتب خمسة أعمدة،
   فستة أطباء تصير خمسة وواحدًا يتيمًا في سطر بأربع فجوات. الوجوه
   أيضًا تصغر حتى تفقد ملامحها، والصورة هنا هي المعلومة.

   العدد الثابت في كل مقاس يجعل الصفّ الأخير ممتلئًا أو شبه ممتلئ مهما
   كان عدد الأطباء زوجيًا أو مقسومًا على ثلاثة. */
.mc-doctors__grid {
  display: grid;
  gap: var(--wp--preset--spacing--50);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .mc-doctors__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .mc-doctors__grid { grid-template-columns: repeat(3, 1fr); }
}

.mc-doctor-card {
  display: grid;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  transition: transform 180ms ease, border-color 180ms ease;
}

/* البطاقة نفسها رابط، فالتمرير والتركيز بالكيبورد يقعان على العنصر نفسه
   مباشرة — لا حاجة لـ focus-within هنا. */
.mc-doctor-card:hover,
.mc-doctor-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--wp--preset--color--brand-500);
}
.mc-doctor-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--mc-radius-md); }
.mc-doctor-card .mc-avatar { width: 100%; aspect-ratio: 1; border-radius: var(--mc-radius-md); }
/* اسم الطبيب عنوان بطاقة قياسي (--mc-card-title-size) لا h-2 كامل: كان
   بلا حجم مخصَّص فيرث ١٧ب مباشرة، لكن مضاعف السطر ١٫٩ العام يبقيه ممطوطًا
   عبر الأسطر الثلاثة (اسم + رتبة + عدد الفروع). */
.mc-doctor-card__name { font-weight: 700; font-size: var(--mc-card-title-size); line-height: var(--mc-card-title-line); }
.mc-doctor-card__title { font-size: var(--wp--preset--font-size--small); line-height: var(--mc-leading-meta); color: var(--wp--preset--color--ink-500); }
.mc-doctor-card__meta { font-size: var(--wp--preset--font-size--label); line-height: var(--mc-leading-meta); color: var(--wp--preset--color--ink-500); }

/* ===== صفحة الطبيب المفردة ===== */

.mc-doctor__top {
  display: flex;
  gap: var(--wp--preset--spacing--50);
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: var(--wp--preset--spacing--60);
}

.mc-doctor__photo { width: 160px; height: 160px; border-radius: var(--mc-radius-md); border: var(--mc-border); flex: none; }
img.mc-doctor__photo { object-fit: cover; }

/* الحرفان الأولان من الاسم حين لا صورة: brand-800 على brand-50 تباينها
   ٥٫٧٥:١ — brand-700 هنا دون حدّ ٤٫٥:١. */
.mc-avatar {
  display: inline-grid;
  place-items: center;
  background: var(--wp--preset--color--brand-50);
  color: var(--wp--preset--color--brand-800);
  font-size: var(--wp--preset--font-size--h-1);
  font-weight: 700;
}

.mc-doctor__intro { display: grid; gap: var(--wp--preset--spacing--40); align-content: start; }
.mc-doctor__role { margin: 0; font-weight: 500; color: var(--wp--preset--color--ink-500); }

/* بيانات الاعتماد جدول يُمسح بالنظر، لا فقرات تُقرأ */
.mc-fact-table { width: 100%; max-width: 640px; border-collapse: collapse; }
.mc-fact-table th,
.mc-fact-table td { padding: 10px 0; border-bottom: var(--mc-border); text-align: start; font-weight: 400; vertical-align: top; }
.mc-fact-table th { width: 34%; color: var(--wp--preset--color--ink-500); font-weight: 500; }
.mc-fact-table td { font-weight: 500; color: var(--wp--preset--color--ink-900); }
.mc-fact-table td a { color: var(--wp--preset--color--brand-700); }

.mc-search--archive { max-width: 720px; margin-bottom: var(--wp--preset--spacing--60); }

/* ===== شريط دعوة ختام صفحات الأرشيف ===== */

.mc-page-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--50);
  margin-top: var(--wp--preset--spacing--90);
  padding: var(--wp--preset--spacing--60);
  background: var(--wp--preset--color--brand-50);
  border: var(--mc-border);
  border-radius: var(--mc-radius-md);
  line-height: var(--mc-leading-body);
}
.mc-page-cta__text { display: grid; gap: 6px; max-width: 60ch; }
.mc-page-cta__text h2 { margin: 0; font-size: var(--wp--preset--font-size--h-2); color: var(--wp--preset--color--brand-900); }
.mc-page-cta__text p { margin: 0; color: var(--wp--preset--color--ink-500); }

.mc-empty {
  padding: var(--wp--preset--spacing--60);
  background: var(--wp--preset--color--brand-50);
  border-radius: var(--mc-radius-md);
}