/**
 * Hawyia — the full-screen navigation menu.
 *
 * The markup is identical on all twenty-two pages, but the styling lived in
 * each page's own stylesheet, and twenty-two copies had drifted apart: the
 * projects page carried rules for a `.nav-dropdown-sectors` block that no page
 * actually renders, its news headings sat at a different size, and the staggered
 * entrance of the news cards was missing entirely. So the same button opened a
 * visibly different menu depending on where you pressed it.
 *
 * This file is the single source of truth. It is linked after each page's own
 * stylesheet, so it wins on source order; the colour declarations additionally
 * carry !important because some pages set theirs inside media queries at the
 * same specificity, and a few — the mobile link size among them — were already
 * !important themselves. That is the price of overriding twenty-two divergent
 * sheets from one place, and it is worth paying to keep the menu identical.
 *
 * The panel is light: white surface, dark ink. #fbfaf7 is the same warm white
 * the homepage already morphs to over the "about" band, so the menu belongs to
 * the palette rather than introducing a second white.
 */

.nav-dropdown{
  --navm-surface:#fbfaf7;
  --navm-ink:#12202c;
  --navm-muted:#5f7180;
  --navm-line:rgba(18,32,44,.12);
  /* the brand gold is too pale to read as text on white; this is the same hue
     taken down to a 4:1 contrast so the hover state is legible */
  --navm-accent:#9c7a3e;
  --navm-gold:#c9a876;
}

/* ---------- the panel ---------- */
.nav-dropdown{
  position:fixed;inset:0;width:100%;height:100vh;
  background:var(--navm-surface) !important;
  color:var(--navm-ink) !important;
  z-index:150;
  transform:translateY(-100%);
  transition:transform .5s cubic-bezier(.65,0,.35,1);
  overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;
}
.nav-dropdown.open{transform:translateY(0);}

/* ---------- the woven pattern behind everything ---------- */
/* image-11 is drawn in white strokes for the dark panel it was made for;
   inverting it turns the same file into dark line-work on the light one. */
.nav-dropdown::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url('/images/image-11.svg');
  background-repeat:no-repeat;background-size:75vw auto;background-position:left 78%;
  filter:invert(1);
  opacity:.07;
}
/* image-12 is already gold, so it needs no inversion — only a lighter touch */
.nav-dropdown::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url('/images/image-12.svg');
  background-repeat:no-repeat;background-size:75vw auto;background-position:left 78%;
  opacity:.55;
  -webkit-mask-image:linear-gradient(115deg, transparent 25%, rgba(255,255,255,.95) 50%, transparent 75%);
  mask-image:linear-gradient(115deg, transparent 25%, rgba(255,255,255,.95) 50%, transparent 75%);
  -webkit-mask-size:280% 280%;mask-size:280% 280%;
  -webkit-mask-position:-40% -40%;mask-position:-40% -40%;
  animation:navmGlow 9s linear infinite;
}
@keyframes navmGlow{
  0%{-webkit-mask-position:-60% -60%;mask-position:-60% -60%;}
  100%{-webkit-mask-position:160% 160%;mask-position:160% 160%;}
}
@media (prefers-reduced-motion:reduce){
  .nav-dropdown::after{animation:none;}
}

.nav-dropdown-top,
.nav-dropdown-body,
.nav-dropdown-bottom{position:relative;z-index:1;}

/* ---------- header row ---------- */
.nav-dropdown-top{
  display:flex;align-items:center;justify-content:space-between;
  max-width:100%;margin:0;padding:62px 100px 14px;
}
.nav-dropdown-top .logo svg{height:38px;width:auto;}
/* the mark is authored white for the dark header; on this panel it has to flip
   or it disappears into the background */
.nav-dropdown-top .logo svg .st0,
.nav-dropdown-top .logo svg .cls-1,
.nav-dropdown-top .logo svg path,
.nav-dropdown-top .logo svg polygon,
.nav-dropdown-top .logo svg rect{fill:var(--navm-ink) !important;}

/* زرّ الإغلاق هو زرّ القائمة نفسه شكلاً ومقاساً — الإطار الذهبي
   نفسه والزوايا نفسها — إلا أنّ خطّيه متقاطعان في علامة إكس بدل أن
   يكونا أفقيّين. فالزائر يجد ما فتح به القائمة في موضعه ليغلقها.
   كان قبلها كلمة «إغلاق» وخطّاً جانبياً، لا صلة لهما بزرّ الفتح. */
