/* ============================================================================
   قاعده‌های دسترس‌پذیری — دامنه‌دار، نه گلوبال.

   نسخهٔ قبلی line-height: 1.85 را روی body می‌گذاشت. ارث آن به تیتر و
   دکمه و بَج هم می‌رسید — جایی که طرح مقدار خودش را دارد — و ۱۸۲ پیکسل
   ارتفاع تجمعی می‌ساخت که در طرح نیست. آن یک انحراف بود، نه اصلاح.

   این نسخه فقط متن بدنه را باز می‌کند و بقیه را همان‌جا که طرح گذاشته
   نگه می‌دارد.
   ============================================================================ */

/* فقط متن بدنه.
 *
 * تیتر و دکمه دست نمی‌خورند: جایی که طرح مقدار صریح دارد تصمیم طراح
 * است، و جایی که «normal» گذاشته برای متن درشت حدود ۱٫۲ می‌شود که خودش
 * داخل بازهٔ ۱٫۲ تا ۱٫۴۵ دیزاین‌سیستم است. اندازه‌گیری نشان داد قاعدهٔ
 * ۱٫۴۵ روی همان تیترها ۵۲ پیکسل به هرکدام اضافه می‌کرد — «اصلاح»ی که
 * خودش انحراف بود.
 */
p,
li,
dd,
figcaption,
.sy-body {
	line-height: var(--sy-lh-body);
}

/* کف ۱۴ پیکسل — تولیدشده از پورت. */
.sy-logo-tag { font-size: 14px; }
.sy-phonecard-cap { font-size: 14px; }
.sy-p091 { font-size: 14px; }
.sy-p185 { font-size: 14px; }
.sy-p189 { font-size: 14px; }
.sy-p240 { font-size: 14px; }
.sy-p275 { font-size: 14px; }
.sy-footer-badge-t { font-size: 14px; }
.mdetailhead { font-size: 14px; }
.mbadge { font-size: 14px; }

/* ============================================================================
   مگامنو — پل‌زدن روی ناحیه‌های مرده‌ی هاور.

   طرح مگامنو را با :hover خالص باز و بسته می‌کند و دو جا بین «چیزی که
   هاور است» و «چیزی که کاربر می‌خواهد به آن برسد» فاصله‌ی بی‌صاحب
   می‌ماند:

   ۱) از عنوان منو تا خود پنل: عنوان وسط هدر است و پنل ۱۰ پیکسل زیر
      هدر؛ نوار بین این دو مال هیچ‌کدام نیست و موس که واردش شود پنل همان
      لحظه display:none می‌گیرد — پنل پیش از رسیدن کاربر محو می‌شود.
      درمان: پنل همیشه display:block بماند و با visibility/opacity
      پنهان شود تا بستن بتواند تأخیر بگیرد؛ ۰٫۲۸ ثانیه مهلتِ عبور،
      به‌علاوه‌ی کش‌آمدن خود آیتم تا تمام‌قد هدر تا نوار مرده کوتاه شود.

   ۲) از ستون فهرست تا ستون جزئیات: جعبه‌ی جزئیات ۴۴ پیکسل بعد از لبه‌ی
      ردیف شروع می‌شد (پدینگ ستون + فاصله‌ی گرید) و موس در همین فاصله
      از ردیف بیرون می‌افتاد — جزئیات به حالت پیش‌فرضِ «ردیف اول»
      برمی‌گشت و لینک‌های گروه انتخابی از دست می‌رفتند. درمان: جعبه‌ی
      جزئیات از همان لبه‌ی ردیف شروع شود و جای خالی را پدینگ بگیرد؛
      متن دقیقاً همان‌جای قبلی می‌ماند و هاور ردیف در کل مسیر برقرار
      است.

   فقط دسکتاپ: موبایل با چک‌باکس باز و بسته می‌شود و display خودش را
   لازم دارد.
   ============================================================================ */
@media (min-width: 1025px) {
	.megawrap { align-self: stretch; }

	.megapanel {
		display: block;
		visibility: hidden;
		opacity: 0;
		transition: opacity .14s ease, visibility 0s linear .28s;
	}

	.megawrap:hover .megapanel,
	.megawrap:focus-within .megapanel {
		visibility: visible;
		opacity: 1;
		transition-delay: 0s;
	}

	.mdetail {
		inset-inline-start: 232px;
		padding-inline-start: 64px;
	}
}

/* دکمه‌های متنی شبکه‌های بی‌آیکون (ایتا، بله) در ردیف سوشال فوتر —
   همان جعبه‌ی مربع، با پهنای متن. لوگوی تقریبی نکشیدیم؛ برچسب خواناتر
   است و مخاطب سالمند همین را می‌خواند. */
.sy-footer-social-btn.is-text {
	width: auto;
	padding: 0 14px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--sy-white);
}

/* ============================================================================
   ردیف‌های تلفنِ فوتر — جهت، حالا که برچسب دارند.

   طرح این ردیف را یک عددِ تنها می‌دید، پس با direction: ltr و
   justify-content: flex-end چیده بود تا شماره درست خوانده شود. حالا هر
   ردیف «برچسب فارسی + شماره» است و همان قاعده جهتِ کل ردیف را لاتین
   می‌کرد: آیکون به چپ می‌افتاد، برچسب و شماره جابه‌جا می‌شدند و ردیفِ
   شکسته وسط‌چین می‌ماند — درست همان چیزی که ردیف‌های دیگر همین ستون
   (آدرس، ساعات کاری) ندارند.

   حالا ردیف مثل بقیه راست‌چین است و فقط خودِ شماره در یک <bdi> جهت
   لاتین می‌گیرد — یعنی «۰۲۱-۴۴۰۵۲۸۳۲» همان‌طور خوانده می‌شود که گفته
   می‌شود، بدون اینکه بقیهٔ ردیف را با خود ببرد.
   ============================================================================ */
