/* ==========================================================================
   جهان‌گشت — استایل مدرن و افکت‌های اسکرول
   راهنما: کلاس‌های jg-reveal* را در Divi در فیلد «CSS Class» هر ماژول/ردیف/سکشن
   وارد کنید تا هنگام اسکرول با افکت ظاهر شوند.
   ========================================================================== */

:root {
	--jg-primary: #00457A;      /* آبی برند (از گرادیان هدر سایت) */
	--jg-accent: #f0a500;       /* رنگ تأکید */
	--jg-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--jg-radius: 16px;
}

/* --------------------------------------------------------------------------
   فونت فارسی مدرن (Vazirmatn) روی کل سایت — متن‌ها راست‌چین می‌مانند.
   آیکن‌های Divi دست‌نخورده می‌مانند چون فونت اختصاصی خودشان را دارند.
   -------------------------------------------------------------------------- */
body.jg-modern,
body.jg-modern p,
body.jg-modern a,
body.jg-modern li,
body.jg-modern h1, body.jg-modern h2, body.jg-modern h3,
body.jg-modern h4, body.jg-modern h5, body.jg-modern h6,
body.jg-modern .et_pb_text,
body.jg-modern .et_pb_module,
body.jg-modern input,
body.jg-modern textarea,
body.jg-modern button,
body.jg-modern select {
	font-family: 'Vazirmatn', 'IRANSans', Tahoma, sans-serif !important;
}

/* --------------------------------------------------------------------------
   جلوگیری از اسکرول افقی و جابه‌جایی صفحه ناشی از هیروی تمام‌عرض.
   از clip استفاده می‌شود (نه hidden) تا افکت چسبانِ (sticky) ماک‌آپ گوشی نشکند.
   -------------------------------------------------------------------------- */
html { overflow-x: clip; }
body.jg-modern { overflow-x: clip; }

/* احترام به ترجیح کاربر برای کاهش حرکت */
@media (prefers-reduced-motion: reduce) {
	.jg-reveal,
	.jg-reveal-left,
	.jg-reveal-right,
	.jg-reveal-scale {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   ۱) افکت‌های ریویل اسکرول (ظاهر شدن هنگام اسکرول)
   -------------------------------------------------------------------------- */
.jg-reveal,
.jg-reveal-left,
.jg-reveal-right,
.jg-reveal-scale {
	opacity: 0;
	will-change: opacity, transform;
	transition:
		opacity 0.8s var(--jg-ease),
		transform 0.8s var(--jg-ease);
}

.jg-reveal        { transform: translateY(40px); }
.jg-reveal-left   { transform: translateX(-48px); }   /* ورود از راست در RTL */
.jg-reveal-right  { transform: translateX(48px); }
.jg-reveal-scale  { transform: scale(0.92); }

/* وقتی اسکریپت کلاس in-view را اضافه کند */
.jg-reveal.in-view,
.jg-reveal-left.in-view,
.jg-reveal-right.in-view,
.jg-reveal-scale.in-view {
	opacity: 1;
	transform: none;
}

/* تأخیر پلکانی برای ظاهر شدن آیتم‌های پشت‌سرهم (روی هر آیتم بگذارید) */
.jg-delay-1.in-view { transition-delay: 0.12s; }
.jg-delay-2.in-view { transition-delay: 0.24s; }
.jg-delay-3.in-view { transition-delay: 0.36s; }
.jg-delay-4.in-view { transition-delay: 0.48s; }

/* --------------------------------------------------------------------------
   ۲) نوار پیشرفت اسکرول بالای صفحه
   -------------------------------------------------------------------------- */
#jg-scroll-progress {
	position: fixed;
	top: 0;
	right: 0;            /* RTL: از راست شروع شود */
	height: 3px;
	width: 0%;
	background: linear-gradient(90deg, var(--jg-primary), var(--jg-accent));
	z-index: 100000;
	transition: width 0.1s linear;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   ۳) دکمه بازگشت به بالا
   -------------------------------------------------------------------------- */
#jg-back-to-top {
	position: fixed;
	bottom: 24px;
	left: 24px;          /* سمت چپ تا با ویجت چت (سمت راست) تداخل نکند */
	width: 46px;
	height: 46px;
	border: none;
	border-radius: 50%;
	background: var(--jg-primary);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.3s var(--jg-ease), transform 0.3s var(--jg-ease), background 0.2s;
	box-shadow: 0 6px 18px rgba(0, 69, 122, 0.35);
	z-index: 99990;
}
#jg-back-to-top.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
#jg-back-to-top:hover { background: #003a66; }

