/* Match the mobile home topbar on shared public and account pages. */
@media (max-width: 800px) {
  .site-header,
  .account-body .site-header {
    position: sticky;
    top: 0;
    background: rgba(23, 18, 24, .9);
    border-bottom: 1px solid rgba(187, 156, 110, .4);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
  }

  body.nav-open .site-header {
    background: #171218;
    border-bottom-color: rgba(187, 156, 110, .65);
  }

  .site-header .nav {
    width: 100%;
    height: 64px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: env(safe-area-inset-right);
  }

  .site-header .brand {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    background-image: url('../imgs/logo_KL3D.png');
  }

  .site-header .nav-toggle {
    width: 58px;
    height: 64px;
    margin-left: auto;
    color: #fff;
    background: #171218;
    border: 0;
    border-left: 1px solid rgba(187, 156, 110, .2);
    border-radius: 0;
  }

  .site-header .nav-toggle[aria-expanded="true"] {
    background: #302a32;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  }

  .site-header .nav-menu {
    top: 100%;
    padding: 12px max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: #171218;
    border-bottom: 1px solid rgba(187, 156, 110, .4);
    border-radius: 0;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .45);
    position: absolute;
  }

  .site-header .nav-menu .nav-links > a,
  .site-header .nav-dropdown-toggle {
    color: #fff;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(187, 156, 110, .18);
    border-radius: 4px;
    font-weight: 500;
    text-shadow: none;
    overflow-wrap: anywhere;
  }

  .site-header .nav-menu .nav-links > a:hover,
  .site-header .nav-menu .nav-links > a.active,
  .site-header .nav-dropdown-toggle:hover,
  .site-header .nav-dropdown.is-open .nav-dropdown-toggle {
    color: #f4d599;
    background: rgba(187, 156, 110, .12);
    border-color: rgba(187, 156, 110, .5);
  }

  .site-header .nav-menu .nav-links > a.active::after {
    background: #bb9c6e;
  }

  .site-header .nav-dropdown {
    min-width: 0;
    margin-top: 0;
  }

  .site-header .nav-dropdown-menu {
    position: static;
    min-width: 0;
    padding: 6px 0 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .site-header .nav-links .nav-dropdown-menu a {
    color: #d7c5a9;
    justify-content: center;
    background: transparent;
  }

  .site-header .nav-links .nav-dropdown-menu a:hover,
  .site-header .nav-links .nav-dropdown-menu a:focus-visible {
    color: #f4d599;
    background: rgba(187, 156, 110, .12);
  }

  .site-header a:focus-visible,
  .site-header button:focus-visible {
    outline: 2px solid #f4d599;
    outline-offset: -3px;
  }
}