/* ============================================================
 * dlhh.css — الصفحة الرئيسية
 * ============================================================
 * الألوان والقياسات من متغيّرات القالب، فتتبع الوضع الفاتح بلا
 * قاعدة إضافية.
 *
 * ————— المبدأ الحاكم —————
 * المربّع يعرض محتواه بتنسيقه لا بتنسيقنا. فلا نكتب على أبنائه إلّا
 * white-space، وهي وحدها التي تُورَّث وتكسر تخطيط ما بداخله.
 *
 * وما عداها — الحجم واللون والحدود والتجاوب — يُترك لقواعد ما
 * يُدرَج: شورت كود المباريات أو البطولات أو الأخبار يظهر بثيمه
 * كاملًا كما يظهر في موضعه الأصلي.
 *
 * ولا نستعمل initial ولا revert: كلتاهما تعني «افتراضي المتصفّح» لا
 * «قواعد القالب» — فتُجرّد البلوك من ثيمه بدل أن تُعيده.
 * ============================================================ */

.dlhh-main{
  --dlhh-accent:var(--hp-accent);
  --dlhh-bd:var(--hp-border);
  --dlhh-head:var(--hp-heading);
  --dlhh-text:var(--hp-text);
  --dlhh-gap:20px;
  --dlhh-w-col:1050px;
  --dlhh-w-sb:300px;
}

/* ============ الشبكة ============ */

.dlhh-grid{display:block;}

/* ————— عمودان حين يظهر السايدبار —————
   والصندوق (hp-main) على العمود وحده، فلا يحكم عرض السايدبار. */
.dlhh-has-sb .dlhh-grid{
  display:grid;
  grid-template-columns:minmax(0,var(--dlhh-w-col)) var(--dlhh-w-sb);
  gap:var(--dlhh-gap);
  align-items:start;
  justify-content:center;
}

.dlhh-col{min-width:0;}

/* ————— المسافة العلوية —————
   كانت على hp-main وحده (padding:34px 0)، والسايدبار خارجه — فالتصق
   بالهيدر. فصارت على الحاوية، فيبدأ العمودان من سطر واحد. */
.dlhh-main{padding-top:34px;}

.dlhh-has-sb .dlhh-col{padding:22px;}

/* المربّعات العريضة والأسئلة الشائعة: صناديق بعرض القالب كاملًا */
.dlhh-wide{
  margin:var(--dlhh-gap) 0 0;
  padding:22px;
}

/* الأسئلة الشائعة: صندوق مستقلّ بعرض القالب كاملًا */
.dlhh-faq{
  margin:var(--dlhh-gap) 0 0;
  padding:22px;
}

/* الصندوق داخل الحاوية: لا حشو رأسيّ مكرّر */
.dlhh-main .hp-main{padding-block:22px;}

/* ————— السايدبار —————
   يتحرّك مع الصفحة حتى ينتهي ثمّ يثبت آخره. وتثبيتُ ما هو أطول من
   الشاشة يعني أن جزءًا منه لن يُرى أبدًا. */
.dlhh-has-sb .dlhh-sb{
  position:sticky;
  inset-block-start:16px;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:var(--dlhh-gap);
}

/* ============ مربّع العمود ============ */

/* ————— بلا حشو جانبيّ —————
   المحتوى يمتدّ بعرض المربّع كاملًا، فلا هامش يمين ولا يسار. */
.dlhh-box{
  margin:0 0 var(--dlhh-gap);
}

.dlhh-box:last-child{margin-bottom:0;}

/* ============ العنوان ============ */

/* ————— في المنتصف بخطّين —————
   خطّ ملوّن فوقه وخطّ خفيف تحته. وبلا عناصر جانبية — بخلاف عنوان
   بلوك الأخبار الذي يحمل العدد والزرّ. */
.dlhh-h{
  position:relative;
  margin:0 0 16px;
  padding:14px 0 12px;
  border-bottom:1px solid var(--dlhh-bd);
  font-size:var(--dlha-fs-sch,19px);
  font-weight:800;
  line-height:1.7;
  color:var(--dlhh-head);
  text-align:center;
}

