/* ============================================================
   🌐 JAIMA — Premium Q1 Journal Styling
   Version: 4.0 — May 2026
   Author: Ahmed A. Nafea
   ============================================================ */

/* ------------------------------------------------------------
   🎨 CSS Variables
   ------------------------------------------------------------ */
:root {
  --primary:        #002855;
  --primary-light:  #004080;
  --primary-pale:   #ddeaf8;
  --accent:         #0077cc;
  --accent-hover:   #005fa3;
  --gold:           #c8952a;
  --text-dark:      #001833;
  --text-body:      #1a2a3a;
  --text-muted:     #4a6080;
  --bg-page:        #eaf1f8;
  --bg-section:     #f4f8fc;
  --bg-card:        #ffffff;
  --border-card:    #c0d4e8;
  --shadow-soft:    0 2px 12px rgba(0, 40, 100, 0.09);
  --shadow-hover:   0 10px 28px rgba(0, 40, 100, 0.17);
  --radius-card:    14px;
  --transition:     0.3s ease;
  --max-width:      1280px;
}

/* ------------------------------------------------------------
   📐 Full-Width Layout — يملأ الشاشة دائماً
   ------------------------------------------------------------ */
html, body {
  width: 100%;
  max-width: 100% !important;
  overflow-x: hidden;
}

body {
  font-family: 'Georgia', 'Times New Roman', serif;
  color: var(--text-body);
  background-color: var(--bg-page);
  background-image:
    radial-gradient(ellipse at 10% 10%, rgba(0,80,160,0.05) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 90%, rgba(0,40,100,0.04) 0%, transparent 55%);
  scroll-behavior: smooth;
  line-height: 1.75;
  font-size: 16px;
}

/* الحاويات الرئيسية تمتد بالكامل */
.pkp_structure_wrapper,
.pkp_structure_page,
#pkp_content_main,
.pkp_page,
.container,
.container-fluid,
[class*="pkp_structure"] {
  max-width: var(--max-width) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  box-sizing: border-box !important;
}

/* ------------------------------------------------------------
   ✍️ Typography — Q1 Style
   ------------------------------------------------------------ */
h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--primary);
  line-height: 1.25;
  letter-spacing: -0.3px;
}

h2 {
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--primary);
  text-align: center;
  margin-top: 36px;
  margin-bottom: 16px;
  position: relative;
  padding-bottom: 12px;
  letter-spacing: 0.3px;
}

h2::after {
  content: '';
  display: block;
  width: 70px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 3px;
  margin: 10px auto 0;
}

h3 {
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  font-weight: 700;
  color: var(--primary);
}

p {
  color: var(--text-body);
  line-height: 1.8;
  font-size: 15.5px;
}

/* ------------------------------------------------------------
   🗂️ Main Content Area
   ------------------------------------------------------------ */
.pkp_structure_main,
.page,
main,
#main-content,
.pkp_page_content {
  background: var(--bg-section);
  border-radius: 16px;
  padding: 32px 36px;
  margin: 20px auto;
  box-shadow: var(--shadow-soft);
  max-width: var(--max-width);
  width: 100%;
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   🖼️ Header — Full Width Professional
   ------------------------------------------------------------ */
/* الهيدر الرئيسي — لون موحد */
.pkp_head_wrapper,
#headerNavigationContainer,
.navbar,
header,
.pkp_head_wrapper > *,
#navigationPrimary,
#navigationUser,
.pkp_navigation_primary,
.pkp_navigation_user {
  background: linear-gradient(90deg, #001e42 0%, #003366 60%, #004d99 100%) !important;
}

.pkp_head_wrapper,
#headerNavigationContainer,
.navbar,
header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 40px !important;
  height: 90px !important;
  box-shadow: 0 3px 16px rgba(0,0,0,0.25) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  flex-wrap: nowrap !important;
}

/* الشعار */
.pkp_head_wrapper .pkp_site_name,
.navbar-brand,
header .site-name,
.pkp_site_name {
  display: flex !important;
  align-items: center !important;
  order: -1 !important;
  flex-shrink: 0 !important;
}

/* صورة الشعار — كامل بدون قطع */
.pkp_head_wrapper img.pkp_site_name_logo,
.navbar-brand img,
header img[class*="logo"],
.pkp_site_name img,
a.navbar-brand img {
  height: 58px !important;
  width: auto !important;
  max-width: 120px !important;
  min-width: 58px !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  border-radius: 8px !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35)) !important;
  background: transparent !important;
  padding: 2px !important;
  flex-shrink: 0 !important;
}

