/*
 * Ngo-Alshula-sa v4.2.6
 * Navigation z-index and dropdown overlay hardening.
 * يعالج ظهور الهيرو فوق القوائم الفرعية ويثبت طبقات الهيدر.
 */
:root{
  --ngo-header-layer: 999900;
  --ngo-dropdown-layer: 999950;
}

.ngo-site-header,
.site-header.ngo-site-header{
  position: relative !important;
  z-index: var(--ngo-header-layer) !important;
  isolation: isolate !important;
  overflow: visible !important;
}

.ngo-site-header .ngo-container,
.ngo-site-header .ngo-header-inner,
.ngo-site-header .ngo-main-menu,
.ngo-site-header .ngo-main-menu > div,
.ngo-site-header .ngo-main-menu ul,
.ngo-site-header nav{
  overflow: visible !important;
}

.ngo-hero,
.ngo-page-hero,
.ngo-site-main,
.site-main,
#content,
.site-content{
  position: relative !important;
  z-index: 1 !important;
}

@media (min-width: 901px){
  .ngo-site-header .ngo-main-menu{
    position: relative !important;
    z-index: calc(var(--ngo-header-layer) + 1) !important;
  }

  .ngo-site-header .ngo-main-menu > div > ul,
  .ngo-site-header .ngo-main-menu > ul,
  .ngo-site-header #primary-menu{
    align-content: center !important;
    row-gap: 10px !important;
  }

  .ngo-site-header .ngo-main-menu > div > ul > li,
  .ngo-site-header .ngo-main-menu > ul > li,
  .ngo-site-header #primary-menu > li{
    position: relative !important;
    z-index: 2 !important;
  }

  .ngo-site-header .ngo-main-menu > div > ul > li:hover,
  .ngo-site-header .ngo-main-menu > ul > li:hover,
  .ngo-site-header #primary-menu > li:hover,
  .ngo-site-header .ngo-main-menu > div > ul > li:focus-within,
  .ngo-site-header .ngo-main-menu > ul > li:focus-within,
  .ngo-site-header #primary-menu > li:focus-within{
    z-index: var(--ngo-dropdown-layer) !important;
  }

  .ngo-site-header .ngo-main-menu .sub-menu,
  .ngo-site-header .ngo-main-menu .children{
    position: absolute !important;
    z-index: var(--ngo-dropdown-layer) !important;
    top: calc(100% + 12px) !important;
    inset-inline-start: 50% !important;
    transform: translate(50%, 8px) scale(.98) !important;
    max-height: min(70vh, 520px) !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    clip-path: none !important;
    contain: none !important;
  }

  html[dir="ltr"] .ngo-site-header .ngo-main-menu .sub-menu,
  html[dir="ltr"] .ngo-site-header .ngo-main-menu .children{
    transform: translate(-50%, 8px) scale(.98) !important;
  }

  .ngo-site-header .ngo-main-menu li:hover > .sub-menu,
  .ngo-site-header .ngo-main-menu li:focus-within > .sub-menu,
  .ngo-site-header .ngo-main-menu li:hover > .children,
  .ngo-site-header .ngo-main-menu li:focus-within > .children{
    transform: translate(50%, 0) scale(1) !important;
  }

  html[dir="ltr"] .ngo-site-header .ngo-main-menu li:hover > .sub-menu,
  html[dir="ltr"] .ngo-site-header .ngo-main-menu li:focus-within > .sub-menu,
  html[dir="ltr"] .ngo-site-header .ngo-main-menu li:hover > .children,
  html[dir="ltr"] .ngo-site-header .ngo-main-menu li:focus-within > .children{
    transform: translate(-50%, 0) scale(1) !important;
  }

  .ngo-site-header .ngo-main-menu .sub-menu .sub-menu,
  .ngo-site-header .ngo-main-menu .children .children{
    top: 0 !important;
    inset-inline-start: calc(100% + 10px) !important;
    transform: translate(0, 0) scale(1) !important;
  }

  .ngo-site-header .ngo-main-menu .sub-menu:after,
  .ngo-site-header .ngo-main-menu .children:after{
    content: "" !important;
    position: absolute !important;
    top: -14px !important;
    right: 0 !important;
    left: 0 !important;
    height: 14px !important;
    background: transparent !important;
  }
}

@media (max-width: 900px){
  .ngo-site-header{
    z-index: var(--ngo-header-layer) !important;
  }

  .ngo-site-header .ngo-main-menu{
    z-index: var(--ngo-dropdown-layer) !important;
  }
}