/* ==========================================================================
   مجلة طروس — ملف التنسيق الرئيس (CSS)
   --------------------------------------------------------------------------
   هذا الملف يتحكم بشكل الموقع كله: الألوان والخطوط والمسافات والتجاوب مع
   شاشات الهواتف. كل قسم مشروح بتعليق عربي قبله.
   الألوان مستمدّة من غلاف العدد الأول ومن شعار المجلة.
   ========================================================================== */


/* ==========================================================================
   ١) تعريف الخطوط المحلية
   --------------------------------------------------------------------------
   الملفات في مجلد assets/fonts، ولا يُطلب أيّ خط من الإنترنت.

   خط العناوين  «Turus Display» = أميري (Amiri)
   خط المتن     «Turus Text»    = نوتو نسخ عربي (Noto Naskh Arabic)
   وكلاهما برخصة SIL OFL الحرّة التي تجيز الاستعمال في المواقع.

   لكل خط ملفّان لكل وزن: واحد للحروف العربية وآخر للحروف اللاتينية
   والأرقام وعلامات مثل — و … و •. والمتصفّح يُنزّل ما يحتاجه فقط بحسب
   حقل unicode-range، فلا يُحمّل الزائر ما لا يظهر على الشاشة.
   ========================================================================== */

/* نطاق الحروف العربية */
@font-face {
  font-family: 'Turus Display';
  src: url('../fonts/turus-display-regular-ar.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;                     /* يعرض النص فورًا ولو تأخر الخط */
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E,
                 U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: 'Turus Display';
  src: url('../fonts/turus-display-bold-ar.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E,
                 U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: 'Turus Text';
  src: url('../fonts/turus-text-regular-ar.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E,
                 U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: 'Turus Text';
  src: url('../fonts/turus-text-bold-ar.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E,
                 U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}

/* نطاق الأرقام والحروف اللاتينية وعلامات الترقيم */
@font-face {
  font-family: 'Turus Display';
  src: url('../fonts/turus-display-regular-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Turus Display';
  src: url('../fonts/turus-display-bold-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Turus Text';
  src: url('../fonts/turus-text-regular-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Turus Text';
  src: url('../fonts/turus-text-bold-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   ٢) المتغيّرات: الألوان والمقاسات
   لتغيير لون الموقع كله يكفي تعديل القيم هنا.
   ========================================================================== */

:root {
  /* الألوان الأساسية المأخوذة من الغلاف والشعارات */
  --crimson:        #921a22;   /* عنّابي: لون اسم المجلة في الشعار */
  --crimson-dark:   #6f1319;   /* عنّابي غامق: للتحويم على الروابط */
  --ink:            #2e1c13;   /* بنّي داكن جدًّا: لون النص الأساسي */
  --ink-soft:       #5c4636;   /* بنّي فاتح: للنصوص الثانوية */
  --gold:           #a6834a;   /* ذهبي: لون شعار المركز والزخارف */
  --gold-light:     #d8c49b;   /* ذهبي فاتح: للحدود الرفيعة */

  /* ألوان الخلفيات: ثلاثة أوزان من الورق */
  --parchment:      #f6eedf;   /* لون الرَّق (ورق الغلاف): الشرائط والوسوم */
  --cream:          #fdfaf5;   /* ورق البطاقات والحقول */
  --page-bg:        #fffdf9;   /* خلفية الصفحة: أبيض دافئ لا أبيض خالص */
  --line:           #e6dcc8;   /* لون الخطوط الفاصلة */

  /* ألوان النصّ فوق الأرضيّات الداكنة والعنّابية
     (كانت مكتوبة حرفيًّا في مواضع متفرّقة قبل توثيق النظام) */
  --on-primary:     #fffdf9;   /* نصّ فوق العنّابي: دافئ لا أبيض خالص */
  --on-inverse:     #e9ddc9;   /* نصّ فوق الحبر: الترويسة والتذييل */
  --on-inverse-dim: #c9b99f;   /* سطر الحقوق أسفل التذييل */
  --placeholder:    #86705a;   /* النصّ الإرشادي في الحقول (4.5:1) */
  --error:          #7b2d26;   /* حديد مؤكسد: خطأ النموذج، متميّز عن العنّابي */

  /* الخطوط */
  --font-display: 'Turus Display', 'Amiri', 'Traditional Arabic',
                  'Noto Naskh Arabic', 'Times New Roman', serif;
  --font-text:    'Turus Text', 'Noto Naskh Arabic', 'Segoe UI',
                  'Traditional Arabic', 'Tahoma', sans-serif;

  /* سلّم المقاسات — القيم نفسها المكتوبة في DESIGN.md
     تسعة مستويات لا أكثر. أيّ مقاس خارج هذه القائمة انحراف. */
  --text-label-sm:    13px;   /* الوسوم والكلمات المفتاحية وفتات الخبز */
  --text-label-md:    15px;   /* البيانات الوصفية والملاحظات */
  --text-body-md:     17px;   /* المتن والحقول والأزرار */
  --text-body-lg:     19px;   /* المتن في الشاشات الواسعة */
  --text-headline-sm: 21px;
  --text-headline-md: 25px;
  --text-headline-lg: 30px;
  --text-display:     37px;
  --text-numeral:     76px;   /* رقم 404 وحده */

  /* ارتفاعات الأسطر: تتناسب عكسًا مع المقاس، وكلُّها أعلى من نظيرتها
     اللاتينية لأنّ العربية تحمل علامات فوق السطر وتحته */
  --leading-body:     1.95;
  --leading-label:    1.7;
  --leading-hl-sm:    1.55;
  --leading-hl-md:    1.45;
  --leading-hl-lg:    1.35;
  --leading-display:  1.3;

  /* عرض المحتوى الأقصى */
  --wrap:         1140px;
  --wrap-narrow:  820px;       /* للصفحات النصّية الطويلة: أسهل للقراءة */

  /* الحواف والظلال — نصف القطر متدرّج لا موحَّد:
     الحقول أحدّ من الأزرار، والوسوم وحدها بيضويّة */
  --radius-sm:    3px;         /* الحقول ومربّع البحث */
  --radius:       6px;         /* الأزرار والبطاقات وإطارات الصور */
  --shadow-soft:  0 1px 3px rgba(46, 28, 19, .08);
  --shadow-card:  0 2px 10px rgba(46, 28, 19, .10);
}


/* ==========================================================================
   ٣) إعادة الضبط العامة والأساسيات
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-body-md);              /* الحد الأدنى المريح لقراءة العربية */
  line-height: var(--leading-body);            /* تباعد أسطر واسع يريح العين في العربية */
  text-align: right;
}

@media (min-width: 900px) {
  body { font-size: var(--text-body-lg); }
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--crimson);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover,
a:focus { color: var(--crimson-dark); text-decoration: underline; }

/* إطار واضح عند التنقّل بلوحة المفاتيح (مهمّ لسهولة الوصول) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 2px;
}

/* العناوين بخط العناوين */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-hl-sm);
  color: var(--ink);
  margin: 0 0 .6em;
}

h1 { font-size: var(--text-headline-lg); line-height: var(--leading-hl-lg); }
h2 { font-size: var(--text-headline-md); line-height: var(--leading-hl-md); }
h3 { font-size: var(--text-headline-sm); }

@media (min-width: 900px) {
  h1 { font-size: var(--text-display); line-height: var(--leading-display); }
  h2 { font-size: var(--text-headline-lg); line-height: var(--leading-hl-lg); }
  h3 { font-size: var(--text-headline-sm); }
}

p { margin: 0 0 1.1em; }

ul, ol { padding-inline-start: 1.4em; margin: 0 0 1.1em; }
li { margin-bottom: .45em; }

/* الأرقام: نستعمل الأرقام الغربية (123) في الموقع كله للاتساق */
.num { font-variant-numeric: lining-nums; }

/* حاوية المحتوى: تضبط العرض والهوامش الجانبية */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 16px;
}

.wrap--narrow { max-width: var(--wrap-narrow); }

/* رابط "تخطَّ إلى المحتوى" للقارئات الشاشية — يظهر عند التركيز فقط */
.skip-link {
  position: absolute;
  right: -9999px;
  top: 0;
  background: var(--crimson);
  color: var(--on-primary);
  padding: 8px 16px;
  z-index: 100;
}
.skip-link:focus {
  right: 12px;
  top: 12px;
}


/* ==========================================================================
   ٤) الترويسة (الهيدر): الشعار وقائمة التنقّل في شريط واحد
   --------------------------------------------------------------------------
   الشعار على اليمين والصفحات على يساره داخل الشريط الداكن نفسه.
   وفي الشاشات الضيّقة تنزل القائمة سطرًا كاملًا تحت الشعار، وفي الهاتف
   تختفي حتى يُضغط زرّ الثلاثة خطوط.
   ========================================================================== */

.site-header {
  background: var(--ink);
  border-bottom: 3px solid var(--gold);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding-block: 8px;
}

/* كتلة الشعار + اسم المجلة */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }

/* الشعار عنّابي اللون، فنضعه على رقعة فاتحة كي يبقى واضحًا على الشريط الداكن */
.brand img {
  width: 50px;
  height: auto;
  background: var(--parchment);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 4px;
}

.brand-text .brand-name {
  font-family: var(--font-display);
  font-size: var(--text-headline-sm);
  font-weight: 700;
  color: var(--parchment);
  line-height: 1.2;
  display: block;
}
.brand-text .brand-tag {
  font-size: var(--text-label-sm);
  color: var(--gold-light);
  display: block;
  line-height: 1.5;
}

@media (min-width: 700px) {
  .brand img { width: 62px; }
  .brand-text .brand-name { font-size: var(--text-headline-md); }
  .brand-text .brand-tag  { font-size: var(--text-label-md); }
}

/* زرّ القائمة في الهاتف (ثلاثة خطوط) */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 46px;
  height: 42px;
  padding: 8px 8px;
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--parchment);   /* فاتح كي يظهر على الشريط الداكن */
  border-radius: 2px;
}

/* قائمة التنقّل: صارت داخل الترويسة، فخلفيّتها من الترويسة نفسها */
.site-nav {
  background: transparent;
  flex-basis: 100%;               /* سطر كامل تحت الشعار في الشاشات الضيّقة */
}

/* في الهاتف: القائمة مخفيّة حتى يُضغط الزر */
.site-nav ul {
  display: none;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav.is-open ul { display: flex; }

.site-nav li { margin: 0; }

.site-nav a {
  display: block;
  padding: 12px 4px;
  color: var(--parchment);
  font-family: var(--font-display);
  font-size: var(--text-body-md);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-nav a:hover,
.site-nav a:focus { background: rgba(255, 255, 255, .07); color: var(--on-primary); text-decoration: none; }

/* الصفحة الحالية تُميَّز بخط ذهبي أسفلها */
.site-nav a[aria-current="page"] {
  color: var(--gold-light);
  box-shadow: inset 0 -3px 0 var(--gold);
}

/* الشاشات المتوسطة (الآيباد عموديًّا): القائمة أفقية ظاهرة دائمًا
   في سطرها الخاصّ تحت الشعار، ويختفي زرّ الثلاثة خطوط */
@media (min-width: 720px) {
  .nav-toggle { display: none; }

  .site-nav ul {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .site-nav a {
    padding: 8px 16px;
    border-bottom: 0;
    border-radius: var(--radius);
  }
}

/* الشاشات الواسعة: الشعار يمينًا والصفحات على يساره في سطر واحد */
@media (min-width: 900px) {
  .site-nav { flex-basis: auto; }
  .site-nav ul { justify-content: flex-end; }
}


/* ==========================================================================
   ٥) التذييل (الفوتر)
   ========================================================================== */

.site-footer {
  margin-top: 56px;
  background: var(--ink);
  color: var(--on-inverse);
  font-size: var(--text-label-md);
  padding: 32px 0 0;
}

.site-footer a { color: var(--gold-light); }
.site-footer a:hover { color: var(--on-primary); }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-bottom: 32px;
}

@media (min-width: 700px) {
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; }
  /* بين 700 و1040 لا يتّسع لعمود رابع، فيمتدّ بيان الناشر تحت الثلاثة */
  .footer-latin { grid-column: 1 / -1; }
}

/* من 1200 بكسل — حيث يبدأ الفراغ يتّسع إلى يسار الأعمدة — يصير بيان
   الناشر عمودًا رابعًا يملؤه، فيقصر التذييل بمقدار الشريط الذي كان
   يشغله وحده. ودون هذا العرض تكون الأعمدة الثلاثة قد ملأت السطر فلا
   فراغ يُملأ، ولو أُقحم عمود رابع لانضغط عمود «التواصل» حتى ينكسر
   البريد سطرين.

   والحصص غير متساوية عمدًا: «التواصل» يحتاج عرض البريد كاملًا،
   وبيان الناشر أطول أسطرًا من الجميع. */
@media (min-width: 1200px) {
  .footer-grid { grid-template-columns: 1.05fr .8fr 1fr 1.15fr; }
  .footer-latin { grid-column: auto; }
}

.footer-col h3 {
  font-size: var(--text-body-md);
  color: var(--gold-light);
  margin-bottom: .5em;
}

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

/* شعارات الجهة المُصدِرة في التذييل */
.footer-logos {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.footer-logos img {
  height: 62px;
  width: auto;
  background: var(--parchment);
  border-radius: var(--radius);
  padding: 8px;
}

/* الرقم المعياري الدولي (ISSN)
   ------------------------------------------------------------------
   يُعرض شريطًا مستقلًّا بين أعمدة التذييل وسطر الحقوق، لا داخل عمود
   ولا في سطر الحقوق: الأول يدفنه بين الروابط، والثاني يجعله هامشًا
   عابرًا. وهو في المجلات المحكَّمة بيان هويّة لا تفصيلًا إداريًّا.

   إطاره ذهبيّ بلا خلفية: يكفي لتمييزه على أرضيّة الحبر الداكنة من غير
   أن ينافس الشعارات فوقه في جذب العين. */
.footer-issn {
  display: flex;
  justify-content: center;
  padding-bottom: 24px;
}

.issn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;          /* في الهاتف ينزل كل بند سطرًا */
  max-width: 100%;          /* لا يتجاوز عرض الشاشة مهما ضاقت */
  gap: 8px 28px;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 8px 16px;
  text-align: center;
}

/* كل بند: تسميته ورقمه وحدة واحدة لا تنفصل عند الالتفاف */
.issn-item {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
}

/* فاصل بين البندين على الشاشات التي تسعهما في سطر واحد.
   وborder-inline-start لا border-right، فيقع الفاصل في الجهة الصحيحة
   من غير أن نفترض اتّجاه الصفحة. */
@media (min-width: 700px) {
  .issn-item + .issn-item {
    border-inline-start: 1px solid var(--gold);
    padding-inline-start: 28px;
  }
}

.issn-label {
  font-size: var(--text-label-sm);
  color: var(--on-inverse-dim);
}

.issn-num {
  font-family: var(--font-display);
  font-size: var(--text-body-md);
  font-weight: 700;
  color: var(--gold-light);
}

/* بيان الناشر بالحروف اللاتينية (تطلبه هيئة ISSN)
   ------------------------------------------------------------------
   حاضرٌ للفهرسة الدولية، خافتٌ للقارئ العربي: بمقاس الوسوم وبلون سطر
   الحقوق، بلا عنوان فوقه كي لا يُقرأ عمودًا رابعًا في التصفّح العربي.

   وأسطره الستّة قيمة واحدة في data.js يفصلها \n، وpre-line
   هي التي تحوّلها أسطرًا. */
.footer-latin {
  font-size: var(--text-label-sm);
  line-height: var(--leading-label);
  color: var(--on-inverse-dim);
  white-space: pre-line;
  text-align: left;
  align-self: start;
}

/* سطر حقوق النشر */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .13);
  padding: 12px 0;
  font-size: var(--text-label-sm);
  color: var(--on-inverse-dim);
  text-align: center;
}


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

/* الزرّ الأساسي (عنّابي) */
.btn {
  display: inline-block;
  background: var(--crimson);
  color: var(--on-primary);
  font-family: var(--font-display);
  font-size: var(--text-body-md);
  padding: 12px 20px;
  border: 1px solid var(--crimson);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
}
.btn:hover,
.btn:focus {
  background: var(--crimson-dark);
  border-color: var(--crimson-dark);
  color: var(--on-primary);
  text-decoration: none;
}

/* الزرّ الثانوي (مفرَّغ) */
.btn--ghost {
  background: transparent;
  color: var(--crimson);
}
.btn--ghost:hover,
.btn--ghost:focus { background: var(--crimson); color: var(--on-primary); }

/* زرّ صغير */
.btn--sm { font-size: var(--text-label-md); padding: 8px 16px; }

/* عنوان القسم مع خط ذهبي قصير تحته */
.section-title {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 24px;
}
.section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 72px;
  height: 3px;
  background: var(--gold);
}