.nav-dropdown-close{
  position:relative;
  width:60px; height:30px;
  display:flex; align-items:center; justify-content:center;
  padding:0;
  background:none; border:0;
  border-radius:6px;
  box-shadow:inset 0 0 0 var(--navm-stroke, 1.5px) var(--navm-gold);
  cursor:pointer;
  font-family:inherit;
  transition:box-shadow .25s ease;
}
.nav-dropdown-close span{
  position:absolute;
  width:20px; height:2px; border-radius:2px;
  background:var(--navm-ink) !important;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), background-color .2s;
}
.nav-dropdown-close span:nth-child(1){ transform:rotate(45deg); }
.nav-dropdown-close span:nth-child(2){ transform:rotate(-45deg); }
/* الإكس يستدير ربع دورة عند المرور — بنفس منطق تناصف خطّي زرّ الفتح */
.nav-dropdown-close:hover span:nth-child(1){ transform:rotate(135deg); }
.nav-dropdown-close:hover span:nth-child(2){ transform:rotate(45deg); }
.nav-dropdown-close:hover span{ background:var(--navm-accent) !important; }
@media(prefers-reduced-motion:reduce){
  .nav-dropdown-close span{ transition:background-color .2s; }
  .nav-dropdown-close:hover span:nth-child(1){ transform:rotate(45deg); }
  .nav-dropdown-close:hover span:nth-child(2){ transform:rotate(-45deg); }
}

/* ---------- body: links beside the news strip ---------- */
.nav-dropdown-body{
  flex:1;display:grid;grid-template-columns:1fr 1.3fr;gap:0;
  max-width:100%;margin:0;width:100%;
  padding:60px 100px 40px;align-items:stretch;
  border:1px solid var(--navm-line) !important;
}
/* خصائص منطقية لا اتّجاهية: في العربية تقع الروابط يميناً والأخبار
   يسارها، وفي الإنجليزية ينعكس الوضع. padding-left و border-left
   و text-align:right كانت تصف الحالة العربية بالاسم، فبقيت كما هي
   على الصفحة الإنجليزية: انتقل عمود الروابط إلى اليسار (بـ order)
   لكنّ نصّه ظلّ ملتصقاً بحافته اليمنى بعيداً عن جهة القراءة. */
.nav-dropdown-links{order:1;padding-inline-end:40px;border-inline-end:1px solid var(--navm-line) !important;}
.nav-dropdown-news{order:2;padding-inline-start:40px;display:flex;flex-direction:column;height:100%;}
.nav-dropdown-news .eyebrow{margin-bottom:26px;font-size:16px;color:var(--navm-muted) !important;}

.nav-dropdown-links ul{display:flex;flex-direction:column;gap:20px;text-align:start;}
.nav-dropdown-links ul li a{
  font-size:26px;font-weight:300;
  color:var(--navm-ink) !important;
  transition:color .2s, font-weight .2s;
  font-family:'ABC Favorit Arabic', sans-serif;
}
.nav-dropdown-links ul li a:hover{color:var(--navm-accent) !important;font-weight:700;}

