/* ==========================================================================
نهال — لایهٔ پایهٔ ظاهر
جهتِ ۱a «ستونِ ادیتوریال»: آرام، متقارن، فضای سفیدِ سخاوتمند.
منبعِ همهٔ مقادیر: theme.json (توکن‌ها) — اینجا فقط به عناصرِ سایت وصل می‌شوند.
========================================================================== */
/* --------------------------------------------------------------------------
۱) پُلِ توکن‌ها → متغیرهای خودِ Blocksy
Blocksy ظاهرش را با متغیرهای --theme-* می‌سازد. اینجا آن‌ها را به توکن‌های
نهال وصل می‌کنیم تا هر بخشی از قالب که هنوز دستی استایل نداده‌ایم هم
خودبه‌خود رنگ و فونتِ درست بگیرد.
-------------------------------------------------------------------------- */
:root {
--theme-font-family: var(--wp--preset--font-family--vazirmatn);
--theme-font-weight: 400;
--theme-font-size: var(--wp--preset--font-size--medium);
--theme-line-height: var(--wp--custom--line-height--body);
--theme-text-color: var(--wp--preset--color--ink);
--theme-headings-color: var(--wp--preset--color--ink);
--theme-link-initial-color: var(--wp--preset--color--terracotta);
--theme-link-hover-color: var(--wp--preset--color--ink);
--theme-border-color: var(--wp--preset--color--hairline);
--theme-content-spacing: var(--wp--preset--spacing--50);
/* پدینگِ دکمه‌ها — این یکی را Blocksy اصلاً چاپ نمی‌کند.
قاعدهٔ خودش (.woocommerce button.button و خویشانش) می‌گوید
padding: var(--theme-button-padding)، ولی گزینهٔ buttonPadding در
theme_mods خالی ذخیره شده، پس blocksy_output_spacing() هیچ خطی برایش
نمی‌نویسد. یک var()ِ تعریف‌نشده کلِ اعلان را در زمانِ محاسبه باطل می‌کند،
یعنی پدینگ صفر می‌شود و متنِ هر دکمهٔ استانداردِ ووکامرس دقیقاً به لبه
می‌چسبد. بقیهٔ متغیرهایِ --theme-button-* (از جمله min-height: 40px) چاپ
می‌شوند؛ فقط همین یکی جا افتاده بود.
عمداً فقط افقی را باز می‌کنیم: ارتفاع را همان min-heightِ ۴۰px بگرداند تا
قدِ دکمه‌هایِ سراسرِ سایت با این تغییر جابه‌جا نشود. تا امروز دو وصلهٔ محلی
(خبرنامهٔ فوتر، دکمهٔ ثبتِ دیدگاه) همین یک علتِ سراسری را نقطه‌ای پوشانده
بودند؛ آن دو سرِ جایشان می‌مانند چون مقدارِ خودشان را از کامپ گرفته‌اند. */
--theme-button-padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
/* میان‌بُرهای خوانا برای استفاده در بقیهٔ فایل‌ها */
--nahal-hairline: 1px solid var(--wp--preset--color--hairline);
--nahal-transition: var(--wp--custom--transition);
}
/* --------------------------------------------------------------------------
۲) پایهٔ متن
فارسی به ارتفاعِ خطِ بازتر از لاتین نیاز دارد (۱٫۹) وگرنه متن خفه می‌شود.
-------------------------------------------------------------------------- */
body {
font-family: var(--wp--preset--font-family--vazirmatn);
font-size: var(--wp--preset--font-size--medium);
line-height: var(--wp--custom--line-height--body);
color: var(--wp--preset--color--ink);
background-color: var(--wp--preset--color--ground);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* فرم‌ها فونت را از مرورگر ارث می‌برند، نه از سایت — دستی برشان می‌گردانیم. */
input,
select,
textarea,
button,
optgroup {
font-family: inherit;
line-height: 1.7;
}
h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
font-family: var(--wp--preset--font-family--estedad);
font-weight: 700;
line-height: var(--wp--custom--line-height--heading);
letter-spacing: var(--wp--custom--tracking--tight);
color: var(--wp--preset--color--ink);
}
/* مقیاسِ اندازهٔ سرتیترها را اینجا دوباره اعلام می‌کنیم، وگرنه از بین می‌رود.
وردپرس اندازه‌هایِ theme.json را با سلکتورِ عنصریِ ساده (h1…h6) و در
چاپ می‌کند؛ Blocksy در main.min.css دقیقاً همان سلکتورها را با
font-size: var(--theme-font-size) دارد و چون دیرتر بار می‌شود، در تساویِ
اختصاصی (0,0,1) برنده می‌شود. نتیجه‌اش این بود که هر سرتیتری که کلاسِ
اندازه‌دار نداشت به ۱۵px می‌افتاد — کوچک‌تر از متنِ بدنه (۱۶px) و کوچک‌تر از
برچسبِ چشمیِ بالایِ خودش، یعنی سلسله‌مراتب وارونه می‌شد. main.css بعد از
Blocksy بار می‌شود، پس همین چند خط مقیاس را برمی‌گرداند. */
h1 {
font-size: var(--wp--preset--font-size--huge);
}
h2 {
font-size: var(--wp--preset--font-size--xx-large);
}
h3 {
font-size: var(--wp--preset--font-size--x-large);
}
h4 {
font-size: var(--wp--preset--font-size--large);
}
h5 {
font-size: var(--wp--preset--font-size--medium);
}
h6 {
font-size: var(--wp--preset--font-size--small);
}
h1,
.entry-title {
font-weight: 800;
line-height: var(--wp--custom--line-height--tight);
}
/* --------------------------------------------------------------------------
۲-ب) متنِ فارسیِ داخلِ صفحهٔ انگلیسی (جایگزینِ D3، lang="fa")
بخشِ ۲۰ (پایینِ فایل) روی ریشهٔ /en/ ارتفاعِ خطِ لاتین می‌گذارد؛ فارسیِ داخلش
باید ارتفاعِ خطِ خودش را پس بگیرد. اینجا، زود در فایل، نوشته شده تا قاعده‌هایِ
کلاس‌دارِ بعدی (مثلاً .nahal-legal__content p با ۲٫۳) در تساویِ وزن ببرند.
دو قاعده، چون دو مشکلِ جدا هست:
۱) توکن‌ها: custom property با هیچ قاعدهٔ دیگری نمی‌جنگد، پس هر var()ِ
پایین‌دست (تیتر ۱٫۴۵، --theme-line-height) درست حل می‌شود. وزن صفر.
۲) خودِ line-height: Blocksy برایِ p, li, td… می‌نویسد line-height: inherit و
عددِ بی‌واحدِ ریشه (۱٫۶۵) را به بندِ فارسی می‌رساند؛ باید صریح بنشیند.
تیترها بیرون‌اند: قاعدهٔ خودشان از توکنِ تیتر می‌خواند. */
:where(html[dir="ltr"] :lang(fa)) {
--wp--custom--line-height--body: 1.9;
--wp--custom--line-height--loose: 2.1;
--wp--custom--line-height--heading: 1.45;
--wp--custom--line-height--tight: 1.25;
--wp--custom--tracking--label: 0.22em;
--theme-line-height: 1.9;
}
:where(html[dir="ltr"]) :is(p, li, td, th, dd, dt, div, span, label, figcaption, address, blockquote):lang(fa) {
line-height: 1.9;
}
/* --------------------------------------------------------------------------
۳) پیوندها و انتخابِ متن
-------------------------------------------------------------------------- */
a {
color: var(--wp--preset--color--terracotta);
text-decoration: none;
transition: color var(--wp--custom--transition);
}
a:hover,
a:focus-visible {
color: var(--wp--preset--color--ink);
}
::selection {
background-color: var(--wp--preset--color--terracotta);
color: var(--wp--preset--color--white);
}
/* حلقهٔ فوکوس باید همیشه دیده شود — الزامِ دسترس‌پذیری. */
:focus-visible {
outline: 2px solid var(--wp--preset--color--terracotta);
outline-offset: 2px;
}
hr,
.wp-block-separator {
border: 0;
border-top: var(--nahal-hairline);
opacity: 1;
}
/* --------------------------------------------------------------------------
۴) اجزای تکرارشونده
-------------------------------------------------------------------------- */
/* «عنوانِ ریزِ فاصله‌دار» — همان برچسب‌های بالای تیترها در فایلِ طراحی
(نمونه: «مجله»، «راهنما»، «کالکشن پاییز»). */
/* خوانایی: قبلاً ۱۲px با وزنِ ۴۰۰ و فاصله‌حرفیِ 0.3em بود و سه مشکل داشت.
مهم‌ترینش فاصله‌حرفی است: خطِ فارسی متصل است، و letter-spacing همان اتصالِ
حروف را باز می‌کند — چیزی که در لاتین «شیک» است، اینجا کلمه را تکه‌تکه
می‌کند. پس تراکینگ به wide (0.12em) کم شد، اندازه یک پله بالا رفت و وزن
به ۵۰۰ رسید تا در ۱۳px هم تنه داشته باشد. برچسب هنوز «ریز و فاصله‌دار» است،
فقط دیگر باید حدس زده نشود. */
.nahal-eyebrow {
display: block;
font-family: var(--wp--preset--font-family--vazirmatn);
font-size: var(--wp--preset--font-size--medium);
font-weight: 600;
letter-spacing: 0.06em;
color: var(--wp--preset--color--terracotta);
margin-bottom: var(--wp--preset--spacing--30);
}
/* روی زمینهٔ تیره، برچسب با تراکوتای روشن خوانده می‌شود.
.nahal-on-dark هم به‌صورتِ ظرف نوشته شده بود و هم باید روی خودِ برچسب
کار کند: همه‌جا در قالب کنارِ هم می‌آیند (class="nahal-eyebrow nahal-on-dark")،
پس شکلِ نواده‌ایِ تنها هیچ‌وقت مچ نمی‌شد و برچسب تراکوتایِ تیره می‌ماند
— ۲٫۲۹:۱ روی اسپرسو. با شکلِ هم‌عنصری ۴٫۹۸:۱ می‌شود. */
.has-shell-background-color .nahal-eyebrow,
.has-espresso-background-color .nahal-eyebrow,
.nahal-on-dark .nahal-eyebrow,
.nahal-eyebrow.nahal-on-dark {
color: var(--wp--preset--color--terracotta-light);
}
/* دکمه‌ها: قرصی، تراکوتا، بدونِ سایه. */
.wp-block-button__link,
.ct-button,
.ct-button-ghost,
button.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
font-family: var(--wp--preset--font-family--vazirmatn);
font-size: var(--wp--preset--font-size--small);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0;
border-radius: var(--wp--custom--radius--pill);
box-shadow: none;
transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}
/* سافاریِ iOS هر ورودی‌ای را که فونتش کوچک‌تر از ۱۶px باشد هنگامِ فوکوس زوم
می‌کند، و چون بعدش خودش عقب نمی‌کشد کاربر وسطِ فرم با صفحه‌ای می‌ماند که
دیگر در قاب نیست. اندازه‌گیریِ ۳۷۵px این‌ها را زیرِ ۱۶ نشان داد: فیلدِ
خبرنامه ۱۴، کدِ تخفیفِ سبد ۱۴، مرتب‌سازیِ فروشگاه ۱۴، تعدادِ محصول ۱۳٫۶.
فقط در عرضِ موبایل بزرگ می‌شوند تا ظاهرِ دسکتاپ دست‌نخورده بماند.
:not()ها هم برایِ بردنِ اولویت لازم‌اند، نه تزئین: انتخابگرِ فیلدِ خبرنامه
(0,2,0) است و inputِ تنها (0,0,1) می‌باخت. */
@media (max-width: 699px) {
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select:not([multiple]),
textarea:not([readonly]) {
font-size: 16px;
}
}
/* --------------------------------------------------------------------------
۵) راست‌به‌چپ
وردپرس خودش dir="rtl" می‌گذارد؛ این‌ها فقط جاهایی است که عدد یا لاتین
داخلِ متنِ فارسی می‌آید و باید جهتش درست بماند.
-------------------------------------------------------------------------- */
.nahal-ltr {
direction: ltr;
unicode-bidi: isolate;
text-align: left;
}
/* قیمت و اعداد در متنِ فارسی نباید بشکنند. */
.woocommerce-Price-amount,
.nahal-num {
unicode-bidi: isolate;
white-space: nowrap;
}
/* --------------------------------------------------------------------------
۶) هدر — نوارِ اعلان، آیکون‌ها، منویِ اصلی، مگامنو
-------------------------------------------------------------------------- */
.nahal-announcement-bar {
background-color: var(--wp--preset--color--terracotta);
color: var(--wp--preset--color--white);
text-align: center;
padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}
.nahal-announcement-bar p {
margin: 0;
font-size: var(--wp--preset--font-size--x-small);
letter-spacing: var(--wp--custom--tracking--label);
}
/* وردمارکِ هدر («کالکشن نهال») — مشکیِ خالص طبقِ درخواست، نه توکنِ مشکیِ گرم. */
.site-title,
.site-title a {
color: #000000;
}
.site-title a:hover {
color: #000000;
}
/* ارتفاعِ پیش‌فرضِ ردیف‌هایِ هدرسازِ Blocksy (۱۲۰px لوگو + ۸۰px منو) خیلی بازتر
از دیزاینِ مرجع بود؛ اینجا فشرده‌تر و هم‌راستا با آن می‌شود. */
.ct-header [data-device="desktop"] [data-row="middle"] > div {
min-height: 84px !important;
}
.ct-header [data-device="desktop"] [data-row="bottom"] > div {
min-height: 56px !important;
}
.ct-header [data-device="mobile"] [data-row="middle"] > div {
min-height: 60px !important;
}
/* آیکون‌های سبد/حساب/جستجو یک‌دست: مشکیِ گرم، هاور تراکوتا. */
.ct-header-account,
.ct-header-cart .ct-cart-item,
.ct-header-search {
color: var(--wp--preset--color--ink);
transition: color var(--wp--custom--transition);
}
.ct-header-account:hover,
.ct-header-cart .ct-cart-item:hover,
.ct-header-search:hover {
color: var(--wp--preset--color--terracotta);
}
.ct-header-account .ct-icon-container svg {
fill: currentColor;
}
/* هدفِ لمسیِ آیکون‌های هدر — هر سه دقیقاً به اندازهٔ خودِ آیکون بودند (۱۵×۱۵،
سبد ۲۳×۱۵) با پدینگِ صفر؛ یعنی زیرِ کفِ ۲۴px استانداردِ WCAG 2.2.
ریشه‌اش یک متغیرِ تعریف‌نشده است، نه یک قاعدهٔ غلط: Blocksy برایِ هر
[class*="ct-toggle"] می‌نویسد width: var(--toggle-button-size) — **بدونِ
مقدارِ پشتیبان**. این متغیر قرار است از سفارشی‌سازِ Blocksy بیاید و
theme_mods اینجا خالی است (همان نکتهٔ بالایِ فایل)، پس اعلانْ
«invalid at computed-value time» می‌شود و width به auto برمی‌گردد —
دکمه تا خودِ SVGِ ۱۵ پیکسلی جمع می‌شود.
پس به‌جایِ جنگیدن با آن قاعده، همان متغیری را که خودش می‌خواند تعریف
می‌کنیم. مهم است چون پدینگش !important دارد
(padding: var(--toggle-button-padding, 0px) !important) و راهِ پدینگ بسته
است؛ این راه بدونِ !important و بدونِ جنگِ specificity کار می‌کند.
min-* برایِ حساب و سبد لازم است چون آن‌ها ct-toggle نیستند و آن متغیر را
نمی‌خوانند. ردیفِ میانیِ هدر ۸۴px است، پس ۴۰px ارتفاع را عوض نمی‌کند.
.ct-header-trigger (همبرگرِ موبایل) هم همین مشکل را داشت و در بازبینیِ
دسکتاپ دیده نشده بود: در ۳۷۵px اندازه‌اش ۱۸×۱۸ بود — یعنی مهم‌ترین دکمهٔ
صفحه در موبایل، کوچک‌تر از همهٔ آیکون‌های دسکتاپ. ردیفِ موبایلِ هدر ۶۰px
است، پس ۴۰px آن‌جا هم جا می‌شود (اندازه‌گیری‌شده، بدونِ سرریزِ افقی). */
.ct-header .ct-header-search,
.ct-header .ct-header-account,
.ct-header .ct-header-wishlist,
.ct-header .ct-header-trigger,
.ct-header .ct-header-cart .ct-cart-item {
--toggle-button-size: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
}
/* قلبِ هدر باید تهی باشد، نه پُر.
صفتِ fill="none" رویِ خودِ SVG کافی نیست: قاعدهٔ .ct-icon { fill: … }ِ
Blocksy یک اعلانِ CSS است و بر صفتِ ارائه‌ای مقدم می‌شود، پس قلب توپُر
درمی‌آمد — یعنی شکلِ «ذخیره‌شده»، رویِ آیکونی که اصلاً حالت ندارد. */
.ct-header-wishlist .ct-icon {
fill: none;
/* همان متغیری که آیکون‌هایِ جست‌وجو/حساب/سبد می‌خوانند — بی این، قلب رنگِ
لینک (تراکوتا) را می‌گرفت و کنارِ همسایه‌هایِ مشکی‌اش وصله می‌شد. */
stroke: var(--theme-icon-color, var(--theme-text-color));
}
/* شمارندهٔ کنارِ قلبِ هدر.
assets/js/wishlist.js بعد از هر افزودن/حذف هم متن و هم data-count را
می‌نویسد؛ شرط رویِ data-count است چون متن رقمِ فارسی است و CSS نمی‌تواند
«۰» را با شرطِ عددی بگیرد.
موقعیتش relative است نه absolute: آیکونِ هدر ۴۰px است و نشانِ شناور رویِ
لبه، در ردیفِ ۶۰ پیکسلیِ موبایل بیرون می‌زد. */
.ct-header-wishlist__count {
margin-inline-start: 2px;
font-size: var(--wp--preset--font-size--x-small);
line-height: 1;
color: var(--wp--preset--color--terracotta);
font-variant-numeric: tabular-nums;
}
.ct-header-wishlist__count[data-count="0"] {
display: none;
}
/* مبلغِ کنارِ سبد — برایِ همه، فقط وقتی سبد خالی نیست.
قبلاً مهمان هرگز مبلغ نمی‌دید و کاربرِ واردشده با سبدِ خالی «۰ تومان» می‌دید
(J2-19). شمارندهٔ Blocksy با هر افزودن data-count را به‌روز می‌کند، پس همین
قاعده بعد از افزودن هم درست می‌ماند. */
.ct-header-cart .ct-cart-item:has(.ct-dynamic-count-cart[data-count="0"]) .ct-label {
display: none;
}
/* موبایل: مبلغِ سبد برگشت (تصمیمِ کارفرما، ردیفِ ۲۵) و جایش را آیکونِ «حساب»
داد — همان پیوند در منویِ کشویی هست.
ردیفِ ۳۹۰ پیکسلی جا برایِ هر دو نداشت: مبلغِ هفت‌رقمی ۷۷px می‌گیرد و با پنج
کنترل، قلب و حساب زیرِ لوگو می‌افتادند (لوگو ۱۳۲–۲۵۸، حساب ۱۳۹–۱۷۹). */
@media (max-width: 999px) {
header [data-device="mobile"] .ct-header-account {
display: none;
}
/* حتی بی آیکونِ حساب، «۲٬۳۰۰٬۰۰۰ تومان» کنارِ سبد قلب را زیرِ لوگو می‌برد:
ستونِ کناریِ ردیف ۱۰۲px است و قلب + سبد ۹۰ تا را گرفته‌اند. پس در موبایل
عدد زیرِ آیکونِ سبد می‌نشیند، ریز و بی «تومان» — همان عددی که در خودِ سبد
کامل نوشته شده.
۱۲px نه ۱۰: ۱۰ زیرِ کفِ ۱۱ پوینتیِ متن در گوشی بود. مبلغِ هفت‌رقمی در
وزیرمتن ۳۸px ← ۴۵px پهن می‌شود؛ در ۳۹۰px باید دوباره دیده شود که قلب
زیرِ لوگو نیفتد. */
header [data-device="mobile"] .ct-header-cart .ct-cart-item {
flex-direction: column;
gap: 2px;
}
header [data-device="mobile"] .ct-header-cart .ct-label {
order: 2;
font-size: 12px;
line-height: 1;
white-space: nowrap;
}
header [data-device="mobile"] .ct-header-cart .ct-label .woocommerce-Price-currencySymbol {
display: none;
}
}
/* منویِ اصلی (۷ آیتم، تخت — مگامنو جدا و پایین‌تر رندر می‌شود). */
.header-menu-1 .menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--wp--preset--spacing--60);
list-style: none;
margin: 0;
padding: var(--wp--preset--spacing--30) 0;
}
.header-menu-1 .menu > li > a {
font-family: var(--wp--preset--font-family--vazirmatn);
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--ink);
}
.header-menu-1 .menu > li > a:hover,
.header-menu-1 .menu > li.is-open > a {
color: var(--wp--preset--color--terracotta);
}
/* «فروشگاه» تنها آیتمی است که پنل باز می‌کند و تا امروز هیچ نشانه‌ای نداشت —
عینِ «مجله» و «دربارهٔ نهال» به‌نظر می‌رسید، پس کسی نمی‌دانست کلیک چه می‌کند.
یک شِوران که با باز شدنِ پنل می‌چرخد.
با border کشیده شده نه SVG، چون اندازه‌اش باید به font-sizeِ همین لینک
گره بخورد (واحدِ em)؛ یک SVG با اندازهٔ ثابت، کنارِ متنِ سیالِ فارسی
بزرگ‌وکوچک می‌زد.
⚠️ لنگرگاه .nahal-mega-trigger است، نه :has() یا ترتیبِ آیتم‌ها: همان
کلاسی که جاوااسکریپت هم با آن پنل را پیدا می‌کند (assets/js/mega-menu.js)،
پس اگر آیتمِ منو جابه‌جا شود هر دو با هم درست می‌مانند.
در RTL، ::after سمتِ چپِ متن می‌نشیند — همان‌جایی که کاربرِ فارسی‌زبان
نشانگرِ بازشونده را انتظار دارد. */
.header-menu-1 .menu > li.nahal-mega-trigger > a {
display: inline-flex;
align-items: center;
gap: 0.45em;
}
.header-menu-1 .menu > li.nahal-mega-trigger > a::after {
content: "";
/* 0.42em رویِ لینکِ ۱۵ پیکسلی می‌شد ۶٫۳px، و ضخامتِ 1.5px رویِ نمایشگرِ
dpr: 1 به ۱ پیکسل گرد می‌شد (اندازه‌گیری‌شده). یک خطِ یک‌پیکسلیِ ۶ پیکسلی
کنارِ متنِ ۱۵px با وزنِ ۷۰۰ عملاً دیده نمی‌شد — نشانه‌ای که هست ولی خوانده
نمی‌شود، بدتر از نبودنش است.
ضخامت عمداً px ماند و em نشد: مقدارِ em دوباره به عددِ اعشاری می‌رسد و
همان گردشدن تکرار می‌شود. خودِ جعبه em می‌ماند تا با font-size بزرگ‌وکوچک
شود. */
width: 0.5em;
height: 0.5em;
border-inline-end: 2px solid currentColor;
border-block-end: 2px solid currentColor;
/* مربعِ چرخیده = شِوران. -45deg نوکش را به پایین می‌آورد. */
transform: rotate(-45deg);
/* نوکِ شِوران پایین‌تر از مرکزِ نوری‌اش می‌افتد؛ این نیم‌پیکسل صافش می‌کند. */
margin-block-start: -0.18em;
transition: transform 0.18s ease;
}
.header-menu-1 .menu > li.nahal-mega-trigger.is-open > a::after {
transform: rotate(135deg);
margin-block-start: 0.1em;
}
/* کسی که «حرکت کمتر» را در سیستمش روشن کرده، چرخشِ ناگهانی نبیند. */
@media (prefers-reduced-motion: reduce) {
.header-menu-1 .menu > li.nahal-mega-trigger > a::after {
transition: none;
}
}
/* سه پنلِ مگامنو — دقیقاً زیرِ هدر می‌نشینند چون بلافاصله بعدِ آن در DOM هستند
(position: relative روی wrapper، بدونِ نیاز به محاسبهٔ جاوااسکریپتی).
⚠️ width اینجا اجباری است، نه سلیقه‌ای. #main-containerِ Blocksy یک
flexِ ستونی است و این wrapper یکی از آیتم‌هایش. در فلکس‌باکس، marginِ
auto رویِ محورِ عرضی، stretch را **لغو** می‌کند؛ آن‌وقت آیتم به عرضِ
محتوایش برمی‌گردد، و تنها فرزندِ این wrapper position: absolute است، یعنی
خارج از جریان. نتیجه: عرضِ ۰. پنل یک تیغهٔ ۲ پیکسلی می‌شد و لینک‌هایش از آن
بیرون می‌زدند و رویِ هیرو چاپ می‌شدند — که دقیقاً شبیهِ «پنل پس‌زمینه ندارد»
دیده می‌شد، در حالی که background-color سرِ جایش بود.
عرض از خودِ متغیرِ ظرفِ Blocksy می‌آید، نه یک عددِ ثابت: ظرفِ هدر 90vw است،
پس 1200pxِ قبلی فقط تصادفاً نزدیک بود و رویِ نمایشگرِ پهن از هدر جدا می‌افتاد.
حالا در هر عرضی دقیقاً زیرِ محتوایِ هدر می‌نشیند. */
.nahal-mega-menus {
position: relative;
width: var(--theme-container-width, min(100%, 90vw));
margin-inline: auto;
}
/* پنل به اندازهٔ محتوایش، نه به اندازهٔ کلِ ظرف (D28).
inset-inline: 0 پنل را ۱۷۲۸px پهن می‌کرد در حالی که سه ستونِ داخلش
۱۶۰+۱۶۰+۱۶۰ بودند — یعنی دوسومِ پنل خالیِ خالی. width: max-content آن را
به عرضِ واقعیِ سه ستون می‌رساند و max-width نگه می‌دارد که در نمایشگرِ
باریک از ظرف بیرون نزند.
⚠️ inset-inline-end: auto لازم است، نه اضافه: با inset-inline: 0 هر دو سر
قفل می‌شوند و width نادیده گرفته می‌شود. پنل از لبهٔ **شروع**ِ ظرف باز
می‌شود (در RTL یعنی راست)، زیرِ همان منویی که بازش کرده.
پس‌زمینه از ground به white رفت: ground دقیقاً رنگِ خودِ صفحه بود
(هر دو #F4F0E8 — اندازه‌گیری‌شده)، پس پنل لبه‌ای جز یک خطِ مو نداشت و
شناور به‌نظر نمی‌رسید. سفید یک پلهٔ روشن‌تر است و با سایهٔ نرم پنل را
«رویِ» صفحه می‌نشاند، نه «داخلِ» آن. */
.nahal-mega-panel {
position: absolute;
top: 0;
inset-inline-start: 0;
inset-inline-end: auto;
width: max-content;
max-width: 100%;
z-index: 40;
}
/* پردهٔ کم‌رنگ رویِ صفحه وقتی پنل باز است — کارش تمرکز است، نه تزئین: پنل حالا
باریک است و بدونِ پرده در صفحهٔ شلوغ گم می‌شود.
fixed داخلِ پنل کار می‌کند چون خودِ پنل z-index: 40 دارد و زمینهٔ
انباشتِ خودش را می‌سازد؛ z-index: -1 پرده را پشتِ محتوایِ پنل می‌برد ولی
هنوز رویِ صفحه. بستنش هم رایگان است: کلیک رویِ پرده از نظرِ
mega-menu.js «کلیکِ بیرون» است و همان‌جا پنل را می‌بندد. */
.nahal-mega-panel::before {
content: "";
position: fixed;
inset: 0;
background-color: rgba(31, 27, 23, 0.28);
z-index: -1;
/* ⚠️ بدونِ این خط، پرده کلِ صفحه را قفل می‌کند — و این را اندازه‌گیری
نشانمان داد، نه حدس.
شبه‌عنصر رویدادِ اشاره‌گر را از طرفِ **عنصرِ خودش** می‌گیرد. پس پرده‌ای
که تمامِ ویوپورت را می‌پوشاند، تمامِ ویوپورت را به سطحِ کلیکِ پنل تبدیل
می‌کند: elementFromPoint(480, 1000) — نقطه‌ای بیرونِ جعبهٔ پنل
(1118–1817 × 179–614) — به‌جایِ محتوایِ صفحه، DIV.nahal-mega-panel
برمی‌گرداند. دو پی‌آمد داشت: هیچ لینکی در صفحه دیگر کلیک نمی‌شد، و
mega-menu.js هر کلیکی را «داخلِ پنل» می‌دید، پس پنل با کلیکِ بیرون هم
بسته نمی‌شد. */
pointer-events: none;
}
.nahal-mega-panel[hidden] {
display: none;
}
/* پس‌زمینه، قاب و سایه رویِ __inner است، نه خودِ پنل (J2-04).
پنل زمینهٔ انباشتِ خودش را دارد و پرده z-index: -1 است: در چنین زمینه‌ای
فرزندِ منفی **رویِ** پس‌زمینهٔ ریشه و **زیرِ** محتوایِ عادی کشیده می‌شود. پس
پردهٔ تیره رویِ سفیدیِ خودِ پنل می‌افتاد و پنل خاکستری و «غیرفعال» دیده می‌شد،
فقط متن رویِ پرده بود. __inner محتوایِ عادی است و بعد از پرده کشیده می‌شود. */
.nahal-mega-panel__inner {
background-color: var(--wp--preset--color--white);
border: var(--nahal-hairline);
border-top: none;
box-shadow: 0 18px 40px -24px rgba(31, 27, 23, 0.45);
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--70);
padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}
.nahal-mega-panel__col {
min-width: 160px;
}
.nahal-mega-panel__heading {
font-family: var(--wp--preset--font-family--vazirmatn);
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
/* مثلِ .nahal-eyebrow از label (0.22em) به wide کم شد — فاصله‌حرفیِ زیاد
اتصالِ حروفِ فارسی را باز می‌کند. */
letter-spacing: var(--wp--custom--tracking--wide);
color: var(--wp--preset--color--terracotta);
margin: 0 0 var(--wp--preset--spacing--40);
}
/* گروهِ دوم («دسته‌بندی‌ها») با یک خطِ مو از گروهِ نماها جدا می‌شود، وگرنه دو
فهرستِ پشتِ‌هم یک فهرستِ بلند به‌نظر می‌رسند. */
.nahal-mega-panel__col + .nahal-mega-panel__col:has(.nahal-mega-panel__heading) {
border-inline-start: 1px solid var(--wp--preset--color--hairline);
padding-inline-start: var(--wp--preset--spacing--60);
}
.nahal-mega-panel__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--30);
}
.nahal-mega-panel__list a {
color: var(--wp--preset--color--ink);
font-size: var(--wp--preset--font-size--medium);
}
.nahal-mega-panel__list a:hover {
color: var(--wp--preset--color--terracotta);
}
/* برچسبِ گروه در منویِ موبایل («دسته‌بندی‌ها») — آیتمِ منو هست ولی لینک نیست،
پس نباید مثلِ بقیه به‌نظر برسد: رنگِ تراکوتا، ریزتر، و بدونِ نشانگرِ کلیک. */
.nahal-menu-group-label > a {
color: var(--wp--preset--color--terracotta);
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
letter-spacing: var(--wp--custom--tracking--wide);
cursor: default;
pointer-events: none;
}
/* در پنلِ تیرهٔ موبایل: تراکوتایِ روشن (تراکوتایِ تیره رویِ قهوه‌ایِ پنل کم‌رنگ
بود) و فاصله بالایِ هر تیتر، تا سه گروه از هم جدا خوانده شوند (J1-16). */
#offcanvas .nahal-menu-group-label > a {
color: var(--wp--preset--color--terracotta-light);
}
#offcanvas .sub-menu .nahal-menu-group-label:not(:first-child) {
margin-block-start: var(--wp--preset--spacing--40);
}
/* «حسابِ من» / «ورود / ثبت‌نام» تهِ منو (inc/header.php، J1-26): با خطی
جدا از فهرستِ فروشگاه، چون جنسش فرق دارد. */
#offcanvas .nahal-menu-account {
margin-block-start: var(--wp--preset--spacing--40);
padding-block-start: var(--wp--preset--spacing--40);
border-block-start: 1px solid rgba(255, 255, 255, 0.15);
}
/* موبایل: مگامنویِ دسکتاپ اصلاً دیده نشود؛ آف‌کنویسِ بومیِ Blocksy کارِ منویِ
موبایل را با زیرمنویِ آکاردئونی انجام می‌دهد. */
@media (max-width: 999px) {
.nahal-mega-menus {
display: none;
}
}
/* فلشِ باز/بستهٔ «فروشگاه» در منویِ موبایل.
دو ایراد داشت و هر دو نامرئی بودند تا وقتی در مرورگرِ واقعی باز شد:
۱) رنگ. پنلِ آف‌کنویس تیره است و سفارشی‌ساز فقط
--theme-link-initial-color را سفید می‌کند. آن متغیر رویِ می‌نشیند،
ولی این دکمه **خواهرِ** است نه داخلش (Blocksy هر دو را در
.ct-sub-menu-parent می‌پیچد)، پس .ct-icon به پشتیبانش
--theme-text-color می‌افتد: #1F1B17، یعنی تقریباً مشکی روی تیره.
فلش آن‌جا بود و کلیک هم می‌شد — فقط دیده نمی‌شد.
۲) اندازه. همان اشکالِ --toggle-button-sizeِ آیکون‌های هدر (بالا،
خطِ ۲۹۹): متغیر تعریف نشده و width به auto برمی‌گردد، پس هدفِ لمسی
۱۵×۱۵ می‌شد — زیرِ کفِ WCAG 2.2. همان راه‌حل، چون پدینگش !important دارد.
در CSSِ قالب، نه در سفارشی‌ساز: تنظیماتِ سفارشی‌ساز در دیتابیس‌اند و با
بستهٔ فقط‌فایل به سایتِ واقعی نمی‌رسند. */
#offcanvas .ct-toggle-dropdown-mobile {
--toggle-button-size: 44px;
--theme-icon-color: var(--theme-link-initial-color, #ffffff);
}
/* فلش موقعِ باز بودن بچرخد. Blocksy کلاسِ dropdown-active را رویِ