/*
 * brand.css — طبقة الهوية (2.3): آخر ورقة تُحمَّل بعد scale.css.
 *
 * - نقش الشعار الخفيف خلف ترويسات الصفحات والأقسام البيضاء، وتلوين الشعار المرفوع.
 * - «من نحن»: «هرم الانشاء» بجانب الشعار وسطر التخصص تحته.
 * - صفحة «أعمالنا» الموحّدة بأزرار التصفية.
 * - شريط شعارات الشركاء المتحرك وشبكتها.
 *
 * لا ‎!important‎: الترتيب وحده يجعل هذه القواعد تفوز عند تساوي الوزن.
 */

/* ==========================================================================
   brand
   ========================================================================== */

/* ==========================================================================
   [brand] الهوية 2.3 — الشعار (الشكل وحده)، نقش الشعار الخفيف، شريط العبارة
   --------------------------------------------------------------------------
   جزء من brand.css (آخر ورقة تُحمَّل)، فيفوز عند تساوي الوزن بلا ‎!important‎.

   الفهرس
   ٠١  رموز النقش (‎:root‎)
   ٠٢  أصناف تلوين الشعار المرفوع (‎haram_logo()‎)
   ٠٣  الشعار في الهيدر والدرج والتذييل + عمود «أعمالنا»
   ٠٤  نقش الشعار: ترويسات الصفحات والأقسام الفاتحة (‎body.has-brand-pattern‎)
   ٠٥  شريط العبارة والشعار (‎.statement‎) — بديل العدّادات
   ٠٦  سهم قائمة «المجال» في نموذج التواصل
   ٠٧  التذييل: العنوان في سطر واحد على اللوحي
   ٠٨  الأزرار العائمة والدرج مفتوح
   ٠٩  صفحة البحث وودجات المكوّنات
   ١٠  شبكات اللوحي: الشهادات وبيانات التواصل
   ١١  الطباعة
   ========================================================================== */


/* ==========================================================================
   ٠١ — رموز النقش
   --------------------------------------------------------------------------
   بلاطة ‎240×240‎ فيها شكل الشعار مرّتين متراكبتين قطرياً (عرض الشكل ‎44px‎).
   الفاتحة: الأخضر البترولي بشفافية ‎3٪‎ — خفيفة جداً فوق الأبيض والفاتح.
   الداكنة: الأبيض بشفافية ‎6٪‎ — للترويسات وشريط العبارة.
   القيمتان يولّدهما أيضاً ‎haram_mark_pattern_url()‎ في inc/dynamic-css.php،
   وهي تعيد توليد الفاتحة بلون الأساسي إن غيّره المدير.
   ========================================================================== */
:root {
	--h-mark-pattern-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='%23264142' fill-opacity='.03'%3E%3Cpath transform='translate(60 60) scale(.16)' d='M-17.15-126-62.15-88.2v176.4L-17.15 126V19.5h34.3V126l45-37.8V-88.2l-45-37.8v106.5h-34.3zM-88.55-66-137.85-24.6v49.2L-88.55 66zM88.55-66l49.3 41.4v49.2L88.55 66z'/%3E%3Cpath transform='translate(180 180) scale(.16)' d='M-17.15-126-62.15-88.2v176.4L-17.15 126V19.5h34.3V126l45-37.8V-88.2l-45-37.8v106.5h-34.3zM-88.55-66-137.85-24.6v49.2L-88.55 66zM88.55-66l49.3 41.4v49.2L88.55 66z'/%3E%3C/g%3E%3C/svg%3E");
	--h-mark-pattern-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='%23ffffff' fill-opacity='.06'%3E%3Cpath transform='translate(60 60) scale(.16)' d='M-17.15-126-62.15-88.2v176.4L-17.15 126V19.5h34.3V126l45-37.8V-88.2l-45-37.8v106.5h-34.3zM-88.55-66-137.85-24.6v49.2L-88.55 66zM88.55-66l49.3 41.4v49.2L88.55 66z'/%3E%3Cpath transform='translate(180 180) scale(.16)' d='M-17.15-126-62.15-88.2v176.4L-17.15 126V19.5h34.3V126l45-37.8V-88.2l-45-37.8v106.5h-34.3zM-88.55-66-137.85-24.6v49.2L-88.55 66zM88.55-66l49.3 41.4v49.2L88.55 66z'/%3E%3C/g%3E%3C/svg%3E");
	--h-mark-tile: 240px;
}

@media (max-width: 768px) {

	:root {
		--h-mark-tile: 200px;
	}
}


/* ==========================================================================
   ٠٢ — تلوين الشعار المرفوع
   --------------------------------------------------------------------------
   إن رفع المدير شعاراً واحداً فقط أعادت ‎haram_logo()‎ أحد هذين الصنفين
   ليُقلب لونه على السطح المقابل:
   - إلى الأبيض فوق الأسطح الداكنة (البطل، التذييل، شريط العبارة).
   - إلى الأخضر البترولي ‎#264142‎ فوق الأسطح الفاتحة: ‎brightness(0)‎ يجعله
     أسود مع حفظ الشفافية، ثم سلسلة محسوبة تحوّل الأسود إلى ‎#274243‎ تقريباً.
   ========================================================================== */
.haram-logo--to-white {
	filter: brightness(0) invert(1);
}