/* توسيط عنوان القسم عند الحاجة */
.section-title--center { text-align: center; }
.section-title--center::after { right: 50%; transform: translateX(50%); }

/* البطاقة العامة */
.card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-soft);
}

/* ترويسة الصفحات الداخلية (شريط عنوان بلون الرَّق) */
.page-head {
  background: var(--parchment);
  border-bottom: 1px solid var(--line);
  padding: 32px 0 24px;
  margin-bottom: 32px;
}
.page-head h1 { margin-bottom: .2em; }
.page-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-body-md);
}

/* فتات الطريق (المسار) */
.breadcrumb {
  font-size: var(--text-label-sm);
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.breadcrumb a { color: var(--ink-soft); }

/* مسافة أسفل أقسام الصفحة */
.section { margin-bottom: 56px; }


/* ==========================================================================
   ٧) الصفحة الرئيسة
   ========================================================================== */

/* قسم "العدد الأخير": الغلاف إلى جانب البيانات */
.latest-issue {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

@media (min-width: 760px) {
  .latest-issue { grid-template-columns: 300px 1fr; gap: 40px; }
}

/* صورة الغلاف بإطار ذهبي رفيع */
.cover-frame {
  display: block;
  border: 1px solid var(--gold-light);
  padding: 8px;
  background: var(--cream);
  box-shadow: var(--shadow-card);
  max-width: 300px;
  margin-inline: auto;
}
.cover-frame img { width: 100%; }

/* قائمة بيانات العدد (رقم، سنة، صفحات) */
.meta-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.meta-list li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.meta-list strong { color: var(--ink-soft); font-weight: 700; }

/* شبكة "أحدث البحوث" في الرئيسة */
.grid-articles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px)  { .grid-articles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .grid-articles { grid-template-columns: 1fr 1fr 1fr; } }

/* بطاقة بحث مختصرة */
.article-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.article-card h3 {
  font-size: var(--text-body-md);
  margin: 0;
  line-height: 1.7;
}
.article-card h3 a { color: var(--ink); }
.article-card h3 a:hover { color: var(--crimson); }

.article-card .card-author {
  font-size: var(--text-label-md);
  color: var(--ink-soft);
  margin: 0;
}
.article-card .card-foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--text-label-md);
  color: var(--ink-soft);
}