.dlhh-h::before{
  content:"";
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--dlhh-accent),transparent);
  pointer-events:none;
}

/* ============ محتوى المربّع ============ */

/* الأسطر تُحترم كما كُتبت — للنصّ الحرّ */
.dlhh-c{
  color:var(--dlhh-text);
  line-height:1.95;
  white-space:pre-line;
}

/* المحتوى الذي كلّه وسوم: لا أسطر تُحترم، فلا فراغ حوله */
.dlhh-raw{white-space:normal;}

/* لا نكتب على الأبناء إلّا هذا */
.dlhh-c *{white-space:normal;}

/* لا شيء يفيض عن عرض المربّع */
.dlhh-c img,
.dlhh-c iframe,
.dlhh-c video{max-width:100%;}

/* ============ السايدبار: المربّع ============ */

.dlhh-sb-box{
  background:var(--hp-surface);
  border:1px solid var(--dlhh-bd);
  border-radius:var(--hp-radius,14px);
  padding:16px 16px 18px;
}

.dlhh-sb-h{
  margin:0 0 12px;
  padding-inline-start:10px;
  padding-bottom:9px;
  border-inline-start:4px solid var(--dlhh-accent);
  border-bottom:1px solid var(--dlhh-bd);
  font-size:var(--dlha-fs-sb,16px);
  font-weight:800;
  line-height:1.7;
  color:var(--dlhh-head);
}

.dlhh-sb-c{
  color:var(--dlhh-text);
  font-size:14.5px;
  line-height:1.9;
  white-space:pre-line;
}

.dlhh-sb-c *{white-space:normal;}

.dlhh-sb-c img,
.dlhh-sb-c iframe,
.dlhh-sb-c video,
.dlhh-sb-c table{max-width:100%;}

/* شبكات البطاقات في السايدبار: عمود واحد على الحاسب وحده */
@media (min-width:1025px){
  .dlhh-sb-c .dlhx-grid,
  .dlhh-sb-c .dlhl-stats,
  .dlhh-sb-c .dlha-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }

  .dlhh-sb-c .dlhx-tabs-nav{flex-wrap:wrap;}
}

/* ============ الإعلانات ============ */

.dlhh-ad{
  margin:0 0 var(--dlhh-gap);
  text-align:center;
}

.dlhh-ad img,
.dlhh-ad iframe{max-width:100%;}

.dlhh-ad-footer{margin:var(--dlhh-gap) 0 0;}

/* ============ الأسئلة الشائعة ============ */

/* ————— بعرض القالب كاملًا —————
   خارج الشبكة، فتتمدّد مع العمودين وتنكمش حين يُخفى السايدبار. */

/* عنوانها بشكل عنوان المربّع — بلا لمس دالّتها */
.dlhh-faq .hp-title{
  position:relative;
  margin:0 0 16px;
  padding:14px 0 12px;
  border-bottom:1px solid var(--dlhh-bd);
  font-size:var(--dlha-fs-sch,19px);
  font-weight:800;
  line-height:1.7;
  color:var(--dlhh-head);
  text-align:center;
}

.dlhh-faq .hp-title::before{
  content:"";
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--dlhh-accent),transparent);
  pointer-events:none;
}

/* الشارة القديمة حول النصّ: تُلغى ويبقى النصّ */
.dlhh-faq .hp-title-badge{
  display:inline;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  color:inherit;
  font:inherit;
}

/* والإطار الجانبي القديم كذلك */
.dlhh-faq .hp-title{
  background:none;
  border-inline:0;
  box-shadow:none;
}

/* ============ الشاشات ============ */

@media (max-width:1024px){
  /* عمود واحد: المربّعات ثمّ السايدبار تحتها */
  .dlhh-has-sb .dlhh-grid{
    display:block;
    max-width:var(--dlhh-w-col);
    margin:0 auto;
  }

  .dlhh-has-sb .dlhh-sb{
    position:static;
    margin-top:var(--dlhh-gap);
  }
}

@media (max-width:600px){
  .dlhh-main{--dlhh-gap:14px;}
  .dlhh-h{font-size:17px;}
}