/* ==========================================================================
   مگامنو + زیرمنوی معمولی
   این فایل فقط وقتی بارگذاری می‌شود که حداقل یک زیرمنو (مگا یا معمولی) در منوی primary/mobile
   وجود داشته باشد (نگاه کنید به nilokala_mega_menu_enqueue_assets)
   ========================================================================== */

.nk-mm-item { position: relative; }

/* ردیفِ ثابت‌ارتفاعِ «لینک + دکمه‌ی toggle» - مرجع موقعیت toggle همین جعبه است، نه کل <li>
   (که وقتی پنل باز می‌شود قدش بلند می‌شود) - رفع باگِ «فلش وسط زیرمنو می‌افتد» */
.nk-mm-item-head { position: relative; display: flex; align-items: stretch; }

.nk-mm-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 1;
}

/* آیتم مگامنو کلاس menu-item-has-children را هم از وردپرس می‌گیرد و آن، پیکان کوچک عمومی
   خودش را با ::after اضافه می‌کند - این‌جا برای همین آیتم خاموشش می‌کنیم چون toggle
   اختصاصی خودمان را داریم (رفع باگ «دو پیکان») */
.nk-header-nav li.nk-mm-item > .nk-mm-item-head > a.nk-mm-link::after {
	display: none;
}

/* دکمه‌ی جدای باز/بسته - در دسکتاپ اصلاً دیده نمی‌شود (هاور/فوکوس روی خودِ لینک کافی است) */
.nk-mm-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 6px;
	cursor: pointer;
	color: inherit;
	flex-shrink: 0;
}
.nk-mm-chevron { width: 16px; height: 16px; transition: transform 0.15s ease; }

.nk-mm-panel[hidden] { display: none; }

/* ==========================================================================
   دسکتاپ (>768px - همان مرزی که main.css نوار منو را off-canvas می‌کند)
   ========================================================================== */
