/**
 * الهيدر لثيم تنمية الشمالية (قالبه من الأب header.php، والتنسيق هنا فقط). يُحمَّل في كل الصفحات من functions.php.
 *
 * الشريط العلوي بتدرّج الرمز العميق (التواصل والحسابات). تحته الهيدر الأبيض الثابت، بظل ناعم عند التمرير، وتحته
 * شريط التمرير المتصل يسير على رأسه رمز الشعار.
 * القائمة بلون النص، والمرور ببلاطة نعناعية خافتة، والنشط بالأساسي ومعيّن ذهبي صغير تحته،
 * وزر الهيدر بلاطة بتدرّج الرمز يسبق نصه رمز الشعار بالأبيض، وزر البحث بلاطة.
 */

/* ==========================================================================
   1) الشريط العلوي: تدرّج الرمز العميق
   ========================================================================== */

.site-top-bar {
	padding: 6px 0;
	border-bottom: 0;
	background: linear-gradient(90deg, var(--sh-deep), var(--theme-primary) 60%, var(--sh-mint-deep));
	font-size: 0.82rem;
}

.site-top-bar .top-bar-social-btn {
	border-radius: var(--sh-radius-sm);
	transition: background-color 0.25s ease, color 0.25s ease;
}

.site-top-bar .top-bar-social-btn:hover {
	background: var(--theme-secondary);
	color: var(--sh-deep);
}

.site-top-bar .top-bar-contact-item {
	color: rgba(255, 255, 255, 0.88);
}

.site-top-bar .top-bar-contact-item:hover {
	color: #ffffff;
}

.site-top-bar .top-bar-icon-btn {
	color: var(--theme-secondary);
}

/* ==========================================================================
   2) الهيدر: أبيض ثابت، وتحته شريط تقدّم التمرير
   ========================================================================== */

.site-header {
	padding: 0;
	border-bottom: 1px solid var(--sh-line);
	background: #ffffff;
	box-shadow: none;
}

/*
 * شريط التمرير تحت الهيدر (يضيفه assets/js/header.js): خط متصل يمتلئ بتدرّج
 * الرمز من اليمين بنسبة ما نزله الزائر من الصفحة (‎--sh-scroll‎ من 0 إلى 1)، وعلى رأسه رمز الشعار صغيراً بتدرّجه
 * في بلاطة بيضاء يسير معه. يظهر بعد أول نزول.
 */
.site-header .sh-scroll-progress {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 5px;
	/* أمان: لا يخرج شيء من الشريط أفقياً */
	overflow-x: clip;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

/* المسار: خط متصل خافت، والممتلئ منه بتدرّج الرمز */
.site-header .sh-scroll-progress::before,
.site-header .sh-scroll-progress::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 3px;
}

.site-header .sh-scroll-progress::before {
	background: rgba(var(--theme-primary-rgb), 0.12);
}

.site-header .sh-scroll-progress::after {
	background: linear-gradient(to left, var(--sh-mint), var(--theme-primary) 60%, var(--theme-secondary));
	clip-path: inset(0 0 0 calc((1 - var(--sh-scroll, 0)) * 100%));
}

/* رمز الشعار على رأس الممتلئ، فوق الخط (‎::after‎ يُرسم بعده فكان يغطيه) */
.site-header .sh-scroll-progress__tip {
	position: absolute;
	z-index: 1;
	top: 50%;
	/* داخل عرض الشاشة دائماً (كان نصفه يخرج من الطرف في آخر الصفحة فيظهر شريط تمرير أفقي) */
	right: calc(var(--sh-scroll, 0) * (100% - 24px));
	width: 24px;
	height: 24px;
	padding: 3px;
	border-radius: 7px;
	background: #ffffff;
	box-shadow: 0 4px 12px -4px rgba(var(--theme-primary-rgb), 0.5);
	transform: translateY(-50%);
}

.site-header .sh-scroll-progress__tip i {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, var(--sh-mint), var(--theme-primary));
	-webkit-mask: var(--sh-emblem-mask) center / contain no-repeat;
	mask: var(--sh-emblem-mask) center / contain no-repeat;
}

.site-header.is-scrolled .sh-scroll-progress {
	opacity: 1;
}

/* عند التمرير: ظل ناعم تحت الهيدر */
.site-header.is-scrolled {
	box-shadow: 0 10px 30px -22px rgba(var(--theme-primary-rgb), 0.5);
}

.site-header .header-container {
	min-height: 88px;
	padding-block: 8px;
	transition: min-height 0.3s ease;
}

/* عند التمرير (assets/js/header.js): أقصر قليلاً */
.site-header.is-scrolled .header-container {
	min-height: 72px;
}

.site-header .custom-logo {
	max-width: 230px;
	max-height: 66px;
	transition: max-height 0.3s ease;
}

.site-header.is-scrolled .custom-logo {
	max-height: 54px;
}

.site-header .site-title a {
	color: var(--theme-primary);
}

/* ==========================================================================
   3) القائمة: المرور ببلاطة نعناعية خافتة، والنشط بالأساسي ومعيّن ذهبي تحته
   ========================================================================== */

