/* =====================================================================
   mhu.gov.ly — ui-refine.css  v1.1 (خط Tajawal)
   طبقة تحسين الواجهة: سُلّم خطوط موحّد + إيقاع مسافات + حالات فارغة مدمجة
   - تُحمَّل بعد premium.css و news-cards.css (آخر ملف CSS في الصفحة).
   - لا تغيّر أي هيكل HTML ولا أي ملف PHP، ولا تمس الأمان أو CSP.
   - كل المقاسات بوحدة rem لتبقى أداة "تكبير الخط" في إمكانية الوصول فعّالة.
   ===================================================================== */

:root {
  /* ---- سُلّم الخطوط (Major Third تقريبًا، مرن بين الهاتف والحاسب) ---- */
  --ui-fs-xs:   .78rem;                                   /* 12.5px  شارات/تواريخ */
  --ui-fs-sm:   .875rem;                                  /* 14px    نص مساعد */
  --ui-fs-base: clamp(.94rem, .9rem + .15vw, 1rem);       /* 15–16px نص أساسي */
  --ui-fs-h4:   clamp(.98rem, .94rem + .2vw, 1.06rem);    /* عنوان بطاقة */
  --ui-fs-h3:   clamp(1.05rem, .98rem + .3vw, 1.2rem);    /* عنوان بطاقة كبيرة */
  --ui-fs-h2:   clamp(1.2rem, 1.05rem + .65vw, 1.6rem);   /* عنوان قسم 19–26px */
  --ui-fs-h1:   clamp(1.45rem, 1.1rem + 1.45vw, 2.3rem);  /* عنوان الواجهة 23–37px */

  /* ---- إيقاع المسافات (شبكة 4/8px) ---- */
  --ui-s1: .25rem; --ui-s2: .5rem; --ui-s3: .75rem; --ui-s4: 1rem;
  --ui-s5: 1.25rem; --ui-s6: 1.5rem; --ui-s8: 2rem; --ui-s10: 2.5rem;
  --ui-section-pad: clamp(1rem, .7rem + 1.3vw, 1.75rem);
  --ui-section-gap: clamp(1rem, .8rem + .9vw, 1.6rem);

  --ui-ink: #10263a;
  --ui-muted: #5d7488;
  --ui-line: rgba(18, 109, 160, .12);
  --ui-tint: #f3f8fc;
  --ui-radius: 18px;
}

/* ---------------------------------------------------------------------
   الخط الموحد: Tajawal (يُحمَّل من Google Fonts في رأس الصفحة)
   Cairo احتياطي إن تعذّر تحميل Tajawal.
   --------------------------------------------------------------------- */