.haram-logo--to-dark {
	filter: brightness(0) saturate(100%) invert(20%) sepia(58%) saturate(303%) hue-rotate(133deg) brightness(91%) contrast(89%);
}


/* ==========================================================================
   ٠٣ — الشعار: الشكل وحده بمقاس متّزن
   --------------------------------------------------------------------------
   الشكل أقرب إلى المربّع (‎276×252‎) لا القفل العريض القديم، فارتفاعه أقل
   ليوازن ارتفاع القائمة. ‎max-inline-size‎ شبكة أمان لشعار عريض يرفعه المدير.
   ========================================================================== */
.site-brand__logo {
	inline-size: auto;
	block-size: 44px;
	max-inline-size: 190px;
	object-fit: contain;
}

/* الهيدر الملتصق يُصغّر الشكل قليلاً */
.site-header.is-stuck .site-brand__logo {
	block-size: 38px;
}

/* درج الجوال: الشكل بجانب اسم الشركة نصّاً */
.mobile-nav .site-brand__logo {
	block-size: 40px;
}

/* التذييل: الشكل وحده فوق النبذة */
.site-footer .footer-brand__logo {
	inline-size: auto;
	block-size: 56px;
	max-inline-size: 220px;
	object-fit: contain;
}

@media (max-width: 768px) {

	.site-brand__logo {
		block-size: 38px;
	}

	.site-header.is-stuck .site-brand__logo {
		block-size: 34px;
	}

	.site-footer .footer-brand__logo {
		block-size: 50px;
	}
}

@media (max-width: 560px) {

	.site-brand__logo {
		block-size: 36px;
	}

	.site-header.is-stuck .site-brand__logo {
		block-size: 32px;
	}
}

/*
 * عمود «أعمالنا» (أقسام المشاريع) لا يُطبع حين لا توجد أقسام، فتصير شبكة
 * التذييل ثلاثة أعمدة بدل أربعة بلا عمود فارغ.
 */
.site-footer .footer-grid:not(:has(.footer-col--works)) {
	grid-template-columns: 1.35fr 1fr 1.15fr;
}

@media (max-width: 1200px) {

	.site-footer .footer-grid:not(:has(.footer-col--works)) {
		grid-template-columns: 1.2fr 1fr;
	}
}


/* ==========================================================================
   ٠٤ — نقش الشعار الخفيف
   --------------------------------------------------------------------------
   بطلب العميل: نقش من شكل الشعار نفسه بدل النقش السداسي في ترويسات الصفحات،
   وبدل الأبيض السادة في كل قسم فاتح. كله تحت ‎body.has-brand-pattern‎
   (خيار «إظهار نقش الشعار الخفيف» في الإعدادات)، فإن أُطفئ عادت الأرضيات
   مصمتة كما كانت.

   الأقسام الفاتحة: ‎background-image‎ وحدها، فيبقى لون الأرضية لكل قسم
   (أبيض أو ‎--h-light‎) كما هو، والبطاقات داخلها بأرضيتها البيضاء المصمتة.
   مستثنى: الأقسام الداكنة وأقسام الصور وشريط الدعوة — والبطل والهيدر
   والتذييل ليست ‎.section‎ أصلاً.

   موضع البلاطة (‎T‎ = ‎--h-mark-tile‎): الشكلان عند ‎T/4‎ و‎3T/4‎ من البلاطة.
   لو توسّطت البلاطة لوقع عمودا الشكل عند المركز ‎±T/4‎ (‎±60px‎) فيلاصقان
   رقم الفصل الباهت الموسّط. نزيحها ‎T/12‎ نحو اليسار فيصير:
   - الصفّ الأول (‎y = T/4‎، وهو سطر رقم الفصل) عند المركز ‎−T/3‎ و‎+2T/3‎
     (‎−80‎ و‎+160px‎) — بعيداً عن الرقم من الجهتين.
   - الصفّ الثاني (‎y = 3T/4‎) عند المركز ‎+T/6‎ (‎+40px‎) — قريب لكنه لا
     يتوسّط عمود الصفحة أبداً.
   ========================================================================== */
body.has-brand-pattern .section:not(.section--dark):not(.section--media):not(.cta):not([data-surface="dark"]) {
	background-image: var(--h-mark-pattern-light);
	background-repeat: repeat;
	background-position: calc(50% - var(--h-mark-tile) / 12) 0;
	background-size: var(--h-mark-tile) var(--h-mark-tile);
}

/* ترويسات الصفحات الداخلية (الأخضر البترولي): طبقة تحت المحتوى، أخفت قليلاً
 * في الوسط حيث العنوان ومسار التنقل. ‎.page-hero‎ معزولة في signature.css. */
