/* ═══════════════════════════════════════════════════════════
   site-nav.css — هدر مشترک سایت آرسس
   وابستگی: فونت Vazirmatn، و (اختیاری) توکن --color-brand-450/500
   جفتش: assets/site-nav.js
   ─────────────────────────────────────────────────────────
   نحوهٔ استفاده:
   1) <link rel="stylesheet" href="assets/site-nav.css"> در <head>
   2) مارک‌آپ هدر را عیناً کپی کن (.nav-outer > nav)
   3) روی سکشن‌های صفحه data-nav="dark" یا "light" بگذار
   4) <script src="assets/site-nav.js" defer></script> قبل از </body>
   ═══════════════════════════════════════════════════════════ */

.nav-outer {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: calc(100% - 40px);
  max-width: 1080px
}

/* سلکتور عمداً به .nav-outer محدود شده تا این فایل روی هر <nav>
   دیگری در صفحه (فوتر، سایدبار، breadcrumb) اثر نگذارد */
.nav-outer nav {
  /* ── تم پیش‌فرض: تیره ── */
  --nav-bg: rgba(10, 9, 22, .20);
  --nav-border: rgba(255, 255, 255, .07);
  --nav-ink: #fff;
  --nav-dim: rgba(255, 255, 255, .65);
  --nav-hover-bg: rgba(255, 255, 255, .2);
  --nav-hover-ink: #fff;
  --nav-active-bg: rgba(255, 255, 255, .1);
  --nav-active-ink: #fff;
  /* پنل منوی موبایل: برخلاف نوار شیشه‌ای، باید مات باشد تا متن پشتش خوانده نشود */
  --nav-panel-bg: rgba(12, 11, 26, .96);

  display: flex;
  align-items: center;
  background: var(--nav-bg);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--nav-border);
  border-radius: 14px;
  padding: 0 14px;
  height: 58px;
  gap: 2px;
  justify-content: space-between;
  color: var(--nav-ink);
  transition: background .35s ease, border-color .35s ease, color .35s ease
}

/* ── تم روشن (روی سکشن‌های [data-nav="light"]) ── */
.nav-outer nav.is-light {
  --nav-bg: rgba(216, 213, 231, .35);
  --nav-border: rgba(240, 234, 255, 1);
  --nav-ink: #06080F;
  --nav-dim: rgba(6, 8, 15, .72);
  --nav-hover-bg: rgba(255, 255, 255, .55);
  --nav-hover-ink: #06080F;
  --nav-active-bg: rgba(255, 255, 255, .55);
  --nav-active-ink: #06080F;
  --nav-panel-bg: rgba(252, 251, 255, .97)
}

/* ── جلوگیری از پرش تم هنگام لود ──
   تم پیش‌فرض CSS تیره است، پس در صفحات روشن یک فریم تیره دیده می‌شد.
   راه‌حل دو بخشی:
   ۱) صفحاتی که بالای‌شان روشن است، کلاس is-light را مستقیم در
      مارک‌آپ دارند تا از همان اولین رنگ‌آمیزی درست باشند.
   ۲) کلاس nav-boot ترنزیشن را تا اولین تصمیم JS خاموش می‌کند، تا اگر
      لازم شد اصلاح شود (مثلاً صفحه وسط اسکرول لود شده باشد) آن اصلاح
      آنی باشد نه یک فید ۳۵۰ میلی‌ثانیه‌ای. site-nav.js آن را برمی‌دارد. */
.nav-outer nav.nav-boot,
.nav-outer nav.nav-boot a,
.nav-outer nav.nav-boot .nav-logo img {
  transition: none !important
}

/* حالت اسکرول‌شده — فقط تم تیره */
.nav-outer nav:not(.is-light).is-scrolled {
  --nav-bg: rgba(8, 7, 20, .32)
}

/* ── لوگو ── */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
  /* Shared layout: logo at the right edge in both languages. */
  order: 1
}

.nav-logo-svg {
  height: 26px;
  width: auto
}

