/* =========================================================
   theme-overrides.css (no shadows) — Full, refined headings
   يعمل مباشرة فوق Tailwind بدون أي تغيير في المحتوى
   ========================================================= */

/* ========== Fonts ========== */

/* ---------- متغيرات ألوان وهوية ---------- */
:root{
  --brand-600: #2563eb; /* blue-600 */
  --brand-700: #1d4ed8; /* blue-700 */
  --ink-900:  #0f172a;  /* slate-900 */
  --ink-800:  #1f2937;  /* slate-800 */
  --ink-700:  #334155;  /* slate-700 */
  --line-200: #e2e8f0;  /* slate-200 */
  --line-300: #cbd5e1;  /* slate-300 */
  --accent:   #f59e0b;  /* amber-500 */
  --paper:    #e8ebec;
  --page:     #fafafa;

  /* سلم طباعي مرن — h1 أكبر، والباقي متزن */
  --h1: clamp(2.1rem, 1.2rem + 2.4vw, 3.0rem);   /* ~33→48px */
  --h2: clamp(1.3rem, 0.9rem + 1.0vw, 1.7rem);   /* ~21→27px */
  --h3: clamp(1.12rem, 0.85rem + 0.6vw, 1.3rem); /* ~18→21px */
  --h4: clamp(1.02rem, 0.8rem + 0.3vw, 1.12rem); /* ~16.3→18px */
}

/* ---------- أساسيات الطباعة والاتجاه ---------- */
html{
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background-color:var(--page);
  color:var(--ink-900);
}
html[lang="ar"], [dir="rtl"]{ direction:rtl; text-align:start; }
html[lang="en"], [dir="ltr"]{ direction:ltr; text-align:start; }

body{
  line-height:1.85;
  font-size:15.6px;
}

