/*
 * سایدبار ثابت سمت چپ
 * حالت بسته: یک ریل باریک با لوگو. هاور روی دسکتاپ لوگو رو به آیکون همبرگر تبدیل می‌کنه.
 * کلیک: پنل عمودی تیره باز می‌شه (همون طراحی که توی موک‌آپ صفحه اصلی تایید شد).
 */

.site-sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--sbp-rail-width);
	z-index: 100;
	direction: ltr;
	display: flex;
	justify-content: center;
	/* هم‌قدم با فاصله‌ی بالای بقیه‌ی صفحات (--sbp-space-top در main.css) — تا لوگو دقیقاً
	   هم‌ارتفاعِ شروع محتوای هر صفحه باشه، نه یه فاصله‌ی جدا و بی‌ربط */
	padding-top: var(--sbp-space-top);
	background: var(--sbp-paper);
}

/* ---------- دکمه‌ی toggle: لوگو ⇄ همبرگر ⇄ ضربدر ---------- */

.sidebar-toggle {
	position: relative;
	z-index: 95; /* بالاتر از پنل (z-index:90) — چون پنل باز، کل ریل رو هم می‌پوشونه، این دکمه باید روش بمونه */
	/* یک بار دیگه بزرگ‌تر شد طبق درخواست — قبلاً 52px بود (قبل‌تر از اون 36px) */
	width: 64px;
	height: 64px;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
}

.sidebar-toggle-mark,
.sidebar-toggle-burger {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.25s ease;
}

.sidebar-toggle-mark {
	opacity: 1;
}

.sidebar-logo-text {
	display: block;
	max-width: calc(var(--sbp-rail-width) - 16px);
	min-width: 0; /* لغو رفتار پیش‌فرض فلکس که نمی‌ذاره آیتم از عرض محتوا کوچیک‌تر بشه */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: 'Fraunces', serif;
	font-weight: 600;
	/* یک بار دیگه بزرگ‌تر شد — قبلاً 20px بود (قبل‌تر از اون 13px) */
	font-size: 26px;
	letter-spacing: 0.02em;
	color: var(--sbp-ink);
}

/* اگه لوگوی واقعی از پنل ادمین (Customizer > Site Identity) آپلود شده باشه، همینجا بزرگ‌ترش می‌کنیم */
.sidebar-toggle-mark .custom-logo {
	max-width: calc(var(--sbp-rail-width) - 16px);
	max-height: 56px;
	width: auto;
	height: auto;
}

.sidebar-toggle-burger {
	opacity: 0;
	flex-direction: column;
	gap: 5px;
}

.sidebar-toggle-burger span {
	/* هم‌قدم با دکمه‌ی بزرگ‌تر — قبلاً 22px (قبل‌تر از اون 16px) */
	width: 26px;
	height: 1px;
	background: var(--sbp-ink);
	display: block;
	transition: transform 0.25s ease;
}

/* هاور فقط روی دستگاه‌هایی که واقعاً ماوس/هاور دارن — روی لمسی، تاچ باعث می‌شد
   بعد از یک‌بار لمس، حالت هاور (همبرگر) «گیر کنه» و دیگه لوگو برنگرده */
@media (hover: hover) and (pointer: fine) {
	.sidebar-toggle:hover .sidebar-toggle-mark {
		opacity: 0;
	}

	.sidebar-toggle:hover .sidebar-toggle-burger {
		opacity: 1;
	}
}

.sidebar-toggle:focus-visible .sidebar-toggle-mark {
	opacity: 0;
}

.sidebar-toggle:focus-visible .sidebar-toggle-burger {
	opacity: 1;
}

/* وقتی پنل بازه: همیشه ضربدر نشون بده (نه لوگو، نه همبرگر ساده) تا کاربر بدونه چطور ببندتش */
.site-sidebar.is-open .sidebar-toggle-mark {
	opacity: 0;
}

.site-sidebar.is-open .sidebar-toggle-burger {
	opacity: 1;
}

.site-sidebar.is-open .sidebar-toggle-burger span:first-child {
	transform: translateY(3px) rotate(45deg);
}

.site-sidebar.is-open .sidebar-toggle-burger span:last-child {
	transform: translateY(-3px) rotate(-45deg);
}

/* پنل الان بی‌رنگ/روشنه (همون --sbp-paper)، نه تیره — پس دیگه لازم نیست رنگ ضربدر
   موقع باز شدن عوض بشه؛ همیشه همون --sbp-ink (تعریف‌شده توی .sidebar-toggle-burger span
   بالاتر) کافیه و خودش روی پس‌زمینه‌ی روشن دیده می‌شه */

/* ---------- پنل عمودی ---------- */

