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

/* ── عناوين الأقسام h2 (text-4xl) ── */
@media (max-width: 767px) {
  .text-4xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }

  /* عناوين h3 الخدمات والمنتجات */
  h3.text-2xl {
    font-size: 1.1rem !important;
    line-height: 1.6rem !important;
  }

  /* نصوص الوصف في الأقسام */
  p.text-xl {
    font-size: 0.9rem !important;
    line-height: 1.5rem !important;
  }

  /* mb-12 للعناوين تقليص */
  .text-center.mb-12 {
    margin-bottom: 1.5rem !important;
  }

  /* ── الشريط العلوي الأخضر ── */
  .bg-emerald-800 .py-2 {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
  }
  .bg-emerald-800 a,
  .bg-emerald-800 span {
    font-size: 0.7rem !important;
  }

  /* ── الهيدر الرئيسي ── */

  /* السلة لا تتقلص أبداً */
  header .shrink-0 {
    flex-shrink: 0 !important;
  }

  /* اللوغو: يقطع النص إذا ضاق المكان */
  header .min-w-0 .leading-tight {
    min-width: 0;
    overflow: hidden;
  }
  header .min-w-0 .leading-tight > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* إخفاء عنوان اللوغو الصغير على الهاتف */
  header .min-w-0 .leading-tight > div:last-child {
    display: none !important;
  }

  /* منع header من قطع محتواه */
  header {
    overflow: visible !important;
  }
  header .container {
    overflow: visible !important;
  }

  /* ── بطاقات المميزات (4 بطاقات) ── */
  .w-16.h-16.bg-emerald-100.rounded-full {
    width: 3rem !important;
    height: 3rem !important;
  }
  .w-8.h-8.text-emerald-600 {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }

  /* ── قسم الخدمات ── */
  .w-20.h-20.bg-emerald-100 {
    width: 3.5rem !important;
    height: 3.5rem !important;
    flex-shrink: 0 !important;
  }

  /* ── منع الأوفرفلو الأفقي (على المحتوى فقط لا الهيدر) ── */
  main, .min-h-screen.bg-white > *:not(header):not(.bg-emerald-800) {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* ── شاشات صغيرة جداً (أقل من 380px) ── */
@media (max-width: 380px) {
  .text-4xl {
    font-size: 1.3rem !important;
  }
  header .text-lg {
    font-size: 0.85rem !important;
  }
  .bg-emerald-800 {
    display: none !important; /* إخفاء الشريط العلوي على الشاشات الصغيرة جداً */
  }
}

/* ── تابلت (768px - 1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .text-4xl {
    font-size: 2rem !important;
    line-height: 2.5rem !important;
  }
}