.main-navigation .nav-menu > li > a {
	position: relative;
	padding-inline: 14px;
	border-radius: var(--sh-radius-sm);
	color: var(--sh-ink);
	font-weight: 700;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.main-navigation .nav-menu > li > a:hover {
	background: var(--sh-mist);
	color: var(--theme-primary);
}

.main-navigation .nav-menu > li.current-menu-item > a,
.main-navigation .nav-menu > li.current-menu-ancestor > a,
.main-navigation .nav-menu > li.current_page_item > a {
	color: var(--theme-primary);
}

/* معيّن ذهبي صغير تحت العنصر النشط (كمربعات الشعار)، ويظهر عند المرور أيضاً */
.main-navigation .nav-menu > li > a::after {
	content: '';
	position: absolute;
	right: 50%;
	bottom: -5px;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--theme-secondary);
	transform: translateX(50%) rotate(45deg) scale(0);
	transition: transform 0.3s var(--sh-ease);
}

.main-navigation .nav-menu > li > a:hover::after,
.main-navigation .nav-menu > li.current-menu-item > a::after,
.main-navigation .nav-menu > li.current-menu-ancestor > a::after,
.main-navigation .nav-menu > li.current_page_item > a::after {
	transform: translateX(50%) rotate(45deg) scale(1);
}

/* القوائم الفرعية: حد علوي بتدرّج الرمز وزوايا البلاطة */
.main-navigation .sub-menu {
	border-top: 0;
	border-radius: 0 0 var(--sh-radius) var(--sh-radius);
	box-shadow: inset 0 3px 0 var(--sh-mint), var(--sh-shadow);
}

.main-navigation .sub-menu a:hover {
	color: var(--sh-mint-deep);
}

/* ==========================================================================
   4) البحث وزر الهيدر
   ========================================================================== */

.site-header .header-search-trigger {
	border: 1.5px solid var(--sh-line-strong);
	border-radius: var(--sh-radius);
	background: transparent;
	color: var(--theme-primary);
}

/* الأب يجعل الأيقونة بيضاء عند المرور بـ !important */
.site-header .header-search-trigger:hover,
.site-header .header-search-trigger:focus-visible {
	border-color: var(--theme-primary);
	background: var(--theme-primary);
	color: #ffffff !important;
}

/* نص الزر ورابطه من الإعدادات. الظهور والإخفاء للأب: زر الشريط على الكمبيوتر، ونسخته داخل القائمة على الجوال */
.site-header .header-btn,
.main-navigation .header-btn {
	align-items: center;
	gap: 9px;
	padding: 11px 20px;
	border: 0 !important;
	border-radius: var(--sh-radius);
	/* ‎.btn-primary‎ في الأب يفرض الأساسي بـ !important */
	background: linear-gradient(150deg, var(--sh-mint), var(--theme-primary) 50%, var(--theme-primary)) 100% 0 / 220% 100% !important;
	color: #ffffff !important;
	font-weight: 700;
	box-shadow: 0 10px 22px -12px rgba(var(--theme-primary-rgb), 0.85);
	transition: background-position 0.45s var(--sh-ease), box-shadow 0.25s ease, transform 0.25s ease;
}

/* رمز الشعار بالأبيض قبل النص، يميل قليلاً عند المرور */
.site-header .header-btn::before,
.main-navigation .header-btn::before {
	content: '';
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	background: #ffffff;
	-webkit-mask: var(--sh-emblem-mask) center / contain no-repeat;
	mask: var(--sh-emblem-mask) center / contain no-repeat;
	transition: transform 0.45s var(--sh-ease);
}

.site-header .header-btn:hover::before,
.main-navigation .header-btn:hover::before {
	transform: rotate(-8deg) scale(1.08);
}

.site-header .header-btn:hover,
.main-navigation .header-btn:hover {
	background-position: 0 0 !important;
	box-shadow: 0 12px 24px -12px rgba(var(--theme-primary-rgb), 0.95);
	transform: translateY(-1px);
}

/* ==========================================================================
   5) الشاشات المتوسطة والجوال: القائمة الجانبية من الأب
   ========================================================================== */

@media (max-width: 1280px) and (min-width: 1025px) {
	.site-header .custom-logo {
		max-width: 190px;
	}

	.main-navigation .nav-menu > li > a {
		font-size: 0.9rem;
	}
}

@media (max-width: 1024px) {
	/* بلا backdrop-filter: يجعل الهيدر مرجعاً لعناصر position:fixed فيه، فتنحصر القائمة الجانبية داخله */
	.site-header {
		background: #ffffff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.site-header .header-container {
		min-height: 70px;
		padding-block: 6px;
	}

	.site-header .custom-logo {
		max-width: 170px;
		max-height: 52px;
	}

	.site-header .menu-toggle {
		border-radius: var(--sh-radius-sm);
		color: var(--theme-primary);
	}

	.main-navigation .nav-menu > li > a::after {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header .header-btn,
	.main-navigation .header-btn,
	.main-navigation .nav-menu > li > a::after {
		transition: none;
	}
}