/* وسم نوع البحث (بحث / تحقيق) */
.tag {
  display: inline-block;
  font-size: var(--text-label-sm);
  font-family: var(--font-display);
  padding: 4px 12px;
  border-radius: 9999px;
  background: var(--parchment);
  border: 1px solid var(--gold-light);
  color: var(--ink-soft);
}
.tag--tahqiq {
  background: var(--crimson);
  border-color: var(--crimson);
  color: var(--on-primary);
}

/* صندوق "نبذة عن المجلة" في الرئيسة */
.about-box {
  background: var(--parchment);
  border-right: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 24px;
}
.about-box p:last-child { margin-bottom: 0; }

/* صفّ من ثلاث ميزات في الرئيسة */
.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px) { .features { grid-template-columns: repeat(3, 1fr); } }

.feature {
  text-align: center;
  padding: 20px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
}
.feature h3 { margin-bottom: .3em; color: var(--crimson); }
.feature p  { margin: 0; font-size: var(--text-label-md); color: var(--ink-soft); }


/* ==========================================================================
   ٨) الصفحات النصّية (عن المجلة، هيئة التحرير، سياسة النشر)
   ========================================================================== */

/* نص طويل مقروء */
.prose { max-width: var(--wrap-narrow); }
.prose h2 { margin-top: 1.7em; }
.prose h2:first-child { margin-top: 0; }
.prose ol, .prose ul { padding-inline-start: 1.5em; }
.prose li { margin-bottom: .8em; }