@media (max-width: 768px) {
  .pkp_head_wrapper img.pkp_site_name_logo,
  .navbar-brand img,
  .pkp_site_name img {
    height: 50px !important;
    width: auto !important;
    max-width: 100px !important;
  }
}

/* قائمة التنقل */
.pkp_navigation_primary,
#navigationPrimary,
.navbar-nav,
nav.navbar ul {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 2px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* روابط القائمة */
.pkp_navigation_primary a,
#navigationPrimary a,
.navbar-nav a {
  color: #d8ecff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  font-family: 'Segoe UI', sans-serif !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  transition: background var(--transition), color var(--transition) !important;
  text-decoration: none !important;
  letter-spacing: 0.3px !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;
}

.pkp_navigation_primary a:hover,
#navigationPrimary a:hover,
.navbar-nav a:hover {
  background: rgba(255,255,255,0.16) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* ------------------------------------------------------------
   📋 Dropdown Menu
   ------------------------------------------------------------ */
.pkp_navigation_primary .pkp_dropdown,
.dropdown-menu,
.nav-item .dropdown-menu,
ul.dropdown-menu,
.pkp_nav_item ul {
  background: #ffffff !important;
  border: 1px solid #b8cfe0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0,40,100,0.16) !important;
  padding: 8px !important;
  min-width: 190px !important;
  z-index: 9999 !important;
  display: none !important;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.pkp_navigation_primary .pkp_nav_item:hover .pkp_dropdown,
.nav-item:hover .dropdown-menu,
.pkp_nav_item:focus-within ul,
.nav-item.show .dropdown-menu,
.dropdown.show .dropdown-menu {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.pkp_navigation_primary .pkp_dropdown a,
.dropdown-menu a,
.dropdown-menu li a,
.pkp_nav_item ul li a {
  color: var(--text-dark) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  font-family: 'Segoe UI', sans-serif !important;
  padding: 9px 16px !important;
  border-radius: 8px !important;
  display: block !important;
  text-shadow: none !important;
  transition: background var(--transition), color var(--transition) !important;
  text-decoration: none !important;
}

.pkp_navigation_primary .pkp_dropdown a:hover,
.dropdown-menu a:hover,
.dropdown-menu li a:hover,
.pkp_nav_item ul li a:hover {
  background: var(--primary-pale) !important;
  color: var(--primary) !important;
  opacity: 1 !important;
}

/* ------------------------------------------------------------
   📄 Article Cards — Q1 Style (صورة يسار + معلومات يمين)
   ------------------------------------------------------------ */
.obj_article_summary,
.article-summary,
.pkp_structure_main .obj_article_summary,
ul.articles li,
.issue_article {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 22px !important;
  background: #ffffff !important;
  border: 1px solid var(--border-card) !important;
  border-left: 4px solid var(--primary) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  box-shadow: var(--shadow-soft) !important;
  transition: transform var(--transition), box-shadow var(--transition) !important;
  overflow: visible !important;
}

.obj_article_summary:hover,
.article-summary:hover,
ul.articles li:hover,
.issue_article:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-left-color: var(--accent) !important;
}

/* صورة البحث — عرض أكبر وارتفاع مقلّل ربع */
.obj_article_summary .cover,
.obj_article_summary > img,
.article-summary > img,
.article-summary .cover,
ul.articles li > img,
.issue_article > img,
.issue_article .cover {
  width: 170px !important;
  height: 150px !important;
  min-width: 170px !important;
  object-fit: cover !important;
  object-position: top center !important;
  border-radius: 10px !important;
  border: 1px solid var(--border-card) !important;
  box-shadow: 0 4px 14px rgba(0,40,100,0.14) !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}

/* منطقة المعلومات */
.obj_article_summary .obj_article_summary_title,
.obj_article_summary .title,
.obj_article_summary h3,
.article-summary h3,
.article-summary .title,
ul.articles li h3,
.issue_article h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.2px !important;
}

.obj_article_summary .obj_article_summary_title a,
.obj_article_summary .title a,
.article-summary .title a,
ul.articles li h3 a,
.issue_article h3 a {
  color: var(--primary) !important;
  text-decoration: none !important;
  transition: color var(--transition) !important;
}

.obj_article_summary .title a:hover,
.article-summary .title a:hover,
ul.articles li h3 a:hover,
.issue_article h3 a:hover {
  color: var(--accent) !important;
  text-decoration: underline !important;
}

/* المؤلفون — أكبر وأوضح */
.obj_article_summary .authors,
.article-summary .authors,
ul.articles li .authors,
.issue_article .authors {
  font-size: 15px !important;
  color: var(--accent) !important;
  margin-bottom: 10px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-family: 'Segoe UI', sans-serif !important;
  border-left: 3px solid var(--accent) !important;
  padding-left: 10px !important;
}

/* الملخص */
.obj_article_summary .abstract,
.article-summary .abstract,
ul.articles li .abstract,
.issue_article .abstract {
  font-size: 13.5px !important;
  color: var(--text-body) !important;
  line-height: 1.65 !important;
  margin-bottom: 12px !important;
  font-family: 'Segoe UI', sans-serif !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* أزرار PDF / Abstract */
.obj_article_summary .galleys_links a,
.obj_article_summary .obj_galley_link,
.article-summary .galleys_links a,
.issue_article .galleys_links a,
ul.articles li .galleys_links a {
  display: inline-block !important;
  background: var(--primary) !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  font-family: 'Segoe UI', sans-serif !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  text-decoration: none !important;
  margin-right: 8px !important;
  margin-top: 6px !important;
  transition: background var(--transition), transform 0.2s !important;
  box-shadow: 0 2px 6px rgba(0,40,100,0.18) !important;
}

.obj_article_summary .galleys_links a:hover,
.issue_article .galleys_links a:hover {
  background: var(--accent) !important;
  transform: translateY(-1px) !important;
  opacity: 1 !important;
}

/* DOI */
.obj_article_summary .doi,
.article-summary .doi {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin-top: 8px !important;
  font-family: 'Segoe UI', sans-serif !important;
}

/* ------------------------------------------------------------
   👥 Editor Cards
   ------------------------------------------------------------ */
.editors-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  padding: 20px;
}

.editor-card {
  width: 270px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 18px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition), box-shadow var(--transition);
}

.editor-card img {
  border-radius: 50%;
  border: 3px solid var(--primary);
  object-fit: cover;
  width: 130px;
  height: 130px;
  box-shadow: 0 0 10px rgba(0,102,204,0.22);
  transition: box-shadow var(--transition), transform var(--transition);
  display: block;
  margin: 0 auto;
}

.editor-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-hover);
}