/* --------------------------------------------------------------------------
   ۴) چند بهبود ظاهری مدرن و سراسری (ملایم و کم‌ریسک)
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

/* رنگ یکدست پس‌زمینه‌ی دکمه‌های Divi در کل سایت: تیل برند (رنگ متن دست‌نخورده) */
.jg-modern .et_pb_button,
.jg-modern .et_pb_button.et_pb_button {
	background-color: #2a9d8f !important;
	border-color: #2a9d8f !important;
	transition: transform 0.25s var(--jg-ease), box-shadow 0.25s var(--jg-ease), background-color 0.2s !important;
}
.jg-modern .et_pb_button:hover {
	background-color: #21897d !important;
	border-color: #21897d !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

/* بالا آمدن کارت‌های Blurb هنگام هاور (افکت ظریف) */
.jg-modern .jg-card-hover {
	transition: transform 0.3s var(--jg-ease), box-shadow 0.3s var(--jg-ease);
}
.jg-modern .jg-card-hover:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

/* تصاویر: بزرگ‌نمایی نرم داخل قاب هنگام هاور */
.jg-modern .jg-zoom-img img,
.jg-modern .jg-zoom-img .et_pb_image_wrap img {
	transition: transform 0.5s var(--jg-ease);
}
.jg-modern .jg-zoom-img:hover img { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   دکمه‌ی «ورود به سامانه» در منو
   --------------------------------------------------------------------------
   روی هر آیتمِ فهرست که در پیشخوان کلاسِ jg-app-login بگیرد اعمال می‌شود.
   (نمایش ← فهرست‌ها ← پیوند سفارشی ← در «کلاس‌های CSS» بنویسید jg-app-login)
   -------------------------------------------------------------------------- */
/* اندازه‌ی آیکون — بدون قیدِ زمینه.
   ⚠️ قبلاً این قانون فقط .et-menu و #top-menu را می‌گرفت و منوی موبایل از قلم
   افتاده بود؛ آنجا SVG بدون محدودیت رندر می‌شد و آیکون غول‌پیکر می‌شد. */
li.jg-app-login svg {
	width: 16px !important;
	height: 16px !important;
	flex-shrink: 0;
	stroke: #fff !important;
	fill: none !important;
}

/* روی موبایل کمی بزرگ‌تر، چون آنجا دکمه تمام‌عرض است */
.et_mobile_menu li.jg-app-login svg {
	width: 18px !important;
	height: 18px !important;
}

/* رنگِ متن.
   ⚠️ Divi رنگِ لینکِ منو را با !important و ویژگیِ بالا می‌دهد، و متن ما داخل
   <span> است — پس span و svg را هم صریح هدف می‌گیریم، وگرنه رنگ ارث‌رسیده
   بازنویسی می‌شود و متن روی زمینه‌ی تیل ناخوانا می‌ماند. */
.et_pb_menu .et-menu li.jg-app-login > a,
.et_pb_menu .et-menu li.jg-app-login > a span,
#main-header .et-menu li.jg-app-login > a,
#main-header .et-menu li.jg-app-login > a span,
#top-menu li.jg-app-login > a,
#top-menu li.jg-app-login > a span,
.et_mobile_menu li.jg-app-login > a,
.et_mobile_menu li.jg-app-login > a span {
	color: #fff !important;
	opacity: 1 !important;            /* Divi گاهی آیتم‌ها را کم‌رنگ می‌کند */
}

/* ---- دسکتاپ ---- */
.et-menu li.jg-app-login,
#top-menu li.jg-app-login {
	margin-inline-start: 6px;
}

.et-menu li.jg-app-login > a,
#top-menu li.jg-app-login > a {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;

	/* ⚠️ کلیدِ ماجرا — بدون این سه خط، هر پدینگی بی‌اثر است.
	   Divi به هر لینکِ منو ۳۱px پدینگِ عمودی می‌دهد (پلِ هاورِ زیرمنو) و ردیفِ
	   منو ۷۶px می‌شود. <ul> فلکس با align-items: stretch است، پس لینکِ ما هم
	   کشیده می‌شد و ۷۶px ارتفاع می‌گرفت — اندازه‌گیری‌شده در مرورگر.
	   align-self روی خودِ آیتم، بر align-items ظرف غلبه می‌کند. */
	align-self: center !important;
	height: auto !important;
	min-height: 0 !important;

	background: #2a9d8f;              /* همان تیلِ دکمه‌های Divi در این سایت */
	border-radius: 999px;
	/* پدینگ بر حسبِ em تا با فونت مقیاس بگیرد — همان روشِ .et_pb_button */
	padding: 0.6em 1.25em !important;
	font-size: .95em !important;
	font-weight: 700;
	line-height: 1.6 !important;
	white-space: nowrap;
	transition: background .2s ease, box-shadow .2s ease;
}

.et-menu li.jg-app-login > a:hover,
#top-menu li.jg-app-login > a:hover {
	background: #21867a;
	box-shadow: 0 4px 12px rgba(42, 157, 143, .3);
}

/* Divi زیرِ آیتم‌های منو یک خطِ زیرین انیمیشنی می‌گذارد — روی دکمه لازم نیست */
.et-menu li.jg-app-login > a::after,
.et-menu li.jg-app-login > a::before,
#top-menu li.jg-app-login > a::after {
	display: none !important;
}

/* ---- منوی موبایلِ Divi ---- */
.et_mobile_menu li.jg-app-login > a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 7px;
	background: #2a9d8f;
	border-radius: 10px;
	margin: 12px 16px;
	padding: 12px 16px !important;
	font-weight: 700;
	font-size: .95em;
	min-height: 44px;                 /* هدفِ لمسیِ WCAG 2.5.5 */
	border-bottom: none !important;   /* Divi زیرِ هر آیتمِ موبایل خط می‌کشد */
}