/*
	ONE80 base reset + design tokens.
	نفس القيم بالظبط الموجودة في assets/data/one80-kit-tokens.json (مصدر الحقيقة
	الوحيد) — المتغيرات دي مخصصة للكود المكتوب يدويًا (widgets/CSS مخصص) خارج
	محرر Elementor، اللي بياخد قيمه من Global Colors/Fonts في الـ Kit مباشرة
	(بيتطبّقوا تلقائيًا عبر inc/elementor-kit/class-kit-installer.php).
*/
:root{
	/* ألوان */
	--one80-bg:#231F20;              /* Primary / الخلفية الأساسية الغامقة */
	--one80-accent:#C4F858;          /* Secondary / اللون المميز (ليموني) */
	--one80-text-on-dark:#FFFFFF;
	--one80-text-on-light:#231F20;
	--one80-border-muted:#3A3536;    /* توكن مساعد — راجع ملاحظة "utility" في one80-kit-tokens.json */
	--one80-text-muted:#A8A4A5;

	/*
		خطوط — Oswald للعناوين وRed Hat Display للنصوص متأكّدين فعليًا من
		الملف المرجعي الأصلي (قسته بمتصفح حقيقي، مش تخمين) — "Inter" اللي
		كنا مستخدمينها قبل كده كانت غلط. النظير العربي (Tajawal/IBM Plex
		Sans Arabic) لسه Placeholder لحد اعتماد الفريق البصري له، لأن الملف
		المرجعي إنجليزي بس.
	*/
	--one80-font-heading-latin:'Oswald', 'Arial Narrow', sans-serif;
	--one80-font-heading-arabic:'Tajawal', 'Segoe UI', sans-serif;
	--one80-font-body-latin:'Red Hat Display', -apple-system, sans-serif;
	--one80-font-body-arabic:'IBM Plex Sans Arabic', 'Segoe UI', sans-serif;

	/* الأزرار المائلة — الزاوية بتتعكس تلقائيًا مع [dir="rtl"] تحت */
	--one80-skew:-20deg;
	--one80-btn-radius:0px;
}

[dir="rtl"]{
	--one80-skew:20deg;
}

body{
	background:var(--one80-bg);
	color:var(--one80-text-on-dark);
	font-family:var(--one80-font-body-latin);
	font-size:17px;
	line-height:1.6;
}

[dir="rtl"] body{
	font-family:var(--one80-font-body-arabic);
}

/* فقرات النص — مش أبيض 100% في الأصل، أبيض بشفافية 82% (قسته فعليًا). */
p{
	color:rgba(242,242,240,0.82);
}

/*
	⚠️ إصلاح: روابط نصية عادية زي "Get in Touch →" كانت بتطلع بلون أزرق
	افتراضي (لون المتصفح للروابط) لأننا معملناش أي تنسيق للـ <a> العادية —
	القيم دي مقاسة فعليًا من الملف المرجعي (border-bottom بدل underline).
*/
p a{
	color:rgba(242,242,240,0.95);
	text-decoration:none;
	border-bottom:1px solid rgba(196,248,88,0.55);
	padding-bottom:4px;
}

p a:hover{
	color:var(--one80-accent);
	border-color:var(--one80-accent);
}

/*
	⚠️ إصلاح جذري (العنوان الرئيسي كان "مختفي" فعليًا): أي Elementor heading
	widget أصلي (مش الـ widgets المخصصة بتاعتنا اللي بتحدد لونها بنفسها) كان
	بياخد لون افتراضي غامق (#231F20 — نفس لون الخلفية!) من Theme Style
	الافتراضي بتاع Elementor، فالنص كان بيتطبع فعليًا بس "نص غامق فوق خلفية
	غامقة" = مختفي تمامًا رغم إنه موجود 100% في الـ HTML. اتأكدت من السبب
	بالظبط عبر DevTools (computed color: rgb(35, 31, 32))، مش تخمين.
	الحل: نص أبيض افتراضي هنا (specificity 0,0,1) — أي سكشن بخلفية فاتحة
	(زي "180 Idea" أو الـ CTA الختامي) عندهم Override صريح بلون غامق على
	مستوى الـ widget نفسه (specificity 0,2,0 عبر Elementor) فبيفضل هو الغالب
	زي ما هو من غير ما يتأثر بالقاعدة العامة دي.
*/
h1,h2,h3,h4,h5,h6{
	font-family:var(--one80-font-heading-latin);
	font-weight:700;
	text-transform:uppercase;
	line-height:1.05;
	letter-spacing:-0.01em;
	color:#FFFFFF;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6{
	font-family:var(--one80-font-heading-arabic);
	font-weight:800;
	text-transform:none; /* العربي متكسرش شكله بالـ uppercase (مفهوش حالة أحرف أصلًا) */
	letter-spacing:normal;
}

/* المقاسات دي مقاسة فعليًا من الملف المرجعي (h1: 73.7px, h2: 47.1px) —
   استخدمت clamp() عشان تفضل متجاوبة على شاشات أصغر بدل رقم ثابت. */
h1{ font-size:clamp(2.5rem, 1.6rem + 3.6vw, 4.6rem); }
h2{ font-size:clamp(1.8rem, 1.4rem + 1.8vw, 2.94rem); }
h3{ font-weight:600; font-size:1.375rem; letter-spacing:normal; } /* الأصل 600 مش 700 */
h4{ font-size:1.125rem; }

/*
	Scroll-reveal — قسم 1 من الخطة ("Motion: Scroll-reveal للعناصر").
	الكلاس بيتضاف بالـ JS بس (motion.js) — لو الجافاسكريبت متعطّل/فشل، العنصر
	بيفضل ظاهر عادي (Progressive Enhancement)، مش مخفي للأبد.
*/
.one80-reveal{
	opacity:0;
	transform:translateY(28px);
	transition:opacity 700ms ease, transform 700ms ease;
}

.one80-reveal.is-visible{
	opacity:1;
	transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
	.one80-reveal{
		opacity:1;
		transform:none;
		transition:none;
	}
}