@media (min-width: 769px) {
	.nk-mm-panel {
		position: absolute;
		inset-inline-start: 0;
		top: 100%;
		z-index: 100;
		width: max-content;
		min-width: 220px;
		background: var(--nk-mm-bg, var(--color-surface));
		border: 1px solid var(--color-border);
		border-radius: var(--nk-radius, 8px);
		box-shadow: var(--shadow-lg);
		opacity: 0;
		transform: translateY(6px);
		transition: opacity 0.15s ease, transform 0.15s ease;
		/* اگر بدون این، ul.sub-menu را هم می‌گرفت، از قانون افقیِ عمومی نوار منو
		   (.nk-header-nav ul { display:flex }) پیروی می‌کرد و ردیفی می‌شد؛ این‌جا صریحاً
		   عمودی‌اش می‌کنیم (هم برای مگاپنل هم برای زیرمنوی معمولی) */
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	/* مثلث واقعی رو به بالا (نه لوزی!) - با تکنیک border به‌جای چرخاندن یک مربع پرشده،
	   چون آن روش قبلی یک لوزیِ کامل نشان می‌داد نه فقط نوکِ آن (رفع باگ #۱).
	   موقعیت افقی‌اش (left) با جاوااسکریپت تنظیم می‌شود تا حتی وقتی پنل برای رعایت فاصله‌ی
	   امن از لبه‌ی صفحه جابه‌جا شود، همچنان دقیقاً زیر همان آیتم بماند (رفع باگ #۲) */
	.nk-mm-panel::before {
		content: "";
		position: absolute;
		bottom: 100%;
		left: var(--nk-mm-arrow-x, 22px);
		width: 0;
		height: 0;
		border-inline: 7px solid transparent;
		border-bottom: 7px solid var(--nk-mm-bg, var(--color-surface));
	}

	.nk-mm-panel.is-open {
		opacity: 1;
		transform: translateY(0);
	}

	.nk-mm-panel-inner { padding: 24px; }

	.nk-mm-columns {
		display: grid;
		grid-template-columns: repeat(var(--nk-mm-columns, 4), minmax(160px, 1fr));
		gap: 28px;
	}

	/* زیرمنوی معمولی (بدون مگامنو) - فهرست ساده و عمودی، نه شبکه‌ی چندستونه */
	.nk-mm-panel.sub-menu {
		padding: 8px 0;
		min-width: 220px;
		width: max-content;
	}
	.nk-mm-panel.sub-menu > li { position: relative; width: 100%; }
	.nk-mm-panel.sub-menu > li > .nk-mm-item-head > a.nk-mm-link,
	.nk-mm-panel.sub-menu > li > a {
		display: block;
		padding: 10px 18px;
		font-size: 13.5px;
		font-weight: 400;
		color: var(--color-text-secondary);
		white-space: nowrap;
	}
	.nk-mm-panel.sub-menu > li > a:hover,
	.nk-mm-panel.sub-menu > li > .nk-mm-item-head > a.nk-mm-link:hover {
		color: var(--color-primary);
	}
	/* زیرمنوی تودرتو (نوه) - به‌جای پایین، از پهلو باز می‌شود */
	.nk-mm-panel.sub-menu .nk-mm-panel.sub-menu {
		top: -9px;
		inset-inline-start: 100%;
	}
	.nk-mm-panel.sub-menu .nk-mm-panel::before { display: none; }
}

/* ==========================================================================
   موبایل (≤768px) - UX مستقل: به‌جای پنل شناور، آکاردئونِ درجا زیر همان آیتم باز می‌شود
   ========================================================================== */
@media (max-width: 768px) {
	.nk-mm-toggle {
		display: inline-flex;
		position: absolute;
		inset-inline-end: 0;
		top: 0;
		height: 100%; /* ارتفاع همین ردیفِ ثابت (.nk-mm-item-head)، نه کل <li> */
		width: 48px; /* حداقل اندازه‌ی لمسی مناسب */
	}
	.nk-mm-toggle[aria-expanded="true"] .nk-mm-chevron { transform: rotate(180deg); }

	.nk-mm-link { padding-inline-end: 48px; }

	.nk-mm-panel {
		position: static;
		width: 100%;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		background: var(--nk-mm-bg, var(--nk-menu-bg, var(--color-surface)));
	}
	.nk-mm-panel-inner { padding: 4px 20px 12px; }

	.nk-mm-columns {
		display: block; /* در موبایل ستون‌ها کنار هم نه، زیر هم - خواناتر با انگشت */
	}
	.nk-mm-column + .nk-mm-column { margin-top: 10px; padding-top: 10px; }
	.nk-mm-panel .nk-mm-column-title { padding: 6px 0; }

	/* زیرمنوی معمولی در موبایل - همان تورفتگی ساده‌ی تودرتو، بدون پدینگ اضافه‌ی سایدبار */
	.nk-mm-panel.sub-menu { padding: 0; }
	.nk-mm-panel.sub-menu > li > a,
	.nk-mm-panel.sub-menu > li > .nk-mm-item-head > a.nk-mm-link {
		padding: 10px 20px 10px 36px;
		font-size: var(--nk-mm-link-size, 13.5px);
		color: var(--nk-mm-link-color, var(--color-text-secondary));
	}
}

.nk-mm-column {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.nk-mm-panel .nk-mm-column-title {
	font-weight: 700;
	font-size: var(--nk-mm-title-size, 15px);
	color: var(--nk-mm-title-color, var(--color-primary));
}
.nk-mm-column-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
/* پیوندهای داخل پنل، مستقل از استایل عمومیِ لینک‌های نوار موبایل (main.css) که پدینگ/خط‌
   جداکننده‌ی خودش را دارد - این‌جا با اختصاصی‌تر بودن سلکتور، آن را override می‌کنیم */
.nk-mm-panel a.nk-mm-column-title,
.nk-mm-panel .nk-mm-item-link > a {
	border-bottom: 0;
	padding: 6px 0;
}
.nk-mm-panel .nk-mm-item-link a {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--nk-mm-link-size, 13.5px);
	color: var(--nk-mm-link-color, var(--color-text-secondary));
}
.nk-mm-panel .nk-mm-item-link a:hover,
.nk-mm-panel .nk-mm-item-link a:focus-visible {
	color: var(--color-primary);
}

.nk-mm-thumb { border-radius: 4px; object-fit: contain; flex-shrink: 0; }
.nk-mm-icon { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.nk-mm-icon svg { width: 100%; height: 100%; }
.nk-mm-badge {
	font-size: 10px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--color-error-bg);
	color: var(--color-error);
	margin-inline-start: auto;
}
.nk-mm-desc {
	display: block;
	font-size: 12px;
	color: var(--color-text-secondary);
	opacity: 0.75;
	margin-inline-start: 26px;
}

/* دسترس‌پذیری: مسیر فوکوس کیبورد باید دقیقاً مثل ماوس باشد، بدون قاب پیش‌فرض بد مرورگر */
.nk-mm-link:focus-visible,
.nk-mm-toggle:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}