/* Shared mobile menu styles for the vanilla navigation overlay. */
@media (max-width: 809.98px) {
  .menu-panel {
    position: fixed;
    top: var(--menu-panel-top, 64px);
    left: var(--menu-panel-left, 0px);
    padding: 0;
    padding-left: 16px;
    padding-right: 12px;
    padding-bottom: 8px;
    width: 200px;
    background-color: #fff;
    border: none;
    border-radius: 0;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 150ms ease-out, transform 150ms ease-out;
    z-index: 100;
  }

  .menu-panel.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
  }

  .menu-panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .menu-panel-link {
    text-decoration: none;
  }

  .menu-panel-row {
    color: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    display: block;
    padding: 8px 0;
    padding-left: 4px;
  }

  .menu-panel-item.is-muted .menu-panel-row {
    color: #888;
  }

  .menu-panel-text {
    cursor: default;
  }

  .menu-panel-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
  }

  .menu-toggle {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .menu-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }

  .menu-toggle-bar {
    position: absolute;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background-color: currentColor;
    transition:
      transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 500ms cubic-bezier(0.34, 1.56, 0.64, 1),
      width 500ms cubic-bezier(0.34, 1.56, 0.64, 1),
      top 500ms cubic-bezier(0.34, 1.56, 0.64, 1),
      bottom 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: 50% 50%;
    left: calc(50% - 8px);
  }

  .menu-toggle-bar[data-menu-bar="top"] {
    top: 8px;
  }

  .menu-toggle-bar[data-menu-bar="middle"] {
    top: calc(50% - 1px);
  }

  .menu-toggle-bar[data-menu-bar="bottom"] {
    width: 12px;
    left: calc(50% - 8px);
    bottom: 8px;
  }

  .is-open .menu-toggle-bar[data-menu-bar="top"] {
    top: 13px;
    transform: rotate(45deg);
  }

  .is-open .menu-toggle-bar[data-menu-bar="middle"] {
    top: auto;
    bottom: 13px;
    transform: rotate(-45deg);
  }

  .is-open .menu-toggle-bar[data-menu-bar="bottom"] {
    width: 0;
    opacity: 0;
  }
}

@media (min-width: 810px) {
  .menu-panel {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-panel,
  .menu-panel.open,
  .menu-panel-link,
  .menu-toggle-bar {
    transition: none !important;
  }
}