/*
 * پایه‌ی قالب داترا: فونت، ریست سبک، تایپوگرافی و کلاس‌های چیدمان مشترک.
 *
 * نکته‌ی مهم معماری: پیش‌فرض‌های سطح عنصر (h1..h6، p، a) داخل :where()
 * پیچیده شده‌اند تا specificity صفر داشته باشند. بدون این کار قاعده‌ای مثل
 * `.datra h1` (۰,۱,۱) از قاعده‌ی کامپوننت `.dt-hero__title` (۰,۱,۰) قوی‌تر
 * می‌شد و رنگ و وزن تیتر هیرو را بی‌سروصدا بازنویسی می‌کرد — که دقیقاً یک بار
 * اتفاق افتاد. با :where() همیشه استایل کامپوننت برنده است.
 */

/*
 * فونت اصلی. عمداً هم‌شکل با اعلان المنتور نوشته شده (بدون بازه‌ی وزن و با
 * format استاندارد) تا رندر حرف‌به‌حرف با صفحات المنتوری یکسان باشد؛ در نتیجه
 * وزن ۹۰۰ همان بولد سنتتیکی است که المنتور تولید می‌کند، نه محور واقعی فونت
 * variable. اگر بعداً خواستیم از محور واقعی استفاده کنیم، باید هم‌زمان با
 * صفحات المنتوری تغییر کند وگرنه اختلاف دیده می‌شود.
 */
@font-face {
	font-family: "IRANSansXV";
	font-display: swap;
	src: url("../fonts/IRANSansXV.woff2") format("woff2"),
	     url("../fonts/IRANSansXV.woff") format("woff");
}

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

html { -webkit-text-size-adjust: 100%; }

/* html اضافه شده تا specificity از قواعد اینلاین المنتور
   مثل body.elementor-page-5683{background-color:#FFF} بالاتر بماند
   و به ترتیب بارگذاری وابسته نباشیم. */
html body.datra {
	margin: 0;
	background: var(--dt-body-bg);
	color: var(--dt-text);
	font-family: var(--dt-font);
	font-size: var(--dt-fs-base);
	font-weight: var(--dt-fw-regular);
	line-height: var(--dt-lh-normal);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.datra :where(img, svg, video) { max-width: 100%; height: auto; display: block; }

.datra :where(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 var(--dt-space-4);
	font-weight: var(--dt-fw-semibold);
	line-height: var(--dt-lh-tight);
	color: var(--dt-blue-dark);
	text-wrap: balance;
}

.datra :where(h1) { font-size: var(--dt-fs-3xl); }
.datra :where(h2) { font-size: var(--dt-fs-2xl); }
.datra :where(h3) { font-size: var(--dt-fs-xl); }
.datra :where(h4) { font-size: var(--dt-fs-lg); }
.datra :where(h5) { font-size: var(--dt-fs-md); }
.datra :where(h6) { font-size: var(--dt-fs-base); }

.datra :where(p) { margin: 0 0 var(--dt-space-4); }

.datra :where(a) {
	color: var(--dt-link);
	text-decoration: none;
	transition: color var(--dt-duration) var(--dt-ease);
}
.datra :where(a:hover) { color: var(--dt-blue); }

/* حالت فوکوس قابل‌دیدن برای دسترس‌پذیری کیبورد */
.datra :focus-visible {
	outline: 2px solid var(--dt-blue);
	outline-offset: 3px;
	border-radius: var(--dt-radius-sm);
}

/* --- ابزارهای چیدمان --- */
.dt-container {
	width: 100%;
	max-width: var(--dt-container);
	margin-inline: auto;
	padding-inline: var(--dt-gutter);
}

.dt-container--narrow { max-width: var(--dt-container-narrow); }

.dt-stack > * + * { margin-top: var(--dt-space-4); }

/* فقط برای صفحه‌خوان — متن پنهان بصری */
.dt-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;
}

/* پرش به محتوا */
.dt-skip-link {
	position: absolute;
	inset-inline-start: var(--dt-space-4);
	top: -100px;
	z-index: 999;
	padding: var(--dt-space-3) var(--dt-space-4);
	background: var(--dt-primary);
	color: var(--dt-white);
	border-radius: 0 0 var(--dt-radius) var(--dt-radius);
	transition: top var(--dt-duration) var(--dt-ease);
}
.dt-skip-link:focus { top: 0; color: var(--dt-white); }