/* Compact public navigation. Loaded after the main stylesheet. */
body:not(.account-media-app) .topbar{
  position:sticky!important;
  top:0!important;
  z-index:120!important;
}

body:not(.account-media-app) .topbar nav.marketing-nav,
body.marketing-media-home .topbar nav.marketing-nav{
  margin-left:auto!important;
  justify-content:flex-end!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
}

body:not(.account-media-app) .topbar .nav-menu{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  min-width:max-content;
}

body:not(.account-media-app) .topbar .nav-menu-trigger{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px;
  white-space:nowrap;
}

body:not(.account-media-app) .topbar .nav-menu-trigger:after{
  content:"";
  width:7px;
  height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  opacity:.72;
}

body:not(.account-media-app) .topbar .nav-submenu{
  position:absolute!important;
  right:0;
  top:calc(100% + 10px);
  z-index:140;
  min-width:190px;
  display:grid!important;
  gap:4px;
  padding:8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(12,14,19,.98);
  box-shadow:0 22px 70px rgba(0,0,0,.5);
  opacity:0;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease;
}

body:not(.account-media-app) .topbar .nav-submenu:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-10px;
  height:10px;
}

body:not(.account-media-app) .topbar .nav-menu:hover .nav-submenu,
body:not(.account-media-app) .topbar .nav-menu:focus-within .nav-submenu{
  opacity:1;
  pointer-events:auto;
  transform:none;
}

body:not(.account-media-app) .topbar .nav-submenu a{
  display:flex!important;
  align-items:center;
  min-height:40px;
  border-radius:8px;
  white-space:nowrap;
}

@media(max-width:760px){
  body:not(.account-media-app) .topbar .brand{
    max-width:calc(100% - 60px)!important;
  }

  body:not(.account-media-app) .topbar .mobile-menu-toggle{
    position:fixed!important;
    top:10px!important;
    right:12px!important;
    z-index:160!important;
    display:grid!important;
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    place-items:center!important;
    border:1px solid rgba(255,255,255,.18)!important;
    border-radius:8px!important;
    background:rgba(255,255,255,.06)!important;
  }

  body:not(.account-media-app) .topbar .mobile-menu-toggle span{
    display:block!important;
    width:18px!important;
    height:2px!important;
    margin:3px auto!important;
    border-radius:999px!important;
    background:#fff!important;
  }

  body:not(.account-media-app) .topbar nav.marketing-nav,
  body.marketing-media-home .topbar nav.marketing-nav{
    margin-left:0!important;
    justify-content:stretch!important;
    align-items:stretch!important;
    flex-wrap:unset!important;
  }

  body:not(.account-media-app) .topbar .nav-menu{
    display:grid!important;
    min-width:0;
  }

  body:not(.account-media-app) .topbar .nav-menu-trigger{
    display:flex!important;
    min-height:44px;
    align-items:center!important;
    border-radius:8px;
    padding:12px!important;
    background:rgba(255,255,255,.045);
  }

  body:not(.account-media-app) .topbar .nav-submenu{
    position:static!important;
    min-width:0;
    padding:6px 0 0 10px;
    border:0;
    background:transparent;
    box-shadow:none;
    opacity:1;
    pointer-events:auto;
    transform:none;
  }

  body:not(.account-media-app) .topbar .nav-submenu a{
    min-height:40px;
    padding:10px 12px!important;
    background:rgba(255,255,255,.035);
  }
}