/*
Theme Name:  سمعک‌یار
Theme URI:   https://samakyar.ir/
Description: قالب اختصاصی «سمعک‌یار» — کلینیک گوش غرب تهران. قالب فرزندِ Hello Elementor. هر صفحهٔ طراحی‌شده یک Page Template است و همهٔ محتوایش از فیلدهای ACF می‌آید. مخاطب اصلی سالمندان و خانواده‌هایشان‌اند، پس خوانایی بر ظرافت اولویت دارد: کف اندازهٔ متن ۱۴px، هدف لمسی ۴۸px، و کنتراست دست‌کم ۴٫۵:۱.
Author:      سمعک‌یار
Template:    hello-elementor
Version:     0.35.3
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: samakyar
Tags:        rtl-language-support, translation-ready, custom-colors, e-commerce
*/

/* ============================================================================
   فهرست
   ۱ · فونت
   ۲ · توکن‌ها
   ۳ · بازنشانی و پایه
   ۴ · تایپوگرافی
   ۵ · دسترس‌پذیری
   ۶ · چیدمان
   ۷ · دکمه‌ها
   ۸ · کارت‌ها و کتابخانهٔ کامپوننت
   ۹ · بج، چیپ و پیل
   ۱۰ · بردکرامب
   ۱۱ · نوار بالایی
   ۱۲ · هدر و مگامنو
   ۱۳ · نوار چسبان موبایل
   ۱۴ · فوتر
   ۱۵ · آیکون
   ============================================================================ */


/* ============================================================================
   ۱ · فونت — یکان‌بخ متغیر، روی همین سرور
   ----------------------------------------------------------------------------
   یک فایل، همهٔ وزن‌های ۱۰۰ تا ۹۰۰. نسخهٔ استاتیکِ چهار وزن جداگانه چهار
   درخواست و حجم بیشتر می‌شد.

   نسخهٔ FaNum عمداً استفاده نشده: آن فونت هر رقم لاتین را با گلیف فارسی
   نشان می‌دهد، یعنی «IP68» و «L90-R» هم فارسی می‌شدند. سند در بند ۵-۶ صریح
   گفته نام‌های لاتین باید لاتین بمانند، پس تبدیل ارقام در PHP و فقط روی
   قیمت/تاریخ/تلفن انجام می‌شود — کلاس SY_Numerals.

   وزیرمتن در پشته مانده ولی میزبانی نمی‌شود: اگر روی دستگاه کاربر نصب باشد
   استفاده می‌شود، وگرنه نوبت به فونت سیستم می‌رسد. میزبانی‌اش ۸۶ کیلوبایت
   دانلودِ تقریباً همیشه بی‌استفاده بود.
   ============================================================================ */
@font-face {
	font-family: "Yekan Bakh";
	src: url("assets/fonts/YekanBakh-VF.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}


/* ============================================================================
   ۲ · توکن‌ها — بند ۲ سند تحویل
   ============================================================================ */
:root {
	--sy-font: "Yekan Bakh", Vazirmatn, system-ui, -apple-system, sans-serif;

	/* اصلی — فیروزه‌ای درمانی */
	--sy-primary: #0E7C86;
	--sy-primary-dark: #095A62;
	--sy-accent: #1AA0B0;
	--sy-tint: #D2EAEC;
	--sy-surface-tint: #E8F4F5;

	/* فراخوان — گرم. فقط دکمهٔ اصلی و یک بخش شاخص در هر صفحه. */
	--sy-cta: #E85C3A;
	--sy-cta-dark: #CE4A2B;
	--sy-cta-tint: #FDEDE7;
	--sy-cta-border: #F6D3C7;

	/* وضعیت */
	--sy-success: #17916B;
	--sy-success-tint: #E4F4EE;
	--sy-star: #F2A93B;

	/* خنثی */
	--sy-ink: #10323A;
	--sy-body: #2E4850;
	--sy-body-2: #35525B;
	--sy-muted: #5B7178;
	--sy-muted-2: #4A6670;
	--sy-surface: #F4F9F9;
	--sy-surface-2: #F7FBFB;
	--sy-bg: #EEF4F4;
	--sy-border: #E5EFEF;
	--sy-border-2: #D8E4E5;
	--sy-footer: #0B3138;

	/* فاصله — پایهٔ ۴px */
	--sy-2: 8px;
	--sy-3: 12px;
	--sy-4: 16px;
	--sy-5: 20px;
	--sy-6: 24px;
	--sy-8: 32px;
	--sy-10: 40px;
	--sy-16: 64px;

	/* گوشه */
	--sy-r-btn: 13px;
	--sy-r-card: 20px;
	--sy-r-pill: 999px;

	/* سایه */
	--sy-shadow-card: 0 12px 30px -18px rgba(9, 90, 98, .35);
	--sy-shadow-cta: 0 12px 26px -10px rgba(232, 92, 58, .7);
	--sy-shadow-pop: 0 30px 56px -28px rgba(9, 90, 98, .55);

	/* ظرف */
	--sy-shell: 1180px;
	--sy-shell-wide: 1240px;
	--sy-gutter: clamp(16px, 4vw, 40px);
	--sy-section-y: clamp(40px, 6vw, 76px);
}


/* ============================================================================
   ۵ · دسترس‌پذیری — بند ۱۰ سند، الزامی
   ============================================================================ */
:where(a, button, input, textarea, select, summary, label, [tabindex]):focus-visible {
	outline: 3px solid var(--sy-accent);
	outline-offset: 3px;
	border-radius: 8px;
}

.sy-skip-link {
	position: absolute;
	right: -9999px;
	top: 0;
	z-index: 999999;
	padding: 14px 22px;
	font-size: var(--sy-fs-body);
	font-weight: 700;
	color: #fff;
	background: var(--sy-primary);
	border-radius: 0 0 var(--sy-r-card) var(--sy-r-card);
}

.sy-skip-link:focus {
	right: 16px;
	color: #fff;
}

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

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ============================================================================
   ۱۵ · آیکون
   ----------------------------------------------------------------------------
   همه از اسپرایت SVG می‌آیند و رنگشان currentColor است، پس با رنگ متنِ
   والدشان هماهنگ می‌شوند و لازم نیست برای هر رنگ نسخهٔ جدا ساخته شود.
   ============================================================================ */
.sy-i {
	width: 24px;
	height: 24px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sy-i--16 { width: 16px; height: 16px; }
.sy-i--19 { width: 19px; height: 19px; }
.sy-i--30 { width: 30px; height: 30px; }

/* آیکون‌های توپر (حالت فعال) نباید خط داشته باشند. */
.sy-i--solid {
	fill: currentColor;
	stroke: none;
}