/*
 * NSV CUSTOM TWEAKS — تعديلات مخصّصة على تنسيق الموقع
 * يُحمَّل عبر nsv_custom_tweaks_styles() في inc/dynamic-helpers.php
 * كل تعديل موثّق بتاريخه ويمكن حذفه وحده دون أن يؤثر على غيره.
 */

/* ------------------------------------------------------------------
 * 2026-09-05 — إنزال شريط مواقيت الصلاة قليلاً حتى لا يلتصق بالهيدر
 *
 * الشريط aside.spt-strip يضع الجافاسكربت الخاص به قيمة top محسوبة
 * أسفل الهيدر مباشرة، فيظهر ملتصقاً به.
 *
 * الحل: هامش علوي 18px — على العناصر ذات position:absolute يزيح الهامش
 * العنصر عن قيمة top المحسوبة، فلا نصطدم بجافاسكربت الإضافة.
 *
 * الاستثناء .is-compact = وضع الجوال حيث يصبح الشريط position:fixed أسفل الشاشة.
 *
 * ملاحظة (2026-09-07): في الصفحة الرئيسية صارت اللوحة مثبّتة بمحاذاة أعلى
 * البنر الرئيسي، وبلوك التثبيت أدناه يصفّر هذا الهامش. القاعدة هنا تخدم بقية
 * الحالات (لو ظهر الشريط في صفحة بلا بنر رئيسي).
 * ------------------------------------------------------------------ */
.spt-strip.spt-pin-page:not(.is-compact){
	margin-top:18px !important;
}

/* ------------------------------------------------------------------
 * 2026-09-05 — إظهار مواقيت الصلاة على الجوال كشريط أفقي أعلى الصفحة
 *
 * المشكلة: على الجوال (≤782px) تحوّل الإضافة الشريط إلى زر عائم صغير
 * بقاعدة .spt-strip.is-compact{position:fixed;bottom:24px} مع z-index:900،
 * بينما يشغل شريط التنقل السفلي للقالب nav.nsv-mobile-bottom-nav آخر ~80px
 * من الشاشة بـ z-index:1200 — فيختفي الزر خلفه تماماً ولا يراه الزائر.
 *
 * الحل: سكربت assets/js/nsv-custom-tweaks.js ينقل aside.spt-strip إلى أعلى
 * الصفحة أسفل الهيدر ويضيف له الصنف nsv-spt-inline، وهنا نحوّله إلى
 * شريط أفقي عادي ضمن تدفق الصفحة لا يغطي أي محتوى:
 *   المغلق  = سطر واحد «🕌 <المدينة> · الصلاة القادمة: <الصلاة> <العدّ التنازلي>» + سهم.
 *   المفتوح = لوحة المواقيت الكاملة تنسدل تحته (سلوك الإضافة الأصلي).
 *
 * اسم المدينة عنصر span.nsv-spt-city يضيفه السكربت نقلاً عن .spt-city.
 *
 * عبارة «الصلاة القادمة:» مقصورة على data-phase="next" لأن الإضافة تكتب في
 * نفس العنصر «صلاة الظهر» عند دخول الوقت (active) و«الإقامة 0:04:12» قبل
 * الإقامة (iqama)، فلا يصحّ تصديرهما بتلك العبارة.
 *
 * القاعدة الأخيرة شبكة أمان: في الصفحات التي لا يوجد بها بنر مناسبات يبقى
 * الزر عائماً، فنرفعه فوق شريط التنقل السفلي بدل أن يختفي خلفه.
 *
 * للتراجع: احذف هذا البلوك وملف assets/js/nsv-custom-tweaks.js.
 * ------------------------------------------------------------------ */
