/*
 * Large, touch-friendly mobile navigation with branded gold icon.
 *
 * This asset is loaded after every page-specific stylesheet so Portfolio
 * pages and the rest of the site share the same mobile menu.
 */

@media (max-width: 920px) {
  .topbar .nav-toggle {
    display: inline-grid;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    place-items: center;
    border-color: color-mix(in oklch, #c7a056 38%, transparent);
    border-radius: 14px;
    color: #c7a056;
  }

  .topbar .nav-toggle > span {
    position: relative;
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 999px;
    color: #c7a056;
    background: currentColor;
    font-size: 0;
    transition: background-color 160ms ease;
  }

  .topbar .nav-toggle > span::before,
  .topbar .nav-toggle > span::after {
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    border-radius: inherit;
    background: currentColor;
    content: "";
    transition: top 160ms ease, transform 160ms ease;
  }

  .topbar .nav-toggle > span::before {
    top: -7px;
  }

  .topbar .nav-toggle > span::after {
    top: 7px;
  }

  .topbar .nav-toggle[aria-expanded="true"] > span {
    background: transparent;
  }

  .topbar .nav-toggle[aria-expanded="true"] > span::before {
    top: 0;
    transform: rotate(45deg);
  }

  .topbar .nav-toggle[aria-expanded="true"] > span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .topbar .nav-links {
    position: absolute;
    top: calc(100% + 12px);
    right: var(--gutter);
    left: var(--gutter);
    max-height: calc(100dvh - 104px);
    padding: 18px;
    overflow-y: auto;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgb(0 0 0 / 42%);
  }

  .topbar .nav-menu {
    gap: 4px;
  }

  .topbar .nav-menu > li {
    width: 100%;
  }

  .topbar .nav-links a {
    display: flex;
    width: 100%;
    min-height: 58px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
    color: var(--nav-muted);
    font-family: var(--font-body);
    font-size: clamp(22px, 5.8vw, 28px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
  }

  .topbar .nav-links a:hover,
  .topbar .nav-links a:focus-visible,
  .topbar .nav-links .current-menu-item > a,
  .topbar .nav-links .current_page_item > a {
    color: var(--nav-fg);
    background: color-mix(in oklch, var(--accent) 10%, transparent);
  }

  .topbar .nav-links a:focus-visible {
    outline: 2px solid color-mix(in oklch, var(--accent) 68%, transparent);
    outline-offset: 2px;
  }
}