.editor-card:hover img {
  box-shadow: 0 0 22px rgba(0,102,204,0.5);
  transform: scale(1.07);
}

.editor-card .name {
  margin-top: 12px;
  font-weight: 700;
  color: var(--text-dark);
  font-size: 15px;
  font-family: 'Segoe UI', sans-serif;
}

.editor-card .aff {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 5px;
  font-family: 'Segoe UI', sans-serif;
}

.editor-card .icons {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.editor-card .icons img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: #fff;
  padding: 2px;
  box-shadow: 0 0 4px rgba(0,0,0,0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.editor-card .icons img:hover {
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(0,64,128,0.45);
}

/* ------------------------------------------------------------
   🧑‍💼 Editor Boxes
   ------------------------------------------------------------ */
.editor-box {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #ddeaf8, #eef5fc);
  padding: 20px 24px;
  border-radius: var(--radius-card);
  border-left: 5px solid var(--primary-light);
  box-shadow: var(--shadow-soft);
  flex-wrap: wrap;
  gap: 18px;
  transition: transform var(--transition), box-shadow var(--transition);
  margin-bottom: 20px;
}

.editor-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.editor-box img {
  border-radius: 10px;
  border: 3px solid var(--primary-light);
  object-fit: cover;
  width: 140px;
  height: 180px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  transition: box-shadow var(--transition), transform var(--transition);
  flex-shrink: 0;
}

.editor-box:hover img {
  box-shadow: 0 0 22px rgba(0,102,204,0.4);
  transform: scale(1.03);
}

.editor-box strong {
  font-size: 17px;
  color: var(--text-dark);
  display: block;
  margin-bottom: 6px;
}

.editor-box div {
  font-size: 14px;
  color: var(--text-body);
  flex: 1;
  min-width: 180px;
  font-family: 'Segoe UI', sans-serif;
}

/* ------------------------------------------------------------
   🔐 Login / Logout / Language Buttons — يمين الهيدر
   ------------------------------------------------------------ */

.pkp_navigation_user,
#navigationUser,
ul#navigationUser,
.pkp_nav_item.login,
.pkp_nav_item.logout,
.pkp_nav_item.profile,
.pkp_nav_item.language,
#navigationUser li {
  display: flex !important;
  align-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.pkp_navigation_user,
#navigationUser,
ul#navigationUser {
  gap: 6px !important;
  margin-left: auto !important;
  list-style: none !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
}

/* إجبار ظهور روابط Login/Logout */
#navigationUser a,
.pkp_navigation_user a,
a[href*="/login"],
a[href*="/logout"],
a[href*="login"],
a[href*="logout"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ------------------------------------------------------------
   👤 User Menu Items — Dashboard, Profile, Username, Logout
   ------------------------------------------------------------ */

/* Dashboard */
a[href*="/submissions"],
.pkp_nav_item a[href*="/submissions"] {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255,255,255,0.10) !important;
  color: #d8ecff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: 'Segoe UI', sans-serif !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  border: 1.5px solid rgba(255,255,255,0.2) !important;
  text-decoration: none !important;
  transition: background var(--transition) !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

a[href*="/submissions"]:hover {
  background: rgba(255,255,255,0.2) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* اسم المستخدم — balkhatee */
#navigationUser .pkp_nav_item:not(.login):not(.logout) > a[href*="/submissions"],
.pkp_navigation_user li.profile a {
  background: rgba(0,180,120,0.18) !important;
  border-color: rgba(100,220,170,0.35) !important;
  color: #ccffee !important;
}

/* View Profile */
a[href*="user/profile"],
a[href*="/profile"] {
  display: inline-flex !important;
  align-items: center !important;
  color: #c8e4ff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: 'Segoe UI', sans-serif !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  border: 1.5px solid transparent !important;
  text-decoration: none !important;
  transition: background var(--transition) !important;
  white-space: nowrap !important;
  text-shadow: none !important;
  background: transparent !important;
}

a[href*="user/profile"]:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Logout */
a[href*="signOut"],
a[href*="logout"] {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(180,30,30,0.22) !important;
  color: #ffdddd !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: 'Segoe UI', sans-serif !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  border: 1.5px solid rgba(255,120,120,0.4) !important;
  text-decoration: none !important;
  transition: background var(--transition) !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

a[href*="signOut"]:hover,
a[href*="logout"]:hover {
  background: rgba(180,30,30,0.42) !important;
  border-color: #ff9999 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Login */
a[href*="/login"]:not([href*="signOut"]) {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: 'Segoe UI', sans-serif !important;
  padding: 6px 18px !important;
  border-radius: 20px !important;
  border: 1.5px solid rgba(255,255,255,0.4) !important;
  text-decoration: none !important;
  transition: background var(--transition) !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

a[href*="/login"]:not([href*="signOut"]):hover {
  background: rgba(255,255,255,0.25) !important;
  border-color: #ffffff !important;
  opacity: 1 !important;
}


/* زر تسجيل الخروج — Logout */
a[href*="logout"],
.pkp_nav_item.logout a,
#navigationUser .logout a {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(180, 30, 30, 0.25) !important;
  color: #ffdddd !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: 'Segoe UI', sans-serif !important;
  padding: 6px 18px !important;
  border-radius: 20px !important;
  border: 1.5px solid rgba(255,120,120,0.45) !important;
  text-decoration: none !important;
  transition: background var(--transition) !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

a[href*="logout"]:hover,
.pkp_nav_item.logout a:hover {
  background: rgba(180, 30, 30, 0.45) !important;
  border-color: #ff9999 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* زر اللغة — Language */
.pkp_navigation_user .pkp_nav_item.language a,
#navigationUser .language a,
.pkp_language_toggle a,
a[href*="setLocale"],
.locale_toggle a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(0, 120, 200, 0.22) !important;
  color: #cce8ff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: 'Segoe UI', sans-serif !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  border: 1.5px solid rgba(100,180,255,0.4) !important;
  text-decoration: none !important;
  transition: background var(--transition) !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

a[href*="setLocale"]:hover,
.pkp_language_toggle a:hover {
  background: rgba(0, 120, 200, 0.4) !important;
  border-color: #66bbff !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* أيقونة الكرة الأرضية 🌐 */
.pkp_nav_item.language .fa-globe,
#navigationUser .fa-globe,
.pkp_language_toggle .fa-globe {
  font-size: 14px !important;
  opacity: 0.85 !important;
}

/* View Profile */
a[href*="profile"],
.pkp_nav_item.profile > a {
  display: inline-flex !important;
  align-items: center !important;
  color: #c8e4ff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: 'Segoe UI', sans-serif !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  border: 1.5px solid transparent !important;
  text-decoration: none !important;
  transition: background var(--transition) !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

a[href*="profile"]:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.25) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}


/* ------------------------------------------------------------
   🚫 Submissions — يخفى من الشريط فقط، يظهر بالفوتر والـ Dropdown
   ------------------------------------------------------------ */

/* إخفاء من الشريط الرئيسي فقط */
.pkp_navigation_primary > li > a[href*="about/submission"],
#navigationPrimary > li > a[href*="about/submission"],
.pkp_nav_item > a[href*="about/submission"] {
  display: none !important;
}

/* إظهار زر Submit بالفوتر والـ Dropdown دائماً */
a.jaima-submit-btn,
.jaima-submit-btn,
footer a[href*="submit"],
.pkp_footer a[href*="submit"],
.pkp_dropdown a[href*="submission"],
.dropdown-menu a[href*="submission"],
.pkp_nav_item ul li a[href*="submission"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ------------------------------------------------------------
   ✨ روابط عامة
   ------------------------------------------------------------ */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  opacity: 1;
}

hr {
  border: none;
  border-top: 1px solid var(--border-card);
  margin: 24px 0;
}

/* ------------------------------------------------------------
   🏠 Homepage Layout — Sidebar + Main Content
   ------------------------------------------------------------ */

.pkp_structure_main {
  display: flex !important;
  flex-direction: row !important;
  gap: 28px !important;
  align-items: flex-start !important;
}

.pkp_structure_content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.pkp_sidebar,
.pkp_structure_sidebar {
  width: 260px !important;
  min-width: 260px !important;
  flex-shrink: 0 !important;
}

/* Sidebar Blocks */
.pkp_sidebar .pkp_block,
.pkp_structure_sidebar .pkp_block {
  background: #ffffff !important;
  border: 1px solid var(--border-card) !important;
  border-top: 3px solid var(--primary) !important;
  border-radius: 12px !important;
  padding: 18px !important;
  margin-bottom: 20px !important;
  box-shadow: var(--shadow-soft) !important;
}

.pkp_sidebar .pkp_block h2,
.pkp_sidebar .pkp_block h3,
.pkp_structure_sidebar .pkp_block h2,
.pkp_structure_sidebar .pkp_block h3 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--border-card) !important;
  text-align: left !important;
}

.pkp_sidebar .pkp_block h2::after,
.pkp_structure_sidebar .pkp_block h2::after {
  display: none !important;
}

.pkp_sidebar .pkp_block ul,
.pkp_structure_sidebar .pkp_block ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.pkp_sidebar .pkp_block ul li,
.pkp_structure_sidebar .pkp_block ul li {
  border-bottom: 1px solid #eef3f8 !important;
}

.pkp_sidebar .pkp_block ul li:last-child,
.pkp_structure_sidebar .pkp_block ul li:last-child {
  border-bottom: none !important;
}

.pkp_sidebar .pkp_block ul li a,
.pkp_structure_sidebar .pkp_block ul li a {
  display: block !important;
  padding: 8px 4px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--text-body) !important;
  font-family: 'Segoe UI', sans-serif !important;
  text-decoration: none !important;
  transition: color var(--transition), padding-left var(--transition) !important;
}

.pkp_sidebar .pkp_block ul li a:hover,
.pkp_structure_sidebar .pkp_block ul li a:hover {
  color: var(--accent) !important;
  padding-left: 8px !important;
  text-decoration: none !important;
}

/* Make a Submission Button */
a[href*="manuscriptcentral"],
.pkp_block a.pkp_button,
a.pkp_button_primary {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: 'Segoe UI', sans-serif !important;
  padding: 12px 20px !important;
  border-radius: 10px !important;
  border: none !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0,40,100,0.22) !important;
  transition: transform var(--transition), box-shadow var(--transition) !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.3px !important;
}

a[href*="manuscriptcentral"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0,40,100,0.3) !important;
  opacity: 1 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* عداد الزوار */
.pkp_block_information .value {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  display: block !important;
  text-align: center !important;
}

/* ------------------------------------------------------------
   📱 Responsive
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .pkp_structure_main {
    flex-direction: column !important;
  }

  .pkp_sidebar,
  .pkp_structure_sidebar {
    width: 100% !important;
    min-width: unset !important;
  }

  .pkp_structure_main,
  .pkp_page_content {
    padding: 20px 16px !important;
  }
}

@media (max-width: 768px) {
  .pkp_head_wrapper,
  #headerNavigationContainer,
  header {
    flex-direction: column !important;
    height: auto !important;
    padding: 10px 12px !important;
    flex-wrap: wrap !important;
    position: relative !important;
    align-items: center !important;
  }

  /* الشعار بالوسط فوق */
  .pkp_head_wrapper .pkp_site_name,
  .navbar-brand {
    margin-bottom: 8px !important;
  }

  /* القائمة تلف وتظهر كاملة */
  .pkp_navigation_primary,
  #navigationPrimary {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 2px !important;
  }

  .pkp_navigation_primary a,
  #navigationPrimary a {
    font-size: 11.5px !important;
    padding: 5px 8px !important;
    white-space: nowrap !important;
  }

  /* Dropdown بالموبايل */
  .pkp_dropdown,
  .dropdown-menu {
    position: absolute !important;
    z-index: 9999 !important;
  }

  /* User nav تحت القائمة */
  .pkp_navigation_user,
  #navigationUser {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(255,255,255,0.15) !important;
    gap: 4px !important;
  }

  #navigationUser a,
  .pkp_navigation_user a {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  /* Article cards عمودي */
  .obj_article_summary,
  .article-summary,
  ul.articles li,
  .issue_article {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .obj_article_summary .cover,
  .obj_article_summary > img,
  .issue_article > img {
    width: 100% !important;
    max-width: 300px !important;
    height: 160px !important;
  }

  .editor-box {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}

@media (max-width: 600px) {
  .editor-card {
    width: 100% !important;
    max-width: 320px !important;
  }

  .editors-grid {
    padding: 8px !important;
    gap: 14px !important;
  }

  [class*="pkp_structure"],
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  h2 { font-size: 1.2rem !important; }
  h3 { font-size: 1rem !important; }
  p  { font-size: 14px !important; }
}



/* ------------------------------------------------------------
   🌙 Dark Mode
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:     #091624;
    --bg-section:  #0c1d30;
    --bg-card:     #102035;
    --text-body:   #c5d8ee;
    --text-dark:   #e4f0ff;
    --text-muted:  #7a99bb;
    --border-card: #1b3550;
    --primary-pale:#0a1628;
  }

  body {
    background-image:
      radial-gradient(ellipse at 10% 10%, rgba(0,80,160,0.1) 0%, transparent 55%),
      radial-gradient(ellipse at 90% 90%, rgba(0,40,100,0.08) 0%, transparent 55%);
  }

  .obj_article_summary,
  .editor-card,
  .editor-box {
    background: var(--bg-card) !important;
  }
}

/* ============================================================
   JAIMA — v5.0 Responsive & Visual Polish — Aug 2026
   Clean CSS only (no JavaScript embedded in this file)
   ============================================================ */

/* ---------- Global safety / responsive media ---------- */
*, *::before, *::after { box-sizing: border-box; }

img, svg, video, iframe {
  max-width: 100%;
  height: auto;
}

pre, code, table {
  max-width: 100%;
}

.pkp_structure_content,
.pkp_structure_main,
.pkp_page_content,
.obj_issue_toc,
.obj_article_details {
  min-width: 0 !important;
}

/* Long DOI / URL / author strings should never break mobile layout */
a, .doi, .authors, .subtitle, .value {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ---------- Header refinement ---------- */
.pkp_head_wrapper,
#headerNavigationContainer,
header {
  backdrop-filter: saturate(115%);
  -webkit-backdrop-filter: saturate(115%);
}

#navigationPrimary > li > a,
.pkp_navigation_primary > li > a {
  position: relative;
}

#navigationPrimary > li > a::after,
.pkp_navigation_primary > li > a::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.92);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
}

#navigationPrimary > li > a:hover::after,
#navigationPrimary > li > a:focus-visible::after,
.pkp_navigation_primary > li > a:hover::after,
.pkp_navigation_primary > li > a:focus-visible::after {
  transform: scaleX(1);
}

/* ---------- Dropdown — desktop ---------- */
#navigationPrimary .pkp_nav_item,
.pkp_navigation_primary .pkp_nav_item {
  position: relative !important;
}

#navigationPrimary .pkp_nav_item > ul,
.pkp_navigation_primary .pkp_nav_item > ul,
#navigationPrimary .pkp_dropdown,
.pkp_navigation_primary .pkp_dropdown,
.dropdown-menu {
  max-height: min(70vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------- Issue / TOC presentation ---------- */
.obj_issue_toc .heading,
.page_issue .heading {
  background: linear-gradient(135deg, #ffffff, #f5f9fd) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: 14px !important;
  padding: 20px 22px !important;
  margin-bottom: 22px !important;
  box-shadow: var(--shadow-soft) !important;
}

.obj_issue_toc .sections:not(:first-child),
.obj_issue_toc .section {
  margin-top: 20px !important;
}

.obj_issue_toc .section > h2,
.obj_issue_toc .section > h3,
.obj_issue_toc h2.section-title,
.obj_issue_toc h3.section-title {
  text-align: left !important;
  border-left: 4px solid var(--gold) !important;
  padding: 10px 14px !important;
  margin: 22px 0 14px !important;
  background: #fff !important;
  border-radius: 0 10px 10px 0 !important;
  box-shadow: 0 2px 8px rgba(0,40,100,.06) !important;
}

.obj_issue_toc .section > h2::after,
.obj_issue_toc .section > h3::after,
.obj_issue_toc h2.section-title::after,
.obj_issue_toc h3.section-title::after {
  display: none !important;
}

/* Article cards: clearer reading hierarchy */
.obj_article_summary,
.article-summary,
ul.articles li,
.issue_article {
  position: relative !important;
  isolation: isolate;
}

.obj_article_summary::before,
.article-summary::before,
ul.articles li::before,
.issue_article::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  z-index: -1;
}

.obj_article_summary .pages,
.article-summary .pages,
.issue_article .pages,
ul.articles li .pages {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px;
  margin-top: 8px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: #edf5fc !important;
  border: 1px solid #cfe1f2 !important;
  color: #173b63 !important;
  font: 700 12px/1.2 'Segoe UI', sans-serif !important;
}

/* ---------- Breadcrumb ---------- */
.cmp_breadcrumbs,
.breadcrumb,
.breadcrumbs {
  font-family: 'Segoe UI', sans-serif !important;
  font-size: 13px !important;
}

.cmp_breadcrumbs ol,
.breadcrumb,
.breadcrumbs ol {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(192,212,232,.85) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
}

/* ---------- Forms / buttons ---------- */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
select,
textarea {
  max-width: 100% !important;
  border: 1px solid #b7cce0 !important;
  border-radius: 9px !important;
  padding: 9px 11px !important;
  background: #fff !important;
  color: var(--text-body) !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(0,119,204,.14) !important;
  outline: none !important;
}

button,
.pkp_button,
.cmp_button,
input[type='submit'] {
  border-radius: 9px !important;
}

/* Keyboard accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(0,119,204,.35) !important;
  outline-offset: 2px !important;
}

/* ---------- Footer polish ---------- */
.pkp_structure_footer_wrapper,
.pkp_footer,
footer {
  border-top: 1px solid rgba(255,255,255,.12) !important;
}

.pkp_footer a,
footer a {
  transition: opacity .2s ease, color .2s ease !important;
}

.pkp_footer a:hover,
footer a:hover {
  opacity: .9 !important;
}

/* ---------- Login / lost password: single clean rule ---------- */
a[href*='lostPassword'],
.page_login a[href*='lostPassword'],
form.login a[href*='lostPassword'] {
  color: #1a56db !important;
  -webkit-text-fill-color: #1a56db !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-top: 8px !important;
  font: 600 13px/1.4 'Segoe UI', sans-serif !important;
  text-decoration: underline !important;
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

a[href*='lostPassword']:hover {
  color: #003b82 !important;
  -webkit-text-fill-color: #003b82 !important;
}

/* ============================================================
   MOBILE / TABLET — keep the whole top bar reachable
   ============================================================ */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
  }

  .pkp_head_wrapper,
  #headerNavigationContainer,
  header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
    overflow: visible !important;
  }

  .pkp_head_wrapper .pkp_site_name,
  .navbar-brand,
  .pkp_site_name {
    align-self: center !important;
    margin: 0 0 6px !important;
  }

  /* Primary menu is one horizontal strip that can be swiped */
  .pkp_navigation_primary,
  #navigationPrimary,
  .navbar-nav,
  nav.navbar ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    padding: 2px 2px 7px !important;
    scroll-snap-type: x proximity;
  }

  .pkp_navigation_primary::-webkit-scrollbar,
  #navigationPrimary::-webkit-scrollbar,
  .navbar-nav::-webkit-scrollbar {
    display: none;
  }

  .pkp_navigation_primary > li,
  #navigationPrimary > li,
  .navbar-nav > li {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    position: relative !important;
  }

  .pkp_navigation_primary > li > a,
  #navigationPrimary > li > a,
  .navbar-nav > li > a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* User menu can also be swiped instead of being cut off */
  .pkp_navigation_user,
  #navigationUser,
  ul#navigationUser {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 5px !important;
    padding: 6px 1px 2px !important;
    margin-top: 3px !important;
    border-top: 1px solid rgba(255,255,255,.14) !important;
  }

  .pkp_navigation_user::-webkit-scrollbar,
  #navigationUser::-webkit-scrollbar { display: none; }

  #navigationUser > li,
  .pkp_navigation_user > li {
    flex: 0 0 auto !important;
  }

  /* About and other dropdowns: compact floating card, not a giant box */
  #navigationPrimary .pkp_nav_item > ul,
  .pkp_navigation_primary .pkp_nav_item > ul,
  #navigationPrimary .pkp_dropdown,
  .pkp_navigation_primary .pkp_dropdown,
  .dropdown-menu {
    position: fixed !important;
    top: auto !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 360px !important;
    max-height: min(62vh, 420px) !important;
    margin: 4px auto 0 !important;
    padding: 6px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: rgba(255,255,255,.985) !important;
    border: 1px solid #c9d9e8 !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 34px rgba(0,28,61,.23) !important;
    z-index: 100000 !important;
  }

  #navigationPrimary .pkp_nav_item > ul li,
  .pkp_navigation_primary .pkp_nav_item > ul li,
  .dropdown-menu li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #edf2f7 !important;
  }

  #navigationPrimary .pkp_nav_item > ul li:last-child,
  .pkp_navigation_primary .pkp_nav_item > ul li:last-child,
  .dropdown-menu li:last-child {
    border-bottom: 0 !important;
  }

  #navigationPrimary .pkp_nav_item > ul a,
  .pkp_navigation_primary .pkp_nav_item > ul a,
  #navigationPrimary .pkp_dropdown a,
  .pkp_navigation_primary .pkp_dropdown a,
  .dropdown-menu a {
    display: flex !important;
    align-items: center !important;
    min-height: 42px !important;
    width: 100% !important;
    padding: 9px 12px !important;
    margin: 0 !important;
    border-radius: 7px !important;
    color: #08213e !important;
    background: transparent !important;
    font: 600 13.5px/1.25 'Segoe UI', sans-serif !important;
    white-space: normal !important;
    text-align: left !important;
    text-shadow: none !important;
  }

  #navigationPrimary .pkp_nav_item > ul a:hover,
  #navigationPrimary .pkp_nav_item > ul a:focus-visible,
  .pkp_navigation_primary .pkp_nav_item > ul a:hover,
  .pkp_navigation_primary .pkp_nav_item > ul a:focus-visible,
  .dropdown-menu a:hover,
  .dropdown-menu a:focus-visible {
    background: #edf5fc !important;
    color: #004080 !important;
  }

  /* Main content / cards */
  .pkp_structure_wrapper,
  .pkp_structure_page,
  #pkp_content_main,
  .pkp_page,
  .container,
  .container-fluid,
  [class*='pkp_structure'] {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .pkp_structure_main,
  .page,
  main,
  #main-content,
  .pkp_page_content {
    padding: 18px 14px !important;
    margin: 10px auto !important;
    border-radius: 12px !important;
  }

  .obj_article_summary,
  .article-summary,
  ul.articles li,
  .issue_article {
    gap: 13px !important;
    padding: 15px !important;
    margin-bottom: 14px !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 600px) {
  .obj_article_summary,
  .article-summary,
  ul.articles li,
  .issue_article {
    align-items: stretch !important;
    text-align: left !important;
  }

  .obj_article_summary .cover,
  .obj_article_summary > img,
  .article-summary > img,
  .article-summary .cover,
  ul.articles li > img,
  .issue_article > img,
  .issue_article .cover {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 220px !important;
    object-fit: contain !important;
    background: #f7f9fb !important;
  }

  .obj_article_summary .obj_article_summary_title,
  .obj_article_summary .title,
  .obj_article_summary h3,
  .article-summary h3,
  .article-summary .title,
  ul.articles li h3,
  .issue_article h3 {
    font-size: 16px !important;
    line-height: 1.38 !important;
  }

  .obj_article_summary .authors,
  .article-summary .authors,
  ul.articles li .authors,
  .issue_article .authors {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }

  h1 { font-size: 1.65rem !important; }
  h2 { font-size: 1.18rem !important; }
}

/* Reduced motion for users who request it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}