@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

/* This file is part of Indico.
   Copyright (C) 2002 - 2021 CERN
   Indico is free software; MIT License.
   ─────────────────────────────────────────────────────────────
   الملف الكامل لموقع منصة دراسة الحالة (Indico 3.2)
   = القاعدة الأصلية (تخطيط RTL) + التحسينات المخصّصة
   يُرفع كاملًا في: إدارة الفعالية ← Layout ← Custom CSS
   ⚠ هذا الملف يستبدل الملف المرفوع بالكامل — لا تحذف الجزء
     الأول (القاعدة) لأنه مسؤول عن مكان القائمة واتجاه الصفحة.
   ───────────────────────────────────────────────────────────── */

/* ════════════ الجزء الأول: القاعدة الأصلية (RTL) ════════════ */

/* Wrapper */
.conf {
  direction: rtl;
  width: 100%;
  border: none;
  margin: 0;
}

/* Header */
.confheader {
  direction: rtl;
  background: #16606B;
}

.confheader .event-label {
  margin-left: 1em !important;
  text-transform: uppercase;
}

.confLogoBox {
  direction: rtl;
  height: 100%;
  float: right;
  padding-right: 10px;
  background: transparent none repeat scroll 0 0;
}

.confTitleBox {
  position: relative;
  color: #ffffff;
  height: 170px !important;
  min-height: 0 !important;
  border: none;
  border-radius: 1px;
  background-color: #16606B !important;
  background-image: url(https://events.kfupm.edu.sa/event/290/attachments/602/2891/Header.png) !important;
  background-repeat: no-repeat !important;
  /* مقاس رسم ثابت للصورة (1100×267) = حجم شعار ثابت،
     والصندوق 170px يقصّ الزخارف أعلى/أسفل ويُبقي الشعار كاملًا */
  background-size: auto 267px !important;
  background-position: right center !important;
}
@media (min-width: 1100px) {
  .confTitleBox {
    background-position: center center !important;
  }
}

/* شريط البحث/التاريخ أكثر إحكامًا */
.confSubTitleBox {
  padding: 0.35rem 0 !important;
}

/* إخفاء نص العنوان — الشعار مدمج في صورة الخلفية */
.confTitle,
.confTitle h1,
.conference-title-link {
  display: none !important;
}

.confSubTitleBox {
  direction: rtl;
  background: #f5faff;
  border-bottom: 1px solid #d5e4f1;
  border-top: 1px solid #d5e4f1;
  padding: 0.5rem 0;
}

.confSubTitleBox .toolbar {
  margin: 0;
}

.confSubTitleContent {
  direction: rtl;
  width: 950px;
  margin: 0 auto;
  font-size: 11pt;
  color: #24425a;
  text-align: right;
}

.confSubTitle a {
  direction: rtl;
  font-size: 11pt;
}

.datePlace {
  direction: rtl;
  font-size: 12pt;
}

div.datePlace > div.timezone {
  direction: rtl;
  font-size: 10px;
  color: #777;
}

/* Main content */
#confSectionsBox {
  direction: rtl;
  width: 950px;
  margin: 0 auto;
  margin-top: 30px;
  text-align: right;
}

/* Menu container */
#outer {
  direction: rtl;
  width: 100%;
  position: relative;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
}

#outer > li.menuConfTitle {
  direction: rtl;
  display: block;
}

#outer li a {
  direction: rtl;
  display: block;
  text-decoration: none;
}

#outer li a.no-link,
#outer li a.no-link:hover {
  color: #555;
  cursor: default;
}

/* القائمة على اليمين — أساس تخطيط RTL */
.conf_leftMenu {
  float: right;
  width: 200px;
  background: transparent none repeat scroll 0 0;
}

.menuConfTitle {
  text-align: right;
}

li.menuConfMiddleCell {
  font-weight: normal;
}

.sublink {
  color: #777;
}

.menuConfBottomCell {
  border-bottom: 0;
  border-top: 0;
  background: transparent none repeat scroll 0 0;
  display: none;
}

.inner {
  top: 0;
  position: relative;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin: 0 0 5px 0;
  padding: 0;
  width: 100%;
}

.conf_leftMenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li:hover ul,
li.over ul {
  display: block;
}

/* المحتوى على يسار القائمة — أساس تخطيط RTL */
.confBodyBox {
  margin-left: 0;
  margin-right: 230px;
}

.mainContent {
  width: 100%;
  direction: rtl;
  text-align: right;
}

.col2 {
  width: 100%;
  float: right;
}

/* Misc */
.conferenceDetails .description {
  color: #777;
  font-size: 1.2em;
  margin: 1em 0 2em 0;
  direction: rtl;
  text-align: right;
}

table.conferenceDetails td {
  font-size: 11pt;
  color: #444;
  direction: rtl;
  text-align: right;
}

table.conferenceDetails .displayField {
  text-align: right;
  font-weight: bold;
  font-size: 10pt;
  padding-right: 20px;
  color: #444;
}

.italic {
  font-style: italic;
}

.menuConfTopCell {
  display: none;
}

pre {
  margin: 0;
  color: #444;
  font-size: 11pt;
  direction: rtl;
  text-align: right;
}

.simpleTextAnnouncement {
  background: #f5faff;
  border-top: 1px solid #c2d6e7;
  padding: 8px 0;
  font-weight: bold;
  font-size: 10pt;
  text-align: center;
  color: #0f283d;
}