/* قائمة مرقّمة بأرقام عنّابية بارزة (لسياسة النشر) */
.rules-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: rule;
}
.rules-list > li {
  counter-increment: rule;
  position: relative;
  padding: 0 48px 0 0;
  margin-bottom: 16px;
}
.rules-list > li::before {
  content: counter(rule);
  position: absolute;
  right: 0;
  top: 4px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-label-md);
  color: var(--on-primary);
  background: var(--crimson);
  border-radius: 50%;
}

/* هيئة التحرير: بطاقة رئيس التحرير ومدير التحرير */
.board-lead {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 40px;
}
@media (min-width: 700px) { .board-lead { grid-template-columns: 1fr 1fr; } }

.person-card {
  background: var(--parchment);
  border: 1px solid var(--gold-light);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
}
.person-card .role {
  display: block;
  font-size: var(--text-label-md);
  color: var(--crimson);
  font-family: var(--font-display);
  margin-bottom: 4px;
}
.person-card .name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-headline-sm);
  font-weight: 700;
  color: var(--ink);
}

/* البريد الإلكتروني — في بطاقتَي الرئاسة وبطاقات الأعضاء معًا.
   يُعرض بمقاس الوسوم ولون ثانوي كي لا ينازع الاسم في الترتيب البصري،
   ولا يحمل خطًّا تحته إلا عند التحويم فلا تتكدّس البطاقة بالخطوط. */
