/* ==========================================================================
   کادر محتوا (Content Card) - v0.99
   مشکل: برگه‌های متنی/فرمی، تک‌مقاله و خلاصه‌ی تک‌محصول، محتوا را مستقیم روی زمینه
   چاپ می‌کردند (زمینه #FAFAF9 و سطح #FFF تقریباً هم‌رنگ بودند) و صفحه «لخت» دیده می‌شد.
   راه‌حل (همان الگوی Kadence/Astra/Woodmart): سه لایه = زمینه‌ی کمی تیره‌تر ← کارت سفید
   با بوردر و سایه‌ی ملایم ← رنگ برند فقط برای تأکید.
   همه‌چیز پشت کلاس body.nk-content-cards است (Customizer > ظاهر نیلوکالا > کادر محتوا)؛
   با «بدون کادر» این فایل اصلاً لود نمی‌شود و ظاهر قبلی برمی‌گردد.
   رنگ‌ها فقط از توکن‌ها (--card-bg/--card-border/--color-*) می‌آیند، پس حالت شب خودکار درست است.
   ========================================================================== */

/* ---- ۱) لایه‌ی زمینه: کمی گرم‌تر/تیره‌تر از رنگ پالت، تا کارت سفید واقعاً بالا بیاید.
        از خودِ رنگ پالت مشتق می‌شود (color-mix) تا با هر پالت/رنگ سفارشی کار کند.
        در حالت شب عمداً دست نمی‌خورد (آنجا زمینه از سطح تیره‌تر است). ---- */
body.nk-content-cards {
	--nk-bg: color-mix(in srgb, var(--color-background) 93%, #8A7F70 7%);
	--nk-card-pad: clamp(18px, 3.2vw, 36px);
}
:root[data-theme="dark"] body.nk-content-cards {
	--nk-bg: var(--color-background);
}

/* ---- ۲) ظاهر مشترک کارت ---- */
body.nk-content-cards :is(
	.nk-page-card,
	article.nk-post-card,
	.nk-404,
	.woocommerce div.product > div.images,
	.woocommerce div.product > .summary
) {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--nk-card-pad);
	min-width: 0;
}

/* ---- ۳) برگه‌های ثابت (page.php) ---- */
body.nk-content-cards .nk-page-card { margin-top: 6px; }

/* عنوان داخل کارت + خط تأکید رنگی (بخشی از «روح» صفحه) */
body.nk-content-cards :is(.nk-page-card > h1, article.nk-post-card > h1) {
	position: relative;
	margin: 0 0 var(--space-lg);
	padding-bottom: 14px;
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1.5;
}
body.nk-content-cards :is(.nk-page-card > h1, article.nk-post-card > h1)::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	border-radius: 3px;
	background: var(--color-primary);
}

/* ---- ۴) فرم‌های افزونه‌ها داخل کارت: «کارت درون کارت» نشود ---- */
/* پیگیری سفارش (nilo-order-tracking): پنل ملایم به‌جای کادر سفید با سایه.
   افزونه در حالت تاریکِ سیستم‌عامل (prefers-color-scheme) با !important فرم را تیره می‌کند، حتی
   وقتی سایت روشن است؛ این‌جا هم !important لازم است تا رنگ‌ها همیشه از توکن‌های قالب بیایند. */
body.nk-content-cards .nk-page-card .nilo-order-track-form {
	max-width: 520px;
	margin: var(--space-lg) auto 0;
	padding: clamp(16px, 3vw, 26px);
	background: var(--nk-bg) !important;
	color: var(--color-text-primary) !important;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: none;
}
body.nk-content-cards .nk-page-card .nilo-order-track-form input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
	background: var(--card-bg) !important;
	color: var(--color-text-primary) !important;
	border-color: var(--color-border) !important;
}
body.nk-content-cards .nk-page-card .nilo-ot-math-question {
	background: var(--card-bg) !important;
	color: var(--color-text-primary) !important;
}
/* فرم‌ساز نیلو (scf): کادر خودش را دارد؛ داخل کارت صفحه تخت می‌شود */
body.nk-content-cards .nk-page-card .scf-form-wrapper {
	margin-block: var(--space-lg) 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
}

/* ---- ۵) تک‌مقاله + سایدبار ---- */
body.nk-content-cards article.nk-post-card { margin-bottom: 0; }

/* ویجت‌های سایدبار همان زبان کارت */
body.nk-content-cards .nk-blog-widget {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

/* سایدبار چسبان: با اسکرول مقاله‌ی بلند همراه می‌ماند و خلأ سمت سایدبار نمی‌ماند
   (همان الگوی .nk-shop-sidebar). اگر بلندتر از صفحه بود، داخل خودش اسکرول می‌شود تا
   پایینش از دسترس خارج نشود. فقط دسکتاپ؛ در موبایل سایدبار زیر محتوا می‌رود. */
@media (min-width: 901px) {
	body.nk-content-cards .nk-blog-sidebar {
		position: sticky;
		top: 90px;
		align-self: start;
		max-height: calc(100vh - 110px);
		overflow-y: auto;
		scrollbar-width: thin;
	}
}

/* ---- ۶) تک‌محصول: گالری و خلاصه دو کارت هم‌قد ---- */
body.nk-content-cards .woocommerce div.product > div.images {
	overflow: hidden;
}
body.nk-content-cards .woocommerce div.product > .summary {
	padding-block: clamp(18px, 2.6vw, 30px);
}
/* برچسب «حراج!» روی گوشه‌ی کارت گالری می‌ماند (داخل padding کارت) */
body.nk-content-cards .woocommerce div.product > .onsale { top: 14px; right: 14px; }

/* ---- ۷) صفحه‌ی ۴۰۴ ---- */
body.nk-content-cards .nk-404 { padding-block: clamp(24px, 4vw, 44px); }

/* ---- ۸) موبایل: کارت‌ها نزدیک لبه، پدینگ کمتر ---- */
@media (max-width: 600px) {
	body.nk-content-cards { --nk-card-pad: 16px; }
	body.nk-content-cards :is(.nk-page-card, article.nk-post-card, .nk-404,
		.woocommerce div.product > div.images, .woocommerce div.product > .summary) {
		border-radius: var(--radius-md);
	}
}