/* ═══════════════════════════════════════════════════════════
   base.css — ریست، فونت، تایپوگرافی پایه، و .prose برای بدنه‌ی مقاله.
   خروجی the_content() وردپرس هم دقیقاً همین .prose رو می‌گیره.
   همه‌ی فاصله‌ها با پراپرتی logical تا RTL بدون هک کار کنه.
   هر دو طرف (Astro و وردپرس) عین همین فایل رو از /assets/css/ لود می‌کنن.
   ═══════════════════════════════════════════════════════════ */

/* وزیرمتن variable — self-host، بدون هیچ درخواستی به هاست خارجی */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/vazirmatn-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/vazirmatn-latin.woff2) format('woff2');
  /* subset — فقط چیزی که واقعاً تو محتوا داریم (کد ارور، عدد، علائم)؛ 34.4KB → 19.7KB.
     بازتولید: pyftsubset با همین unicodes از وزیرمتن کامل. کاراکتر خارج از این‌ها → فونت سیستم. */
  unicode-range: U+0020-007E, U+00A9, U+00AB, U+00B7, U+00BB, U+00D7, U+2013-2014, U+2026, U+2191, U+2193;
}

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

html { -webkit-text-size-adjust: 100%; }
/* پرش لنگر (فهرست مطلب) نرم — فقط وقتی کاربر با حرکت مشکلی نداره */
@media (prefers-reduced-motion: no-preference){
  html { scroll-behavior: smooth; }
}

body{
  direction: rtl;
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--fa);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  /* جا برای نوار اکشن چسبان موبایل */
  padding-block-end: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  /* فوتر همیشه بچسبه ته viewport — تو صفحه‌های کوتاه (sent، 404 و…) زیرش سفیدی نمونه */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

@media (min-width: 900px){
  body { padding-block-end: 0; }
}

h1, h2, h3, h4{
  margin: 0;
  line-height: var(--lh-tight);
  /* letter-spacing رو متن فارسی ممنوع (مثبت اتصال حروف رو باز می‌کنه، منفی له‌شون می‌کنه)؛
     فقط رو عنصرهای تماماً لاتین/عددی مجازه */
  text-wrap: balance;
  font-weight: 700;
}
h1 { font-size: var(--t-3xl); font-weight: 900; }
h2 { font-size: var(--t-2xl); font-weight: 900; }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { margin: 0; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-tap) var(--ease-out); }
a:hover { color: var(--brand-deep); }
/* هایلایت آبی پیش‌فرض لمس اندروید/iOS با هویت سایت نمی‌خونه — بازخورد لمس از :active خود کامپوننت‌ها میاد */
a, button, summary, label { -webkit-tap-highlight-color: transparent; }

/* height:auto لازمه نه اختیاری: عکس‌ها width/height ی HTML دارن (که برای رزرو جا و
   جلوگیری از پرش چیدمان ضروریه). بدون این، max-width عرض رو کوچیک می‌کنه ولی ارتفاعِ
   attribute سر جاش می‌مونه و عکس عمودی کشیده می‌شه. */
img, svg { max-width: 100%; height: auto; display: block; }

/* انتخاب متن با رنگ برند — جزئیات کوچیکی که حس یکپارچگی می‌ده */
::selection { background: var(--brand); color: #fff; }

/* اسکرول‌بار دسکتاپ هم‌خانواده‌ی پالت، نه خاکستری سیستم */
html { scrollbar-color: var(--line-strong) transparent; }

/* پرش لنگر (فهرست مطلب، #sec-n، #nearby…) زیر هدر چسبان گم نشه */
[id] { scroll-margin-block-start: 84px; }

/* placeholder ی یکدست رو سطوح روشن؛ باندهای تیره override ی خودشون رو دارن */
::placeholder { color: var(--ink-faint); opacity: 1; }

button { font: inherit; }

:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
/* رو سطوح تیره، ring ی سبز برند دیده نمی‌شه — سفید شه (هر باند تیره‌ای این‌جا اضافه شه) */
.topbar :focus-visible, .site-header :focus-visible, .site-footer :focus-visible,
.cta-band :focus-visible, .hero :focus-visible, .err-band :focus-visible{
  outline-color: #fff;
}

/* فقط برای صفحه‌خوان — از دید مخفی، از درخت دسترسی نه */
.sr-only{
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* سطر آخر پاراگراف تک‌کلمه نمونه — پشتیبانی نبود، هیچی نمی‌شه */
.lede, .section-head p, .prose p { text-wrap: pretty; }

/* اعداد فنی و لاتین همیشه از راست‌به‌چپ جدا بمونن */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* عددی که تو ستون می‌شینه */
.num { font-variant-numeric: tabular-nums; }

/* ═══ ظرف اصلی ═══ */
.wrap{
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--s4);
}
@media (min-width: 768px){ .wrap { padding-inline: var(--s5); } }

/* ═══ برچسب بالای بخش ═══ */
/* طلایی سیر — صدای دوم پالت؛ رو سطوح تیره هر جا لازم شد override می‌شه (مثل هیرو) */
.eyebrow{
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--brass-deep);
  margin-block-end: var(--s2);
}