.member-email {
  display: block;
  margin-top: 4px;
  font-family: var(--font-text);
  font-size: var(--text-label-sm);
  line-height: var(--leading-label);
  color: var(--ink-soft);
  text-decoration: none;
  word-break: break-all;   /* بريد طويل يلتفّ ولا يوسّع البطاقة */
}
.member-email:hover,
.member-email:focus {
  color: var(--crimson);
  text-decoration: underline;
}

/* البطاقتان متمركزتان، فيتمركز بريدهما معهما */
.person-card .member-email { text-align: center; }

/* أمّا بطاقات الأعضاء فمحاذاتها إلى يمين السطر كسائر نصوصها،
   مع إبقاء اتّجاه البريد نفسه لاتينيًّا (dir="ltr" في الشيفرة) */
.board-grid .member-email { text-align: right; }

/* شبكة أعضاء هيئة التحرير */
.board-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 640px)  { .board-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .board-grid { grid-template-columns: 1fr 1fr 1fr; } }

.board-grid li {
  background: var(--cream);
  border: 1px solid var(--line);
  border-right: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 0;
}
.board-grid .member-name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-body-md);
  color: var(--ink);
}
.board-grid .member-org {
  display: block;
  font-size: var(--text-label-md);
  color: var(--ink-soft);
}