:root { --ui-font: "Tajawal", "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; }
html body, body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6, .site-title, .header-title, .page-title, .archive-title, .content-title,
.section-title, .item-title, .news-title, .service-title, .single-title, .loader-title {
  font-family: var(--ui-font) !important;
}
@media print { body, button, input, select, textarea { font-family: var(--ui-font) !important; } }

/* ---------------------------------------------------------------------
   0) أساسيات
   --------------------------------------------------------------------- */
html, body { overflow-x: clip; }           /* يمنع الاهتزاز الأفقي على الهاتف */
body {
  font-size: var(--ui-fs-base);
  line-height: 1.75;
  color: var(--ui-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
p { line-height: 1.85; }

/* ---------------------------------------------------------------------
   1) سُلّم العناوين العام (يتغلب على premium.css)
   --------------------------------------------------------------------- */
h1, .hero-title, .page-title, .archive-title, .content-title, .single-title {
  font-size: var(--ui-fs-h1) !important;
  line-height: 1.45 !important;
  letter-spacing: -.01em !important;
  font-weight: 800 !important;
  text-wrap: balance;
}
h2, .section-title, .section-header h2, .section-head h2, .results-head h2 {
  font-size: var(--ui-fs-h2) !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  font-weight: 800 !important;
  margin: 0 !important;
  text-wrap: balance;
}
h3, .news-title, .service-title, .contact-card h3 {
  font-size: var(--ui-fs-h3) !important;
  line-height: 1.55 !important;
  font-weight: 800 !important;
}
.item-title { font-size: var(--ui-fs-h4) !important; line-height: 1.65 !important; }

/* شريط العنوان الملوّن: أصغر ومتناسب مع الخط الجديد */
.section-title::before, .section-header h2::before, .section-head h2::before, .results-head h2::before {
  width: 6px !important;
  height: 1.1em !important;
  margin-inline-end: .6rem !important;
  box-shadow: none !important;
}

/* عنوان صفحة الخبر/القرار: أصغر من عنوان الواجهة الرئيسية */
.content-title, .single-title {
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.85rem) !important;
  line-height: 1.6 !important;
  margin-bottom: var(--ui-s4) !important;
}
.content-thumb { max-height: 460px !important; }
.content-body { font-size: clamp(.98rem, .95rem + .15vw, 1.05rem) !important; line-height: 2 !important; }

/* ---------------------------------------------------------------------
   2) الواجهة (Hero)
   --------------------------------------------------------------------- */
.hero { padding-block: clamp(1rem, .6rem + 2vw, 2.25rem) !important; }
.hero-grid { gap: clamp(1rem, .5rem + 2vw, 2.25rem) !important; align-items: center !important; }
.hero-kicker {
  font-size: var(--ui-fs-xs) !important;
  padding: .25rem .75rem !important;
  margin-bottom: var(--ui-s3) !important;
}
.hero-title { max-width: 20ch !important; margin: 0 0 var(--ui-s3) !important; }
.hero-sub {
  font-size: var(--ui-fs-base) !important;
  line-height: 1.9 !important;
  max-width: 56ch !important;
  margin: 0 0 var(--ui-s5) !important;
}
.hero-actions { gap: var(--ui-s2) !important; }
.btn-primary, .btn-secondary {
  min-height: 44px;                          /* حجم لمس مريح */
  padding: .6rem 1.15rem !important;
  font-size: var(--ui-fs-sm) !important;
  font-weight: 700 !important;
}
.hero-slider { padding: var(--ui-s3) !important; }
.hero-slider-header { margin-bottom: var(--ui-s2) !important; font-size: var(--ui-fs-sm) !important; }
.hero-main-title { font-size: clamp(.95rem, .9rem + .3vw, 1.1rem) !important; line-height: 1.7 !important; }
.hero-main-content { padding: var(--ui-s4) var(--ui-s5) !important; }

/* ---------------------------------------------------------------------
   3) الأقسام: مسافات موحّدة
   --------------------------------------------------------------------- */
.main-sections { padding-block: var(--ui-section-gap) clamp(1.5rem, 1rem + 2vw, 3rem) !important; }
.main-sections > .container > * + * { margin-top: var(--ui-section-gap) !important; }
.section-card {
  padding: var(--ui-section-pad) !important;
  margin: 0 !important;
  border-radius: var(--ui-radius) !important;
}
.section-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: var(--ui-s3) !important;
  margin-bottom: var(--ui-s5) !important;
}
.section-head > div:first-child { min-width: 0; }
.section-sub {
  margin-top: var(--ui-s1) !important;
  font-size: var(--ui-fs-sm) !important;
  line-height: 1.7 !important;
  color: var(--ui-muted) !important;
  max-width: 70ch;
}
.section-link {
  flex-shrink: 0;
  white-space: nowrap !important;
  font-size: var(--ui-fs-xs) !important;
  font-weight: 700 !important;
  padding: .38rem .85rem !important;
  min-height: 36px;
  display: inline-flex !important;
  align-items: center;
  border-radius: 999px !important;
}

/* ---------------------------------------------------------------------
   4) الحالات الفارغة: شريط مدمج بدل بطاقة ضخمة
   --------------------------------------------------------------------- */
.grid-list > .mhu-empty-grid-card:only-child,
.services-grid > .mhu-empty-grid-card:only-child {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ui-s1) var(--ui-s3) !important;
  min-height: 0 !important;
  padding: var(--ui-s4) var(--ui-s5) !important;
  border: 1px dashed var(--ui-line) !important;
  border-radius: 14px !important;
  background: var(--ui-tint) !important;
  box-shadow: none !important;
  text-align: center;
}
.grid-list > .mhu-empty-grid-card:only-child > *,
.services-grid > .mhu-empty-grid-card:only-child > * { padding: 0 !important; margin: 0 !important; }
.mhu-empty-grid-card .item-title,
.mhu-empty-grid-card .service-title {
  font-size: var(--ui-fs-sm) !important;
  font-weight: 700 !important;
  color: var(--ui-muted) !important;
  -webkit-line-clamp: unset !important;
  min-height: 0 !important;
}
.mhu-empty-grid-card .item-title::before,
.mhu-empty-grid-card .service-title::before {
  content: "";
  display: inline-block;
  width: 1.05em; height: 1.05em;
  margin-inline-end: .45em;
  vertical-align: -.18em;
  background: currentColor;
  opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mhu-empty-grid-card .item-summary,
.mhu-empty-grid-card .service-desc {
  flex-basis: 100%;
  font-size: var(--ui-fs-xs) !important;
  color: var(--ui-muted) !important;
  opacity: .85;
}
/* القسم الفارغ نفسه أخف وزنًا */
.section-card:has(> .grid-list > .mhu-empty-grid-card:only-child),
.section-card:has(> .services-grid > .mhu-empty-grid-card:only-child) {
  padding-block: clamp(.9rem, .7rem + .8vw, 1.3rem) !important;
}
.section-card:has(> .grid-list > .mhu-empty-grid-card:only-child) .section-head,
.section-card:has(> .services-grid > .mhu-empty-grid-card:only-child) .section-head {
  margin-bottom: var(--ui-s3) !important;
}

/* ---------------------------------------------------------------------
   5) الخدمات
   --------------------------------------------------------------------- */
.services-grid { gap: clamp(.75rem, .5rem + 1vw, 1.25rem) !important; }
.service-card { padding: var(--ui-s4) var(--ui-s5) !important; gap: var(--ui-s2) !important; }
.service-title { font-size: var(--ui-fs-h4) !important; }
.service-desc { font-size: var(--ui-fs-sm) !important; line-height: 1.8 !important; }

/* ---------------------------------------------------------------------
   6) مكتب الوزير
   --------------------------------------------------------------------- */
.minister-profile {
  gap: var(--ui-s4) !important;
  padding: var(--ui-s4) !important;
  margin-bottom: var(--ui-s5) !important;
  align-items: center !important;
}
.minister-photo { width: clamp(72px, 8vw, 104px) !important; height: clamp(72px, 8vw, 104px) !important; flex-shrink: 0; }
.minister-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.minister-info-name { font-size: var(--ui-fs-h3) !important; font-weight: 800 !important; }
.minister-info-title { font-size: var(--ui-fs-sm) !important; color: var(--ui-muted) !important; }
.minister-info-bio { font-size: var(--ui-fs-sm) !important; line-height: 1.85 !important; margin-top: var(--ui-s2); }

/* ---------------------------------------------------------------------
   7) التواصل: بطاقة معلومات مرتّبة + نموذج مريح
   --------------------------------------------------------------------- */
.contact-grid {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  gap: var(--ui-section-gap) !important;
  align-items: start !important;
}
.contact-card { padding: var(--ui-section-pad) !important; border-radius: var(--ui-radius) !important; }
.contact-card h3 { margin: 0 0 var(--ui-s4) !important; }
.contact-info-line {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) 1fr;
  gap: var(--ui-s3);
  align-items: baseline;
  margin: 0 !important;
  padding: var(--ui-s3) 0;
  font-size: var(--ui-fs-sm);
  line-height: 1.75;
  border-bottom: 1px solid var(--ui-line);
}
.contact-info-line:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-info-line:first-of-type { padding-top: 0; }
.contact-info-label { color: var(--ui-muted); font-weight: 700 !important; }
.contact-info-spaced { margin-top: 0 !important; }