/* موبایل‌فرست: ریتم عمودی جمع‌تر رو موبایل، بازتر رو دسکتاپ */
.section { padding-block: 40px; }
@media (min-width: 600px){ .section { padding-block: var(--s7); } }
@media (min-width: 768px){ .section { padding-block: var(--s8); } }

/* سکشنی که به سکشن بعدی می‌چسبه — فاصله‌ی عمودی یه طرفش صفر.
   قبلاً ۳۲ جا به‌صورت style ی inline نوشته شده بود. */
.section.is-flush-end { padding-block-end: 0; }
.section.is-flush-start { padding-block-start: 0; }

/* بخش با زمینه‌ی متمایز — به‌جای style ی inline تو هر صفحه */
.section-alt { background: var(--surface-alt); border-block: 1px solid var(--line); }
.section-alt + .section-alt { border-block-start: 0; }

/* بدنه‌ی صفحه‌ی داخلی (زیر page-head) — همون ریتم .section، که همه‌ی صفحه‌ها هم‌نفس شن */
.page-body { padding-block: 40px; }
@media (min-width: 600px){ .page-body { padding-block: var(--s7); } }

/* باند ته صفحه («خدمات دیگه» و…) — زمینه‌ی متمایز، مرز فقط بالا، ریتم جمع‌تر */
.section.section-tail{
  background: var(--surface-alt);
  border-block-start: 1px solid var(--line);
  padding-block: var(--s6);
}
.section-tail .section-head h2 { font-size: var(--t-xl); }

.section-head { margin-block-end: var(--s5); }
.section-head p { color: var(--ink-soft); margin-block-start: var(--s2); max-width: 60ch; }

/* ═══════════════════════════════════════════════════════════
   .prose — بدنه‌ی مقاله. تو Astro و تو وردپرس یکیه.
   ═══════════════════════════════════════════════════════════ */
.prose{
  max-width: 68ch;
  font-size: var(--t-md);
  line-height: 1.9;
}
.prose > * + * { margin-block-start: var(--s4); }
.prose h2 { font-size: var(--t-xl); margin-block-start: var(--s6); }
.prose h3 { font-size: var(--t-lg); margin-block-start: var(--s5); }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
/* شماره‌ی لیست هم فارسی، مثل بقیه‌ی عددهای سایت (.toc هم از همین counter استفاده
   می‌کنه). مرورگر قدیمی که persian رو نشناسه به decimal برمی‌گرده و لیست
   می‌مونه، فقط رقمش لاتین می‌شه. */
.prose ol { list-style-type: persian; }
.prose li + li { margin-block-start: var(--s2); }
.prose img { border-radius: var(--r-md); }
/* جدول‌های داخل پست — مارک‌داون جدول خام تولید می‌کنه؛ رو موبایل تو خودش اسکرول می‌خوره */
.prose table{
  border-collapse: collapse;
  width: 100%;
  font-size: var(--t-sm);
  display: block;
  overflow-x: auto;
}
.prose th, .prose td{
  border: 1px solid var(--line);
  padding: var(--s2) var(--s3);
  text-align: start;
  min-width: 90px;
}
.prose thead th { background: var(--surface-alt); font-weight: 700; }
.prose blockquote{
  margin: 0;
  padding: var(--s3) var(--s4);
  border-inline-start: 3px solid var(--brand);
  background: var(--brand-tint);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--ink-soft);
}
.prose figcaption{
  font-size: var(--t-sm); color: var(--ink-faint);
  margin-block-start: var(--s2); text-align: center;
}

/* ═══ پرینت — منو و CTA حذف، آدرس و تلفن بمونه ═══ */
@media print{
  body { padding-block-end: 0; background: #fff; display: block; }
  .topbar, .site-header, .action-bar, .drawer, .cta-band,
  .footer-badges, .footer-social, .aside, .skip-link,
  .read-progress, .share-row, .cta-inline, .post-nav, .to-top,
  .rel-grid, .toc { display: none !important; }
  /* راهنما رو کاغذ تمام‌عرض و بی‌سایه */
  .prose, .post-body { max-width: none; }
  .card, .svc, .why-card { box-shadow: none !important; }
  .site-footer { background: #fff; color: #000; }
  .site-footer a { color: #000; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    /* property:none نه duration ی ~صفر — transition ی کوتاه روی propertyهای گسسته (مثل
       visibility ی ارثیِ بچه‌های دراور) یکی-دو فریم مقدار قدیمی رو نگه می‌داره و focus ی
       لحظه‌ی باز شدن به عنصر هنوز-hidden می‌خوره. هیچ‌جا به transitionend تکیه نداریم. */
    transition-property: none !important;
  }
}