/* =========================================================================
   header — چیدمان هدر اصلی (قالب هدرِ المنتور)

   هدر در المنتور ساخته شده و مارک‌آپش در دیتابیس است، پس اینجا فقط
   چیدمانش اصلاح می‌شود. سه اشکالی که در CSS تولیدشدهٔ المنتور دیده شد:

   ۱) اسکریپت sticky المنتور موقع چسبیدن یک عرضِ پیکسلیِ اینلاین روی نوار
      هدر می‌گذارد (نمونهٔ دیده‌شده: width:10px). اگر آن اندازه‌گیری سرِ وقت
      درست انجام نشود، کل هدر به چند پیکسل جمع می‌شود.

   ۲) پنج ظرفِ داخل نوار با درصدهای دستی تنظیم شده‌اند:
      ۹٪ + ۶۱٫۵٪ + ۵٪ + ۱۰٫۳٪ + ۲۵٪ = ۱۱۱٪ — یعنی ۱۱٪ بیشتر از فضای موجود.
      نتیجه‌اش این است که ظرف‌ها سرِ جا با هم می‌جنگند و محتوای‌شان بیرون می‌زند.

   ۳) لیست منو `flex-wrap: wrap` است، پس هر جا ظرفِ منو کم بیاورد آیتم‌ها
      به خط دوم و سوم می‌ریزند و ارتفاع هدر می‌پرد.

   راه‌حل: چیدمان محتوا-محور به جای درصدهای ثابت، و همبرگری‌شدن منو زیر
   ~۱۴۰۰px تا دکمه‌های فراخوان همیشه سرِ جای‌شان بمانند.

   وابسته به: —            بارگذاری: functions.php
   ========================================================================= */

.elementor-location-header {
	--zbn-hd-gap:      clamp(10px, 1.1vw, 24px);
	--zbn-hd-pad:      clamp(12px, 1.6vw, 32px);
	--zbn-hd-menu-fs:  clamp(12.5px, .78vw, 14px);
	--zbn-hd-menu-pad: clamp(4px, .5vw, 9px);
	--zbn-hd-menu-gap: clamp(0px, .3vw, 6px);
	--zbn-hd-logo-w:   clamp(118px, 8.5vw, 152px);
}

/* =========================================================================
   ۱) خنثی‌کردن عرضِ اینلاینِ اسکریپت sticky
   تنها جایی که !important لازم است، چون طرفِ مقابل استایل اینلاین است.
   ========================================================================= */

.elementor-location-header .elementor-sticky--active {
	width: 100% !important;
	max-width: 100% !important;
	left: 0 !important;
	right: auto !important;
}

/* =========================================================================
   ۲) نوار هدر — چیدمان محتوا-محور
   موبایل دست‌نخورده می‌ماند؛ آنجا هدر از قبل درست کار می‌کند.
   ========================================================================= */

@media (min-width: 768px) {

	.elementor-location-header > .e-con.e-parent {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: var(--zbn-hd-gap);
		padding-inline: var(--zbn-hd-pad);
	}

	/* درصدهای دستیِ هر ظرف خنثی می‌شود. `min-width: max-content` نمی‌گذارد
	   ظرف کوچک‌تر از محتوایش شود — همان چیزی که باعث بیرون‌زدنِ دکمه‌ها بود. */
	.elementor-location-header > .e-con.e-parent > .e-con.e-child {
		--width: auto;
		width: auto;
		flex: 0 0 auto;
		min-width: max-content;
		padding-inline: 0;
	}

	/* ظرف منو تنها بخشی است که فضای باقیمانده را می‌گیرد و اجازهٔ جمع‌شدن دارد. */
	.elementor-location-header > .e-con.e-parent > .e-con.e-child:has(.elementor-widget-nav-menu) {
		flex: 1 1 auto;
		min-width: 0;
		justify-content: center;
	}

	/* ویجت‌هایی که در المنتور عرض درصدی گرفته‌اند، ظرفشان را پر می‌کنند. */
	.elementor-location-header > .e-con.e-parent > .e-con.e-child > .elementor-widget__width-initial {
		width: 100%;
		max-width: 100%;
	}

	/* لوگو تا الان ۹٪ عرضِ صفحه بود، یعنی روی هر مانیتور اندازه‌ای متفاوت
	   داشت (۱۵۱px روی ۱۹۲۰ و ۹۴px روی ۱۲۸۰). حالا اندازه‌اش ثابت است. */
	.elementor-location-header .elementor-widget-image img {
		width: var(--zbn-hd-logo-w);
		height: auto;
		max-width: 100%;
	}

	/* =====================================================================
	   ۳) منو — یک ردیف، فاصلهٔ یکنواخت، اندازهٔ مقیاس‌پذیر
	   ===================================================================== */

	.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		gap: var(--zbn-hd-menu-gap);
	}

	.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li {
		flex: 0 0 auto;
	}

	.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a {
		white-space: nowrap;
		font-size: var(--zbn-hd-menu-fs);
		padding-inline: var(--zbn-hd-menu-pad);
	}

	/* =====================================================================
	   ۴) دکمه‌ها — نه بشکنند، نه از ظرفشان بیرون بزنند
	   ===================================================================== */

	.elementor-location-header .tmt-modal-botton > a,
	.elementor-location-header .elementor-button {
		width: max-content;
		white-space: nowrap;
	}

	.elementor-location-header .elementor-widget-button .elementor-button-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* =========================================================================
   ۵) زیر ~۱۴۰۰px — منو همبرگری می‌شود

   محتوای هدر روی هم ~۱۶۰۵px عرض می‌خواهد؛ حتی با کوچک‌کردن فونت منو هم
   کفِ عملیِ یک‌ردیفه ~۱۴۰۰px است. از این نقطه به پایین منو جمع می‌شود تا
   لوگو، جستجو و هر دو دکمهٔ فراخوان سرِ جای‌شان بمانند.

   المنتور آستانهٔ کشوی این منو را روی «موبایل» گذاشته و با دو قاعده
   کنترلش می‌کند: زیر ۷۶۸px منوی افقی را پنهان می‌کند و بالای ۷۶۸px آیکون
   همبرگر و کشو را. این بلوک همان رفتار را به بازهٔ ۷۶۸ تا ۱۴۰۰ هم می‌آورد.
   ========================================================================= */

@media (min-width: 768px) and (max-width: 1399.98px) {

	.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main {
		display: none;
	}

	.elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle {
		display: flex;
	}

	/* المنتور کشو را با JS باز نمی‌کند؛ فقط کلاس elementor-active را روی
	   دکمهٔ همبرگر می‌گذارد و نمایش کشو کاملاً با CSS کنترل می‌شود. پس هر دو
	   حالت را خودمان تعریف می‌کنیم. سلکتور با `+` بسته شده تا زیرمنوها را
	   نگیرد — المنتور همین کلاس را روی زیرمنوها هم می‌گذارد. */
	.elementor-location-header .elementor-menu-toggle + .elementor-nav-menu--dropdown {
		display: none;
	}

	.elementor-location-header .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown {
		display: block;
	}

	/* منو دیگر کش نمی‌آید؛ فقط آیکون همبرگر جا می‌گیرد. */
	.elementor-location-header > .e-con.e-parent > .e-con.e-child:has(.elementor-widget-nav-menu) {
		flex: 0 0 auto;
		min-width: max-content;
	}
}