/* ═══════════════════════════════════════════════════════════════
   سوییچِ زبان — `kariz-lang-*`

   فقط استایل؛ هیچ رفتاری اینجا نیست. باز و بسته شدن از
   `bootstrap` (data-bs-toggle="dropdown") می‌آید.

   ⚠️ **همهٔ قاعده‌های این جزء اینجا هستند** — نه در `custom.css` و نه در
   `custom.rtl.css`. قبلاً قاعدهٔ موبایل آنجا بود و دو فایل دربارهٔ یک
   عنصر حرف می‌زدند؛ نتیجه‌اش این بود که قاعدهٔ `[dir="rtl"]` پایین‌تر
   از قاعدهٔ `static` می‌نشست و `right: 0` برنده می‌شد.

   ترتیبِ بارگذاری این فایل **بعد** از تم است، پس هرچه اینجا بنویسیم
   برنده می‌شود مگر `!important` بگذاریم.
   ═══════════════════════════════════════════════════════════════ */

.kariz-lang-switcher {
  position: relative;
}

.kariz-lang-current {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  background: transparent;
}

.kariz-lang-code {
  font-family: var(--bs-font-sans-serif, system-ui, sans-serif);
  font-size: 0.85em;
  /* کدِ زبان همیشه چپ‌به‌راست است، حتی در صفحهٔ راست‌به‌چپ. */
  direction: ltr;
  unicode-bidi: isolate;
}

.kariz-lang-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.kariz-lang-item.active {
  font-weight: 700;
}

/* فاصلهٔ کم بین «fa» و «فارسی» تا آیتم‌ها بلند نشوند */
.kariz-lang-name {
  white-space: nowrap;
}

/* در حالتِ RTL ترتیبِ بصریِ آیتم‌ها باید با زبانِ خودِ متن بخواند،
   ولی کدِ زبان همیشه اول می‌ماند. */
[dir="rtl"] .kariz-lang-item {
  direction: ltr;
}

[dir="rtl"] .kariz-lang-name {
  direction: rtl;
  unicode-bidi: isolate;
}

/* فهرستِ کشویی در حالتِ RTL از سمتِ چپ باز شود، وگرنه از لبهٔ صفحه
   بیرون می‌زند. */
[dir="rtl"] .kariz-lang-switcher .dropdown-menu {
  right: 0;
  left: auto;
}

/* ───────────────────────────────────────────────────────────────
   منوی جمع‌شده (زیرِ ۹۹۲px)

   در حالتِ فشرده منو **در جریانِ عمودی** باز می‌شود — درست زیرِ دکمه،
   مثل بقیهٔ آیتم‌های منو. همین کار را Bootstrap هم می‌کند:

       .navbar-nav .dropdown-menu { position: static; }

   ## چرا شناور نبود

   نسخهٔ اول `position: absolute` می‌داد. ولی کلاسِ `dropdown-menu-end`
   روی منو می‌ماند و Bootstrap `inset-inline-end` می‌گذارد، پس منو به
   اندازهٔ عرضش از دکمه می‌رفت و وسطِ محتوای صفحه می‌افتاد — کاربر
   «چیزی باز نشد» می‌دید و بعد که صفحه را بزرگ می‌کرد، منو را سرِ جایش
   می‌دید.

   ## دو چیز که هر دو لازم‌اند

   ۱) `align-self: start` روی `li` — چون `.navbar-nav` در موبایل flex
      است و آیتم‌هایش کش می‌آیند. بدونش منوی **دو‌گزینه‌ای** زبان کلِ
      عرضِ صفحه را می‌پوشاند (۶۹۶px به‌جای ۱۱۱px) و آیتم‌های زیرش را
      می‌پوشاند. ربطی به شناور بودن ندارد.

   ۲) خاموش‌کردنِ فیلدهای جای‌گیری — چون `dropdown-menu-end` و قاعدهٔ
      `[dir="rtl"]` بالا هر دو `right` می‌گذارند و برنده می‌شوند.

   دسکتاپ دست‌نخورده می‌ماند: همه چیز داخلِ `@media` است و Bootstrap
   آنجا خودش منو را کنارِ دکمه باز می‌کند.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  /*
    ⚠️ selector باید از `[dir="rtl"] .kariz-lang-switcher .dropdown-menu`
    **قوی‌تر یا هم‌ارز** باشد، وگرنه قاعدهٔ بالا می‌برد.

        [dir="rtl"] .kariz-lang-switcher .dropdown-menu   → ۰٫۳٫۰
        .navbar-nexora .kariz-lang-menu                   → ۰٫۲٫۰  ضعیف‌تر

    برای همین `right: auto` من بی‌اثر بود و اندازه‌گیری `right: 0px`
    نشان می‌داد. راه‌حل: همان صفتِ `dir` را در selector بیاوریم تا
    specificity برابر شود و چون بعدتر آمده، برنده شود.
  */
  [dir="rtl"] .navbar-nexora .kariz-lang-menu,
  [dir="ltr"] .navbar-nexora .kariz-lang-menu {
    position: static;
    inset-inline-start: auto;
    inset-inline-end: auto;
    left: auto;
    right: auto;
    z-index: auto;
    min-width: 0;
    /* مثل بقیهٔ آیتم‌های منو: یک واحدِ عمودی، بدون حاشیهٔ اضافه. */
    margin-top: 0.25rem;
  }

  [dir="rtl"] .navbar-nexora .kariz-lang-switcher,
  [dir="ltr"] .navbar-nexora .kariz-lang-switcher {
    align-self: start;
  }
}