/* ==========================================================================
   ٩) صفحة الأرشيف
   ========================================================================== */

/* مربّع البحث الفوري */
.search-box { margin-bottom: 32px; }

.search-box label {
  display: block;
  font-family: var(--font-display);
  margin-bottom: 8px;
  color: var(--ink-soft);
}

.search-field {
  position: relative;
  max-width: 620px;
}

.search-field input[type="search"] {
  width: 100%;
  font-family: var(--font-text);
  font-size: var(--text-body-md);
  padding: 12px 16px;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--gold-light);
  border-radius: var(--radius-sm);
}
.search-field input[type="search"]::placeholder { color: var(--placeholder); }

/* عدّاد النتائج */
.search-status {
  margin-top: 8px;
  font-size: var(--text-label-md);
  color: var(--ink-soft);
  max-width: 620px;
}

/* ترويسة العدد داخل الأرشيف */
.issue {
  margin-bottom: 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.issue-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
  background: var(--parchment);
  padding: 20px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) {
  .issue-head { grid-template-columns: 150px 1fr; }
}

.issue-head .cover-frame { max-width: 150px; margin: 0; }
.issue-head h2 { margin-bottom: .15em; color: var(--crimson); }
.issue-head .issue-meta {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-label-md);
}

/* زرّ تحميل العدد كاملًا أسفل بياناته */
.issue-head-action { margin-top: 12px; }