@media (max-width:782px){

	.spt-strip.nsv-spt-inline{
		position:static !important;
		top:auto !important;
		bottom:auto !important;
		inset-inline:auto !important;
		transform:none !important;
		display:block !important;
		width:auto !important;
		max-width:none !important;
		z-index:auto !important;
		margin:0 0 12px !important;
	}

	.spt-strip.nsv-spt-inline .spt-toggle{
		display:flex !important;
		width:100%;
		justify-content:flex-start;
		gap:6px;
		padding:11px 14px;
		border-radius:14px;
		font-size:0.9rem;
		box-shadow:0 8px 22px -16px rgba(15,23,42,0.8);
	}

	.spt-strip.nsv-spt-inline .nsv-spt-city{
		font-weight:700;
		white-space:nowrap;
	}

	.spt-strip.nsv-spt-inline .nsv-spt-city::after{
		content:" · ";
		font-weight:400;
		opacity:0.55;
	}

	.spt-strip.nsv-spt-inline[data-phase="next"] .spt-toggle-text::before{
		content:"الصلاة القادمة: ";
		font-weight:600;
		opacity:0.85;
	}

	.spt-strip.nsv-spt-inline .spt-toggle::after{
		content:"⌄";
		margin-inline-start:auto;
		font-size:1.15rem;
		line-height:1;
		opacity:0.85;
		transition:transform 0.25s ease;
	}

	.spt-strip.nsv-spt-inline.is-open .spt-toggle::after{
		transform:rotate(180deg);
	}

	.spt-strip.nsv-spt-inline .spt-panel{
		width:100% !important;
		margin:8px 0 0 !important;
	}

	/* شبكة أمان للصفحات بلا بنر مناسبات: ارفع الزر العائم فوق شريط التنقل. */
	.spt-strip.is-compact:not(.nsv-spt-inline){
		bottom:96px !important;
		z-index:1250 !important;
	}
}

/* الشاشات الضيقة جداً: أسقط العبارة التوضيحية وأبقِ المدينة والصلاة والعدّ. */
@media (max-width:360px){
	.spt-strip.nsv-spt-inline[data-phase="next"] .spt-toggle-text::before{
		content:none;
	}
}

/* ------------------------------------------------------------------
 * 2026-09-07 — إنزال بنر المناسبات درجة في الصفحة الرئيسية
 *
 * إضافة البنر تطبع div.shb-banner بعد </header> مباشرة (قبل <main>)،
 * فكان أول عنصر في الصفحة. سكربت assets/js/nsv-custom-tweaks.js ينقله
 * ليصبح بعد البنر الرئيسي .nsv-top-banners-slider مباشرة، ويضع مكانه
 * الفاصل .nsv-shb-spacer.
 *
 * لماذا الفاصل: الهيدر position:relative بـ top موجب (46px/32px عند ظهور
 * شريط أدوات ووردبريس)، وهي إزاحة لا تؤثر في التدفق، فكان بنر المناسبات
 * يعوّضها بهامش علوي مساوٍ. بعد إنزاله يتولّى الفاصل التعويض بارتفاع
 * --nsv-shb-offset الذي يضبطه السكربت (0 لغير المسجّلين، ويتحدّث مع
 * resize/load)، وإلا غطّى الهيدر أعلى المحتوى التالي.
 *
 * الجوال: الشريط الأفقي يبقى أسفل الهيدر مباشرة (بعد الفاصل، خارج البنر)،
 * فيحتاج الهوامش 12px التي كان يرثها من padding حاوية البنر — أفقياً
 * وعلوياً — حتى لا يتغيّر موضعه قيد بكسل.
 * ------------------------------------------------------------------ */
.nsv-shb-spacer{
	height:var(--nsv-shb-offset, 0px);
}

@media (max-width:782px){
	body > .spt-strip.nsv-spt-inline{
		margin:12px !important;
	}
}

