.site-header.mobile-nav-ready {
  position: relative;
}

body.site-mobile-nav-open {
  overflow: hidden;
}

.site-nav-toggle,
.site-nav-close {
  min-width: var(--tap-target-min);
  min-height: var(--tap-target-min);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2, var(--surface));
  color: var(--text-1);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.site-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
}

.site-nav-close {
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.site-nav-toggle:focus-visible,
.site-nav-close:focus-visible,
.site-nav-list a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

@media (max-width: 48rem) {
  .site-header.mobile-nav-ready .bar {
    align-items: center;
  }

  .site-header.mobile-nav-ready .site-nav-toggle {
    display: inline-flex;
  }

  .site-header.mobile-nav-ready .site-nav {
    display: none;
  }

  .site-header.mobile-nav-ready[data-mobile-nav-open="true"] .site-nav {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-md) var(--space-xl);
    background: var(--surface);
  }

  .site-header.mobile-nav-ready .site-nav-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
  }

  .site-header.mobile-nav-ready .site-nav-list a {
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-height: var(--tap-target-min);
  }

  .site-header.mobile-nav-ready[data-mobile-nav-open="true"] .site-nav-close {
    display: inline-flex;
  }
}