/* =========================================================================
 *  فهرست اصلی سایت — همبرگر + پنل کناری موبایل با drill-down
 *  این فایل بعد از style.css بارگذاری می‌شود و رفتار فهرست را کامل می‌کند.
 *  نقطه‌ی شکست موبایل: 900px (در صورت نیاز قابل تغییر).
 * ====================================================================== */

/* عناصر مخصوص موبایل، به‌صورت پیش‌فرض پنهان (دسکتاپ) */
.gh-burger,
.gh-overlay,
.gh-drawer-head,
.gh-menu .gh-back {
	display: none;
}

.gh-nav-wrap {
	display: flex;
	align-items: center;
}

/* ---- دکمه‌ی CTA ---- */
.gh-menu .gh-cta-item > a {
	background: #b86f50 !important;   /* clay (خاک‌رس) */
	color: #fff !important;
	padding: 0.55rem 1.25rem;
	border-radius: 999px;
	font-weight: 700;
	opacity: 1;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.gh-menu .gh-cta-item > a:hover,
.gh-menu .gh-cta-item > a:focus-visible {
	background: #894b39 !important;  /* rust (زنگاری) — تیره‌تر */
	color: #fff !important;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(137, 75, 57, 0.35);
	transform: translateY(-1px);
}

/* ---- فلش کوچک برای والدهای دارای زیرمنو (دسکتاپ) ---- */
.gh-menu .menu-item-has-children > a::after {
	content: "▾";
	font-size: 0.8em;
	margin-inline-start: 0.3em;
	opacity: 0.7;
}
/* والدها فقط بازکننده‌ی زیرمنو هستند؛ نشانگر دست */
.gh-menu .menu-item-has-children > a[href="#"] {
	cursor: pointer;
}

/* =======================================================================
 *  موبایل / تبلت
 * ==================================================================== */
@media (max-width: 900px) {

	/* دکمه‌ی همبرگر */
	.gh-burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		background: transparent;
		border: 0;
		color: inherit;
		cursor: pointer;
	}
	.gh-burger-box {
		position: relative;
		display: inline-block;
		width: 24px;
		height: 18px;
	}
	.gh-burger-line {
		position: absolute;
		right: 0;
		width: 100%;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
		transition: transform 0.25s ease, opacity 0.2s ease;
	}
	.gh-burger-line:nth-child(1) { top: 0; }
	.gh-burger-line:nth-child(2) { top: 50%; transform: translateY(-50%); }
	.gh-burger-line:nth-child(3) { bottom: 0; }

	/* تبدیل همبرگر به ضربدر هنگام باز بودن */
	body.gh-nav-open .gh-burger-line:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
	body.gh-nav-open .gh-burger-line:nth-child(2) { opacity: 0; }
	body.gh-nav-open .gh-burger-line:nth-child(3) { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }

	/* لایه‌ی تیره پشت پنل */
	.gh-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
		z-index: 999;
	}
	body.gh-nav-open .gh-overlay {
		opacity: 1;
		pointer-events: auto;
	}

	/* پنل کشویی (از سمت راست، مناسب RTL) */
	.gh-menu-wrap {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		width: min(86vw, 340px);
		display: block;
		background: var(--wp--preset--color--paper, #fff);
		box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
		transform: translateX(100%);
		transition: transform 0.3s ease;
		overflow: hidden;
		z-index: 1000;
	}
	body.gh-nav-open .gh-menu-wrap {
		transform: translateX(0);
	}

	/* سربرگ پنل: عنوان + دکمه‌ی بستن */
	.gh-drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 64px;
		padding: 0 1.2rem;
		border-bottom: 1px solid var(--wp--preset--color--sage, #cdd8c4);
	}
	.gh-drawer-title { font-weight: 700; font-size: 1.1rem; }
	.gh-close {
		width: 40px;
		height: 40px;
		background: transparent;
		border: 0;
		font-size: 1.9rem;
		line-height: 1;
		color: inherit;
		cursor: pointer;
	}

	/* فهرست ریشه: پنل تمام‌ارتفاع زیر سربرگ */
	.gh-menu {
		display: block;
		position: absolute;
		top: 64px;
		right: 0;
		left: 0;
		bottom: 0;
		margin: 0;
		padding: 0;
		gap: 0;
		overflow-y: auto;
		background: var(--wp--preset--color--paper, #fff);
	}
	/* مهم: تا زیرمنو نسبت به کل پنل تمام‌صفحه شود، نه نسبت به آیتم */
	.gh-menu li { position: static; display: block; }

	.gh-menu a,
	.gh-back-btn {
		display: block;
		width: 100%;
		padding: 0.95rem 1.3rem;
		font-size: 1.1rem;
		opacity: 1;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}
	.gh-menu a:hover {
		text-decoration: none;
		background: rgba(0, 0, 0, 0.03);
	}
	/* در موبایل: آیکون فلش (chevron) برای والدهای دارای زیرمنو.
	   به‌صورت SVG در پس‌زمینه‌ی خود لینک تا قطعی رندر شود. */
	.gh-menu .menu-item-has-children > a::after {
		content: none;   /* فلش ▾ دسکتاپ در موبایل لازم نیست */
	}
	.gh-menu .menu-item-has-children > a {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath d='M7 1L1 7l6 6' fill='none' stroke='%23b86f50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: left 1.3rem center;
		background-size: 8px 14px;
		padding-left: 2.8rem;
	}

	/* زیرمنو = پنل کشویی روی پنل اصلی (drill-down) */
	.gh-menu .sub-menu {
		display: block;
		position: absolute;
		inset: 0;
		margin: 0;
		padding: 0;
		background: var(--wp--preset--color--paper, #fff);
		border: 0;
		border-radius: 0;
		box-shadow: none;
		transform: translateX(100%);
		transition: transform 0.28s ease;
		overflow-y: auto;
		z-index: 2;
	}
	/* خنثی‌کردن دراپ‌داون hover روی موبایل */
	.gh-menu li:hover > .sub-menu {
		transform: translateX(100%);
	}
	.gh-menu .menu-item-has-children.sub-open > .sub-menu {
		transform: translateX(0);
	}

	/* دکمه‌ی بازگشت بالای هر زیرمنو (با JS ساخته می‌شود) */
	.gh-menu .gh-back { display: block; }
	.gh-back-btn {
		background: var(--wp--preset--color--sage, #eef2e9);
		border: 0;
		cursor: pointer;
		text-align: start;
		font-weight: 700;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	}
	.gh-back-icon {
		margin-inline-end: 0.45rem;
		font-size: 1.2em;
	}

	/* CTA داخل پنل: تمام‌عرض و وسط‌چین */
	.gh-menu .gh-cta-item > a {
		text-align: center;
		border-bottom: 0;
		margin: 0.8rem 1.3rem;
		width: auto;
	}
}