/* MENU: floating buttons, overlay, credits, timestamp */

.menu-btn,
.home-btn {
  position: fixed;
  top: 0;
  margin: var(--gutter);
  padding: 2px 6px;
}

.menu-btn {
  left: calc(var(--margin) * 2);
  z-index: 60;
}

/* Plus icon: hidden by default, shown on small screens (see responsive.css).
   It turns into an x by rotating 45 degrees while the menu is open. */
.menu-icon {
  display: none;
  position: relative;
  width: 9px;
  height: 9px;
  transition: transform 0.3s ease;
}

.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.menu-icon::before {   /* horizontal bar */
  top: 4px;
  left: 0;
  width: 100%;
  height: 1px;
}

.menu-icon::after {    /* vertical bar */
  top: 0;
  left: 4px;
  width: 1px;
  height: 100%;
}

.menu-btn[aria-expanded="true"] .menu-icon {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .menu-icon {
    transition: none;
  }
}

.home-btn {
  z-index: 20;
  border-color: transparent;
  font-weight: 900;
  letter-spacing: 1.5px;
  transform: translateY(1px);
}

/* Links stack in a flex column; the position is set by padding + gap */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--margin) * 0.75);
  padding: var(--menu-top) 0 0 var(--content-left);

  background: var(--bg);
}

.menu-overlay.hidden {
  display: none;
}

.credits {
  position: absolute;
  bottom: var(--content-bottom);
  left: var(--content-left);
}

.timestamp {
  position: absolute;
  bottom: var(--content-bottom);
  right: calc(var(--margin) * 5);
  z-index: 50;
}