/* جابه‌جایی لوگو بین دو تم.
   اگر صفحه‌ای فقط یک لوگو دارد (بدون .logo-dark/.logo-light) این قوانین بی‌اثرند */
.nav-logo .logo-light {
  display: none
}

.nav-outer nav.is-light .nav-logo .logo-dark {
  display: none
}

.nav-outer nav.is-light .nav-logo .logo-light {
  display: block
}

/* ── لینک‌ها ── */
.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 2px;
  order: 2;
  margin-inline: auto
}

.nav-links a {
  text-decoration: none;
  color: var(--nav-dim);
  font-size: 13.5px;
  font-family: "Vazirmatn", sans-serif;
  padding: 7px 13px;
  border-radius: 9px;
  transition: color .35s ease, background .35s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px
}

.nav-links a:hover {
  color: var(--nav-hover-ink);
  background: var(--nav-hover-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px)
}

.nav-links a.active {
  color: var(--nav-active-ink);
  font-weight: 700;
  background: var(--nav-active-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px)
}

.nav-links a.active:hover {
  background: var(--nav-hover-bg);
  color: var(--nav-hover-ink)
}

.nav-dot {
  width: 7px;
  height: 7px;
  background: #22c55e;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0
}

.nav-chevron {
  opacity: .55;
  transition: transform .2s
}

/* ── سمت چپ ── */
.nav-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  order: 4;
  margin: 0
}

/* فallback رنگ برند: اگر صفحه‌ای توکن‌های _ds را لود نکرده باشد،
   دکمه بی‌رنگ نشود */
