/* ==========================================================================
   typography.css — مقیاس RTL، تیتر، متن، عدد
   Vazirmatn فقط دو وزن: ۴۰۰ و ۷۰۰. هیچ وزن ساختگی‌ای مجاز نیست.
   ========================================================================== */

@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font: 'Vazirmatn', 'Segoe UI', Tahoma, system-ui, sans-serif;

  /* مقیاس — از ماکاپ اندازه‌گیری شده، نه انتخاب‌شده.
     نسخه‌ی قبلی متن بدنه را ۱۷px گرفته بود «برای خوانایی فارسی» و همان
     باعث می‌شد صفحه ۱.۴ برابر ماکاپ بلند شود. ماکاپ مرجع است. */
  --fs-h1:      clamp(28px, 4.4vw, 46px);
  --fs-h2:      clamp(20px, 2.9vw, 28px);
  --fs-h3:      clamp(16px, 2.1vw, 21px);
  --fs-lead:    clamp(15.5px, 2.1vw, 19px);
  --fs-body:    clamp(15px, 1.9vw, 17.5px);
  --fs-small:   clamp(13.5px, 1.65vw, 15.5px);
  --fs-caption: clamp(12.5px, 1.45vw, 14px);

  /* ارتفاع خط — فارسی به فضای بیشتری نیاز دارد تا دنباله‌ی حروف بریده نشود */
  --lh-tight: 1.55;
  --lh-body:  1.75;
  --lh-lead:  1.75;
}

/* اندازه‌های موبایل مستقیم از ماکاپ اندازه‌گیری شده‌اند؛ clamp نباید
   بالاتر ببردشان. دسکتاپ جدا بزرگ‌تر می‌شود چون ماکاپ‌ها موبایل‌اند و
   ۱۵px روی عرض ۱۴۴۰ خیلی ریز می‌ماند. */
@media (max-width: 640px) {
  :root {
    --fs-body: 14.5px;
    --fs-small: 13px;
    --fs-caption: 12px;
  }
}

/* ---- پایه ---- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--heading);
  background: var(--paper);
  direction: rtl;
  text-align: right;

  /* دنباله‌ی ج چ ح خ ژ ص ض ع غ ق ی نباید بریده شود */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* قید سخت: هیچ صفحه‌ای اسکرول افقی ندارد */
  overflow-x: hidden;
}

/* ---- تیترها ---- */

h1, h2, h3, h4 {
  margin: 0;
  /* پوسته‌ی مادر تیترها را با Dosis می‌نویسد و ما font-family نمی‌دادیم.
     در صفحه‌های المنتور به چشم نمی‌آمد چون متن فارسی به فالبک می‌افتاد،
     ولی در برگه‌های قالبِ PHP (نمایه‌ی روانکاو، صفحه‌های داخلی) تیترها
     با قلمِ دیگری می‌آمدند. */
  font-family: var(--font);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--heading);

  /* فارسی دنباله‌دار است؛ بدون این، ی و ج در تیتر بزرگ بریده می‌شوند */
  padding-block-end: .08em;
  overflow-wrap: break-word;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-lead); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--dark); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

img, svg, video { max-width: 100%; height: auto; display: block; }

button { font: inherit; color: inherit; cursor: pointer; }

input, textarea, select {
  font: inherit;
  color: inherit;
  direction: rtl;
  text-align: right;
}

/* ---- کلاس‌های متن ---- */

.psy-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--muted);
}

.psy-muted { color: var(--muted); }

.psy-small {
  font-size: var(--fs-small);
  line-height: 1.8;
}

.psy-caption {
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--muted);
}

.psy-eyebrow {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--brand);
}

/* ---- عدد ---- */

/* عددهای فارسی در متن با کاراکتر ۰-۹ نوشته می‌شوند، نه با font-feature.
   این کلاس برای جدول و متادیتاست تا ارقام هم‌عرض بمانند. */
.psy-tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* عدد لاتین وقتی ناچار باشد (نسخه، کد) — جهتش نباید بشکند */
.psy-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ---- ستون متن ---- */

.psy-prose {
  max-width: 68ch;
  margin-inline: auto;
  line-height: var(--lh-body);
}

.psy-prose > * + * { margin-block-start: 1em; }

.psy-prose h2 { margin-block-start: 1.6em; }
.psy-prose h3 { margin-block-start: 1.4em; }

.psy-prose ul { margin-block: 1em; }

.psy-prose ul li {
  position: relative;
  padding-inline-start: 1.4em;
  margin-block-end: .5em;
}

.psy-prose ul li::before {
  content: '';
  position: absolute;
  inset-inline-start: .35em;
  inset-block-start: .82em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}

/* ---- دسترس‌پذیری ---- */

.psy-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.psy-skip {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--gutter);
  z-index: 100;
  padding: 10px 18px;
  background: var(--dark);
  color: #fff;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}

.psy-skip:focus { inset-block-start: 0; color: #fff; }