/* ==========================================================================
   site-header.css — الترويسة الموحّدة لكل صفحات elprofessor.net
   قرار المؤسس 2026-09-09: ترويسة واحدة بنفس الشكل والترتيب في كل صفحة.

   ⛔ قواعد لا تُنقض:
   1) الشكل يُختار بسمة على العنصر نفسه: header[data-header-mode="transparent"]
      أو "solid" — **لا قواعد خاصّة بصفحة بعينها في أي مكان**. أي `.nav` قديمة
      في ستايل الصفحات ماتّت مع الترويسة القديمة.
   2) الروابط الستّة وترتيبها واحد: الفكرة · المنصّة · الدورات · درّب معنا ·
      المقالات · تواصل. الزرّ «اطلب دعوتك» وحده على اليسار.
   3) ممنوع `filter` أو `backdrop-filter` أو `transform` على العنصر
      header نفسه — أيٌّ منها يصنع «كتلة احتواء» فتصير القائمة المثبَّتة
      (position:fixed) محسوبة من الترويسة لا من الشاشة، فتظهر بارتفاع ٧٢px.
      الضبابية تُوضع على الطبقة .ephd-bg وحدها.
   ========================================================================== */

:root{
  --ephd-h: 72px;              /* ارتفاع الترويسة — الجوّال يخفضه */
  --ephd-wrap: 1160px;
  --ephd-gut: 26px;
  --ephd-radius: 10px;
  --ephd-navy: #1A2B4A;
  --ephd-human: #9E2B4E;
  --ephd-human-dark: #86243F;
  --ephd-paper: #FBFAF7;
  --ephd-line: #E9E3DA;
  --ephd-ink: #3F4A5E;         /* نصّ الروابط على الفاتح — تباين ٨٫٥:١ */
  --ephd-gold-dark: #8A5B08;   /* «مكانك مع الكبار» على الفاتح — ٥٫٨:١ */
  --ephd-gold-light: #F0CE7A;  /* «مكانك مع الكبار» على الداكن */
  --ephd-ease: cubic-bezier(.4,0,.2,1);
}

