/* =========================================================
   tbs-typography.css — فونت ایران‌یکان‌ایکس + اصلاحات خوانایی
   IRANYekanX: Regular 400 / Medium 500 / DemiBold 600 / Bold 700

   بعد از main.css و tehranbosch.css لود می‌شود.

   ──────────────────────────────────────────────────────────
   چرا این فایل عمداً «اندازهٔ عنوان‌ها» را تعیین نمی‌کند
   ──────────────────────────────────────────────────────────
   نسخهٔ اول این فایل یک مقیاس سراسری روی h1/h2/h3 گذاشته بود
   (H1=۴۸px، H2=۳۶px، H3=۲۶px در دسکتاپ). آن مقیاس برای طراحی
   «عنوان بخش‌های یک لندینگ» درست است، ولی این سایت ساختار دیگری
   دارد و نتیجه خراب شد:

     • H1 صفحات داخلی یک عنوان سئوی ۷۳ کاراکتری است
       («نمایندگی تعمیر جاروبرقی بوش | مخزن دار، شارژی، رباتیک | …»)
       با ۴۸px سه خط می‌شد. قالب از قبل clamp(22px,4vw,32px) داشت
       که برای این طول متن درست بود.

     • داخل بدنهٔ یک مقاله ۱۱ تا <h2> و ۲۵ تا <h3> وجود دارد.
       این‌ها «عنوان بخش» نیستند، تیتر داخل متن‌اند. قالب برایشان
       ۲۱.۶px و ۱۷.۶px گذاشته بود؛ ۳۶px و ۲۶px آن‌ها را غول کرد.

     • .tbs-service-card-title در صفحهٔ اول یک برچسب ۱۲.۵ پیکسلی
       داخل کارت کوچک است. من ۱۸ تا ۲۲ پیکسل کردم، یعنی ۷۶٪ بزرگ‌تر.

   درس: روی یک قالب پختهٔ موجود، مقیاس سراسری عنوان نگذار. قالب
   برای هر جزء اندازهٔ جدا و سنجیده دارد. این فایل فقط کاری را
   می‌کند که واقعاً لازم است: عوض کردن فونت و چند اصلاح خوانایی.
   ========================================================= */

/* ---------------------------------------------------------
   ۱) تعریف فونت
   font-display:swap تا متن بلافاصله دیده شود و صفحه به‌خاطر
   دانلود فونت سفید نماند.
   --------------------------------------------------------- */
@font-face {
  font-family: 'IRANYekanX';
  src: url('/fonts/IRANYekanX-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IRANYekanX';
  src: url('/fonts/IRANYekanX-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IRANYekanX';
  src: url('/fonts/IRANYekanX-DemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IRANYekanX';
  src: url('/fonts/IRANYekanX-Bold.woff2') format('woff2');
  /* ۷۰۰ و ۸۰۰ هر دو به همین فایل نگاشت می‌شوند.
     قالب تقریباً همه‌جا font-weight:800 دارد ولی ایران‌یکان‌ایکس
     وزن ۸۰۰ ندارد. با این range، مرورگر به‌جای ساختن بولد مصنوعی
     (faux bold — که در خط فارسی زشت و ناخواناست) همین فایل Bold
     واقعی را استفاده می‌کند. بدون این خط لازم بود تک‌تک ۸۰۰ های
     قالب را دست بزنیم. */
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------
   ۲) جایگزینی فونت در کل سایت

   قالب همهٔ عنوان‌ها را از --font-display و متن را از --font-body
   و --font می‌گیرد، پس بازنویسی همین سه متغیر، فونت را همه‌جا
   عوض می‌کند بدون اینکه به اندازه‌ها دست بزنیم.
   --------------------------------------------------------- */
:root {
  --font:         'IRANYekanX', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-body:    var(--font);
  --font-display: var(--font);
}

/* input/textarea/select/button فونت را از body ارث نمی‌برند.
   بدون این خط، وسط یک صفحهٔ فارسی فیلدهای فرم با فونت سیستم
   (Arial/Tahoma) رندر می‌شوند. */
html,
body,
body.tbs-site,
input,
textarea,
select,
button,
.btn,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
}

body,
body.tbs-site {
  /* ارقام با ارتفاع و عرض یکسان — در جدول قیمت و شماره تلفن مهم است */
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------
   ۳) خوانایی متن اصلی

   تنها چیزی که از مقیاس تایپوگرافی نگه داشته شده، فاصلهٔ سطر است.
   خط فارسی کشیدگی و زیر/زبر دارد و با line-height کمتر از ۱.۹
   سطرها به هم نزدیک می‌شوند. اندازهٔ فونت دست‌نخورده می‌ماند.

   نکته: عرض حداکثری (max-width) روی پاراگراف‌ها گذاشته نمی‌شود.
   نسخهٔ قبل max-width:800px داشت و چون صفحه RTL است، پاراگراف به
   لبهٔ راست می‌چسبید و سمت چپ صفحه خالی می‌ماند — همان مشکلی که
   گزارش شد. اگر روزی محدود کردن عرض خط لازم شد، باید روی ظرفِ
   محتوا با margin-inline:auto اعمال شود، نه روی تک‌تک پاراگراف‌ها.
   --------------------------------------------------------- */
body.tbs-site .page-content p,
body.tbs-site .page-content li {
  line-height: 2;
}

body.tbs-site .page-content li {
  margin-bottom: 6px;
}

/* ---------------------------------------------------------
   ۴) فرم‌ها

   font-size حداقل ۱۶px روی موبایل الزامی است: اگر کمتر باشد،
   سافاری iOS موقع فوکوس روی فیلد کل صفحه را زوم می‌کند و کاربر
   باید دستی برگردد — یکی از رایج‌ترین دلایل رها کردن فرم در موبایل.
   ارتفاع ۴۶px هم حداقل هدف لمسی راحت است.
   --------------------------------------------------------- */
body.tbs-site .tbs-field input,
body.tbs-site .tbs-field textarea,
body.tbs-site .tbs-field select {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.8;
  min-height: 46px;
}
body.tbs-site .tbs-field textarea {
  min-height: 110px;
  line-height: 1.9;
}
body.tbs-site .tbs-field label {
  font-weight: 500;
}

/* ---------------------------------------------------------
   ۵) هدف لمسی دکمه‌های اصلی
   ۴۴px حداقل اندازهٔ توصیه‌شده برای لمس است. فقط ارتفاع تضمین
   می‌شود؛ اندازهٔ فونت و رنگ دکمه‌ها دست قالب می‌ماند.
   --------------------------------------------------------- */
body.tbs-site .tbs-submit,
body.tbs-site .tbs-cta-band-btn,
body.tbs-site .tbs-svc-cta-btn,
body.tbs-site .mcb-request,
body.tbs-site .drawer-request {
  min-height: 44px;
}

/* ---------------------------------------------------------
   ۶) دسترس‌پذیری — نشانگر فوکوس برای پیمایش با کیبورد
   --------------------------------------------------------- */
body.tbs-site :focus-visible {
  outline: 2px solid var(--tbs-red, #e20015);
  outline-offset: 2px;
  border-radius: 4px;
}