/* قائمة بحوث العدد */
.issue-body { padding: 4px 0; background: var(--page-bg); }

.article-item {
  padding: 20px;
  border-bottom: 1px solid var(--line);
}
.article-item:last-child { border-bottom: 0; }

/* رقم ترتيب البحث + عنوانه */
.article-item .article-title {
  font-size: var(--text-body-lg);
  line-height: 1.75;
  margin: 0 0 8px;
}
.article-item .article-title a { color: var(--ink); }
.article-item .article-title a:hover { color: var(--crimson); }

@media (min-width: 900px) {
  .article-item .article-title { font-size: var(--text-headline-sm); }
}

/* سطور بيانات البحث (المؤلف، المحقق، الانتساب، الصفحات) */
.article-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  font-size: var(--text-label-md);
  color: var(--ink-soft);
}
.article-meta li { margin-bottom: 4px; }
.article-meta .label {
  color: var(--ink);
  font-weight: 700;
  margin-left: 8px;
}

/* أسماء المؤلفين المتعدّدين */
.authors { display: inline; }
.authors .sep { color: var(--gold); margin-inline: 4px; }

/* الملخّص مع زرّ "قراءة المزيد" */
.abstract { margin-bottom: 12px; }

.abstract-text {
  margin: 0;
  color: var(--ink);
  text-align: justify;

  /* يقصّ النص إلى ثلاثة أسطر فقط */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* عند التوسيع يظهر النص كاملًا */
.abstract.is-expanded .abstract-text {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.abstract-toggle {
  background: none;
  border: 0;
  padding: 4px 0;
  margin-top: 0px;
  color: var(--crimson);
  font-family: var(--font-display);
  font-size: var(--text-label-md);
  cursor: pointer;
  text-decoration: underline;
}
.abstract-toggle:hover { color: var(--crimson-dark); }

/* الكلمات المفتاحية */
.keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.keywords li {
  margin: 0;
  font-size: var(--text-label-sm);
  padding: 4px 12px;
  background: var(--parchment);
  border: 1px solid var(--line);
  border-radius: 9999px;
  color: var(--ink-soft);
}

/* صفّ أزرار البحث */
.article-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* رابط تحميل العدد كاملًا — أسفل قائمة البحوث */
.issue-foot {
  background: var(--parchment);
  border-top: 1px solid var(--line);
  padding: 20px 20px;
  text-align: center;
}

/* رسالة "لا توجد نتائج" للبحث */
.no-results {
  display: none;
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-soft);
  background: var(--cream);
  border: 1px dashed var(--gold-light);
  border-radius: var(--radius);
}

/* العناصر المخفيّة بواسطة البحث */
.is-hidden { display: none !important; }


/* ==========================================================================
   ١٠) صفحة البحث المفردة
   ========================================================================== */

.article-page .article-hero {
  background: var(--parchment);
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
  margin-bottom: 32px;
}
.article-page .article-hero h1 {
  font-size: var(--text-headline-md);
  line-height: 1.7;
  margin-bottom: .4em;
}
@media (min-width: 900px) {
  .article-page .article-hero h1 { font-size: var(--text-headline-lg); line-height: var(--leading-hl-lg); }
}

.article-page .abstract-full {
  text-align: justify;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}


/* ==========================================================================
   ١١) صفحة التواصل
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 860px) {
  .contact-grid { grid-template-columns: 1.3fr 1fr; gap: 40px; }
}

.form-row { margin-bottom: 16px; }

.form-row label {
  display: block;
  font-family: var(--font-display);
  margin-bottom: 8px;
  color: var(--ink);
}
.form-row .req { color: var(--error); }

.form-row input,
.form-row textarea {
  width: 100%;
  font-family: var(--font-text);
  font-size: var(--text-body-md);
  line-height: 1.8;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--gold-light);
  border-radius: var(--radius-sm);
  padding: 12px 12px;
}
.form-row textarea { min-height: 170px; resize: vertical; }

.form-note {
  font-size: var(--text-label-md);
  color: var(--ink-soft);
  margin-top: 4px;
}

/* بطاقات بيانات التواصل */
.contact-info { list-style: none; padding: 0; margin: 0; }
.contact-info li {
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
}
.contact-info li:last-child { border-bottom: 0; }
.contact-info .ci-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-label-md);
  color: var(--ink-soft);
}
.contact-info .ci-value {
  font-size: var(--text-body-md);
  direction: ltr;              /* الأرقام والبريد تُقرأ من اليسار */
  display: inline-block;
  unicode-bidi: embed;
}
.contact-info .ci-value[lang="ar"] { direction: rtl; }