ul.chair_list {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.conf_leftMenu .spacer {
  height: 1em;
}

.support_box {
  margin-top: 10px !important;
  width: 100%;
  color: #aaa;
  background: #f6f6f6;
  border: 1px solid #ccc;
}

.support_box > h3 {
  color: #f3f3f3;
  background: #16606B;
  margin: 0 0 5px 0;
  padding: 5px;
  font-weight: normal;
}

.support_box > ul > li {
  white-space: nowrap;
  margin: 0 5px 5px 10px;
  vertical-align: middle;
  text-overflow: ellipsis;
  overflow: hidden;
}

.support_box > ul > li .icon {
  color: #777;
  font-size: 1.5em;
  vertical-align: middle;
}

.support_box > ul > li > a {
  margin-left: 5px;
  line-height: 1.5em;
  vertical-align: middle;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ════════════ الجزء الثاني: التحسينات المخصّصة ════════════ */

/* 1) الخط العربي الموحّد: الاستيراد في أول سطر بالملف (شرط @import) */
body,
.conf,
.confBodyBox,
.arc-home, .arc-home *,
.arc-about, .arc-about *,
.arc-case,  .arc-case * {
  font-family: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

/* 2) لمسات تفاعل على بطاقات الصفحات */
.arc-home .arc-card,
.arc-about .arc-goal,
.arc-case .arc-benefit {
  transition: transform .2s ease, box-shadow .2s ease;
}
.arc-home .arc-card:hover,
.arc-about .arc-goal:hover,
.arc-case .arc-benefit:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(14,90,76,.14) !important;
}
.arc-about a[style*="border-radius: 50%"]:hover {
  background-color: #C9992E !important;
  color: #ffffff !important;
}

/* 3) القائمة الجانبية: بطاقة بيضاء بهوية الموقع */
#outer {
  background: #ffffff !important;
  border: 1px solid #E3E3E3 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(14,90,76,.07) !important;
}
#outer:before {
  content: "";
  display: block;
  height: 4px;
  background: #0E5A4C;
}

/* كل الروابط: قاعدة عامة (أولوية أدنى عمدًا — بلا !important
   حتى تتمكن قواعد الرئيسي/الفرعي الأعلى تحديدًا من تجاوزها) */
#outer li a {
  font-size: 14px;
  color: #2F4A44;
  padding: 12px 16px;
  border-bottom: 1px solid #F0F0F0;
  text-align: right;
}

/* ── فراغ فاصل قبل كل عنصر رئيسي: يقسّم القائمة إلى مجموعات ──
   ينجح مع البنية المتداخلة والمسطّحة على السواء */
#outer li.menuConfTitle {
  margin-top: 10px;
}
#outer li.menuConfTitle:first-child {
  margin-top: 0;
}
/* حارس: لا فراغ إن كان العنصر يحمل رابطًا فرعيًا (بنية غير متوقعة) */
#outer li.menuConfTitle:has(> a.sublink) {
  margin-top: 0;
}

/* ── العناصر الرئيسية: ترويسة قسم بشريط ملوّن خفيف ── */
#outer .menuConfTitle a,
#outer li.menuConfTitle > a {
  color: #0B4F43 !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  padding: 13px 16px !important;
  background: #F0F6F3 !important;
  border-bottom: 1px solid #E4EDE9 !important;
}

/* ── العناصر الفرعية: بيضاء + مسافة بادئة يمنى واضحة (فراغات) ── */
#outer li a.sublink,
#outer li.menuConfMiddleCell a,
#outer ul.inner li a,
#outer li ul.inner li a {
  color: #6F827C !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  background: #ffffff !important;
  padding: 9px 36px 9px 14px !important;
  border-bottom: 1px solid #F1F3F2 !important;
}

/* تحويم — بصيَغ أولوية أعلى من قواعد الفرعية */
#outer li a:not(.no-link):hover,
#outer li ul.inner li a:not(.no-link):hover,
#outer li.menuConfMiddleCell a:not(.no-link):hover {
  background: #EDF5F2 !important;
  color: #0E5A4C !important;
}

/* العنصر النشط: شريط ذهبي على الحافة اليمنى
   (صيَغ متعددة لتغطية أي بنية، بأولوية تتفوق على قواعد الفرعية) */
#outer .menuConfSelected,
#outer .menuConfMiddleCellSelected,
#outer li a.menuConfSelected,
#outer li.menuConfSelected > a,
#outer li a.menuConfMiddleCellSelected,
#outer li.menuConfMiddleCellSelected a,
#outer li ul.inner li a.menuConfSelected,
#outer li ul.inner li a.menuConfMiddleCellSelected {
  background: #E3F0EB !important;
  color: #0E5A4C !important;
  font-weight: 800 !important;
  border-right: 4px solid #C9992E !important;
  border-left: none !important;
  border-top: none !important;
  border-bottom: 1px solid #F0F0F0 !important;
}

/* 4) الاستجابة للشاشات الصغيرة */
@media (max-width: 780px) {

  .arc-home .arc-col,
  .arc-home .arc-card,
  .arc-home .arc-stat,
  .arc-about div[style*="inline-block"],
  .arc-case .arc-benefit {
    width: 96% !important;
    min-width: 0 !important;
    margin: 8px 2% !important;
  }

  .arc-home .arc-hero .arc-col,
  .arc-home .arc-banner .arc-col {
    display: block !important;
    text-align: center !important;
  }

  .arc-about img[style*="float:left"],
  .arc-about img[style*="float: left"],
  .arc-case img[style*="float:left"],
  .arc-case img[style*="float: left"],
  .arc-case img[style*="float:right"],
  .arc-case img[style*="float: right"] {
    float: none !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
  }

  .arc-about span[style*="float"],
  .arc-about strong[style*="float"] {
    float: none !important;
    display: block !important;
    text-align: center !important;
    line-height: 1.8 !important;
    margin: 6px 0 !important;
  }
}