/* ------------------------------------------------------------------
 * 2026-09-07 — تثبيت لوحة المواقيت بمحاذاة أعلى البنر الرئيسي (سطح المكتب)
 *
 * جافاسكربت الإضافة (place() في strip.js) يضبط top باستهداف .shb-banner:
 *   var anchor = document.querySelector('.shb-banner') || header...
 * فلولا هذا البلوك لنزلت اللوحة مع البنر بعد إنزاله.
 *
 * --nsv-spt-top: أعلى البنر الرئيسي بإحداثيات المستند، يضبطه السكربت مع
 * resize/load ويتجاوز قيمة top السطرية بـ !important (فلا نحتاج سباقاً مع
 * الإضافة). ويُصفَّر الهامش العلوي هنا لتنطبق اللوحة على أعلى البنر تماماً.
 *   المرجع هو السلايدر لا الهيدر عمداً: الهيدر «ذكي الإخفاء» يُزاح بـ transform
 *   عند التمرير، فلو أُعيد الحساب والصفحة ممرَّرة لارتفعت اللوحة فوق القائمة.
 * --nsv-spt-gap: عرض اللوحة + 24 — نحجزه على يسار البنر الرئيسي بدل أن
 * تركب اللوحة فوقه (نفس معادلة pushBanner في الإضافة).
 *
 * .nsv-spt-clear-card: يضيفه السكربت حين تنتهي اللوحة داخل حدود البنر
 * الرئيسي، فنلغي المساحة التي تحجزها الإضافة بجانب بطاقة المناسبات. وإن
 * كانت اللوحة أطول من البنر الرئيسي يُزال الصنف فتبقى المساحة محجوزة.
 *
 * تنبيه على انتقائية المحدِّد: محرّك تصميم القالب يطبع في <head> قاعدة
 * `html body.home .nsv-top-banners-slider{padding:0 !important}`، لذلك
 * كُرِّر صنف السلايدر مرتين هنا لرفع الانتقائية فوقها — لا تختصره.
 *
 * الأصناف كلها على <html> ولا توجد إلا بعد نجاح إنزال البنر، فإن تعطّل
 * السكربت عاد كل شيء لسلوك الإضافة الأصلي.
 *
 * للتراجع: احذف هذا البلوك وبلوك 2026-09-07 السابق وأعد ملف الجافاسكربت.
 * ------------------------------------------------------------------ */
.nsv-spt-pinned .spt-strip.spt-pin-page:not(.is-compact){
	top:var(--nsv-spt-top, 0px) !important;
	margin-top:0 !important;
}

html.nsv-spt-pinned body .nsv-top-banners-slider.nsv-top-banners-slider{
	padding-left:var(--nsv-spt-gap, 0px) !important;
}

.nsv-spt-clear-card .shb-banner .shb-inner{
	margin-left:0 !important;
}

/* ------------------------------------------------------------------
 * 2026-09-07 (ب) — محاذاة بطاقة المناسبات مع بقية أقسام الصفحة
 *
 * بطاقة .shb-inner عرضها 1200px وهوامشها auto، فبعد إلغاء المساحة المحجوزة
 * على يسارها التصقت بالحافة اليسرى وظهر فراغ كبير على يمينها في الشاشات
 * العريضة، ولم تعد محاذاتها كمحاذاة أقسام الصفحة (التي عرض محتواها أضيق).
 *
 * السكربت يقيس عرض محتوى أول .container داخل <main> — وهو مرجع عرض كل
 * الأقسام في القالب ويتغيّر بتغيّر إعداد عرض الصفحة — ويمرّره في
 * --nsv-shb-inner-width، وهنا نعطيه للبطاقة مع هوامش auto فتتوسّط مثلها.
 *
 * هذه القاعدة تأتي بعد قاعدة .nsv-spt-clear-card عمداً: انتقائيتهما متساوية
 * (ثلاثة أصناف) فالمتأخرة هي الفائزة، وبها يعود الهامش الأيسر إلى auto.
 *
 * الصنف nsv-shb-aligned يضيفه السكربت فقط عند نجاح القياس وعند بقاء فجوة
 * كافية بين لوحة المواقيت المثبّتة والبطاقة بعد توسيطها، وإلا عاد السلوك
 * السابق بلا تداخل. ومقصورة على ≥783px فلا تمسّ الجوال.
 *
 * للتراجع: احذف هذا البلوك (والدالة syncAlign في ملف الجافاسكربت).
 * ------------------------------------------------------------------ */
@media (min-width:783px){
	.nsv-shb-aligned .shb-banner .shb-inner{
		width:var(--nsv-shb-inner-width) !important;
		max-width:var(--nsv-shb-inner-width) !important;
		margin-left:auto !important;
		margin-right:auto !important;
	}
}