/* ==========================================================================
   Fullscreen Hero Slider
   برای تغییر رنگ‌ها و اندازه‌ها فقط متغیرهای بالای .fhs-slider را عوض کنید.
   رنگ عنوان‌ها و دکمه برای هر اسلاید از صفحه‌ی ویرایش همان اسلاید تنظیم می‌شود.
   ========================================================================== */

.fhs-slider {
	--fhs-text-color: #000;
	--fhs-btn-bg: #000;
	--fhs-btn-color: #fff;
	--fhs-arrow-size: 32px;
	--fhs-arrow-gap: 24px;

	/* عرض کامل صفحه، حتی داخل کانتینر باکسی المنتور */
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);

	height: 100vh;      /* fallback */
	height: 100svh;     /* در موبایل دقیقاً به اندازه‌ی ناحیه‌ی قابل‌دیدن */
	min-height: 420px;
	overflow: hidden;
	background: transparent;
	isolation: isolate;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}

/* جلوگیری از اسکرول افقی ناشی از 100vw (شامل عرض اسکرول‌بار) */
body {
	overflow-x: hidden;
	overflow-x: clip;
}

.fhs-slider *,
.fhs-slider *::before,
.fhs-slider *::after {
	box-sizing: border-box;
}

.fhs-track {
	position: absolute;
	inset: 0;
}

/* ---------- اسلاید (انتقال fade) ----------
   اسلاید فعلی روی اسلاید قبلی محو می‌شود و قبلی تا پایان انتقال کامل
   دیده می‌شود؛ بنابراین هیچ پس‌زمینه‌ای از پشت اسلایدر نمایان نمی‌شود. */

.fhs-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	z-index: 1;
	transition: opacity 0s linear var(--fhs-speed, 800ms), visibility 0s linear var(--fhs-speed, 800ms);
}

.fhs-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
	will-change: opacity;
	transition: opacity var(--fhs-speed, 800ms) ease, visibility 0s linear 0s;
}

.fhs-picture,
.fhs-slider .fhs-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	max-width: none;
}

.fhs-slider .fhs-img {
	object-fit: cover;
	object-position: center;
}

/* ---------- محتوا ---------- */

.fhs-slider .fhs-content {
	position: absolute;
	z-index: 3;
	top: var(--fhs-top-d, 210px);
	left: 0;
	right: 0;
	margin: 0 auto;
	width: min(100% - 40px, 960px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	color: var(--fhs-text-color);
}

.fhs-slider .fhs-title,
.fhs-slider .fhs-subtitle {
	margin: 0;
	padding: 0;
	color: var(--fhs-text-color);
	text-shadow: none;
}

.fhs-slider .fhs-title {
	font-size: clamp(20px, 2.4vw, 38px);
	font-weight: 700;
	line-height: 1.4;
}

.fhs-slider .fhs-subtitle {
	font-size: clamp(13px, 1.2vw, 18px);
	font-weight: 500;
	line-height: 1.8;
}

.fhs-slider .fhs-actions {
	margin-top: 8px;
}

/* انیمیشن ورود متن‌ها (فقط transform و opacity) */
.fhs-content > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.fhs-slide.is-active .fhs-content > * {
	opacity: 1;
	transform: none;
	transition-delay: 0.25s;
}

.fhs-slide.is-active .fhs-content > :nth-child(2) { transition-delay: 0.4s; }
.fhs-slide.is-active .fhs-content > :nth-child(3) { transition-delay: 0.55s; }

/* ---------- دکمه ---------- */

.fhs-slider a.fhs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 20px;
	border: 1px solid var(--fhs-btn-border, var(--fhs-btn-bg));
	border-radius: 999px;
	background: var(--fhs-btn-bg);
	color: var(--fhs-btn-color);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* هاور: اگر رنگی تنظیم نشده باشد → پس‌زمینه شفاف، متن هم‌رنگ دکمه، حاشیه هم‌رنگ حاشیه‌ی عادی */
.fhs-slider a.fhs-btn:hover,
.fhs-slider a.fhs-btn:focus-visible {
	background: var(--fhs-btn-hover-bg, transparent);
	color: var(--fhs-btn-hover-color, var(--fhs-btn-bg));
	border-color: var(--fhs-btn-hover-border, var(--fhs-btn-border, var(--fhs-btn-bg)));
}

.fhs-slider a.fhs-btn:focus-visible,
.fhs-slider button.fhs-arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---------- فلش‌ها (فقط آیکن) ---------- */

.fhs-slider button.fhs-arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	width: var(--fhs-arrow-size);
	height: var(--fhs-arrow-size);
	min-width: 0;
	margin: calc(var(--fhs-arrow-size) / -2) 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	line-height: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.85;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.fhs-slider button.fhs-arrow:hover,
.fhs-slider button.fhs-arrow:focus-visible {
	background: transparent;
	opacity: 1;
	transform: scale(1.08);
}

.fhs-slider button.fhs-arrow img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
}

/* inset-inline: در سایت راست‌به‌چپ خودکار جابه‌جا می‌شود */
.fhs-slider .fhs-arrow--prev { inset-inline-start: var(--fhs-arrow-gap); }
.fhs-slider .fhs-arrow--next { inset-inline-end: var(--fhs-arrow-gap); }

/* ==========================================================================
   تبلت: ۷۶۸ تا ۱۰۲۴
   ========================================================================== */
@media (max-width: 1024px) {
	.fhs-slider {
		--fhs-arrow-size: 28px;
		--fhs-arrow-gap: 16px;
	}

	.fhs-slider .fhs-content {
		top: var(--fhs-top-t, 190px);
		gap: 8px;
	}
}

/* ==========================================================================
   موبایل: تا ۷۶۷
   ========================================================================== */
@media (max-width: 767px) {
	.fhs-slider {
		--fhs-arrow-size: 24px;
		--fhs-arrow-gap: 8px;

		/* ارتفاع منوی ثابت پایین موبایل؛ اسلایدر دقیقاً تا بالای آن می‌آید */
		--fhs-bottom-offset: 55px;
		height: calc(100vh - var(--fhs-bottom-offset));      /* fallback */
		height: calc(100svh - var(--fhs-bottom-offset));
		min-height: 380px;
	}

	.fhs-slider .fhs-content {
		top: var(--fhs-top-m, 150px);
		width: min(100% - 32px, 960px);
		gap: 6px;
	}

	.fhs-slider .fhs-title { font-size: 19px; }
	.fhs-slider .fhs-subtitle { font-size: 13px; }

	.fhs-slider .fhs-actions {
		margin-top: 6px;
	}

	.fhs-slider a.fhs-btn {
		padding: 6px 16px;
		font-size: 12px;
	}
}

/* موبایل در حالت افقی (ارتفاع کم) */
@media (max-height: 480px) and (orientation: landscape) {
	.fhs-slider .fhs-title { font-size: clamp(16px, 2.4vw, 24px); }
	.fhs-slider .fhs-subtitle { font-size: 12px; }
}

/* احترام به تنظیم «کاهش انیمیشن» سیستم‌عامل */
@media (prefers-reduced-motion: reduce) {
	.fhs-slide,
	.fhs-content > *,
	.fhs-slider button.fhs-arrow {
		transition: none !important;
	}
}