.sidebar-panel {
	position: fixed;
	top: 0;
	right: auto;
	bottom: 0;
	left: 0;
	width: min(280px, 100vw);
	direction: ltr;
	/* طبق درخواست: اصلاً بک‌گراند نداره — کاملاً شفافه، نه حتی هم‌رنگ کاغذیِ صفحه —
	   و دیگه هیچ خط/مرزی هم لبه‌ی راستش نداره (border-right قبلاً اینجا بود، حذف شد) */
	/* فاصله‌ی بالا زیاد شد تا آیتم‌های منو زیر دکمه‌ی toggleِ بزرگ‌شده (که از
	   var(--sbp-space-top) شروع می‌شه و 64px ارتفاع داره) گیر نکنن و روی ضربدر
	   نیفتن — 80px (space-top) + 64px (ارتفاع دکمه) + کمی فاصله‌ی نفس = 176px */
	padding: 176px 28px 28px;
	transform: translateX(-100%);
	/* نرم‌تر و کمی کندتر از قبل (0.35s ease → 0.45s ease-out) */
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 90;
	overflow-x: hidden;
	overflow-y: auto;
}

.site-sidebar.is-open .sidebar-panel {
	transform: translateX(0);
}

.sidebar-menu {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sidebar-menu a {
	font-family: 'Fraunces', serif;
	font-size: 20px;
	line-height: 1.3;
	/* روی پس‌زمینه‌ی روشن، متن هم باید تیره باشه (قبلاً روشن روی پس‌زمینه‌ی تیره بود) */
	color: var(--sbp-ink);
	opacity: 0.55;
	transition: opacity 0.2s ease;
}

.sidebar-menu a:hover,
.sidebar-menu a[aria-current='page'] {
	opacity: 1;
}

/* ---------- بک‌دراپ ---------- */

/*
 * طبق درخواست، منو دیگه یک «لایه‌ی کلی» تیره روی کل صفحه نمی‌ندازه — یعنی پشتِ
 * منو، بقیه‌ی صفحه دیگه تیره/کم‌رنگ نمی‌شه. با این‌حال خودِ این المنت رو کامل حذف
 * نکردیم، چون sidebar.js با کلیک روی همین عنصر منو رو می‌بنده (کلیک بیرون از
 * پنل = بستن) — این رفتار هنوز لازمه، فقط دیگه هیچ پس‌زمینه‌ی دیداری نداره.
 */
.sidebar-backdrop {
	position: fixed;
	inset: 0;
	background: transparent;
	pointer-events: none;
	z-index: 80;
}

.site-sidebar.is-open .sidebar-backdrop {
	pointer-events: auto;
}

/* ---------- ناحیه‌ی محتوا (app-stage) ---------- */

.app-stage {
	min-height: 100vh;
}

.app-stage.is-loading {
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

/* ---------- روی هیرو: ریل شفاف و سفید ----------
   صفحه اصلی با یک هیرو تمام‌صفحه شروع می‌شه؛ تا وقتی هیرو پشت ریله، لوگو/همبرگر/منو
   سفید و پس‌زمینه‌ی ریل شفافه. کلاس is-over-hero رو هم PHP (header.php، برای بار اول)
   و هم home-hero.js (با اسکرول و PJAX) می‌ذاره/برمی‌داره. */

.site-sidebar.is-over-hero {
	background: transparent;
}

.site-sidebar.is-over-hero .sidebar-logo-text,
.site-sidebar.is-over-hero .sidebar-menu a {
	color: #fff;
}

.site-sidebar.is-over-hero .sidebar-toggle-burger span {
	background: #fff;
}

/* ---------- فوتر: پایین صفحه، افقی ---------- */

.site-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 24px;
	padding: 32px var(--sbp-space-side);
	border-top: 1px solid var(--sbp-line);
}

/* محتوای فوتر هم مثل بقیه‌ی بخش‌های پایین، تا عرض ۱۲۰۰ وسط‌چین می‌شه (نگاه کن به site-bottom.css) */
@media (min-width: 1281px) {
	.site-footer {
		padding-inline: calc((100% - 1200px) / 2);
	}
}

.site-copy {
	font-family: 'Archivo', sans-serif;
	font-size: 12px;
	letter-spacing: 0.03em;
	color: var(--sbp-muted);
}

.social-icons {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 18px;
}

.social-icons-link {
	display: flex;
	width: 18px;
	height: 18px;
	color: var(--sbp-muted);
	transition: color 0.2s ease;
}

.social-icons-svg,
.social-icons-svg svg {
	display: block;
	width: 100%;
	height: 100%;
}

.social-icons-link:hover {
	color: var(--sbp-ink);
}

.site-credit {
	font-family: 'Archivo', sans-serif;
	font-size: 12px;
	letter-spacing: 0.03em;
	color: var(--sbp-muted);
	transition: color 0.2s ease;
	white-space: nowrap;
}

.site-credit:hover {
	color: var(--sbp-ink);
}

@media (max-width: 640px) {
	.sidebar-panel {
		padding-top: 128px;
	}

	.sidebar-menu a {
		font-size: 19px;
	}

	.sidebar-toggle {
		width: 56px;
		height: 56px;
	}

	.sidebar-logo-text {
		font-size: 21px;
	}

	.sidebar-toggle-mark .custom-logo {
		max-height: 46px;
	}

	/* موبایل: فوتر عمودی و وسط‌چین */
	.site-footer {
		flex-direction: column;
		justify-content: center;
		padding: 32px var(--sbp-space-side-mobile);
	}
}