/* ==========================================================================
   ١٢) صفحة الخطأ 404
   ========================================================================== */

.error-page {
  text-align: center;
  padding: 72px 0 40px;
}
.error-page .code {
  font-family: var(--font-display);
  font-size: var(--text-numeral);
  line-height: 1;
  color: var(--gold);
  margin: 0 0 8px;
}


/* ==========================================================================
   ١٣) أدوات مساعدة
   ========================================================================== */

.text-center { text-align: center; }
.mt-0  { margin-top: 0; }
.mb-0  { margin-bottom: 0; }
.mb-24 { margin-bottom: 24px; }

/* نص مقروء للقارئات الشاشية فقط (غير مرئي على الشاشة) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   ١٤) تنسيق الطباعة (عند طبع الصفحة على ورق)
   ========================================================================== */

@media print {
  .site-nav, .nav-toggle, .site-footer,
  .search-box, .article-actions, .btn { display: none !important; }

  /* الترويسة داكنة على الشاشة، فنُبيّضها كي لا تُهدر حبر الطابعة */
  .site-header { background: #fff; border-bottom: 1px solid #000; }
  .brand-text .brand-name,
  .brand-text .brand-tag { color: #000; }
  .brand img { background: none; border: 0; padding: 0; }

  body { font-size: 12pt; background: #fff; }
  .abstract-text { -webkit-line-clamp: unset; display: block; overflow: visible; }
  a { color: #000; text-decoration: none; }
}


/* ==========================================================================
   ١٥) تحسينات اللمس على الهاتف والآيباد
   --------------------------------------------------------------------------
   الإصبع أعرض من مؤشِّر الفأرة، ولذلك نوسّع مساحة الضغط حول الروابط
   الصغيرة (روابط التذييل) حتى تبلغ نحو 44 بكسل، وهو الحدّ
   الذي توصي به إرشادات آبل وغوغل لسهولة الضغط بالإصبع.
   ========================================================================== */

/* روابط التذييل: مساحة ضغط أوسع */
.footer-col ul li {
  margin-bottom: 0;
}
.footer-col ul li a {
  display: inline-block;
  padding: 9px 0;
}

/* على الشاشات اللمسية نمنع تصغير الحروف عند تدوير الجهاز */
@media (max-width: 1024px) {
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
}

/* الصور والأغلفة لا تتجاوز عرض الشاشة أبدًا */
img, .cover-frame { max-width: 100%; }