/* خطوط الواجهة حسب اللغة */
html[lang="ar"] body,
[dir="rtl"] body{
  font-family: "Tajawal", system-ui, -apple-system, "Segoe UI",
               "Noto Kufi Arabic", "Noto Sans Arabic", Arial, sans-serif;
}
html[lang="en"] body,
[dir="ltr"] body{
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* يمكن تخصيص العناوين بنفس الخط */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4{
  font-family: "Tajawal", system-ui, -apple-system, "Segoe UI",
               "Noto Kufi Arabic", "Noto Sans Arabic", Arial, sans-serif;
}
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] h4,
[dir="ltr"] h1, [dir="ltr"] h2, [dir="ltr"] h3, [dir="ltr"] h4{
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* تركيز واضح يمكن رؤيته بدون ظلال */
:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible{
  outline:2px solid var(--brand-600);
  outline-offset:2px;
  border-radius:10px;
}

/* ---------- عناوين ونصوص (أحجام محسّنة) ---------- */
h1,h2,h3,h4{ letter-spacing:-0.01em; color:var(--ink-900); }
h1{ font-weight:800; font-size:var(--h1) !important; line-height:1.14; }
h2{ font-weight:800; font-size:var(--h2) !important; line-height:1.22; }
h3{ font-weight:700; font-size:var(--h3) !important; line-height:1.3;  }
h4{ font-weight:600; font-size:var(--h4) !important; line-height:1.4;  }

/* تحسين بصري لعناوين أقسام مخصّصة */
.section-title{ font-size:var(--h2) !important; }

/* هيدر الهيرو فقط: h1 أكبر قليلًا مع نفس أبعاد الهيرو */
#hero h1{ font-size: clamp(2.2rem, 1.2rem + 3.0vw, 3.2rem) !important; line-height:1.12; }
#hero p { font-size: clamp(1.0rem, 0.9rem + 0.6vw, 1.2rem); line-height:1.7; }

/* نصوص عامة */
p{ color:var(--ink-700); }
p + p{ margin-top:.6rem; }

strong{ color:var(--ink-900); }
em{ font-style:normal; color:var(--ink-800); }

a{
  text-decoration:none;
  color:var(--brand-700);
  transition:color .15s ease, text-decoration-color .15s ease, background-color .15s ease;
  text-underline-offset:3px;
}
a:hover{ text-decoration:underline; color:#1e40af; } /* blue-800 */

/* ---------- قوائم ---------- */
ol{ list-style:decimal; margin-inline-start:1.2rem; }
ul{ list-style:disc; margin-inline-start:1.2rem; }
ol li, ul li{ margin:.25rem 0; }

/* ---------- مسافات الأقسام ---------- */
section{ scroll-margin-top:90px; }
section + section{ margin-top:1.25rem; }

/* =========================================================
   HERO — إصلاح ظهور الألوان بدون أي تغيير في الأبعاد
   (يبقي نفس min-height تمامًا، ويعالج الطبقات فقط)
   ========================================================= */
.hero{
  position: relative; /* لتموضع الخلفيات المطلقة */
  min-height: calc(var(--vh, 1vh) * 100);
}
.hero-inner{
  min-height: calc(var(--vh, 1vh) * 100 - 4rem);
}

/* اجعل كل الأبناء فوق الخلفية مع استثناء الخلفيات والموجة */
.hero > *:not(.hero-bg):not(.hero-conic):not(.hero-wave){
  position: relative;
  z-index: 1;
}

/* خلفية متدرجة (ألوان فقط) */
.hero .hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0 !important;     /* تتغلب على -z-10 إن وُجد */
  pointer-events: none;
  
}

/* طبقة Conic خفيفة (ألوان ثابتة + حركة اختيارية) */
.hero .hero-conic{
  position: absolute;
  inset: 0;
  z-index: 0 !important;     /* نفس طبقة الخلفية */
  opacity: .06;
  overflow: hidden;
  pointer-events: none;
}
.hero .hero-conic::before{
  content:"";
  position:absolute;
  inset:-20%;
  width:140%;
  height:140%;
  background: conic-gradient(from 0deg, #e2e7e9, #2d73dc, #ece9ea);
  animation: spinSlow 24s linear infinite;
}
@keyframes spinSlow{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* موجة أسفل الهيرو — مرئية فورًا بدون Scroll */
.hero-wave{
  position: absolute;      /* تأكيد التموضع */
  inset-inline: 0;
  bottom: 0;
  height: 4rem;            /* h-16 */
  width: 100%;
  opacity: .25;
  z-index: 1;              /* فوق الخلفيات وتحت النص */
}

/* قائمة الموبايل داخل الهيرو — افتراضيًا مغلقة ويُفتح ارتفاعها بالـ JS */
.hero-nav{ max-height:0; }

/* تقليل الحركة لمن يفضّل ذلك */
@media (prefers-reduced-motion: reduce){
  .hero .hero-conic::before{ animation:none; }
  a, button{ transition:none !important; }
}

/* =========================================================
   عناصر عامة بالموقع (بدون ظلال)
   ========================================================= */

/* بطاقات/حاويات (تنعيم بالحدود فقط) */
.rounded-2xl.border[class*="border-"][class*="bg-white"],
.rounded-2xl.border[class*="border-"][class*="bg-amber-50"],
.rounded-2xl.border[class*="border-"][class*="bg-blue-50"]{
  /* لا ظلال */
  backdrop-filter:none;
}

/* صور وهيرو بدون أي تكبير/تحريك */
figure.overflow-hidden.rounded-2xl.border[class*="border-"]{ }
img.h-64.w-full.object-cover,
img.md\:h-96{
  image-rendering:auto;
  transition:opacity .2s ease; /* لمسة خفيفة بدون تحريك */
}
figure:hover img{ opacity:.98; }

/* شارات أعلى الصفحة (24/7 / اتصال فوري / الخ) — إطار فقط */
span.inline-flex.items-center.rounded-full{
  border:1px solid var(--line-200);
}

/* أزرار الاتصال/واتساب — ألوان وتفاعل بدون ظلال أو رفع */
a.inline-flex.items-center.rounded-xl.bg-blue-600,
a.inline-flex.items-center.justify-center.rounded-xl.bg-blue-600{
  transition:background-color .15s ease, opacity .15s ease;
}
a.inline-flex.items-center.rounded-xl.bg-blue-600:hover{
  background-color:#1e40af; /* blue-800 */
}
a.inline-flex.items-center.rounded-xl.border.border-gray-300.bg-white{
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
a.inline-flex.items-center.rounded-xl.border.border-gray-300.bg-white:hover{
  background-color:#f8fafc; /* slate-50 */
  border-color:var(--line-300);
}

/* ---------- فهرس المحتوى (TOC) ---------- */
nav.rounded-2xl.border.bg-white.p-6{
  position:relative;
  overflow:hidden;
}
nav.rounded-2xl.border.bg-white.p-6::before{
  content:"";
  position:absolute; inset:auto 0 0 0;
  height:3px;
  background:linear-gradient(90deg,var(--brand-600),var(--accent));
}
nav.rounded-2xl.border.bg-white.p-6 h2{ font-weight:800; }
nav.rounded-2xl.border.bg-white.p-6 ol a{
  text-decoration:none;
  border-bottom:1px dashed var(--line-300);
  padding-bottom:2px;
}
nav.rounded-2xl.border.bg-white.p-6 ol a:hover{
  border-bottom-style:solid; color:#1e40af;
}

/* ---------- نصوص الأقسام الطويلة ---------- */
section .text-gray-700{ color:var(--ink-700) !important; }
section .leading-7{ line-height:1.9 !important; }
section .space-y-4 > * + *{ margin-top:.8rem !important; }

/* ---------- شبكة الخدمات (#services) ---------- */
#services article{
  border:1px solid var(--line-200);
  border-radius:16px;
  background:var(--paper);
  padding:14px 16px;
  transition:border-color .15s ease, background-color .15s ease;
}
#services article:hover{
  border-color:var(--line-300);
  background-color:#f8fafc; /* slate-50 */
}
#services h3{ margin-bottom:.15rem; }

/* ---------- أقسام تقنية (رمل/صحراء/EV/جبل) ---------- */
#desert p, #sand p, #mountain p, #ev p{
  background:linear-gradient(180deg, rgba(241,245,249,.55), rgba(255,255,255,.65)); /* slate-100 overlay */
  border:1px solid var(--line-200);
  border-radius:14px;
  padding:14px 16px;
}

/* ---------- قائمة المسارات (routes) ---------- */
#routes ul, .mt-3.grid.gap-2.md\:grid-cols-2.text-gray-700{ align-items:start; }
#routes li.route, #routes li,
.mt-3.grid.gap-2.md\:grid-cols-2.text-gray-700 .rounded-lg.border.bg-white{
  transition:border-color .15s ease, background-color .15s ease;
}
#routes li:hover,
.mt-3.grid.gap-2.md\:grid-cols-2.text-gray-700 .rounded-lg.border.bg-white:hover{
  border-color:var(--line-300);
  background-color:#f8fafc;
}

/* ---------- كبسولات المناطق والكلمات (#areas و #keywords) ---------- */
#areas .flex.flex-wrap.gap-2 > span,
#keywords .flex.flex-wrap.gap-2 > span{
  transition:border-color .12s ease, background-color .12s ease;
}
#areas .flex.flex-wrap.gap-2 > span:hover,
#keywords .flex.flex-wrap.gap-2 > span:hover{
  border-color:var(--line-300);
  background-color:#f8fafc;
}

