/* ===========================================================================
 * Aqua Child — التنسيق الرئيسي
 *
 * البنية:
 *   1. متغيّرات الهوية
 *   2. الخطوط العربية
 *   3. أساسيات
 *   4. شريط الإعلان
 *   5. زر واتساب العائم
 *   6. شارات الثقة
 *   7. زمن القراءة
 *   8. ملاحظة الفوتر
 *   9. مساعدات
 *
 * ملاحظة: نستخدم الخصائص المنطقية (inline-start/end) بدل left/right حتى
 * يعمل التصميم في الاتجاهين تلقائيًا بلا نسخة مكرّرة.
 * ======================================================================== */

/* --------------------------------------------------------------------------
 * 1. متغيّرات الهوية
 * غيّر هذه القيم فقط لتغيير هوية الموقع بالكامل.
 * ----------------------------------------------------------------------- */
:root {
	--aqua-brand: #0ea5a4;
	--aqua-brand-dark: #0b7f7e;
	--aqua-brand-light: #e6f7f7;
	--aqua-accent: #f59e0b;
	--aqua-success: #16a34a;
	--aqua-danger: #dc2626;
	--aqua-ink: #0f172a;
	--aqua-muted: #64748b;
	--aqua-line: rgba(15, 23, 42, 0.1);
	--aqua-surface: #ffffff;

	--aqua-radius: 12px;
	--aqua-radius-sm: 8px;
	--aqua-radius-full: 999px;

	--aqua-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
	--aqua-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.16);

	--aqua-space: 16px;
	--aqua-transition: 0.22s ease;

	/* ارتفاع الهيدر الثابت في Blocksy — يُستخدم لتعويض شريط الإعلان. */
	--aqua-z-float: 999;
}

/* --------------------------------------------------------------------------
 * 2. الخطوط العربية
 *
 * الوضع الحالي: خطوط النظام — أسرع خيار، صفر طلبات شبكة، ودعم عربي ممتاز.
 *
 * لاستخدام خط مستضاف ذاتيًا (Tajawal / Cairo / IBM Plex Sans Arabic):
 *   1. ضع ملفات .woff2 في assets/fonts/
 *   2. فُكّ التعليق عن كتلة @font-face أدناه وعدّل أسماء الملفات
 *   3. أضف اسم الخط في بداية --aqua-font
 *
 * تجنّب تحميل الخطوط من Google Fonts مباشرة: أبطأ، ويسبّب مشكلة خصوصية
 * في بعض الدول لأنه يرسل عنوان IP للزائر إلى خادم خارجي.
 * ----------------------------------------------------------------------- */

/*
@font-face {
	font-family: "Tajawal";
	src: url("../fonts/tajawal-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Tajawal";
	src: url("../fonts/tajawal-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
*/

:root {
	--aqua-font: "Segoe UI", "Noto Sans Arabic", "Dubai", "Tahoma", system-ui, -apple-system, sans-serif;
	--aqua-font-numeric: "Segoe UI", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
 * 3. أساسيات
 * ----------------------------------------------------------------------- */
.aqua-icon {
	flex: none;
	display: inline-block;
	vertical-align: middle;
}

.aqua-child :focus-visible {
	outline: 2px solid var(--aqua-brand);
	outline-offset: 2px;
	border-radius: var(--aqua-radius-sm);
}

/* --------------------------------------------------------------------------
 * 4. شريط الإعلان
 * ----------------------------------------------------------------------- */
.aqua-announcement {
	position: relative;
	z-index: 100;
	background: linear-gradient(90deg, var(--aqua-brand-dark), var(--aqua-brand));
	color: #fff;
	font-size: 14px;
	line-height: 1.6;
}

.aqua-announcement[hidden] {
	display: none;
}

.aqua-announcement__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	max-width: 1290px;
	margin-inline: auto;
	padding: 10px 20px;
	text-align: center;
}