.contact-form-group { margin-bottom: var(--ui-s4) !important; }
.contact-form-group label {
  display: block;
  margin-bottom: var(--ui-s1) !important;
  font-size: var(--ui-fs-sm) !important;
  font-weight: 700 !important;
  color: var(--ui-ink) !important;
}
.contact-form-group input,
.contact-form-group textarea {
  width: 100%;
  min-height: 46px;
  padding: .65rem .9rem !important;
  font-size: 1rem !important;
  border-radius: 12px !important;
}
.contact-form-group textarea { min-height: 130px !important; }
.contact-submit {
  min-height: 46px;
  min-width: 9rem;
  padding: .65rem 1.6rem !important;
  font-size: var(--ui-fs-sm) !important;
  font-weight: 800 !important;
}

/* ---------------------------------------------------------------------
   8) التذييل
   --------------------------------------------------------------------- */
.site-footer { padding-top: clamp(1.5rem, 1rem + 2vw, 2.75rem) !important; }
.footer-layout { gap: clamp(.9rem, .6rem + 1vw, 1.5rem) !important; }
.footer-layout > div { padding: var(--ui-s5) !important; }
.footer-col-title { font-size: var(--ui-fs-h4) !important; margin-bottom: var(--ui-s3) !important; }
.footer-text, .footer-links, .footer-links a { font-size: var(--ui-fs-sm) !important; line-height: 1.9 !important; }
.footer-links li + li { margin-top: var(--ui-s1); }
.footer-map iframe { height: 200px !important; border-radius: 12px !important; }
.footer-bottom { font-size: var(--ui-fs-xs) !important; padding-block: var(--ui-s4) !important; }

