/* static/css/i18n_ltr.css
 * =============================================================================
 * طبقة اتجاه LTR — تنشط فقط على الصفحات الإنجليزية (html[dir="ltr"]).
 * -----------------------------------------------------------------------------
 * التصميم الأساس مبنيّ فيزيائياً بالعربية (RTL): الشريط الجانبي يمين، وحشوة
 * الجسم يمنى. هذه الطبقة تعكس الإطار البنيوي الحامل فقط (الجسم، الشريط الجانبي،
 * أزرار إغلاق النوافذ، واتجاه النوافذ) ليقرأ الإنجليزي طبيعياً يساراً←يميناً.
 * تُحمَّل بعد بقية الأوراق فتتفوّق عليها بالترتيب دون !important إلا حيث لزم
 * لمجاراة تجاوزات media الأصلية. الضبط الدقيق لكل مكوّن (شارات، أسهم) تحسينٌ
 * لاحق يتبع الحاجة.
 * =========================================================================== */

/* الجذر واتجاه الكتابة العام */
html[dir="ltr"] body {
  direction: ltr;
  /* تبديل حشوة الشريط الجانبي من اليمين إلى اليسار (الأساس 61px) */
  padding-right: 0;
  padding-left: 61px;
}

/* الشريط الجانبي: من اليمين إلى اليسار + عكس الحدّ الفاصل */
html[dir="ltr"] .khaliq-sidebar {
  right: auto;
  left: 0;
  border-left: none;
  border-right: var(--glass-border);
}

/* النوافذ المنبثقة: إعادة الاتجاه للإنجليزية + نقل زر الإغلاق إلى اليمين */
html[dir="ltr"] .donate-modal-content,
html[dir="ltr"] .contact-modal-content {
  direction: ltr;
}
html[dir="ltr"] .donate-modal-close,
html[dir="ltr"] .contact-modal-close {
  left: auto;
  right: 12px;
}

/* حاويات المحتوى الرئيسة تتبع اتجاه الصفحة */
html[dir="ltr"] .container,
html[dir="ltr"] main,
html[dir="ltr"] header,
html[dir="ltr"] footer {
  direction: ltr;
}

/* قوائم النصّ: عكس الحشوة الاستهلالية من اليمين إلى اليسار */
html[dir="ltr"] ul {
  padding-right: 0;
  padding-left: 1.5em;
}

/* منسدلة اختيار المدينة تتبع الاتجاه الإنجليزي */
html[dir="ltr"] .cp-dropdown,
html[dir="ltr"] .cp-dropdown-inner {
  direction: ltr;
}

/* أسهم تنقّل «اليوم»: تنعكس أفقياً لتشير للاتجاه الصحيح في LTR
   (السابق ← يسار، التالي → يمين). */
html[dir="ltr"] .today-nav .fa-angle-right,
html[dir="ltr"] .today-nav .fa-angle-left {
  transform: scaleX(-1);
}

/* ————————————————— إصلاحات إضافية للاتجاه الإنجليزي ————————————————— */

/* (1) الشريط العلوي: النصوص الإنجليزية أعرض من العربية. نُبقيه متوسّطاً (كالعربي)
   لكن بـ«safe center» حتى لا يُقصّ الطرف الأيسر حين لا يتّسع؛ مع تمرير أفقي عند
   الحاجة وتصغير طفيف للفجوة والخط، فيتوسّط إن اتّسع ويُمرَّر بلا قصٍّ إن لم يتّسع. */
html[dir="ltr"] .topbar-grid {
  justify-content: safe center;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 10px;
  width: 96%;
}
html[dir="ltr"] .topbar-grid .slot,
html[dir="ltr"] .topbar-grid .time-toggle-btn {
  font-size: 0.92em;
}

/* (2) بطاقة تقاويم «اليوم»: القيمة تُحاذى لطرف الصفّ المقابل للتسمية.
   في RTL القيمة يساراً (بعيدة عن التسمية يميناً)؛ في LTR يجب أن تُحاذى يميناً
   لتبتعد عن التسمية (يساراً) بدل أن تلتصق بها. */
html[dir="ltr"] .khaliq-info-box .tc-value {
  text-align: right;
}

/* (3) أسهم تنقّل الشهر: الأيقونات ثابتة (السابق=chevron-right)، فتنعكس دلالتها
   في LTR. نقلبها أفقياً ليصير السابق ← يسار والتالي → يمين. */
html[dir="ltr"] .cm-nav-arrow i {
  transform: scaleX(-1);
}

/* (4) أسهم تنقّل صفحة الأرض: يُختار اتجاه الأيقونة حتمياً في controls.js حسب
   اللغة (لا قلب CSS للأيقونة تفادياً للقلب المزدوج). لكن لوحة التحكّم
   (.earth-controls) تفرض direction:rtl في earth.css لاستعادة اتجاه النص العربي؛
   فتحت LTR يجب ردّها إلى ltr وإلا انعكس ترتيب زرّي السابق/التالي بصرياً فأشارت
   الأيقونتان للداخل. هذا ضبطُ اتجاهٍ للحاوية لا قلبٌ للأيقونة. */
html[dir="ltr"] .earth-controls {
  direction: ltr;
}

/* ————————————————————— نقاط الاستجابة (تُطابق media الأصلية) ————————————————————— */
@media (max-width: 700px) {
  html[dir="ltr"] body {
    padding-right: 0 !important;
    padding-left: 49px !important;
  }
}
@media (max-width: 480px) {
  html[dir="ltr"] body {
    padding-right: 0 !important;
    padding-left: 45px !important;
  }
}
@media (max-width: 380px) {
  html[dir="ltr"] body {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}