body.has-brand-pattern .page-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-image: var(--h-mark-pattern-dark);
	background-repeat: repeat;
	background-position: center;
	background-size: var(--h-mark-tile) var(--h-mark-tile);
	-webkit-mask-image: radial-gradient(120% 140% at 50% 55%, rgba(0, 0, 0, .5) 0%, #000 72%);
	mask-image: radial-gradient(120% 140% at 50% 55%, rgba(0, 0, 0, .5) 0%, #000 72%);
	pointer-events: none;
}


/* ==========================================================================
   ٠٥ — شريط العبارة والشعار
   --------------------------------------------------------------------------
   حلّ محلّ شريط العدّادات. مدمج وهادئ: الشكل في جهة البداية (يمين)، خيط
   برونزي رأسي رفيع، ثم العبارة بحجم عناوين الأقسام وكلمتها المميّزة بالبرونزي
   كما في البطل، وتحتها سطر أخفّ. المجموعة كلها في وسط الشريط.
   على ‎≤768‎ يتراكب الكل في الوسط: الشكل فوق، ثم خيط أفقي قصير، ثم النص.
   ========================================================================== */
.statement {
	padding-block: clamp(48px, 5.4vw, 80px);
	isolation: isolate;
	overflow: hidden;
}

/* نقش الشكل الداكن، مفرَّغ في الوسط حتى يقف الشعار الكبير وحده */
body.has-brand-pattern .statement::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-image: var(--h-mark-pattern-dark);
	background-repeat: repeat;
	background-position: center;
	background-size: var(--h-mark-tile) var(--h-mark-tile);
	-webkit-mask-image: radial-gradient(62% 120% at 50% 50%, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .55) 46%, #000 82%);
	mask-image: radial-gradient(62% 120% at 50% 50%, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .55) 46%, #000 82%);
	pointer-events: none;
}

.statement > .container {
	position: relative;
	z-index: 1;
}

.statement__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(22px, 2.8vw, 38px);
	max-inline-size: 58rem;
	margin-inline: auto;
}

.statement__mark {
	flex: 0 0 auto;
	inline-size: auto;
	block-size: clamp(84px, 7.2vw, 100px);
	max-inline-size: 200px;
	object-fit: contain;
}

.statement__body {
	min-inline-size: 0;
	padding-block: 6px;
	padding-inline-start: clamp(22px, 2.8vw, 38px);
	border-inline-start: 1px solid rgba(200, 172, 151, .55);
	border-inline-start-color: color-mix(in srgb, var(--h-accent-on-dark) 55%, transparent);
	text-align: start;
}

.statement__title {
	margin: 0;
	font-family: var(--h-font-head);
	font-size: clamp(1.45rem, 2.5vw, 2.05rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--h-white);
	text-wrap: balance;
}

.statement__hl {
	color: var(--h-accent-on-dark);
}

.statement__text {
	margin: 0;
	font-size: clamp(1rem, 1.25vw, 1.1rem);
	font-weight: 400;
	line-height: 1.7;
	color: var(--h-fg-soft);
}

.statement__title + .statement__text {
	margin-block-start: 6px;
}

@media (max-width: 768px) {

	.statement__inner {
		flex-direction: column;
		gap: 18px;
		text-align: center;
	}

	.statement__mark {
		block-size: 76px;
	}

	.statement__body {
		position: relative;
		padding-block: 20px 0;
		padding-inline-start: 0;
		border-inline-start: 0;
		text-align: center;
	}

	/* الخيط يصير أفقياً قصيراً فوق النص */
	.statement__body::before {
		content: "";
		position: absolute;
		inset-block-start: 0;
		inset-inline: 0;
		inline-size: 40px;
		block-size: 1px;
		margin-inline: auto;
		background: rgba(200, 172, 151, .55);
		background: color-mix(in srgb, var(--h-accent-on-dark) 55%, transparent);
	}
}


/* ==========================================================================
   ٠٦ — سهم قائمة «المجال» في نموذج التواصل
   --------------------------------------------------------------------------
   sections.css يكتب ‎background‎ المختصرة على ‎.contact-form select‎ فيمحو
   السهم الذي يرسمه main.css، فتبدو القائمة حقلاً نصياً فارغاً. نعيد السهم
   بخصائص مفردة (فيبقى لون أرضية الحقل لكل سطح كما هو) في نهاية السطر —
   اليسار في RTL — ونحجز له المسافة في الجهة نفسها.
   اللون ‎currentColor‎ فيصير السهم أبيض تلقائياً على الأسطح الداكنة.
   ‎:not([multiple])‎ يرفع الوزن ليعادل قاعدة الحقول في dark.css (‎0,3,1‎).
   ========================================================================== */
