/*
Theme Name:   صنعت منت
Theme URI:    https://sanatment.com/
Description:  چایلد تم اختصاصی صنعت منت بر پایه‌ی Hello Elementor. تنها محل کد سفارشی پروژه.
Author:       صنعت منت
Author URI:   https://sanatment.com/
Template:     hello-elementor
Version:      0.2.0
Requires PHP: 7.4
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  sanatment-child
Tags:         rtl-language-support, custom-colors, custom-logo, custom-menu, translation-ready
*/

/* ══════════════════════════════════════════════════════════════════════
   فونت — خودمیزبان
   ──────────────────────────────────────────────────────────────────────
   گوگل‌فونت در ایران قابل اتکا نیست و در functions.php غیرفعال شده.
   دلیل هر انتخاب: docs/design-system.md
   ══════════════════════════════════════════════════════════════════════ */

/* Vazirmatn — همه‌ی متن فارسی. یک فایل متغیر به‌جای ۹ فایل ایستا. */
@font-face {
	font-family: "Vazirmatn";
	src: url("assets/fonts/Vazirmatn-Variable.woff2") format("woff2-variations"),
	     url("assets/fonts/Vazirmatn-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* IBM Plex Mono — فقط مقدار عددی و کد فنی.
   unicode-range عمداً به لاتین و نمادهای فنی محدود شده تا اگر جایی
   اشتباهاً روی متن فارسی اعمال شد، فارسی خودکار به Vazirmatn برگردد.
   ZWNJ (U+200C) و کل محدوده‌ی عربی از این فهرست بیرون‌اند. */
@font-face {
	font-family: "SM Mono";
	src: url("assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0020-007E, U+00B0-00B5, U+00B7, U+00BD-00BE, U+00D7, U+00D8,
	               U+00F8, U+2013-2014, U+2018-201D, U+2026, U+2032-2033, U+2044, U+2212;
}
@font-face {
	font-family: "SM Mono";
	src: url("assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0020-007E, U+00B0-00B5, U+00B7, U+00BD-00BE, U+00D7, U+00D8,
	               U+00F8, U+2013-2014, U+2018-201D, U+2026, U+2032-2033, U+2044, U+2212;
}

/* ══════════════════════════════════════════════════════════════════════
   توکن‌های طراحی
   ──────────────────────────────────────────────────────────────────────
   همه‌ی رنگ‌ها، فونت‌ها و فاصله‌ها اینجا و فقط اینجا تعریف می‌شوند.
   برای تغییر ظاهر سایت، مقدار متغیر را عوض کنید — نه کد صفحات را.

   جهت بصری: «دیتاشیت مهندسی».
   ══════════════════════════════════════════════════════════════════════ */

:root {
	/* ─── رنگ پایه ────────────────────────────────────────────────────
	   منشأ رنگ اصلی: رنگ واقعی رنگ‌آمیزی ماشین‌ابزار. */
	--sm-primary:      #1B4B45; /* برند · دکمه · لینک · نشان تأیید */
	--sm-primary-deep: #0E2E2A; /* پلاک مشخصات · سرصفحه · فوتر */
	--sm-primary-soft: #E7EDEC; /* ته‌رنگ چیپ و ردیف فعال */
	--sm-ink:          #141A19; /* متن اصلی */
	--sm-ink-mut:      #5B6664; /* متن ثانویه و برچسب */
	--sm-paper:        #F5F7F6; /* زمینه‌ی صفحه — ته‌رنگ سرد، نه کرم */
	--sm-surface:      #FFFFFF; /* کارت و پنل */
	--sm-line:         #D5DAD8; /* خط مویی — جداکننده و مرز کارت */
	--sm-line-soft:    #E9ECEB; /* خط داخل جدول */
	/* مرز کنترل‌های فرم. جداکننده‌ی تزئینی الزام ۳:۱ ندارد، ولی
	   مرز فیلدی که کاربر باید ببیندش دارد (WCAG 1.4.11).
	   این مقدار ۳.۵:۱ روی سفید و ۳.۳:۱ روی زمینه می‌دهد. */
	--sm-line-strong:  #7E8B89;

	/* روی سطوح تیره */
	--sm-on-deep:      #F1F5F4;
	--sm-on-deep-mut:  #9DB2AE;

	/* ─── رنگ معنایی ──────────────────────────────────────────────────
	   کنتراست همه روی سفید ≥ ۵.۹ (AA متن معمولی). */
	--sm-verified:     #1B4B45; /* تأییدشده — خودِ رنگ برند */
	--sm-signal:       #8A5A06; /* در انتظار تأیید · پروفایل قدیمی */
	--sm-signal-soft:  #FBF3E2;
	--sm-alert:        #97281C; /* خطا و فوریت */
	--sm-alert-soft:   #FBEDEB;

	/* ─── نشانگر چهار سرویس ───────────────────────────────────────────
	   فقط خط ۳px، ته‌رنگ چیپ یا رنگ آیکون.
	   هرگز پس‌زمینه‌ی کامل بخش — وگرنه چهار سرویس می‌شوند چهار سایت. */
	--sm-cat-makers:    #1B4B45; /* صنعتکاران — سبز ماشین‌ابزار */
	--sm-cat-engineers: #22557A; /* مهندسان — آبی نقشه‌ی فنی */
	--sm-cat-surplus:   #7A3F26; /* کالای راکد — اکسید آهن */
	--sm-cat-knowhow:   #6B5A18; /* دانش فنی — برنج کهنه */

	/* ─── تایپوگرافی ──────────────────────────────────────────────────
	   دو فونت با دو کار متفاوت:
	   برچسب فارسی در Vazirmatn · مقدار اندازه‌گیری‌شده در SM Mono. */
	--sm-font-base: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
	--sm-font-head: var(--sm-font-base);
	--sm-font-num:  "SM Mono", "Vazirmatn", ui-monospace, monospace;

	/* مقیاس نسبت ۱.۲ — تراکم بالاتر، مناسب صفحه‌ی پر از داده */
	--sm-text-xs:   0.75rem;  /* 12 · ریزنوشت و واحد */
	--sm-text-sm:   0.875rem; /* 14 · برچسب و متادیتا */
	--sm-text-base: 1rem;     /* 16 · متن */
	--sm-text-lg:   1.125rem; /* 18 · متن برجسته */
	--sm-text-xl:   1.375rem; /* 22 · H3 */
	--sm-text-2xl:  1.75rem;  /* 28 · H2 */
	--sm-text-3xl:  2.25rem;  /* 36 · H1 */
	--sm-text-4xl:  3rem;     /* 48 · نمایشی — فقط صفحه‌ی اصلی */

	--sm-leading-tight:  1.2;  /* مقدار عددی */
	--sm-leading-head:   1.45; /* تیتر */
	--sm-leading-normal: 1.75; /* متن فارسی به فاصله‌ی خطی بیشتری نیاز دارد */

	--sm-weight-body:  400;
	--sm-weight-ui:    500; /* برچسب رابط */
	--sm-weight-head:  700;
	--sm-weight-plate: 800; /* فقط پلاک مشخصات */

	/* ─── فاصله‌گذاری — مقیاس ۴px ─────────────────────────────────── */
	--sm-space-1:  0.25rem;
	--sm-space-2:  0.5rem;
	--sm-space-3:  0.75rem;
	--sm-space-4:  1rem;
	--sm-space-5:  1.25rem;
	--sm-space-6:  1.5rem;
	--sm-space-8:  2rem;
	--sm-space-12: 3rem;
	--sm-space-16: 4rem;
	--sm-space-24: 6rem;

	/* ─── چیدمان ─────────────────────────────────────────────────── */
	--sm-container: 1240px;
	--sm-measure:   66ch;   /* حداکثر طول خط برای خوانایی */
	--sm-radius:    2px;    /* نه ۰ (خشک) نه ۱۲ (کیت SaaS) */
	--sm-radius-lg: 4px;

	/* ─── ارتفاع ──────────────────────────────────────────────────────
	   سایه‌ی پیش‌فرض نداریم. جداسازی با سفیدِ surface روی زمینه‌ی paper
	   به‌علاوه‌ی خط مویی. این توکن فقط برای لایه‌های شناور است. */
	--sm-overlay-shadow: 0 8px 24px rgba(14, 46, 42, 0.16);
}

/* ══════════════════════════════════════════════════════════════════════
   پایه‌ی RTL و فارسی
   ══════════════════════════════════════════════════════════════════════ */

/* ریست جعبه — چایلد تم نباید برای این به قالب والد وابسته باشد.
   بدون آن، هر عنصری که هم max-width دارد هم padding، از ظرفش
   بیرون می‌زند و در عرض‌های میانی اسکرول افقی می‌سازد. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: var(--sm-font-base);
	font-size: var(--sm-text-base);
	font-weight: var(--sm-weight-body);
	line-height: var(--sm-leading-normal);
	color: var(--sm-ink);
	background: var(--sm-paper);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sm-font-head);
	font-weight: var(--sm-weight-head);
	line-height: var(--sm-leading-head);
	color: var(--sm-ink);
	text-wrap: balance;
}

h1 { font-size: var(--sm-text-3xl); }
h2 { font-size: var(--sm-text-2xl); }
h3 { font-size: var(--sm-text-xl); }

p { max-width: var(--sm-measure); }

a {
	color: var(--sm-primary);
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

/* مقدار اندازه‌گیری‌شده — عدد، ابعاد، تلرانس، کد مدل.
   نه برای برچسب؛ برچسب فارسی می‌ماند. */
.sm-num {
	font-family: var(--sm-font-num);
	font-weight: 600;
	line-height: var(--sm-leading-tight);
	direction: ltr;
	unicode-bidi: isolate;
	font-variant-numeric: tabular-nums;
	/* فقط وقتی جا نشد می‌شکند — کد مدل بلند نباید چیدمان را پهن کند */
	overflow-wrap: break-word;
	hyphens: none;
}

/* داخل متن روان، مقدار نباید تیره‌تر از جمله باشد.
   وزن ۶۰۰ برای جدول و کارت است، جایی که عدد خودش پیام است. */
p .sm-num,
li .sm-num { font-weight: 400; }

/* ارقام جدولی برای عدد فارسی داخل جدول — Vazirmatn ویژگی tnum دارد */
.sm-tnum { font-variant-numeric: tabular-nums; }

/* کنترل‌های فرم — مرزشان باید دیده شود */
input, select, textarea {
	font-family: inherit;
	font-size: var(--sm-text-base);
	color: var(--sm-ink);
	background: var(--sm-surface);
	border: 1px solid var(--sm-line-strong);
	border-radius: var(--sm-radius);
	padding: var(--sm-space-2) var(--sm-space-3);
}

/* ورودی‌های عددی و هر محتوای لاتین که باید چپ‌چین بماند */
input[type="tel"],
input[type="number"],
input[type="email"],
input[type="url"],
.ltr {
	direction: ltr;
	text-align: left;
	unicode-bidi: isolate;
}

/* ══════════════════════════════════════════════════════════════════════
   قواعد غیرقابل مذاکره‌ی فارسی
   ──────────────────────────────────────────────────────────────────────
   letter-spacing روی فارسی اتصال حروف را می‌شکند.
   text-transform در فارسی بی‌معناست و فقط لاتین را خراب می‌کند.
   font-synthesis-weight بولد جعلی را می‌بندد.
   ══════════════════════════════════════════════════════════════════════ */

body, p, h1, h2, h3, h4, h5, h6, li, td, th,
label, button, input, select, textarea {
	letter-spacing: normal;
	text-transform: none;
	font-synthesis-weight: none;
}

/* ══════════════════════════════════════════════════════════════════════
   دسترس‌پذیری — کف کیفیت، صرف‌نظر از طراحی نهایی
   ══════════════════════════════════════════════════════════════════════ */

:focus-visible {
	outline: 2px solid var(--sm-primary);
	outline-offset: 2px;
	border-radius: var(--sm-radius);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* پرش به محتوا برای کاربران صفحه‌کلید و اسکرین‌ریدر */
.skip-link:focus {
	position: fixed;
	inset-inline-start: var(--sm-space-4);
	top: var(--sm-space-4);
	z-index: 9999;
	padding: var(--sm-space-2) var(--sm-space-4);
	background: var(--sm-surface);
	color: var(--sm-ink);
	outline: 2px solid var(--sm-primary);
}

/* فقط برای اسکرین‌ریدر */
.sm-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
