/* القائمة الكبرى (Mega menu) — إضافة على تصميم الأصل لتغطي كل صفحات الموقع.
   HTML في parts/header-*.html يولّده import-src/prep.py (NAV)، والسلوك في assets/js/nav.js.
   يُحمَّل بعد home.css / inner.css ويستخدم متغيراتهما (:root). */
.nav-drop{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;border:0;background:none;cursor:pointer;font:inherit;font-weight:600;font-size:15.5px;color:var(--ink-2);white-space:nowrap}
.nav-drop:hover,.has-mega.open>.nav-drop{background:var(--paper);color:var(--blue)}
.has-mega.current>.nav-drop,.nav-links>li>a[aria-current]{color:var(--blue)}
.nav-caret{width:12px;height:12px;flex:none;transition:transform .2s}
.has-mega.open .nav-caret{transform:rotate(180deg)}

.mega{display:none}
.mega-in{display:grid;gap:24px 36px;align-items:start}
.mega-h{font-family:var(--display);font-size:13px;font-weight:700;color:var(--blue);letter-spacing:0;margin:0 0 8px;padding-bottom:10px;border-bottom:1px solid var(--line-2)}
.mega ul{list-style:none;margin:0;padding:0}
.nav-links .mega a{display:block;padding:6px 10px;margin-inline:-10px;border-radius:8px;font-size:14.5px;font-weight:500;line-height:1.55;color:var(--ink-2);white-space:normal}
.nav-links .mega a:hover{background:var(--sky-soft);color:var(--blue)}
.nav-links .mega a[aria-current]{color:var(--blue);font-weight:700}
.mega-intro{background:var(--bg);border:1px solid var(--line-2);border-radius:16px;padding:22px}
.mega-intro b{display:block;font-family:var(--display);font-weight:700;font-size:17px;line-height:1.5;color:var(--ink)}
.mega-intro p{margin:8px 0 14px;font-size:14px;line-height:1.8;color:var(--muted)}
.nav-links .mega-intro a.more{display:inline-block;margin:0;padding:0;font-weight:700;color:var(--blue);background:none}
.nav-links .mega-intro a.more:hover{background:none;text-decoration:underline}

@media (min-width:921px){
  .nav-links{align-self:stretch}
  .nav-links>li{display:flex;align-items:center}
  .mega{position:absolute;top:100%;right:0;left:0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 28px 48px -28px rgba(11,26,58,.28);padding:28px 0 32px;max-height:calc(100vh - 76px);overflow-y:auto}
  .has-mega.open>.mega{display:block}
  .mega-in.c2{grid-template-columns:300px repeat(2,minmax(0,280px))}
  .mega-in.c4{grid-template-columns:270px repeat(4,minmax(0,1fr))}
}
@media (max-width:1180px) and (min-width:921px){
  .nav-drop{padding:8px 10px;font-size:14.5px}
  .mega-in.c4{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 24px}
  .mega-in.c4 .mega-intro{display:none}
}
@media (max-width:920px){
  .menu-open .nav-links{max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overflow-y:auto;box-shadow:0 24px 40px -24px rgba(11,26,58,.3)}
  .nav-drop{width:100%;justify-content:space-between;padding:12px}
  .nav-links>li+li{border-top:1px solid var(--line-2)}
  .has-mega.open>.mega{display:block;padding:4px 12px 16px}
  .mega-in.wrap{width:auto}
  .mega-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
  .mega-intro{display:none}
  .menu-open .nav-links .mega a{padding:7px 10px}
}
@media (max-width:560px){
  .mega-in{grid-template-columns:1fr}
}