/* ---------- news cards ---------- */
.nav-dropdown .nav-news-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;
  max-width:100%;margin-inline-start:0;margin-inline-end:auto;
}
.nav-dropdown .nav-news-card{
  border:1px solid var(--navm-line) !important;
  background:#fff !important;
  opacity:0;transform:translateY(30px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
/* the stagger was on the homepage only; every page gets it now */
.nav-dropdown.open .nav-news-card{opacity:1;transform:translateY(0);}
.nav-dropdown.open .nav-news-card:nth-child(1){transition-delay:.15s;}
.nav-dropdown.open .nav-news-card:nth-child(2){transition-delay:.28s;}
.nav-dropdown.open .nav-news-card:nth-child(3){transition-delay:.41s;}
/* نسبة الصورة هي نسبة قسم «آخر الأخبار» نفسها: 16:9 والارتفاع يتبع
   العرض. كان الارتفاع مقطوعاً عند 170px، فإذا اتّسعت البطاقة على
   الجوال إلى عمود كامل (~350px) صار القصّ 2:1 — تُبتر أطراف الصورة
   ولا تملأ البطاقة كما تفعل في الأخبار. */
.nav-dropdown .nav-news-card .nav-news-img{
  height:auto;
  aspect-ratio:16 / 9;
  background-size:cover;
  background-position:center;
}
.nav-dropdown .nav-news-card p{
  padding:16px;font-size:14.5px;line-height:1.7;
  color:var(--navm-ink) !important;font-weight:500;
}

/* ---------- footer strip ---------- */
.nav-dropdown-bottom{border-top:1px solid var(--navm-line) !important;}
.nav-dropdown-bottom-inner{
  max-width:100%;margin:0;width:100%;
  padding:24px 100px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
}
.nav-dropdown-copy{font-size:13px;color:var(--navm-muted) !important;}
.nav-dropdown-bottom .legal-links{
  display:flex;gap:28px;font-size:13px;flex-wrap:wrap;
  color:var(--navm-muted) !important;
}
.nav-dropdown-bottom .legal-links a{color:var(--navm-muted) !important;transition:.2s;}
.nav-dropdown-bottom .legal-links a:hover{color:var(--navm-accent) !important;}

.nav-dropdown-bottom .socials{display:flex;gap:12px;}
/* the icons paint themselves with currentColor — stroke for the outline set,
   fill for the solid brand marks — so the container colour drives both */
.nav-dropdown-bottom .socials a{
  width:36px;height:36px;border-radius:0;
  border:1px solid var(--navm-line) !important;
  color:var(--navm-muted) !important;
  display:flex;align-items:center;justify-content:center;transition:.2s;
}
.nav-dropdown-bottom .socials a:hover{
  border-color:var(--navm-gold) !important;
  color:var(--navm-accent) !important;
}

/* ---------- narrow screens ---------- */
@media(max-width:900px){
  .nav-dropdown-top{padding:22px 20px 14px;}
  .nav-dropdown-body{grid-template-columns:1fr;padding:40px 24px;}
  .nav-dropdown-links{
    padding-left:0;border-left:none !important;
    padding-bottom:30px;border-bottom:1px solid var(--navm-line) !important;
  }
  .nav-dropdown-news{height:auto;padding-right:0;padding-top:30px;}
  .nav-dropdown-links ul li a{font-size:22px !important;}
  .nav-dropdown-bottom-inner{padding:20px 24px;flex-direction:column;align-items:flex-start;}
}
@media(max-width:768px){
  .nav-dropdown .nav-news-grid{grid-template-columns:1fr !important;}
  .nav-dropdown-links ul li a{font-size:20px !important;}
}
@media(max-width:480px){
  .nav-dropdown-top{padding:18px 16px 14px;}
  .nav-dropdown-body{padding:28px 16px;}
  .nav-dropdown-bottom-inner{padding:16px 16px;}
}

/* ================================================================
   أزرار الترويسة — الشكل الجديد
   زرّ القائمة إطارٌ ذهبيّ بزوايا مستديرة وخطّان متزحزحان يتناصفان
   عند مرور الفأرة. وزرّا اللغة والاتصال بلا صندوق، تحت كلٍّ منهما
   خطّ ذهبي.

   الإطار مرسومٌ بظلٍّ داخلي لا بـ border، والخطّ السفلي بعنصر ::after
   لا بـ border-bottom — وذلك لسببٍ عملي: في الصفحات قواعدُ تقلب
   لون الترويسة فوق الأقسام الفاتحة، وتكتب border-color بـ !important
   من داخل <style> يأتي بعد هذا الملف، فتغلبه مهما رفعنا ترجيحه.
   الظلّ و ::after خارج مرمى تلك القواعد أصلاً، فيبقى الذهبيّ ذهبياً
   في الحالتين بلا حربِ ترجيحٍ ولا تعديلٍ في اثنتين وعشرين صفحة.
   ================================================================ */

/* سُمكٌ واحد لكل خطّ ذهبي في الترويسة — إطار زرّ القائمة والخطوط
   تحت زرّي اللغة والاتصال. متغيّر واحد يحكمها فلا تتفرّق بمرور
   التعديلات. أمّا خطّا القائمة نفساهما فيبقيان عند 2px. */
/* التعبئة شفّافة قليلاً (55٪) ليرشح ما خلفها، ومتغيّر واحد يحملها
   إلى الحالات الثلاث. */
:root{ --navm-stroke:1.5px; --navm-fill:rgba(18,32,44,.55); }

/* ---------- زرّ القائمة ---------- */
/* الزرّ مساحةٌ داكنة مصمتة لا إطاراً ذهبياً، وخطّاه أبيضان.
   القواعد الثلاث أدناه تكتب اللون في الحالات الثلاث: العادية، وفوق
   الأقسام الفاتحة (header.on-light)، وفي تدرّج ألوان الأقسام
   (body.morph.is-light). القاعدتان الأخيرتان تقلبان حبر الترويسة إلى
   الداكن بـ !important من داخل <style> يأتي بعد هذا الملف — فلولا
   ذِكرهما هنا بترجيحٍ أعلى لانقلب الخطّان داكنَين على أرضيةٍ داكنة
   واختفيا تماماً فوق الشريط الفاتح. */
.menu-toggle{
  width:60px; height:30px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:4px;
  padding:0;
  background:var(--navm-fill, rgba(18,32,44,.55));
  /* الضباب يعمل على ما خلف العنصر لا عليه، فلا يمسّ الخطّين.
     ولا أثر له فوق لونٍ مصمت — إنّما يظهر فوق الفيديو والصور،
     وهناك موضعه في هذه الترويسة. */
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
  backdrop-filter:blur(10px) saturate(1.15);
  border:0;
  border-radius:6px;
  box-shadow:none;
  cursor:pointer;
  transition:background-color .25s ease;
}
/* اللون نفسه في الحالات الثلاث */
header.on-light .menu-toggle,
body.morph.is-light header .menu-toggle{ background:var(--navm-fill, rgba(18,32,44,.55)) !important; }
.menu-toggle span{
  display:block;
  width:24px; height:2px;
  border-radius:2px;
  background:#ffffff;
  transition:transform .34s cubic-bezier(.22,.61,.36,1),
             background-color .25s linear;
}
/* في السكون: الخطّان متزحزحان أحدهما عن الآخر */
/* الخطّان أبيضان دائماً — الأرضية تحتهما داكنة في كل الحالات */
header.on-light .menu-toggle span,
body.morph.is-light header .menu-toggle span{ background:#ffffff !important; }
.menu-toggle span:nth-child(1){ transform:translateX(-5px); }
.menu-toggle span:nth-child(2){ transform:translateX(5px); }
/* وعند المرور — أو عند التنقّل بلوحة المفاتيح — يعودان فيتناصفان */
.menu-toggle:hover span:nth-child(1),
.menu-toggle:focus-visible span:nth-child(1),
.menu-toggle:hover span:nth-child(2),
.menu-toggle:focus-visible span:nth-child(2){
  transform:translateX(0);
}
/* لا فأرة على الجوال، فيستقرّان متناصفَين بلا انتظار حركة لا تأتي */
@media(hover:none), (pointer:coarse){
  .menu-toggle span:nth-child(1),
  .menu-toggle span:nth-child(2){ transform:translateX(0); }
}
@media(prefers-reduced-motion:reduce){
  .menu-toggle span{ transition:background-color .25s linear; }
}

/* ---------- زرّا اللغة والاتصال ---------- */
.nav-actions .icon-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  /* ارتفاعٌ واحد للزرّين لا يتبع محتواهما: نصّ «EN» يرتفع 32px بينما
     أيقونة الهاتف 29px، والصفّ يوسّطهما — فيقع أسفلاهما على مستويين
     ويظهر الخطّان الذهبيّان متفاوتَين بمقدار بكسلين. */
  width:auto; height:30px;
  padding:0 4px 8px;
  border:0; border-radius:0;
  background:none;
  color:var(--text-light, #f4f2ec);
  transition:color .25s linear;
}
/* أيقونة الهاتف مصمتة لا مفرَّغة. مسار الأيقونة مرسومٌ أصلاً كمحيطٍ
   مغلق لسمّاعة، فتعبئته تعطي السمّاعة صمّاء دون تبديل المسار نفسه —
   ويلزم إبطال stroke صراحةً وإلا بقي المحيط مرسوماً حول المساحة
   المعبّأة فبدت الأيقونة أثقل ممّا ينبغي. */
.nav-actions .icon-btn svg,
.nav-actions .icon-btn svg *{
  fill:currentColor;
  stroke:none;
}
/* الخطّ الذهبي بوزن الإطار نفسه (1.5px) لا بوزن خطّي القائمة —
   فالخطّان وحدهما يبقيان عند 2px */
.nav-actions .icon-btn::after{
  content:"";
  position:absolute; inset-inline:0; bottom:0;
  height:var(--navm-stroke); border-radius:2px;
  background:var(--gold, #c9a876);
}

/* ===== الشعار يصغر وحده والأزرار لا تتحرّك =====
 * صفّ الترويسة يقيس ارتفاعه بأطول أبنائه — وهو الشعار. فإذا صغر عند
 * التمرير من 69px إلى 44px نقص الصفّ 25px، وبما أنّ أبناءه موسَّطون
 * رأسياً ارتفعت الأزرار 13px معه، أي نصف الفرق.
 *
 * الحلّ ألّا يقيس الصفُّ نفسَه بالشعار: صندوق الشعار بارتفاعٍ ثابت
 * والرسم يصغر بداخله. فيبقى ارتفاع الصفّ كما هو، ولا يتحرّك شيء سوى
 * الشعار نفسه.
 */
.logo{ height:69px; }
@media(max-width:900px){
  .logo{ height:44px; }
}