/*
=========================================================
MAHEDI ALTAYS — TYPE FLOOR
=========================================================

المشكلة

قِيست الصفحة الرئيسية فوُجد فيها ٤٨ عنصرًا نصيًّا بحجم
أقلّ من ١٣ بكسل على الحاسوب، و٨٠ على الهاتف. أصغرها ١٠.

وهذه أحجام وُرثت من قوالب لاتينية تستعملها للسطور الثانوية
— «المزيد»، وعدد الملفات، وشارات الأقسام. وهي في اللاتينية
مقروءة على مضض، وفي العربية غير مقروءة أصلًا:

  · العربية فيها نقاط تحت الحرف وفوقه، وتشكيل يعلوه.
    وعند ١٠ بكسل تلتحم النقطة بالنقطة فتصير «ب» و«ت»
    و«ث» شكلًا واحدًا.

  · وحروفها متّصلة، فالوصلة نفسها تحتاج بكسلات لتُرى.

القاعدة

    لا نصّ تحت ١٣ بكسل. والعربية تبدأ من ١٤ حيث يكون
    النصّ عنوانًا صغيرًا لا هامشًا.

لماذا طبقة منفصلة

الأحجام الصغيرة مبثوثة في ستة ملفات، وبعضها بـ!important،
وبعضها داخل استعلامات وسائط. وتعديلها في مواضعها يعني ستّ
جراحات في ملفات يعمل كلٌّ منها وحده — والخطأ فيها صامت.

وهنا موضع واحد يُقرأ كقاعدة: ما تحت الحدّ يُرفع إليه.

=========================================================
*/


/* ---------------------------------------------------------
   1 — الهوامش والسطور الثانوية
   --------------------------------------------------------- */

.card-more,
.focus-grid small,
.timeline small,
.interest-tags .interest-card > small,
.site-quick-nav__label,
.site-menu__title,
.site-menu__hint{
  font-size:13px;
}

.doc-card__meta,
.doc-card__meta i,
.doc-card__latest,
.doc-card__latest i{
  font-size:13px !important;
}


/* ---------------------------------------------------------
   2 — عناوين الأقسام الصغيرة

   هذه ليست هوامش: هي ما يقول للزائر أين هو من الصفحة.
   فكانت أصغر ممّا تستحق.
   --------------------------------------------------------- */

.section-label,
.eyebrow{
  font-size:13px;
}

.magazine-home-eyebrow,
.magazine-badge,
.magazine-meta{
  font-size:12.5px;
}

.doc-card__private-badge{
  font-size:12px !important;
}


/* ---------------------------------------------------------
   3 — مبدّل اللغة
   --------------------------------------------------------- */

.language-switcher__current-label{
  font-size:13px;
}

.language-switcher__current-short,
.language-switcher__menu button small,
.language-switcher__menu button > span{
  font-size:12px;
}


/* ---------------------------------------------------------
   4 — الهاتف

   الاستعلامات في base.css تُصغّر هذه العائلات مرة أخرى عند
   الشاشات الضيقة. والهاتف هو حيث تُقرأ الصفحة فعلًا، فلا
   معنى لأن يكون خطّه أصغر لا أكبر.
   --------------------------------------------------------- */

@media (max-width:820px){

  .section-label,
  .eyebrow{
    font-size:13px;
  }

  .card-more,
  .focus-grid small,
  .timeline small,
  .facts-grid span,
  .focus-grid span,
  .interest-tags .interest-card > span,
  .timeline span,
  .social-grid span{
    font-size:13px;
  }

  .nav-btn{
    font-size:13px;
  }
}


/* ---------------------------------------------------------
   5 — العربية تبدأ أعلى

   نفس العنصر، ونفس الموضع — وحجمان. لأن الخطّين مختلفان في
   كثافة ما يحملانه في المساحة نفسها.
   --------------------------------------------------------- */

html[dir="rtl"] .section-label,
html[dir="rtl"] .eyebrow{
  font-size:14px;
}

html[dir="rtl"] .card-more,
html[dir="rtl"] .focus-grid small,
html[dir="rtl"] .timeline small,
html[dir="rtl"] .interest-tags .interest-card > small,
html[dir="rtl"] .site-quick-nav__label,
html[dir="rtl"] .site-menu__title,
html[dir="rtl"] .site-menu__hint{
  font-size:13.5px;
}

html[dir="rtl"] .doc-card__meta,
html[dir="rtl"] .doc-card__latest{
  font-size:13.5px !important;
}


/* ---------------------------------------------------------
   6 — ما بقي تحت الحدّ

   سطر تحت الاسم في الترويسة، وعناوين أعمدة التذييل. كلاهما
   ١١ بكسل — أصغر من أن يُقرأ بالعربية، وكلاهما يُقرأ فعلًا:
   الأول يقول ما هذا الموقع، والثاني يقول أين تجد ماذا.
   --------------------------------------------------------- */

.brand small{
  font-size:12px;
}

.site-footer-col strong{
  font-size:12.5px;
}

html[dir="rtl"] .brand small{
  font-size:12.5px;
}

html[dir="rtl"] .site-footer-col strong{
  font-size:13px;
}