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

/* ==========================================================================
   1) الشريط العلوي: تركوازي عميق بنقش البذور
   ========================================================================== */

.site-top-bar {
	--tn-grid-color: rgba(255, 255, 255, 0.06);
	padding: 6px 0;
	border-bottom: 0;
	background: var(--tn-grid), var(--tn-deep);
	font-size: 0.82rem;
}

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

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

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

.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: 0;
	background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--tn-stone) 50%, #fff) 100%);
	box-shadow: none;
}

/*
 * شريط تقدّم التمرير (يضيفه assets/js/header.js، كما في ثيم وفاق): خط بأخضر الورق تحت حافة الهيدر، يمتد من اليمين
 * بنسبة ما نزله الزائر من الصفحة (‎--tn-scroll‎ من 0 إلى 1)، ويختفي في أعلى الصفحة.
 */
.site-header .tn-scroll-progress {
	position: absolute;
	right: 0;
	bottom: -3px;
	left: 0;
	height: 3px;
	background: var(--theme-secondary);
	transform: scaleX(var(--tn-scroll, 0));
	transform-origin: right center;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

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

.site-header .header-container {
	min-height: 86px;
	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: 64px;
	transition: max-height 0.3s ease;
}

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

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

/* ==========================================================================
   3) القائمة: تركوازي عريض، والمرور بخلفية خضراء فاتحة، والنشط بأخضر الورق ونقطة تحته
   ========================================================================== */

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

.main-navigation .nav-menu > li > a:hover {
	background: var(--tn-sand);
	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 {
	background: rgba(var(--theme-secondary-rgb), 0.12);
	color: var(--tn-leaf-deep);
}

/* نقطة خضراء صغيرة تحت العنصر النشط */
.main-navigation .nav-menu > li > a::after {
	content: '';
	position: absolute;
	right: 50%;
	bottom: -7px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--theme-secondary);
	transform: translateX(50%) scale(0);
	transition: transform 0.3s var(--tn-ease);
}

.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%) scale(1);
}
/* القوائم الفرعية: حد علوي أخضر وزوايا ناعمة */
.main-navigation .sub-menu {
	border-top: 3px solid var(--theme-secondary);
	border-radius: 0 0 var(--tn-radius) var(--tn-radius);
}

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

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

.site-header .header-search-trigger {
	border: 1.5px solid var(--tn-line-strong);
	border-radius: 50%;
	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 22px;
	border: 0 !important;
	border-radius: 999px;
	/* ‎.btn-primary‎ في الأب يفرض الأساسي بـ !important */
	background: linear-gradient(135deg, var(--theme-secondary), var(--tn-leaf-deep)) !important;
	color: #ffffff !important;
	font-weight: 700;
	box-shadow: 0 10px 22px -12px rgba(var(--theme-secondary-rgb), 0.9);
	transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* رمز شعار الجمعية قبل النص */
.site-header .header-btn::before,
.main-navigation .header-btn::before {
	content: '';
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='134 121 980 980'%3E%3Cpath d='M390 325L540 172C580 132 650 128 690 165L745 222C750 228 750 236 745 240L598 385L620 407L705 337L752 393L618 517L490 392L637 245C642 232 625 215 600 225C595 227 590 230 586 234L455 360Z'/%3E%3Cpath d='M727 305L777 258L832 310L780 360Z'/%3E%3Cpath d='M245 503C270 458 300 420 340 388C450 425 560 520 618 637C676 520 790 425 905 388C946 420 976 458 1000 503C830 535 700 620 618 805C540 620 410 535 245 503Z'/%3E%3Cpath d='M228 545C430 580 580 760 590 1015C520 930 400 810 312 708C350 830 450 950 520 1015C550 1043 570 1068 583 1088C360 1070 203 900 203 680C203 630 212 590 228 545Z'/%3E%3Cpath transform='translate(1248 0) scale(-1 1)' d='M228 545C430 580 580 760 590 1015C520 930 400 810 312 708C350 830 450 950 520 1015C550 1043 570 1068 583 1088C360 1070 203 900 203 680C203 630 212 590 228 545Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='134 121 980 980'%3E%3Cpath d='M390 325L540 172C580 132 650 128 690 165L745 222C750 228 750 236 745 240L598 385L620 407L705 337L752 393L618 517L490 392L637 245C642 232 625 215 600 225C595 227 590 230 586 234L455 360Z'/%3E%3Cpath d='M727 305L777 258L832 310L780 360Z'/%3E%3Cpath d='M245 503C270 458 300 420 340 388C450 425 560 520 618 637C676 520 790 425 905 388C946 420 976 458 1000 503C830 535 700 620 618 805C540 620 410 535 245 503Z'/%3E%3Cpath d='M228 545C430 580 580 760 590 1015C520 930 400 810 312 708C350 830 450 950 520 1015C550 1043 570 1068 583 1088C360 1070 203 900 203 680C203 630 212 590 228 545Z'/%3E%3Cpath transform='translate(1248 0) scale(-1 1)' d='M228 545C430 580 580 760 590 1015C520 930 400 810 312 708C350 830 450 950 520 1015C550 1043 570 1068 583 1088C360 1070 203 900 203 680C203 630 212 590 228 545Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.site-header .header-btn:hover,
.main-navigation .header-btn:hover {
	background: var(--theme-primary) !important;
	box-shadow: 0 10px 22px -12px rgba(var(--theme-primary-rgb), 0.9);
	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: 50px;
	}

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

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