/* Site menu: the shop's menu as a sheet from the top on a phone, or wherever
   the bar has no room for it (site-header.css). A popover, so it sits above
   the page, closes with Escape and a tap outside, and needs no script. */
.site-menu {
  background: var(--color-surface-1);
  border: 0;
  border-end-end-radius: var(--radius-xl);
  border-end-start-radius: var(--radius-xl);
  box-shadow: var(--shadow-overlay);
  color: var(--color-text);
  inline-size: 100%;
  inset: 0 0 auto;
  margin: 0;
  max-block-size: 100dvh;
  max-inline-size: none;
  overflow-y: auto;
  padding: var(--space-s) var(--gutter) var(--space-l);

  &::backdrop {
    backdrop-filter: blur(4px);
    background: var(--scrim);
  }

  &:popover-open {
    animation: site-menu-in var(--duration-base) var(--ease-out);
  }
}

.site-menu__head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-block-end: var(--space-s);
}

.site-menu__name {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
}

.site-menu__list {
  display: grid;
  gap: var(--space-3xs);
}

.site-menu__link {
  border-radius: var(--radius-m);
  color: var(--color-text);
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-size-adjust: var(--font-display-adjust);
  font-weight: var(--font-display-weight);
  letter-spacing: calc(var(--font-display-tracking) + var(--heading-case-tracking, 0em));
  line-height: var(--leading-tight);
  padding: var(--space-2xs) var(--space-xs);
  text-decoration: none;
  text-transform: var(--heading-case, none);

  &:hover {
    background: var(--color-surface-2);
  }

  &[aria-current="page"] {
    color: var(--color-accent-text);
  }
}

@keyframes site-menu-in {
  from {
    opacity: 0;
    transform: translateY(-1rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-menu:popover-open {
    animation: none;
  }
}