.aqua-announcement__text {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}

a.aqua-announcement__text:hover,
a.aqua-announcement__text:focus {
	color: inherit;
	text-decoration: underline;
}

.aqua-announcement__close {
	position: absolute;
	inset-inline-end: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: var(--aqua-radius-full);
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	cursor: pointer;
	transition: background var(--aqua-transition);
}

.aqua-announcement__close:hover {
	background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 600px) {
	.aqua-announcement__inner {
		padding-inline: 44px;
		font-size: 13px;
	}
}

/* --------------------------------------------------------------------------
 * 5. زر واتساب العائم
 * ----------------------------------------------------------------------- */
.aqua-whatsapp {
	position: fixed;
	bottom: 22px;
	z-index: var(--aqua-z-float);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--aqua-radius-full);
	background: #25d366;
	color: #fff;
	box-shadow: var(--aqua-shadow-lg);
	transition: transform var(--aqua-transition), background var(--aqua-transition);
}

.aqua-whatsapp--start {
	inset-inline-start: 22px;
}

.aqua-whatsapp--end {
	inset-inline-end: 22px;
}

.aqua-whatsapp:hover,
.aqua-whatsapp:focus {
	background: #1eb457;
	color: #fff;
	transform: scale(1.06);
}

/* لا نزاحم زر «العودة للأعلى» في Blocksy على الشاشات الصغيرة. */
@media (max-width: 480px) {
	.aqua-whatsapp {
		width: 50px;
		height: 50px;
		bottom: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aqua-whatsapp,
	.aqua-announcement__close {
		transition: none;
	}

	.aqua-whatsapp:hover {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
 * 6. شارات الثقة
 * ----------------------------------------------------------------------- */
.aqua-trust-badges {
	display: grid;
	gap: 10px;
	margin: 20px 0 0;
	padding: 16px;
	list-style: none;
	border: 1px solid var(--aqua-line);
	border-radius: var(--aqua-radius);
	background: var(--aqua-brand-light);
}

.aqua-trust-badges__item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	color: var(--aqua-ink);
}

.aqua-trust-badges__item .aqua-icon {
	color: var(--aqua-brand-dark);
}

/* --------------------------------------------------------------------------
 * 7. زمن القراءة
 * ----------------------------------------------------------------------- */
.aqua-reading-time {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 18px;
	padding: 4px 12px;
	border-radius: var(--aqua-radius-full);
	background: var(--aqua-brand-light);
	color: var(--aqua-brand-dark);
	font-size: 13px;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
 * 8. ملاحظة الفوتر
 * ----------------------------------------------------------------------- */
.aqua-footer-note {
	background: var(--aqua-ink);
	color: rgba(255, 255, 255, 0.72);
	font-size: 13px;
	line-height: 1.8;
}

.aqua-footer-note__inner {
	max-width: 1290px;
	margin-inline: auto;
	padding: 14px 20px;
	text-align: center;
}

.aqua-footer-note__inner p {
	margin: 0;
}

.aqua-footer-note a {
	color: #fff;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
 * 9. مساعدات
 * ----------------------------------------------------------------------- */
.aqua-wa-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: var(--aqua-radius-full);
	background: #25d366;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.aqua-wa-link:hover,
.aqua-wa-link:focus {
	background: #1eb457;
	color: #fff;
}

/* إخفاء بصري مع إبقاء النص لقارئات الشاشة (احتياط إن لم يعرّفه القالب الأب). */
.aqua-child .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
 * الوضع الليلي — يتبع إعداد نظام الزائر.
 * احذف هذه الكتلة إذا كان موقعك فاتحًا دائمًا.
 * ----------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	:root {
		--aqua-brand-light: rgba(14, 165, 164, 0.14);
		--aqua-ink: #e2e8f0;
		--aqua-line: rgba(226, 232, 240, 0.16);
		--aqua-surface: #0f172a;
	}
}