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

.site-footer {
	position: relative;
	margin-top: 0;
	padding: 72px 0 22px;
	background:
		radial-gradient(ellipse 40% 60% at 0% 100%, rgba(68, 170, 143, 0.22), transparent 70%),
		linear-gradient(180deg, var(--sh-deep), color-mix(in srgb, var(--sh-deep) 82%, #000));
}

/* رمز الشعار رسماً خطياً أبيض خافتاً في الزاوية بدل نقش الأب */
.site-footer::before {
	inset: auto auto -110px -90px;
	width: 460px;
	height: 460px;
	background: #ffffff;
	opacity: 0.09;
	-webkit-mask: var(--sh-emblem-line) center / contain no-repeat;
	mask: var(--sh-emblem-line) center / contain no-repeat;
}

/* خط بتدرّج الرمز على الحافة العليا */
.site-footer::after {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: linear-gradient(to left, var(--sh-mint), var(--theme-primary) 60%, var(--theme-secondary));
}

.site-footer .widget-area h3 {
	color: #ffffff;
}

.site-footer .footer-contact-list .icon {
	color: var(--theme-secondary);
}

.site-footer .widget-quick-links a {
	color: rgba(255, 255, 255, 0.84);
	transition: color 0.2s ease, padding 0.2s ease;
}

.site-footer .widget-quick-links a:hover {
	color: var(--theme-secondary);
}

.site-footer .social-links {
	gap: 8px;
}

.site-footer .social-icon-btn {
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--sh-radius-sm);
	background: rgba(255, 255, 255, 0.05);
}

.site-footer .social-icon-btn:hover {
	border-color: var(--theme-secondary);
	background: var(--theme-secondary);
	color: var(--sh-deep);
}

/* بطاقة شهادة التسجيل والترخيص */
.site-footer .footer-license,
.site-footer .footer-cert-card {
	border-color: rgba(var(--theme-secondary-rgb), 0.45);
	border-radius: var(--sh-radius);
}

.site-footer .site-info {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 767px) {
	.site-footer {
		padding-top: 54px;
	}

	.site-footer::before {
		width: 220px;
		height: 220px;
	}
}