/* الهبوط على وصلة داخلية لا يختفي تحت الترويسة، وبانزلاق هادئ */
html{ scroll-behavior: smooth; }
:target{ scroll-margin-top: calc(var(--ephd-h) + 24px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

/* --------------------------------------------------------------- الغلاف */
header[data-site-header]{
  position: sticky;              /* الوضع الفاتح: داخل التدفّق، بلا إزاحة */
  top: 0;
  z-index: 60;
  inset-inline: 0;
  isolation: isolate;
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', 'Cairo', system-ui, sans-serif;
}
header[data-site-header][data-header-mode="transparent"]{
  position: fixed;               /* الوضع الشفاف: يطفو فوق صورة الهيرو */
  top: 0; right: 0; left: 0;
}

/* طبقة الخلفية — كل الضبابية والتدرّج هنا، لا على header نفسه */
header[data-site-header] .ephd-bg{
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background: var(--ephd-paper);
  /* ⛔ `no-repeat` ليست زينة: منطقة وضع الخلفية هي صندوق الحشو (بلا الحدّ)، فيبقى
     صفُّ الحدّ السفلي بلا تدرّج ويملؤه التكرار الافتراضي بأوّل لون في التدرّج —
     أي **خطّ أسود بعرض ١px عند أسفل الستارة** فوق صورة الهيرو. قيس قبل أن تحذفها. */
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--ephd-line);
  box-shadow: 0 4px 24px rgba(26,43,74,.07);
  transition: opacity .25s var(--ephd-ease), background .25s var(--ephd-ease);
}
/* الشفاف: ستارة تدرّجية تضمن قراءة النصّ الأبيض فوق أي صورة */
header[data-site-header][data-header-mode="transparent"] .ephd-bg{
  /* ⛔ الستارة تلبس شريط الترويسة بكثافة شبه ثابتة (٧٢٪⇠٥٦٪ خلال أوّل ٣٣٪ = ارتفاع
     الشريط) ثم **تتلاشى بمنحنًى ميلُه صفرٌ عند النهاية**. تلاشٍ خطّي أو قصير يترك
     «رفًّا» أفقيًّا مرئيًّا على سماء الهيرو المتدرّجة — ضرب مرّتين قبل ضبط هذه الوقفات. */
  background: linear-gradient(180deg,
      rgba(15,23,42,.72) 0%,
      rgba(15,23,42,.66) 20%,
      rgba(15,23,42,.56) 34%,
      rgba(15,23,42,.40) 48%,
      rgba(15,23,42,.25) 62%,
      rgba(15,23,42,.13) 75%,
      rgba(15,23,42,.055) 86%,
      rgba(15,23,42,.015) 94%,
      rgba(15,23,42,0)   100%);
  border-bottom-width: 0;
  box-shadow: none;
  bottom: -200%;                 /* ٢١٦px إجمالًا: ٧٢ للشريط + ١٤٤ تلاشيًا */
}
/* عند التمرير يصير الشفاف صلبًا */
header[data-site-header][data-header-mode="transparent"].is-solid .ephd-bg{
  background: rgba(251,250,247,.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--ephd-line);
  box-shadow: 0 4px 24px rgba(26,43,74,.08);
  bottom: 0;
}

/* اللوحة مفتوحة ⇒ حتى الترويسة الشفّافة تلبس الوضع الصلب: شريط داكن فوق لوحة فاتحة يكسر الوحدة */
header[data-site-header].is-open .ephd-bg{
  background: var(--ephd-paper);
  border-bottom-color: var(--ephd-line);
  box-shadow: none;
  bottom: 0;
}

/* --------------------------------------------------------------- الصفّ */
header[data-site-header] .ephd-in{
  position: relative;
  z-index: 1;
  max-width: var(--ephd-wrap);
  margin: 0 auto;
  padding: 0 var(--ephd-gut);
  height: var(--ephd-h);
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ---------------------------------------------------------- الهوية يمينًا */
header[data-site-header] .ephd-brand{
  display: flex; align-items: center; gap: 11px;
  flex: 1 1 0; min-width: 0;
  text-decoration: none;
  border-radius: var(--ephd-radius);
}
header[data-site-header] .ephd-logo{
  height: 36px; width: auto; display: block; flex: none;
}
header[data-site-header] .ephd-name{ display: block; min-width: 0; }
header[data-site-header] .ephd-nm{
  display: block;
  font-family: 'Aref Ruqaa', serif;
  font-size: 22px; font-weight: 700; line-height: 1.15;
  color: var(--ephd-navy);
  white-space: nowrap;
  transition: color .25s var(--ephd-ease), text-shadow .25s var(--ephd-ease);
}
header[data-site-header] .ephd-sl{
  display: block;
  font-size: 12px; font-weight: 700; letter-spacing: .3px; line-height: 1.5;
  color: var(--ephd-gold-dark);
  white-space: nowrap;
  transition: color .25s var(--ephd-ease), text-shadow .25s var(--ephd-ease);
}
header[data-site-header][data-header-mode="transparent"]:not(.is-solid):not(.is-open) .ephd-nm{
  color: #fff; text-shadow: 0 1px 10px rgba(15,23,42,.55);
}
header[data-site-header][data-header-mode="transparent"]:not(.is-solid):not(.is-open) .ephd-sl{
  color: var(--ephd-gold-light); text-shadow: 0 1px 10px rgba(15,23,42,.55);
}

/* ------------------------------------------------------- الروابط في الوسط */
header[data-site-header] .ephd-nav{ flex: 0 0 auto; }
header[data-site-header] .ephd-links{
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
header[data-site-header] .ephd-links a{
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 9px 14px;
  border-radius: var(--ephd-radius);
  font-size: 15px; font-weight: 600; line-height: 1;
  color: var(--ephd-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--ephd-ease), background .2s var(--ephd-ease);
}
header[data-site-header] .ephd-links a:hover{
  background: #F2EEE7; color: var(--ephd-navy);
}
header[data-site-header] .ephd-links a[aria-current="page"]{
  color: var(--ephd-human); font-weight: 800;
}
header[data-site-header] .ephd-links a[aria-current="page"]::after{
  content: ""; position: absolute; inset-inline: 14px; bottom: 6px;
  height: 2px; border-radius: 2px; background: currentColor;
}
header[data-site-header][data-header-mode="transparent"]:not(.is-solid):not(.is-open) .ephd-links a{
  color: rgba(255,255,255,.94); text-shadow: 0 1px 8px rgba(15,23,42,.5);
}
header[data-site-header][data-header-mode="transparent"]:not(.is-solid):not(.is-open) .ephd-links a:hover{
  background: rgba(255,255,255,.16); color: #fff;
}
header[data-site-header][data-header-mode="transparent"]:not(.is-solid):not(.is-open) .ephd-links a[aria-current="page"]{
  color: var(--ephd-gold-light);
}

/* ---------------------------------------------------------- الزرّ يسارًا */
header[data-site-header] .ephd-actions{
  display: flex; align-items: center; gap: 9px;
  flex: 1 1 0; justify-content: flex-end;
}
header[data-site-header] .ephd-cta{
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  padding: 11px 20px;
  border: 1.5px solid var(--ephd-human);
  border-radius: var(--ephd-radius);
  background: var(--ephd-human);
  color: #fff;
  font-size: 14.5px; font-weight: 800; line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background .2s var(--ephd-ease), border-color .2s var(--ephd-ease), transform .2s var(--ephd-ease);
}
header[data-site-header] .ephd-cta:hover{
  background: var(--ephd-human-dark); border-color: var(--ephd-human-dark);
  transform: translateY(-1px);
}
header[data-site-header] .ephd-cta .ephd-ic{
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ------------------------------------------------------------ زرّ القائمة */
header[data-site-header] .ephd-burger{
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  padding: 0;
  border: 1.5px solid var(--ephd-line);
  border-radius: var(--ephd-radius);
  background: transparent;
  color: var(--ephd-navy);
  cursor: pointer;
  transition: background .2s var(--ephd-ease), color .2s var(--ephd-ease), border-color .2s var(--ephd-ease);
}
header[data-site-header] .ephd-burger .ephd-ic{
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
header[data-site-header] .ephd-burger:hover{ background: #F2EEE7; }
header[data-site-header][data-header-mode="transparent"]:not(.is-solid):not(.is-open) .ephd-burger{
  color: #fff; border-color: rgba(255,255,255,.55);
}
header[data-site-header][data-header-mode="transparent"]:not(.is-solid):not(.is-open) .ephd-burger:hover{
  background: rgba(255,255,255,.16);
}
header[data-site-header] .ephd-burger .ephd-close{ display: none; }
header[data-site-header].is-open .ephd-burger .ephd-open{ display: none; }
header[data-site-header].is-open .ephd-burger .ephd-close{ display: block; }

/* ------------------------------------------------------------ لوحة الجوال */
header[data-site-header] .ephd-panel{
  display: none;
  position: fixed;
  top: var(--ephd-h); right: 0; left: 0; bottom: 0;
  z-index: 1;
  background: var(--ephd-paper);
  border-top: 1px solid var(--ephd-line);
  padding: 16px var(--ephd-gut) 32px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden; opacity: 0;
  transform: translateY(-8px);
  transition: opacity .22s var(--ephd-ease), transform .22s var(--ephd-ease), visibility .22s var(--ephd-ease);
}
header[data-site-header].is-open .ephd-panel{
  visibility: visible; opacity: 1; transform: none;
}
header[data-site-header] .ephd-panel-links{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
header[data-site-header] .ephd-panel-links a{
  display: flex; align-items: center;
  min-height: 56px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--ephd-line);
  font-size: 17px; font-weight: 600;
  color: var(--ephd-ink);
  text-decoration: none;
}
header[data-site-header] .ephd-panel-links a:hover{ color: var(--ephd-navy); }
header[data-site-header] .ephd-panel-links a[aria-current="page"]{
  color: var(--ephd-human); font-weight: 800;
}
header[data-site-header] .ephd-panel .ephd-cta{
  margin-top: 24px;
  width: 100%;
  justify-content: center;
  font-size: 16px;
  padding: 15px 20px;
}

html.ephd-locked, html.ephd-locked body{ overflow: hidden; }

/* ------------------------------------------------------------- ≤ ٩٠٠px */
@media (max-width: 900px){
  :root{ --ephd-h: 64px; --ephd-gut: 20px; }
  header[data-site-header] .ephd-nav{ display: none; }
  header[data-site-header] .ephd-burger{ display: inline-flex; }
  header[data-site-header] .ephd-panel{ display: block; }
  header[data-site-header] .ephd-logo{ height: 32px; }
  header[data-site-header] .ephd-nm{ font-size: 20px; }
  header[data-site-header] .ephd-cta{ padding: 10px 15px; font-size: 13.5px; }
}
@media (max-width: 360px){
  header[data-site-header] .ephd-sl{ display: none; }
  header[data-site-header] .ephd-in{ gap: 8px; }
  header[data-site-header] .ephd-cta{ padding: 10px 12px; font-size: 12.5px; gap: 5px; }
  header[data-site-header] .ephd-cta .ephd-ic{ display: none; }
  header[data-site-header] .ephd-panel .ephd-cta{
    padding: 15px 20px; font-size: 16px;
  }
  header[data-site-header] .ephd-panel .ephd-cta .ephd-ic{ display: block; }
}

/* --------------------------------------------------------------- الوصول */
header[data-site-header] a:focus-visible,
header[data-site-header] button:focus-visible{
  outline: 3px solid var(--ephd-human);
  outline-offset: 3px;
}
header[data-site-header][data-header-mode="transparent"]:not(.is-solid):not(.is-open) a:focus-visible,
header[data-site-header][data-header-mode="transparent"]:not(.is-solid):not(.is-open) button:focus-visible{
  outline-color: #fff;
}
@media (prefers-reduced-motion: reduce){
  header[data-site-header] *,
  header[data-site-header] .ephd-bg{ transition: none !important; }
  header[data-site-header] .ephd-cta:hover{ transform: none; }
}