.sy-footer-tel {
	direction: rtl;
	justify-content: flex-start;
	align-items: flex-start;
}

.sy-footer-num {
	direction: ltr;
	unicode-bidi: isolate;
}

/* ============================================================================
   هاور روی زمینهٔ تیره و روی دکمهٔ رنگی — رنگِ خودِ عنصر باید بماند.

   طرح یک قاعدهٔ سراسری دارد: a:hover رنگ متن را --sy-primary-dark
   می‌کند. برای لینکِ متنِ معمولی درست است (فیروزه‌ای → فیروزه‌ای تیره)،
   ولی هر لینکی که رنگ خودش را دارد با همان قاعده ربوده می‌شود، چون
   a:hover از یک کلاسِ تنها قوی‌تر است.

   بدترینش نوار بالای سایت بود: پس‌زمینهٔ نوار دقیقاً --sy-primary-dark
   است، پس متن روی هاور هم‌رنگِ زمینه و کاملاً نامرئی می‌شد — نسبت
   کنتراست ۱٫۰۰:۱. کل لینک‌های فوتر هم روی ۱٫۷۵:۱ می‌افتادند و متنِ
   دکمه‌های نارنجیِ بیرون از .sy-page (هدر، فراخوان‌های پایانی) از سفید
   به سبزِ تیره می‌رفت.

   قاعدهٔ درست: بازخوردِ هاورِ این‌ها زمینه و جابه‌جایی است، نه رنگ متن.
   ============================================================================ */
.sy-topbar-link:hover,
.sy-topbar-social:hover,
.sy-footer-link:hover,
.sy-footer-tel:hover,
.sy-footer-map:hover,
.sy-footer-social-btn:hover,
.sy-ondark-dim:hover {
	color: var(--sy-white);
}

/* دکمه: رنگ متنش را از کلاس خودش می‌گیرد و هاور نباید عوضش کند. */
a.btncta:hover {
	color: var(--sy-white);
}

a.btnsec:hover {
	color: var(--sy-primary);
}

/* دکمهٔ جوهرسفید روی زمینهٔ رنگی یا پنل تیره.
   هر صفحهٔ پورت‌شده نسخهٔ خودش را با نام تولیدشده دارد؛ همه یک چیزند و
   همه همین باگ را داشتند. فهرست از روی خودِ CSSها استخراج شده: هر
   کلاسی که در حالت عادی color سفید روی زمینهٔ رنگی می‌گذارد. */
a.art-p099:hover,
a.art-p100:hover,
a.brd-p099:hover,
a.dr-p135:hover,
a.pr-p263:hover,
a.sva-p002:hover,
a.sva-p023:hover,
a.sva-p075:hover,
a.sva-p082:hover,
a.sva-p083:hover,
a.sva-p103:hover,
a.svc-p002:hover,
a.svc-p023:hover,
a.svc-p045:hover,
a.svc-p085:hover,
a.svc-p100:hover,
a.svc-p101:hover,
a.svc-p162:hover,
a.svk-p002:hover,
a.svk-p023:hover,
a.svk-p045:hover,
a.svk-p128:hover,
a.svk-p129:hover,
a.svk-p149:hover,
a.svt-p002:hover,
a.svt-p023:hover,
a.svt-p045:hover,
a.svt-p061:hover,
a.svt-p077:hover,
a.svt-p119:hover,
a.svt-p120:hover,
a.svt-p140:hover,
a.sy-acct-loginbtn:hover,
a.sy-bcat-here:hover,
a.sy-bookbtn:hover,
a.sy-btn--cta:hover,
a.sy-btn--solid:hover,
a.sy-chip--on:hover,
a.sy-dark-cta-ghost:hover,
a.sy-footer-social-btn:hover,
a.sy-login-submit:hover,
a.sy-mcta-btn:hover,
a.sy-mcta-btn-teal:hover,
a.sy-mobilebar-book:hover,
a.sy-p068:hover,
a.sy-p073:hover,
a.sy-p118:hover,
a.sy-p122:hover,
a.sy-p143:hover,
a.sy-p154:hover,
a.sy-p165:hover,
a.sy-p174:hover,
a.sy-p266:hover,
a.sy-p290:hover,
a.sy-pill--primary:hover,
a.sy-video-cta:hover,
a.tst-a-p068:hover,
a.tst-a-p069:hover,
a.tst-p076:hover {
	color: var(--sy-white);
}

/* دکمهٔ سفید با جوهر نارنجی — همان قاعده، رنگ دیگر. */
a.pr-p262:hover,
a.sy-p189:hover,
a.sy-p289:hover {
	color: var(--sy-cta-dark);
}

/* دکمهٔ سفید با جوهر تیره (بخش ویدیوی خانه). */
a.sy-p219:hover {
	color: var(--sy-footer);
}

/* نوار چسبان موبایل: هر دکمه رنگ خودش را دارد (فیروزه‌ای، سبز، سفیدِ
   روی نارنجی). لمس روی موبایل حالت هاور را چسبان می‌کند، پس همان‌جا هم
   نباید رنگ عوض شود. */
.sy-mobilebar-call:hover { color: var(--sy-primary); }
.sy-mobilebar-wa:hover { color: var(--sy-success); }
.sy-mobilebar-book:hover { color: var(--sy-white); }