/* ---------- FAQ ---------- */
#faq .text-xl.font-extrabold{ margin-bottom:.25rem; }
#faq .space-y-6 > article{
  border-bottom:1px dashed var(--line-200);
  padding-bottom:.85rem;
}
#faq .space-y-6 > article:last-child{ border-bottom:none; }

/* ---------- CTA الختامي ---------- */
section.rounded-2xl.border.border-blue-200.bg-blue-50.p-6{
  background-image:
    radial-gradient(600px 120px at 15% 0%, rgba(37,99,235,.10), transparent),
    radial-gradient(600px 120px at 85% 0%, rgba(11, 190, 245, 0.1), transparent);
}
section.rounded-2xl.border.border-blue-200.bg-blue-50.p-6 a{ text-decoration:none; }

/* ---------- تحسينات إضافية بسيطة ---------- */
hr, .u-divider{ height:1px; background:#e5e7eb; border:0; }
figcaption{ color:#64748b; font-size:.9em; margin-top:.25rem; }
blockquote{
  border-inline-start:3px solid var(--brand-600);
  padding-inline:12px;
  color:var(--ink-800);
  background:rgba(241,245,249,.5);
  border-radius:12px;
}

/* ---------- طباعة (Print) اختيارية ---------- */
@media print{
  nav, .hero-wave{ display:none !important; }
  a{ text-decoration:underline; color:inherit; }
  body{ background:#fff; }
}
/* Footer spacing tidy-up (no shadows) */
/* Footer spacing tune-up */
.site-footer{ margin-top: 3rem; }
.site-footer > .mx-auto{ padding-top: 3rem; padding-bottom: 3rem; }
.site-footer .h-px{ margin-top: 2.25rem; margin-bottom: 2.25rem; }
.site-footer .grid{ row-gap: 2.5rem; column-gap: 2rem; }
@media (min-width: 768px){
  .site-footer .grid{ row-gap: 3rem; column-gap: 2.25rem; }
}
.site-footer nav.space-y-3{ row-gap: 0; }
.site-footer nav h2{ margin-bottom: .75rem; }
.site-footer nav ul li + li{ margin-top: .45rem; }
.site-footer .text-xs.text-gray-500{ margin-top: 2.25rem; }

footer{ background: rgba(255,255,255,0.7); }
footer > .mx-auto{ padding-top: 2rem; padding-bottom: 2.5rem; }
footer .h-px{ margin-top: 2rem; margin-bottom: 2rem; }
footer nav h2{ margin-bottom: .5rem; }
footer nav ul li + li{ margin-top: .35rem; }
footer .text-xs.text-gray-500{ margin-top: 2rem; }
/* =========================================================
   Floating Call Button (no shadows)
   ========================================================= */

/* حاوية الزر: ثابتة أسفل مع مراعاة الـ safe-area في iOS */
.fab-call{
  position: fixed;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  inset-inline-end: 1rem; /* يدعم RTL/LTR منطقيًا */
  z-index: 60;
}

/* حجم/شكل الزر */
.fab-btn{
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: var(--brand-600);
  color: #fff;
  border: 2px solid #fff;          /* إطار واضح بدل الظل */
  outline-offset: 3px;              /* للـ focus */
  transform: translateZ(0);         /* نعومة */
  position: relative;
  overflow: visible;
  transition: background-color .15s ease, transform .15s ease;
}

/* نبض ناعم (بدون ظلال): حلقتان شفافتان */
.fab-btn::before,
.fab-btn::after{
  content:"";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(37,99,235,.28); /* blue-600 */
  transform: scale(1);
  opacity: 0;
  animation: fabPulse 2.2s ease-out infinite;
}
.fab-btn::after{
  animation-delay: .9s; /* حلقة ثانية متأخرة */
}

/* تمرير وتفعيل */
.fab-btn:hover{ background: var(--brand-700); transform: translateY(-1px) scale(1.02); }
.fab-btn:active{ transform: translateY(0) scale(.98); }

/* تركيز لوحة المفاتيح */
.fab-btn:focus-visible{
  outline: 2px solid var(--brand-600);
  background: var(--brand-700);
}

/* أنيميشن النبض */
@keyframes fabPulse{
  0%   { transform: scale(1);   opacity: .0; }
  30%  { transform: scale(1.25);opacity: .28; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .fab-btn::before, .fab-btn::after{ animation: none; opacity: 0; }
  .fab-btn{ transition: none; }
}

/* مساحة سفلية للمحتوى إذا أردت منع التداخل مع الزر (اختياري) */
.has-fab-padding{ padding-bottom: 88px; }



/* ===== Chips System (مسافات وراسية أنيقة) ===== */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .6rem;           /* صفوف وأعمدة (8px × ~10px) */
  align-items:flex-start;
}

.chip{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line-200);
  background:#fff;
  border-radius:9999px;
  padding:.35rem .55rem;     /* ~6px 9px */
  font-size:12.5px;
  line-height:1.15;
  white-space:nowrap;        /* تمنع تكسّر الكلمة داخل الشيب */
  transition:border-color .12s ease, background-color .12s ease;
}
.chip:hover{
  border-color:var(--line-300);
  background-color:#f8fafc; /* slate-50 */
}

/* إبراز داخل الشيب يبقى صغير ومرتب */
.chip mark{
  background:var(--accent, #f59e0b1a);
  padding:0 .15em;
  border-radius:.15em;
}



.hero > header{ z-index: 60 !important; }
.hero > .hero-content{ z-index: 0 !important; }