/* =============================================
   مركز الهدى - إصلاحات الهاتف المحمول
   Mobile Responsive Fixes
   ============================================= */

/* ── الهيرو (Hero Section) ── */
@media (max-width: 1023px) {

  /* تقليل padding الهيرو */
  section.py-20 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* تقليل المسافة بين عمودين في الشبكة */
  section.py-20 .gap-12 {
    gap: 1.5rem !important;
  }

  /* حجم العنوان الرئيسي على الهاتف */
  section.py-20 h1.text-5xl {
    font-size: 1.875rem !important; /* text-3xl */
    line-height: 2.4rem !important;
    margin-bottom: 1rem !important;
  }

  /* حجم النص التوضيحي على الهاتف */
  section.py-20 p.text-xl {
    font-size: 1rem !important;
    line-height: 1.7rem !important;
    margin-bottom: 1.25rem !important;
  }

  /* الصورة تملأ العرض الكامل */
  section.py-20 img.rounded-3xl {
    width: 100% !important;
    height: auto !important;
    max-height: 280px !important;
    object-fit: cover !important;
  }

  /* أزرار الهيرو تأخذ عرض كامل على الموبايل */
  section.py-20 .flex.flex-wrap.gap-4 {
    gap: 0.75rem !important;
  }

  section.py-20 .flex.flex-wrap.gap-4 a {
    flex: 1 1 140px !important;
    justify-content: center !important;
  }
}

/* على شاشات خاصة بالهاتف فقط */
@media (max-width: 640px) {
  section.py-20 h1.text-5xl {
    font-size: 1.6rem !important;
    line-height: 2.1rem !important;
  }
}

/* ── الهيدر العلوي (Top Bar) ── */
@media (max-width: 640px) {

  /* إخفاء العنوان من الشريط العلوي على الهاتف لتخفيف الازدحام */
  .bg-emerald-800 .hidden {
    display: none !important;
  }

  /* تقليل padding الشريط العلوي */
  .bg-emerald-800 .py-2 {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
  }

  /* حجم الخط في الشريط العلوي */
  .bg-emerald-800 a,
  .bg-emerald-800 span {
    font-size: 0.75rem !important;
  }
}

/* ── الهيدر الرئيسي (Main Header) ── */
@media (max-width: 640px) {

  /* تقليل الارتفاع قليلاً */
  header .h-16 {
    height: 3.75rem !important;
  }

  /* اسم الموقع في الهيدر */
  header .text-lg {
    font-size: 1rem !important;
  }

  header .text-\[10px\] {
    font-size: 9px !important;
  }

  /* حجم الأيقونة في الهيدر */
  header .w-10.h-10 {
    width: 2.25rem !important;
    height: 2.25rem !important;
  }
}

/* ── القائمة الجانبية المتحركة (Mobile Drawer) ── */
.translate-x-0 {
  /* التأكد من أن القائمة تظهر بشكل صحيح في RTL */
  direction: rtl;
}

/* ── تحسينات عامة للهاتف ── */
@media (max-width: 640px) {

  /* منع overflow أفقي */
  .min-h-screen.bg-white {
    overflow-x: hidden;
  }

  /* تحسين أحجام العناوين في باقي الصفحات */
  h2.text-4xl {
    font-size: 1.75rem !important;
    line-height: 2.25rem !important;
  }

  h2.text-3xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }

  /* تقليل padding الأقسام */
  .py-16 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}