/*
 * Shared mobile navigation component.
 * Loaded after every page-specific stylesheet.
 */

@media(max-width:920px){
  .main-header{
    position:relative;
    z-index:120;
  }

  .main-header .imam-mobile-navigation__toggle{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    width:46px;
    height:46px;
    min-width:46px;
    padding:0;
    color:#073d86;
    background:#f3f7fc;
    border:1px solid #dce7f3;
    border-radius:14px;
    box-shadow:0 5px 14px rgba(5,43,99,.09);
    cursor:pointer;
    transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease;
  }

  .main-header .imam-mobile-navigation__toggle:hover,
  .main-header .imam-mobile-navigation__toggle:focus-visible{
    background:#eaf2fb;
    border-color:#bdd1e8;
    box-shadow:0 7px 18px rgba(5,43,99,.14);
    outline:none;
  }

  .main-header .imam-mobile-navigation__toggle:active{
    transform:scale(.96);
  }

  .imam-mobile-navigation__line{
    display:block;
    width:22px;
    height:2px;
    background:currentColor;
    border-radius:999px;
    transform-origin:center;
    transition:transform .25s ease,opacity .18s ease,width .25s ease;
  }

  .imam-mobile-navigation__toggle.is-open{
    color:#fff;
    background:#073d86;
    border-color:#073d86;
    box-shadow:0 8px 22px rgba(5,43,99,.24);
  }

  .imam-mobile-navigation__toggle.is-open .imam-mobile-navigation__line:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }

  .imam-mobile-navigation__toggle.is-open .imam-mobile-navigation__line:nth-child(2){
    width:0;
    opacity:0;
  }

  .imam-mobile-navigation__toggle.is-open .imam-mobile-navigation__line:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }

  .main-header .imam-mobile-navigation{
    position:absolute!important;
    top:calc(100% + 10px)!important;
    right:0!important;
    left:0!important;
    z-index:130!important;
    display:block!important;
    width:auto!important;
    max-height:min(68vh,520px)!important;
    margin:0!important;
    padding:10px!important;
    overflow-y:auto!important;
    background:#fff!important;
    border:1px solid #e1eaf4!important;
    border-radius:18px!important;
    box-shadow:0 18px 45px rgba(5,43,99,.18)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-10px) scale(.985)!important;
    transform-origin:top center!important;
    transition:opacity .2s ease,visibility .2s ease,transform .24s ease!important;
  }

  .main-header .imam-mobile-navigation.is-open{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateY(0) scale(1)!important;
  }

  .main-header .imam-mobile-navigation ul{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:5px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    list-style:none!important;
  }

  .main-header .imam-mobile-navigation li{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  .main-header .imam-mobile-navigation a{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:46px!important;
    margin:0!important;
    padding:11px 16px!important;
    color:#173b67!important;
    background:transparent!important;
    border:0!important;
    border-radius:12px!important;
    box-shadow:none!important;
    font-size:15px!important;
    font-weight:800!important;
    line-height:1.6!important;
    text-decoration:none!important;
    transition:color .18s ease,background-color .18s ease,padding-right .18s ease!important;
  }

  .main-header .imam-mobile-navigation a:after{
    content:none!important;
    display:none!important;
  }

  .main-header .imam-mobile-navigation a:before{
    content:""!important;
    display:block!important;
    width:6px!important;
    height:6px!important;
    margin:0 0 0 10px!important;
    flex:0 0 6px!important;
    background:#9bb2cc!important;
    border:0!important;
    border-radius:50%!important;
    transform:none!important;
    transition:background-color .18s ease,transform .18s ease!important;
  }

  .main-header .imam-mobile-navigation a:hover,
  .main-header .imam-mobile-navigation a:focus-visible{
    color:#073d86!important;
    background:#eef5fc!important;
    padding-right:19px!important;
    outline:none!important;
  }

  .main-header .imam-mobile-navigation a:hover:before,
  .main-header .imam-mobile-navigation a:focus-visible:before{
    background:#1674d1!important;
    transform:scale(1.35)!important;
  }

  .main-header .imam-mobile-navigation .current-menu-item > a,
  .main-header .imam-mobile-navigation .current_page_item > a{
    color:#fff!important;
    background:linear-gradient(135deg,#0c4f99,#073d86)!important;
    box-shadow:0 7px 16px rgba(7,61,134,.18)!important;
  }

  .main-header .imam-mobile-navigation .current-menu-item > a:before,
  .main-header .imam-mobile-navigation .current_page_item > a:before{
    background:#fff!important;
  }
}

@media(max-width:560px){
  .main-header .imam-mobile-navigation{
    right:-2px!important;
    left:-2px!important;
    padding:9px!important;
    border-radius:16px!important;
  }

  .main-header .imam-mobile-navigation a{
    min-height:44px!important;
    padding:10px 14px!important;
    font-size:14.5px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .imam-mobile-navigation__toggle,
  .imam-mobile-navigation__line,
  .imam-mobile-navigation,
  .imam-mobile-navigation a,
  .imam-mobile-navigation a:before{
    transition:none!important;
  }
}