.contact-form select:not([multiple]),
:is(.section--dark, [data-surface="dark"]) .contact-form select:not([multiple]) {
	padding-inline-end: 42px;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(0% + 18px) calc(50% + 1px),
		calc(0% + 24px) calc(50% + 1px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

/* الاتجاه اللاتيني: نهاية السطر يمين، فينتقل السهم إليها */
[dir="ltr"] .contact-form select:not([multiple]),
[dir="ltr"] :is(.section--dark, [data-surface="dark"]) .contact-form select:not([multiple]) {
	background-position:
		calc(100% - 24px) calc(50% + 1px),
		calc(100% - 18px) calc(50% + 1px);
}


/* ==========================================================================
   ٠٧ — التذييل: العنوان في سطر واحد على اللوحي
   --------------------------------------------------------------------------
   بين ٥٦١ و١٢٠٠ كانت بيانات التواصل شبكة خانات ‎240px‎، فينكسر العنوان
   الأطول («المملكة العربية السعودية - الرياض») على سطرين وتبقى الشَّرطة في
   آخر السطر. صارت صفاً مرناً: كل بند بعرض نصّه، يلتفّ البند كاملاً إلى السطر
   التالي إن لم يتّسع، ويتمدّد ليملأ سطره فلا تبقى خانات فارغة.
   ========================================================================== */
@media (min-width: 561px) and (max-width: 1200px) {

	.site-footer .footer-contact {
		display: flex;
		flex-wrap: wrap;
		gap: 14px clamp(20px, 3vw, 32px);
	}

	.site-footer .footer-contact > li {
		flex: 1 1 auto;
	}
}

/* ‎≤768‎: روابط التواصل بارتفاع لمس ‎44px‎ (main.css)، فالمسافة بين السطور أقل */
@media (min-width: 561px) and (max-width: 768px) {

	.site-footer .footer-contact {
		row-gap: 8px;
	}
}


/* ==========================================================================
   ٠٨ — الأزرار العائمة والدرج مفتوح
   --------------------------------------------------------------------------
   الدرج فيه زرّا الاتصال وواتساب، فيختفي زرّ واتساب العائم وزرّ العودة
   للأعلى ما دام مفتوحاً — كما يختفي شريط الاتصال السفلي في main.css.
   ========================================================================== */
.wa-float {
	transition:
		transform var(--h-t),
		box-shadow var(--h-t),
		opacity var(--h-t),
		visibility var(--h-t);
}

body.has-nav-open .wa-float,
body.has-nav-open .to-top {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}


/* ==========================================================================
   ٠٩ — صفحة البحث وودجات المكوّنات
   --------------------------------------------------------------------------
   مسافة بين نموذج البحث والنتائج، وودجات ووردبريس المبنية بالمكوّنات
   (عنوان ‎wp-block-heading‎ وبحث ‎wp-block-search‎) بمقاس عنوان الودجة
   وزرّ القالب الأساسي بدل عناوينها الضخمة وزرّها الرمادي.
   ========================================================================== */
.blog-main > .search-form {
	margin-block-end: clamp(20px, 2.4vw, 32px);
}

.widget .wp-block-heading,
.widget .wp-block-search__label {
	margin-block: 0 12px;
	font-family: var(--h-font-head);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--h-fg-title);
}

.widget .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border: 1.5px solid var(--h-primary);
	border-radius: var(--h-r-btn);
	background: var(--h-primary);
	color: var(--h-white);
	font-family: var(--h-font-head);
	font-size: .92rem;
	font-weight: 700;
	line-height: 1.25;
	cursor: pointer;
	transition:
		background-color var(--h-t),
		border-color var(--h-t);
}

.widget .wp-block-search__button:hover,
.widget .wp-block-search__button:focus-visible {
	border-color: var(--h-primary-deep);
	background: var(--h-primary-deep);
	color: var(--h-white);
}


/* ==========================================================================
   ١٠ — شبكات اللوحي: الشهادات وبيانات التواصل
   ========================================================================== */

/*
 * الشهادات بين ٧٦٩ و٩٩٢: عمودان، والبطاقة الأخيرة إن بقيت وحدها تتوسّط
 * سطرها بعرض أخواتها (كشبكة «باختيارك»). الشبكة أربعة أنصاف أعمدة وكل بطاقة
 * نصفان، فتبدأ اليتيمة من النصف الثاني. (‎561–768‎ ثلاثة أعمدة في scale.css.)
 */
@media (min-width: 769px) and (max-width: 992px) {

	.certs .certs__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.certs .certs__grid > * {
		grid-column: span 2;
	}

	.certs .certs__grid > :last-child:nth-child(odd) {
		grid-column: 2 / span 2;
	}
}

/*
 * بيانات التواصل بين ٥٦١ و٩٩٢: عمودان بدل خمس بطاقات بعرض الشاشة،
 * والبطاقة الأخيرة إن بقيت وحدها تأخذ الصفّ كله.
 */
