/* ARCUSITE: viewport-height mobile navigation. Loaded after the existing styles. */
.mobile-nav-head,.mobile-nav-foot,.nav-backdrop{display:none}

@media (max-width:1180px){
  /* A backdrop-filter on an ancestor makes fixed descendants relative to it. */
  .site-header,.site-header.scrolled{
    background:#fff;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    width:100%;height:100%;
    z-index:99;
    padding:0;border:0;
    background:rgba(9,24,38,.6);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .25s ease,visibility .25s;
  }
  body.nav-open .nav-backdrop{opacity:1;visibility:visible;pointer-events:auto}
  html.nav-open,body.nav-open{overflow:hidden}
 
  body.nav-open .site-header .main-nav{pointer-events:auto}

  .site-header .main-nav{
    position:fixed;
    inset-inline:auto;
    top:0;right:0;bottom:auto;left:auto;
    width:min(400px,calc(100vw - 36px));
    height:100vh;height:100dvh;
    max-height:none;
    margin:0;padding:0 22px 30px;
    box-sizing:border-box;
    z-index:102;
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    overflow-y:auto;overscroll-behavior:contain;
    background:#f9fbfd;
    box-shadow:-20px 0 55px rgba(12,35,53,.2);
    backdrop-filter:none;
    opacity:1;visibility:hidden;pointer-events:none;
    transform:translateX(105%);
    transition:transform .3s cubic-bezier(.22,.8,.25,1),visibility .3s;
  }
  .site-header .main-nav.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0)}
  html[dir="ltr"] .site-header .main-nav{
    left:0;right:auto;transform:translateX(-105%);
    box-shadow:20px 0 55px rgba(12,35,53,.2);
  }
  html[dir="ltr"] .site-header .main-nav.open{transform:translateX(0)}
  .mobile-nav-head{
    position:sticky;top:0;z-index:1;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    flex:none;min-height:78px;margin:0 -22px 17px;padding:12px 22px;
    background:#f9fbfd;border-bottom:1px solid #e2e9ef;
  }
  .mobile-nav-brand{display:flex;align-items:center;gap:10px;direction:ltr;color:#1b3a52}
  .mobile-nav-brand b{font:800 1rem/1.2 Tajawal,Arial,sans-serif;letter-spacing:.14em}
  .nav-close{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid #dae5ec;border-radius:10px;background:#fff;color:#285571;cursor:pointer}
  .nav-close svg{width:19px;height:19px}
  .site-header .main-nav>a:not(.mobile-nav-contact){
    flex:none;display:flex;align-items:center;min-height:49px;
    margin:0;padding:11px 15px;border:0;border-radius:10px;
    color:#344f64;font-size:1rem;font-weight:700;line-height:1.4;
    white-space:normal;
  }
  .site-header .main-nav>a:hover,.site-header .main-nav>a:focus-visible{background:#e9f2f8;color:#276c9a}
  .site-header .main-nav>a.active{background:#e5eff7;color:#246c9f;box-shadow:inset 3px 0 #5b9ac3}
  html[dir="rtl"] .site-header .main-nav>a.active{box-shadow:inset -3px 0 #5b9ac3}
  .mobile-nav-foot{display:grid;gap:14px;margin-top:auto;padding-top:25px}
  .mobile-nav-languages{display:flex;gap:8px;border-top:1px solid #e2e9ef;padding-top:19px}
  .site-header .main-nav .mobile-nav-languages a{flex:1;text-align:center;padding:10px;border-radius:9px;background:#edf2f6;color:#46667e;font-size:.85rem;font-weight:700}
  .site-header .main-nav .mobile-nav-languages a[aria-current]{background:#d9eaf6;color:#1d5d8d}
  .site-header .main-nav .mobile-nav-contact{display:flex;justify-content:center;align-items:center;min-height:45px;border-radius:10px;background:#286d9c;color:#fff;font-size:.9rem;font-weight:800}
  .nav-toggle{flex:none}
  .nav-toggle svg{stroke:#326d95}
}
@media (max-width:480px){
  .site-header .main-nav{width:min(360px,calc(100vw - 28px));padding-inline:18px}
  .mobile-nav-head{margin-inline:-18px;padding-inline:18px}
}
@media (prefers-reduced-motion:reduce){
  .nav-backdrop,.site-header .main-nav{transition:none!important}
}