/* ---------------------------------------------------------------------
   9) الترويسة
   --------------------------------------------------------------------- */
.main-nav a { font-size: var(--ui-fs-sm) !important; }
.site-title { font-size: clamp(.9rem, .85rem + .25vw, 1.05rem) !important; }

/* ---------------------------------------------------------------------
   10) الأجهزة اللوحية
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .hero-title { max-width: 26ch !important; }
}

/* ---------------------------------------------------------------------
   11) الهاتف
   --------------------------------------------------------------------- */
@media (max-width: 760px) {
  :root { --ui-radius: 16px; --ui-section-pad: .95rem; --ui-section-gap: .9rem; }
  .hero { padding-block: var(--ui-s4) var(--ui-s5) !important; }
  .hero-text { padding: 0 !important; }
  .hero-title { max-width: none !important; }
  .hero-sub { font-size: var(--ui-fs-sm) !important; margin-bottom: var(--ui-s4) !important; }
  .hero-actions { display: grid !important; grid-template-columns: 1fr 1fr; }
  .hero-actions > * { width: auto !important; justify-content: center; text-align: center; }

  .section-head { align-items: center !important; margin-bottom: var(--ui-s4) !important; }
  .section-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

  .contact-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .contact-info-line { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .minister-profile { flex-direction: row !important; text-align: start !important; }
}
/* ---------------------------------------------------------------------
   11-ب) الهاتف: الخبر الأول بطاقة كاملة، والبقية قائمة مدمجة (صورة جانبية)
   يختصر طول الصفحة على الهاتف إلى النصف تقريبًا دون حذف أي محتوى.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .grid-list { gap: .75rem !important; }
  .grid-list > .item-card:not(:first-child):has(> .item-thumb) {
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    grid-template-areas: "thumb meta" "thumb title" !important;
    grid-template-rows: auto 1fr !important;
    gap: .2rem .8rem !important;
    padding: .65rem !important;
    align-items: start !important;
  }
  .grid-list > .item-card:not(:first-child):has(> .item-thumb) > .item-thumb {
    grid-area: thumb;
    width: 104px !important;
    height: 84px !important;
    aspect-ratio: auto !important;
    border-radius: 12px !important;
    overflow: hidden;
  }
  .grid-list > .item-card:not(:first-child):has(> .item-thumb) > .item-thumb img {
    width: 100%; height: 100%; object-fit: cover;
  }
  .grid-list > .item-card:not(:first-child):has(> .item-thumb) > .item-meta {
    grid-area: meta; padding: 0 !important; margin: 0 !important; font-size: var(--ui-fs-xs) !important;
  }
  .grid-list > .item-card:not(:first-child):has(> .item-thumb) > .item-title {
    grid-area: title; padding: 0 !important; margin: 0 !important;
    font-size: .94rem !important; line-height: 1.6 !important;
    -webkit-line-clamp: 2 !important;
  }
  .grid-list > .item-card:not(:first-child):has(> .item-thumb) > .item-summary,
  .grid-list > .item-card:not(:first-child):has(> .item-thumb) > .item-footer { display: none !important; }
}
/* ---------------------------------------------------------------------
   11-ج) الأرشيف على الهاتف: النتائج تظهر أسرع
   - إخفاء لوحة الإحصاء المكررة في رأس الصفحة (روابطها موجودة في "تصفّح الأرشيف").
   - تحويل قائمة الأقسام إلى شريط أفقي قابل للتمرير.
   - الحقلان (الترتيب/النوع) جنبًا إلى جنب، والزرّان في صف واحد.
   --------------------------------------------------------------------- */
@media (max-width: 760px) {
  .archive-hero .hero-stat-card { display: none !important; }
  .archive-hero-card { grid-template-columns: minmax(0, 1fr) !important; }
  .archive-hero { padding-block: var(--ui-s3) var(--ui-s4) !important; }
  .archive-hero-card { padding: var(--ui-s4) !important; }
  .archive-sub { font-size: var(--ui-fs-sm) !important; }

  .panel-title { font-size: var(--ui-fs-h4) !important; margin-bottom: var(--ui-s2) !important; }
  .archive-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: .45rem !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: .35rem;
    margin-inline: -.2rem;
    scrollbar-width: thin;
  }
  .archive-menu a {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap;
    gap: .45rem !important;
    padding: .45rem .75rem !important;
    min-height: 40px;
    font-size: var(--ui-fs-sm) !important;
    border-radius: 999px !important;
    scroll-snap-align: start;
  }
  .archive-menu .count-badge { min-width: 1.6rem; padding: 0 .35rem !important; font-size: .72rem !important; }
  .archive-spacer { height: var(--ui-s3) !important; }

  .filter-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--ui-s3) !important;
  }
  .filter-form > div:first-of-type,
  .filter-form > .toolbar-actions { grid-column: 1 / -1; }
  .filter-form > * { width: auto !important; }
  .filter-form .toolbar-actions { display: grid !important; grid-template-columns: 2fr 1fr; gap: var(--ui-s2) !important; }
  .filter-form .toolbar-actions > * { width: 100% !important; justify-content: center; }
  .field-label { font-size: var(--ui-fs-xs) !important; margin-bottom: .2rem !important; }
}
@media (max-width: 420px) {
  .hero-actions { grid-template-columns: 1fr; }
  .section-link { padding: .32rem .7rem !important; }
}

/* ---------------------------------------------------------------------
   12) تفضيلات الوصول
   --------------------------------------------------------------------- */
body.high-contrast .grid-list > .mhu-empty-grid-card:only-child,
body.high-contrast .services-grid > .mhu-empty-grid-card:only-child {
  background: transparent !important;
  border-color: currentColor !important;
}
body.high-contrast .contact-info-line { border-color: rgba(255, 255, 255, .18); }

/* ---------------------------------------------------------------------
   13) ضبط أوزان Tajawal: وزن 800 فيه أثقل وأعرض من Cairo، فنستخدم 700 للعناوين */
h1, .hero-title, .page-title, .archive-title, .content-title, .single-title,
h2, .section-title, .section-header h2, .section-head h2, .results-head h2,
h3, .news-title, .service-title, .contact-card h3, .item-title, .archive-item-title,
.minister-info-name, .footer-col-title, .panel-title, .site-title, .hero-main-title { font-weight: 700 !important; }
.hero-title { max-width: 24ch !important; }
body { line-height: 1.8; }
@media (max-width: 760px) {
  .hero-text { padding-inline: .6rem !important; }
}