/**
 * الخلفية الموحدة لرئيسية ثيم تنمية الشمالية (template-parts/home/sh-backdrop.php): طبقة مطلقة خلف كل الأقسام
 * بطول الصفحة. تتحرك مع التمرير (لا background-attachment: fixed، فهو ثقيل على الجوال).
 *
 * المواضع العمودية نِسب من طول الصفحة كلها، فتتوزع الزخارف على الأقسام مهما اختلف ترتيبها وعددها.
 */

body.home {
	position: relative;
}

.sh-backdrop {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	/* موج نعناعي خفيف يتقدم ويتراجع على طول الصفحة */
	background: repeating-linear-gradient(180deg, transparent 0, rgba(68, 170, 143, 0.07) 800px, transparent 1600px);
}

/* ==========================================================================
   الخيط الكوفي (يرسمه assets/js/blocks/sh-backdrop.js بوحدات البكسل من أعلى الصفحة)
   ========================================================================== */

.sh-backdrop__thread {
	position: absolute;
	top: 0;
	left: 0;
}

.sh-backdrop__thread path {
	fill: none;
	stroke: url(#sh-backdrop-thread);
	stroke-width: 2;
	stroke-linecap: round;
	opacity: 0.4;
}
/* ==========================================================================
   رسم الشعار الخطي: خمس مرات تتناوب بين الطرفين
   ========================================================================== */

.sh-backdrop__emblem {
	position: absolute;
	width: var(--size, 600px);
	aspect-ratio: 1;
	background: linear-gradient(180deg, var(--sh-mint), var(--theme-primary));
	opacity: 0.075;
	transform: rotate(var(--turn, 0deg));
	-webkit-mask: var(--sh-emblem-line) center / contain no-repeat;
	mask: var(--sh-emblem-line) center / contain no-repeat;
}

.sh-backdrop__emblem--1 {
	--size: 620px;
	--turn: -6deg;
	top: 11%;
	right: -250px;
}

.sh-backdrop__emblem--2 {
	--size: 560px;
	--turn: 8deg;
	top: 29%;
	left: -230px;
}

.sh-backdrop__emblem--3 {
	--size: 700px;
	--turn: 4deg;
	top: 46%;
	right: -290px;
}

.sh-backdrop__emblem--4 {
	--size: 600px;
	--turn: -9deg;
	top: 63%;
	left: -250px;
}

.sh-backdrop__emblem--5 {
	--size: 560px;
	--turn: 6deg;
	top: 79%;
	right: -230px;
}

/* ==========================================================================
   مربعات الفسيفساء عند منعطفات الخيط، والورقتان الذهبيتان (مواضعها من السكربت)
   ========================================================================== */

.sh-backdrop__tile {
	position: absolute;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 3px;
	background: var(--sh-mint);
	opacity: 0.6;
	transform: rotate(45deg);
}

.sh-backdrop__tile.is-primary {
	background: var(--theme-primary);
}

.sh-backdrop__tile.is-gold {
	background: var(--theme-secondary);
}

.sh-backdrop__leaves {
	position: absolute;
	width: 46px;
	height: 46px;
	background: var(--theme-secondary);
	opacity: 0.6;
	-webkit-mask: var(--sh-leaves-mask) center / contain no-repeat;
	mask: var(--sh-leaves-mask) center / contain no-repeat;
}
/* ==========================================================================
   الشاشات الضيقة: بلا خيط ولا مربعات، والشعار أصغر
   ========================================================================== */

@media (max-width: 1024px) {
	.sh-backdrop__thread,
	.sh-backdrop__tile,
	.sh-backdrop__leaves {
		display: none;
	}

	.sh-backdrop__emblem {
		--size: 380px;
	}

	.sh-backdrop__emblem--1,
	.sh-backdrop__emblem--3,
	.sh-backdrop__emblem--5 {
		right: -170px;
	}

	.sh-backdrop__emblem--2,
	.sh-backdrop__emblem--4 {
		left: -170px;
	}
}