/* ═══════════════════════════════════════════════════════════
   site-chrome.css — لایهٔ دسترس‌پذیری و حالت‌های تعاملی مشترک
   جفتش: assets/site-chrome.js

   چرا این فایل هست:
   در بازبینی، هیچ‌کدام از فایل‌های CSS مشترک حالت focus-visible
   نداشتند. یعنی کسی که با کیبورد (Tab) در سایت حرکت می‌کند
   هیچ نشانه‌ای نمی‌بیند که الان روی چه چیزی ایستاده است.
   همچنین لینک «پرش به محتوا» وجود نداشت، پس کاربر کیبورد و
   اسکرین‌ریدر مجبور بود هر بار کل منو را رد کند.

   ترتیب لود: بعد از site-nav.css و site-footer.css
   ═══════════════════════════════════════════════════════════ */

/* ── حلقهٔ فوکوس ──
   :focus-visible فقط برای کیبورد فعال می‌شود، پس کلیک ماوس
   حلقه نمی‌سازد و ظاهر طراحی‌شدهٔ صفحه به‌هم نمی‌ریزد. */
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-brand-350, rgb(163, 132, 255));
  outline-offset: 3px;
  border-radius: var(--radius-sm, 6px);
}

/* روی پس‌زمینهٔ تیره، بنفش روشن کم‌کنتراست می‌شود؛ سفید می‌گذاریم */
[data-nav="dark"] :where(a, button, [role="button"]):focus-visible,
.nav-outer nav:not(.is-light) :where(a, button):focus-visible,
footer :where(a, button):focus-visible {
  outline-color: var(--color-text-on-dark, rgb(247, 249, 253));
}

/* ── لینک پرش به محتوا ──
   تا وقتی فوکوس نگیرد دیده نمی‌شود، ولی حذف هم نشده که
   اسکرین‌ریدر بتواند پیدایش کند. */
.skip-link {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  padding: var(--space-3, 12px) var(--space-5, 20px);
  background: var(--color-brand-450, rgb(101, 50, 255));
  color: var(--color-text-on-dark, #f7f9fd);
  font-family: "Vazirmatn", system-ui, sans-serif;
  font-size: var(--font-size-sm, 14px);
  font-weight: 600;
  text-decoration: none;
  border-bottom-left-radius: var(--radius-md, 12px);
  transform: translateY(-120%);
  transition: transform var(--transition-fast, 150ms ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline-offset: -4px;
}

/* ── منوی جاری ──
   site-nav.css کلاس .active را استایل می‌کند. این قاعده همان
   ظاهر را به aria-current هم می‌دهد تا اگر جایی کلاس جا افتاد،
   نشانهٔ صفحهٔ جاری از بین نرود. */
.nav-links a[aria-current="page"] {
  font-weight: 600;
}

/* ── موبایل: نوار اسکرول افقی منو ──
   الگوی موجود در site-nav.css حفظ شده؛ فقط اسکرول را نرم و
   قابل‌کنترل می‌کنیم تا آیتم جاری وسط کادر بایستد. */
@media (max-width: 900px) {
  .nav-outer:not(.has-mobile-alt) .nav-links {
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
  }

  .nav-outer:not(.has-mobile-alt) .nav-links li {
    scroll-snap-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-outer .nav-links { scroll-behavior: auto }
  .skip-link { transition: none }
}

/* Improve informational text contrast without changing decorative opacity. */
body .qb-note{color:rgba(22,11,51,.72)}

/* Preserve page position while the mobile menu is open. */
html.nav-scroll-locked{overflow:hidden!important;scroll-behavior:auto!important}

/* Touch devices use the browser's native scrollbar. */
@media(any-pointer:coarse){
  html{scrollbar-width:auto!important}
  html::-webkit-scrollbar{display:revert!important;width:revert!important;height:revert!important}
  html::-webkit-scrollbar-thumb{background:revert!important;border-radius:revert!important}
}

.tm-toc-toggle{display:none}
.tm-toc ol[hidden]{display:none!important}
@media(max-width:900px){
  .tm-toc.is-collapsible .tm-toc-h{display:none}
  .tm-toc-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;min-height:44px;padding:8px 14px;border:0;background:transparent;
    color:var(--tm-ink-2);font:600 14px/1.8 var(--body,"Vazirmatn",sans-serif);text-align:start;cursor:pointer}
  .tm-toc-chevron{font-size:20px;line-height:1;transition:transform .2s ease}
  .tm-toc-toggle[aria-expanded="true"] .tm-toc-chevron{transform:rotate(180deg)}
}
@media(prefers-reduced-motion:reduce){.tm-toc-chevron{transition:none}}