.lang-btn {
  /* یک <a> است، نه <button>: ناوبری واقعی می‌کند، پس باید با کلیکِ
     وسط و «باز کردن در تب جدید» کار کند و بدون جاوااسکریپت. */
  text-decoration: none;
  background: var(--color-brand-450, #6532FF);
  color: #fff;
  border: none;
  border-radius: 9px;
  width: 34px;
  height: 34px;
  font-size: 12.5px;
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s
}

.lang-btn:hover {
  background: var(--color-brand-500, #4612BE)
}

/* ── بریک‌پوینت موبایل ──
   تنها صفحات قاعده (ethics-base.css) بریک‌پوینت داشتند؛ index در ۳۹۰px
   سرریز می‌کرد و «درباره ما» بریده می‌شد.
   صفحاتی که ناوبری موبایل جداگانه دارند (#mobnav در هاب، #pipeMobnav در fdp)
   کلاس has-mobile-alt می‌گیرند و لینک‌هایشان پنهان می‌شود؛
   بقیه لینک‌ها را نگه می‌دارند و افقی اسکرول می‌شوند. */
@media (max-width: 900px) {
  .nav-outer {
    top: 10px;
    width: calc(100% - 20px)
  }

  .nav-outer nav {
    height: 52px;
    padding: 0 10px
  }

  .nav-links a {
    font-size: 12.5px;
    padding: 6px 9px
  }

  .nav-outer.has-mobile-alt .nav-links {
    display: none
  }

  .nav-outer:not(.has-mobile-alt) .nav-links {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to left, transparent 0, #000 14px);
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 14px)
  }

  .nav-outer:not(.has-mobile-alt) .nav-links::-webkit-scrollbar {
    display: none
  }
}

/* ═══════════════════════════════════════════════════════════
   منوی موبایل (≤۹۰۰px)

   قبلاً دو رفتار داشتیم و هر دو روی گوشی شکسته بودند:
     • صفحه‌های معمولی → لینک‌ها یک نوار اسکرول افقی می‌شدند؛ در ۳۷۵px
       فهرست ۴۰۷px بود و فقط ۲۷۲px دیده می‌شد، یعنی «پردازش اطلاعات
       مالی» از لبه بیرون می‌زد و ماسک محوش می‌کرد.
     • صفحه‌های has-mobile-alt (fdp و terminal) → لینک‌ها کلاً
       display:none می‌شدند، یعنی روی موبایل هیچ ناوبری‌ای نداشتند.

   حالا هر دو حالت یک دکمهٔ همبرگر می‌گیرند که همان <ul> را به‌صورت
   پنل کشویی زیر نوار باز می‌کند. لینک‌ها یک‌بار در HTML هستند و
   تکرار نمی‌شوند، پس tools/build-nav.cjs همچنان تنها منبع منوست.
   رنگ پنل از همان متغیرهای نوار می‌آید، پس با تم روشن/تیره هماهنگ می‌ماند.
   ═══════════════════════════════════════════════════════════ */

.nav-burger { display: none }

@media (max-width: 900px) {
  .nav-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    order: 3;              /* Between the logo and the language button. */
    margin-right: auto;
    width: 40px;
    height: 40px;
    padding: 0;
    flex-shrink: 0;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-burger:hover { background: var(--nav-hover-bg) }

  .nav-burger span {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: var(--nav-ink);
    transition: transform .26s ease, opacity .18s ease;
  }

  /* باز که شد، سه خط می‌شود ضربدر */
  .nav-outer.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
  .nav-outer.menu-open .nav-burger span:nth-child(2) { opacity: 0 }
  .nav-outer.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

  /* ── خودِ پنل ── */
  .nav-outer nav ul.nav-links {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    display: none;
    /* column-reverse و نه column: ترتیب DOM برای ردیفِ row-reverse دسکتاپ
       برعکس نوشته شده، پس در ستون باید دوباره برگردد تا «خانه» بالا بیفتد. */
    flex-direction: column-reverse !important;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 8px;
    overflow: visible;                   /* اسکرول افقی قبلی لغو می‌شود */
    mask-image: none;
    -webkit-mask-image: none;
    background: var(--nav-panel-bg);
    border: 1px solid var(--nav-border);
    border-radius: 14px;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 22px 54px -22px rgba(0, 0, 0, .6);
  }

  /* باز شدن — سلکتور عمداً از قانون has-mobile-alt قوی‌تر است تا
     fdp و terminal هم منو داشته باشند */
  .nav-outer.menu-open nav ul.nav-links { display: flex }

  /* نقطهٔ صفحهٔ جاری پشتِ نوشته بنشیند — در RTL یعنی سمت راستِ آن.
     نقطه در DOM بعد از متن است، پس با order منفی جلو می‌آید و چون
     جهت اصلی از راست شروع می‌شود، می‌افتد راستِ برچسب.

     در LTR هم همین order:-1 درست است: نقطه اول می‌آید، یعنی چپِ
     برچسب — که باز هم «پشتِ نوشته» است. پس استثنا لازم ندارد. */
  .nav-outer nav ul.nav-links a .nav-dot {
    order: -1;
    flex-shrink: 0;
  }

  .nav-outer nav ul.nav-links li { width: 100% }

  .nav-outer nav ul.nav-links a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* row و نه row-reverse: در RTL جهت اصلی از راست شروع می‌شود، پس
       flex-start یعنی راست. با row-reverse جهت برعکس می‌شد و همهٔ
       برچسب‌ها چپ‌چین می‌افتادند. !important چون روی لینکِ صفحهٔ جاری
       یک style اینلاین با row-reverse نشسته است. */
    flex-direction: row !important;
    text-align: right;
    gap: 8px;
    width: 100%;
    padding: 13px 14px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-burger span { transition: none }
}

/* ═══════════════════════════════════════════════════════════
   چیدمان LTR — صفحه‌های انگلیسی (<html lang="en" dir="ltr">)

   قاعدهٔ این مخزن: dir، flex-direction:*-reverse و order هر کدام
   یک بار جهت را برمی‌گردانند و دو برگشت همدیگر را خنثی می‌کنند.
   پس برای انگلیسی هیچ‌کدام را «ساده» نمی‌کنیم؛ صریح آینه‌شان می‌کنیم.

   سمت فارسی دست‌نخورده می‌ماند: همهٔ سلکتورهای این بلوک با
   [dir="ltr"] شروع می‌شوند.
   ═══════════════════════════════════════════════════════════ */

/* Keep the logo on the right and language switch on the left in LTR too.
   Link text and the dropdown retain their own reading direction. */
[dir="ltr"] .nav-outer nav { flex-direction: row-reverse }

/* فهرست دسکتاپ: row و نه row-reverse — tools/build-nav.cjs ترتیب
   DOM آیتم‌ها را برای LTR برعکس نمی‌کند. */
[dir="ltr"] .nav-outer nav ul.nav-links { flex-direction: row !important }

/* روی خودِ <a> چیزی تحمیل نمی‌شود. نقطهٔ صفحهٔ جاری باید «پشتِ»
   برچسب بنشیند و ترتیب DOM همیشه [برچسب، نقطه] است، پس همان
   row-reverse ای که build-nav اینلاین می‌نویسد در RTL نقطه را سمت
   راست و در LTR سمت چپ می‌گذارد. یک مقدار، هر دو زبان. */

@media (max-width: 900px) {
  /* پنل موبایل: ترتیب DOM در LTR طبیعی است (برعکس نشده)، پس
     column درست است و column-reverse فهرست را سروته می‌کرد. */
  [dir="ltr"] .nav-outer nav ul.nav-links {
    flex-direction: column !important
  }

  /* در LTR جهت اصلی از چپ شروع می‌شود، پس متن چپ‌چین می‌شود.
     نقطه همان order:-1 پایه را نگه می‌دارد و چپِ برچسب می‌نشیند. */
  [dir="ltr"] .nav-outer nav ul.nav-links a {
    text-align: left
  }
}

/* ═══════════════════════════════════════════════════════════
   فهرست وسطِ نوار (فقط دسکتاپ)

   لوگو و دکمهٔ زبان سمت چپ می‌مانند و فهرست دقیقاً وسطِ نوار
   می‌نشیند. با فلکس نمی‌شد: برای وسط‌چین‌شدنِ آیتمِ میانی باید دو
   طرفش هم‌عرض باشند، ولی سمت راست هیچ آیتمی نیست، پس فهرست به
   لبهٔ راست می‌چسبید. جای‌گیری مطلق این وابستگی را قطع می‌کند.

   مرجعِ left:50% خودِ .nav-outer است که position:fixed دارد؛ عمداً
   position:relative به <nav> اضافه نشد تا مرجعِ پنلِ موبایل عوض
   نشود (آن هم همین <ul> است و top:calc(100% + 8px) دارد).

   زبان‌خنثی است: وسط در RTL و LTR یک جاست.

   ۹۰۱px به بالا، چون زیر آن همین <ul> پنلِ کشویی همبرگر می‌شود و
   جای‌گیری خودش را دارد — رفتار ریسپانسیو دست‌نخورده می‌ماند. */
@media (min-width: 901px) {
  .nav-outer nav ul.nav-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
  }
}

/* Mobile language selection lives at the bottom of the expanded menu. */
.nav-mobile-language { display: none }
@media (max-width: 900px) {
  .nav-outer nav .nav-left { display: none }
  .nav-outer nav ul.nav-links .nav-mobile-language {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    order: 1;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--nav-border);
  }
  /* Persian links use column-reverse, so the footer needs the first order. */
  [dir="rtl"] .nav-outer nav ul.nav-links .nav-mobile-language {
    order: -1;
  }
  .nav-language-label {
    padding-inline: 14px;
    font-size: 13px;
    color: var(--nav-dim);
  }
  .nav-language-choices {
    display: flex;
    direction: rtl;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--nav-border);
    border-radius: 12px;
  }
  .nav-outer nav ul.nav-links .nav-language-choice {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 76px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--nav-dim);
    text-decoration: none;
  }
  .nav-outer nav ul.nav-links .nav-language-choice.is-current {
    background: var(--nav-active-bg);
    color: var(--nav-active-ink);
    font-weight: 700;
  }
}