@media (min-width: 561px) and (max-width: 992px) {

	.contact-info .contact-info__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.contact-info .contact-info__item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/*
 * بين ٥٦١ و٩٩٢ أيضاً: «أهدافنا» الثالث وحده في الوسط كبطاقات الرئيسية،
 * وبطاقة بيانات المشروع ثلاثة أعمدة متساوية بدل ٤ + ١.
 */
@media (min-width: 561px) and (max-width: 992px) {

	.goals .goals__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.goals .goals__list > * {
		grid-column: span 2;
	}

	.goals .goals__list > :last-child:nth-child(odd) {
		grid-column: 2 / span 2;
	}

	.project-info .project-info__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* بند أخير وحيد في صفّه (٤ أو ٧ بنود) يأخذ الصفّ كله بدل أن يبقى معلّقاً */
	.project-info .project-info__item:last-child:nth-child(3n+1) {
		grid-column: 1 / -1;
	}
}

/*
 * على الجوال عنوان الترويسة يملأ وسطها: النقش يُفرَّغ من الوسط حتى لا تقع
 * علامة خلف العنوان أو مسار التنقل، ويبقى على الأطراف.
 */
@media (max-width: 768px) {

	body.has-brand-pattern .page-hero::before {
		-webkit-mask-image: radial-gradient(62% 48% at 50% 55%, transparent 0 55%, #000 100%);
		mask-image: radial-gradient(62% 48% at 50% 55%, transparent 0 55%, #000 100%);
	}
}


/* ==========================================================================
   ١١ — الطباعة: لا نقش ولا زخرفة على الورق
   ========================================================================== */
@media print {

	body.has-brand-pattern .section:not(.section--dark):not(.section--media):not(.cta):not([data-surface="dark"]) {
		background-image: none;
	}

	body.has-brand-pattern .page-hero::before,
	body.has-brand-pattern .statement::before,
	.statement__body::before {
		display: none;
	}
}

/* ==========================================================================
   about
   ========================================================================== */

/* ==========================================================================
   من نحن — قفل الاسم (2.3.0)
   العلامة ثم «هرم الانشاء» في سطر واحد (العلامة أولاً في الترتيب فتقع عن
   يمين الاسم)، وتحته سطر التخصص بالحجم نفسه وسماكة أخفّ. القفل نفسه في
   صدر صفحة «من نحن» وفي قسم «من نحن» بالرئيسية.
   ========================================================================== */

/* الحجم واحد للسطرين — «بنفس الحجم بس أقل سماكة» */
.about .about-lockup,
.about .about-lockup__sub {
	font-family: var(--h-font-head);
	font-size: clamp(1.5rem, 2.55vw, 2.1rem);
}

.about .about-lockup {
	display: flex;
	align-items: center;
	gap: .34em;
	margin: 0;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.012em;
	color: var(--h-fg-title);
}

/* العلامة: ارتفاعها بالـ em فتكبر وتصغر مع العنوان، وشعار المدير العريض لا يتمدّد */
.about .about-lockup__mark {
	flex: none;
	inline-size: auto;
	block-size: 1.2em;
	max-inline-size: 3.2em;
	object-fit: contain;
}

/* عنوان طويل يكتبه المدير يلتفّ بجوار العلامة ولا يدفعها خارج السطر */
.about .about-lockup__name {
	min-inline-size: 0;
}

/*
 * السطر بارتفاع سطر العنوان نفسه وملاصق له، فإن التفّ صار سطرين متوازنين
 * بإيقاع العنوان ولا يبدو كتلة أثقل من الاسم.
 */
.about .about-lockup__sub {
	margin: .06em 0 0;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--h-fg-soft);
	text-wrap: balance;
}

/*
 * الرئيسية: الميدالية السداسية حُذفت — العلامة صارت داخل القفل — فالصدر
 * عمود واحد: القفل ← الفقرتان ← شارة التصنيف، على كل المقاسات.
 */
.about--medal .about-lede {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"head"
		"text"
		"signals";
}


/* ---- التجاوب: القفل يبقى سطراً واحداً حتى عرض 360px ---- */
@media (max-width: 768px) {

	.about .about-lockup,
	.about .about-lockup__sub {
		font-size: 1.45rem;
	}
}

/* الجوال: القفل لا يصغر عن عناوين الأقسام بعده، والعلامة تُقرأ شعاراً */
@media (max-width: 560px) {

	.about .about-lockup,
	.about .about-lockup__sub {
		font-size: 1.4rem;
	}

	.about .about-lockup {
		gap: .3em;
	}

	.about .about-lockup__mark {
		block-size: 1.3em;
	}
}


/*
 * «أهدافنا» في صفحة «من نحن» قسم كامل بعد «قيمنا»: هامشه العلوي القديم
 * (main.css) كان يترك شريطاً أبيض بلا نقش بين القسمين ومسافة مضاعفة.
 * حشو القسم يكفي، فيتلاصق القسمان ويستمرّ النقش. (‎.goals‎ داخل قسم القيم
 * في الرئيسية ليست ‎.section‎ فيبقى هامشها.)
 */
.section.goals {
	margin-block-start: 0;
}

/* ==========================================================================
   projects
   ========================================================================== */

/* ==========================================================================
   «أعمالنا» — كل المشاريع في صفحة واحدة مع شريط المجالات (2.3.0)
   --------------------------------------------------------------------------
   الخدمات دُمجت في الأعمال: أقسام المشاريع هي مجالات العمل. الشريط روابط
   ‎.project-filter__btn‎ تصفّي البطاقات فوراً عبر main.js (السمة hidden)،
   والبطاقات نفسها بلا تغيير.
   ========================================================================== */

/* شريط المجالات: في الوسط، مضغوط، ولا يتغيّر عرض الزر حين يصير نشطاً */
.projects--all .project-filter,
.projects--archive .project-filter {
	justify-content: center;
	gap: 8px;
	margin-block-end: clamp(24px, 3vw, 36px);
}

.projects--all .project-filter__btn,
.projects--archive .project-filter__btn {
	padding: 8px 18px;
	border-color: var(--h-card-line, var(--h-line-strong));
	background: var(--h-card-bg, var(--h-white));
	font-size: .86rem;
	line-height: 1.5;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}

.projects--all .project-filter__btn:hover,
.projects--archive .project-filter__btn:hover {
	border-color: var(--h-primary);
	color: var(--h-primary);
}

.projects--all .project-filter__btn.is-active,
.projects--archive .project-filter__btn.is-active {
	border-color: var(--h-primary);
	background: var(--h-primary);
	color: var(--h-white);
}

/* سطر «لا توجد» الجاهز تحت الشبكة */
.projects__empty .content-none {
	margin-block-start: 0;
}

/* بطاقة عادت للظهور بالتصفية: ظهور قصير هادئ، والباقيات لا تتحرّك */
@keyframes haram-filter-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.project-card.is-filter-in {
	animation: haram-filter-in .32s var(--h-ease-soft, ease-out) backwards;
}

@media (prefers-reduced-motion: reduce) {

	.project-card.is-filter-in {
		animation: none;
	}
}

/*
 * الجوال: الشريط سطر واحد يُمرَّر أفقياً بدل أربعة أسطر فوق أول بطاقة.
 * يمتدّ إلى حافتي الشاشة (هامش سالب بعرض حافة الحاوية) مع حشو بالعرض نفسه،
 * فيبدأ أول زر على خط المحتوى ويظهر الأخير مقصوصاً عند الحافة دلالةً على
 * التمرير. بلا شريط تمرير ظاهر، وتوقّف ليّن عند بداية كل زر، وحشو رأسي
 * صغير حتى لا تُقصّ حلقة التركيز. الهامشان التلقائيان على الطرفين يوسّطان
 * الأزرار إن قلّت واتّسع لها السطر، ويصيران صفراً حين تفيض.
 */
@media (max-width: 560px) {

	.projects--all .project-filter,
	.projects--archive .project-filter {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 6px;
		margin-inline: calc(var(--h-gutter) * -1);
		margin-block-end: 18px;
		padding-block: 6px;
		padding-inline: var(--h-gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-padding-inline: var(--h-gutter);
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.projects--all .project-filter::-webkit-scrollbar,
	.projects--archive .project-filter::-webkit-scrollbar {
		display: none;
	}

	.projects--all .project-filter__btn,
	.projects--archive .project-filter__btn {
		flex: none;
		justify-content: center;
		min-block-size: 40px;
		padding: 7px 15px;
		font-size: .82rem;
		scroll-snap-align: start;
	}

	.projects--all .project-filter__btn:first-child,
	.projects--archive .project-filter__btn:first-child {
		margin-inline-start: auto;
	}

	.projects--all .project-filter__btn:last-child,
	.projects--archive .project-filter__btn:last-child {
		margin-inline-end: auto;
	}
}


/* ==========================================================================
   بطاقة المشروع وصفحته
   ========================================================================== */

/*
 * بيانات البطاقة ذات الأيقونات (الشريك، الموقع، السنة): الأيقونة نفسها فاصل،
 * فالنقطة «·» زائدة وتبقى يتيمة في بداية السطر إن التفّت البيانات.
 * بطاقات الرئيسية بلا أيقونات فتبقى نقطتها.
 */
.project-card__meta:has(.haram-icon) .project-card__meta-item + .project-card__meta-item::before {
	content: none;
}

/*
 * صورة وحيدة في معرض المشروع (فيلا الحزم مثلاً ‎587px‎): لا تُمطّ فوق عرضها
 * الطبيعي فتبهت. في الوسط، بنسبتها الأصلية بلا قصّ، وحدّها ‎720px‎.
 */
.project-gallery:has(> .project-gallery__item:only-child) {
	max-inline-size: min(100%, 720px);
	margin-inline: auto;
}

.project-gallery > .project-gallery__item:only-child {
	justify-self: center;
	max-inline-size: 100%;
}

.project-gallery > .project-gallery__item:only-child .project-gallery__link {
	aspect-ratio: auto;
}

.project-gallery > .project-gallery__item:only-child .project-gallery__img {
	inline-size: auto;
	max-inline-size: 100%;
	block-size: auto;
}

/* «مشاريع ذات صلة» على اللوحي عمودان: بطاقتان فقط فلا تبقى الثالثة وحدها */
@media (min-width: 561px) and (max-width: 992px) {

	.projects--related .projects__grid > :nth-child(n+3) {
		display: none;
	}
}

/* ==========================================================================
   partners
   ========================================================================== */

/* ==========================================================================
   شركاؤنا — شريط الشعارات المتحرّك (الرئيسية) وشبكة الشعارات (الصفحة)
   --------------------------------------------------------------------------
   القالب: template-parts/home/clients.php (الموضعان معاً).

   البطاقة: ‎li.partner-card‎ خانة فقط (يحمل عليها ‎.reveal‎ حركته في الشبكة)،
   والبطاقة البيضاء نفسها ‎.partner-card__inner‎ (رابط أو span). الشعار رمادي
   شفيف قليلاً على أجهزة المؤشر، ويعود بألوانه عند المرور أو التركيز؛ وعلى
   أجهزة اللمس (لا مرور فيها) يظهر بألوانه دائماً.
   المقاس البصري: القالب يضع ‎partner-card--wide‎ على الشعار العريض (النسبة
   فوق ‎2.4‎) و‎partner-card--square‎ على شبه المربّع (تحت ‎1.3‎)، فيأخذ العريض
   عرضاً أكبر وارتفاعاً أقل، والمربّع ارتفاعاً أكبر — فتتقارب أوزانها.

   الشريط: قائمتان متطابقتان داخل ‎.partners-marquee__track‎، وكل قائمة تحمل
   فجوة ختامية بعرض الفجوة بين البطاقات، فإزاحة المسار بنصف عرضه = عرض
   قائمة واحدة بالضبط، والعودة إلى الصفر لا تُرى. المدّة = عدد بطاقات
   القائمة (‎--marquee-count‎ من القالب) × زمن البطاقة (‎--marquee-step‎):
   نحو ٤٠px/ث على الشاشات الواسعة ونحو ٣٨px/ث على الجوال. الخانة العريضة
   (‎1.3×‎) تُسرّع الشريط قليلاً بقدر نسبة الشعارات العريضة فيه (‎~٤٣px/ث الآن).
   الاتجاه: الموقع من اليمين، فالمسار يتحرّك نحو اليمين والبطاقات الجديدة
   تدخل من اليسار (عكس اتجاه الشريط في المواقع اللاتينية تماماً).
   ========================================================================== */

.partners {
	--partner-w: 180px;
	--partner-h: 96px;
	--partner-gap: 20px;
	--partner-logo-h: 56px;
	--marquee-step: 5s;
	--partner-shadow:
		0 1px 2px rgba(var(--h-ink-rgb), .04),
		0 6px 16px rgba(var(--h-ink-rgb), .045);
	--partner-shadow-hover:
		0 2px 4px rgba(var(--h-ink-rgb), .05),
		0 10px 22px rgba(var(--h-ink-rgb), .07);
}

/* ---- البطاقة ---- */
.partner-card {
	display: flex;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.partner-card__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(var(--h-ink-rgb), .08);
	border-radius: var(--h-r-card);
	background: var(--h-white);
	box-shadow: var(--partner-shadow);
	color: var(--h-ink-2);
	text-align: center;
	text-decoration: none;
	/* مزج الشعار يبقى داخل البطاقة البيضاء ولا يصل إلى نقش القسم */
	isolation: isolate;
	transition:
		border-color var(--h-t),
		box-shadow var(--h-t);
}

.partner-card__inner:hover,
.partner-card__inner:focus-visible {
	border-color: rgba(var(--h-accent-rgb), .34);
	box-shadow: var(--partner-shadow-hover);
}

/*
 * الشعار محتوًى داخل البطاقة بنسبته. الوزن الثاني يتجاوز قاعدة تلاشي الصور
 * ‎html.has-img-fade img‎ (تعيد الشفافية إلى ١) دون أن يمسّ إخفاء الصورة قبل
 * اكتمال تحميلها.
 *
 * الرمادي: ‎brightness(.9)‎ ثم ‎contrast(1.25)‎ — (‎.9 − .5) × 1.25 + .5 = 1‎ —
 * فيبقى الأبيض أبيض تماماً وتغمق الرماديات الفاتحة قليلاً، فيُقرأ الشعار
 * الفاتح (وزارة التعليم) ولا تظهر أرضية الشعار البيضاء.
 * ‎multiply‎ يذيب الأرضية البيضاء المرسومة داخل بعض الشعارات (عنيزة) في
 * البطاقة البيضاء فلا يبدو مستطيلاً داخل مستطيل.
 */
.partner-card__img,
html.has-img-fade .partner-card__img.is-loaded {
	display: block;
	flex: 0 1 auto;
	inline-size: auto;
	block-size: auto;
	max-inline-size: 80%;
	max-block-size: var(--partner-logo-h);
	object-fit: contain;
	filter: grayscale(1) brightness(.9) contrast(1.25);
	opacity: .9;
	mix-blend-mode: multiply;
	transition:
		filter var(--h-t),
		opacity var(--h-t);
}

.partner-card__inner:hover .partner-card__img,
.partner-card__inner:focus-visible .partner-card__img,
html.has-img-fade .partner-card__inner:hover .partner-card__img.is-loaded,
html.has-img-fade .partner-card__inner:focus-visible .partner-card__img.is-loaded {
	filter: none;
	opacity: 1;
}

/* أجهزة اللمس: لا مرور يعيد الألوان، فالشعارات بألوانها دائماً */
@media (hover: none) {

	.partner-card__img,
	html.has-img-fade .partner-card__img.is-loaded {
		filter: none;
		opacity: 1;
	}
}

/* المقاس البصري: العريض أعرض وأقصر، والمربّع أطول (‎--partner-logo-h‎ من الخانة) */
.partner-card--wide .partner-card__img,
html.has-img-fade .partner-card--wide .partner-card__img.is-loaded {
	max-inline-size: 92%;
	max-block-size: calc(var(--partner-logo-h) * .7);
}

.partner-card--square .partner-card__img,
html.has-img-fade .partner-card--square .partner-card__img.is-loaded {
	max-block-size: calc(var(--partner-logo-h) * 1.2);
}

/* شريك بلا شعار: اسمه نصاً هادئاً في البطاقة نفسها */
.partner-card__name {
	display: -webkit-box;
	overflow: hidden;
	font-family: var(--h-font-head);
	font-size: .82rem;
	font-weight: 700;
	line-height: 1.55;
	color: var(--h-ink-2);
	text-wrap: balance;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	transition: color var(--h-t);
}

.partner-card__inner:hover .partner-card__name,
.partner-card__inner:focus-visible .partner-card__name {
	color: var(--h-primary);
}


/* ==========================================================================
   الشريط المتحرّك — الصفحة الرئيسية
   ========================================================================== */
.partners-marquee {
	position: relative;
	overflow: hidden;
	/* متّسع لظلّ البطاقات فلا يقصّه الإطار */
	padding-block: 14px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.partners-marquee__track {
	display: flex;
	inline-size: max-content;
	animation: haram-partners-marquee calc(var(--marquee-count, 8) * var(--marquee-step)) linear infinite;
	will-change: transform;
}

[dir="ltr"] .partners-marquee__track {
	animation-name: haram-partners-marquee-ltr;
}

/*
 * الإيقاف: المرور بالمؤشر على أجهزة المؤشر الدقيق وحدها (على اللمس يعلق
 * ‎:hover‎ بعد النقر فيبدو الشريط معطّلاً)، والتركيز داخل الشريط أو عليه
 * (القالب يجعله قابلاً للتركيز)، وصنف ‎.is-paused‎ الذي يبدّله النقر في main.js.
 */
@media (hover: hover) and (pointer: fine) {

	.partners-marquee:hover .partners-marquee__track {
		animation-play-state: paused;
	}
}

/*
 * التركيز على رابط شعار داخل الشريط يوقفه. أما التركيز على الشريط نفسه
 * (يحدث مع كل نقرة لأنه قابل للتركيز) فلا يوقفه وحده، وإلا ما استطاعت
 * النقرة الثانية استئنافه: الإيقاف والاستئناف هنا بصنف ‎.is-paused‎.
 * وبلا جافاسكربت يكفي التركيز عليه.
 */
.partners-marquee:focus-within:not(:focus) .partners-marquee__track,
html:not(.js) .partners-marquee:focus .partners-marquee__track,
.partners-marquee.is-paused .partners-marquee__track {
	animation-play-state: paused;
}

/* حلقة التركيز داخل الإطار: القناع يقصّ كل ما يُرسم خارجه */
.partners-marquee:focus-visible {
	outline-offset: -2px;
	box-shadow: none;
}

.partners-marquee__list {
	display: flex;
	flex: none;
	gap: var(--partner-gap);
	margin: 0;
	padding: 0;
	padding-inline-end: var(--partner-gap);
	list-style: none;
}

.partners-marquee__list > .partner-card {
	flex: none;
	inline-size: var(--partner-w);
	block-size: var(--partner-h);
}

/* الشعار العريض (الوزارات والجمعيات بأسمائها) يأخذ خانة أعرض حتى تُقرأ كلماته */
.partners-marquee__list > .partner-card--wide {
	inline-size: calc(var(--partner-w) * 1.3);
}

.partners-marquee .partner-card--wide .partner-card__img,
html.has-img-fade .partners-marquee .partner-card--wide .partner-card__img.is-loaded {
	max-block-size: calc(var(--partner-logo-h) * .8);
}

@keyframes haram-partners-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(50%, 0, 0);
	}
}

@keyframes haram-partners-marquee-ltr {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}


/* ==========================================================================
   الشبكة — صفحة «شركاؤنا»
   ========================================================================== */
.partners-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.partners-grid > .partner-card {
	--partner-logo-h: 60px;
	block-size: 112px;
}

/* في الشبكة الخانة واسعة: العريض يأخذ ارتفاع الشعار كاملاً ويملأ عرضها */
.partners-grid > .partner-card--wide .partner-card__img,
html.has-img-fade .partners-grid > .partner-card--wide .partner-card__img.is-loaded {
	max-block-size: var(--partner-logo-h);
}


/* ==========================================================================
   الشاشات
   ========================================================================== */
@media (max-width: 992px) {

	.partners-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.partners-grid > .partner-card {
		--partner-logo-h: 54px;
		block-size: 100px;
	}
}

@media (max-width: 768px) {

	.partners {
		--partner-w: 140px;
		--partner-h: 80px;
		--partner-gap: 14px;
		--partner-logo-h: 46px;
		--marquee-step: 4s;
	}

	.partner-card__inner {
		padding: 10px 12px;
		border-radius: var(--h-r-sm);
	}

	.partners-marquee {
		padding-block: 12px;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
	}
}

@media (max-width: 560px) {

	.partners-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.partners-grid > .partner-card {
		--partner-logo-h: 50px;
		block-size: 84px;
	}

	.partner-card__name {
		font-size: .78rem;
	}
}


/* ==========================================================================
   تقليل الحركة: لا شريط متحرّك — صفّ ثابت موسّط من الشعارات الفريدة وحدها
   (النسخة الثانية والتكرارات مخفية)، وبلا انتقالات.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

	.partners-marquee {
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.partners-marquee__track {
		inline-size: auto;
		animation: none;
		transform: none;
		will-change: auto;
	}

	.partners-marquee__list {
		flex: 1 1 auto;
		flex-wrap: wrap;
		justify-content: center;
		padding-inline-end: 0;
	}

	.partners-marquee__list[aria-hidden="true"],
	.partners-marquee .partner-card--clone {
		display: none;
	}

	/* ساكناً تعود الخانات العريضة إلى العرض الموحّد فتبقى الصفوف شبكة منتظمة */
	.partners-marquee__list > .partner-card--wide {
		inline-size: var(--partner-w);
	}

	.partner-card__inner,
	.partner-card__img,
	html.has-img-fade .partner-card__img.is-loaded,
	.partner-card__name {
		transition: none;
	}
}