/* Shared navigation overlay. Loaded by the homepage, About, and artist pages. */

:root {
  --menu-coral: #81BB52;
  --menu-ink:   #18100D;
  /* 33% larger than the previous clamp(28px, 4.5vw, 60px) */
  --menu-close-fs: clamp(37px, 6vw, 80px);
}

#menu-overlay {
  position:       fixed;
  inset:          0;
  z-index:        100;
  display:        flex;
  flex-direction: column;
  background:     var(--menu-coral);
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.18s ease;
}

#menu-overlay.active {
  opacity:        1;
  pointer-events: auto;
}

/* Pod and X are separate grid columns, so the X is never under the image box. */
#menu-bar {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items:           start;
  column-gap:            16px;
  flex:                  0 0 auto;
  padding:               8px 4% 0 25px;
}

#menu-home-link {
  display:      block;
  justify-self: start;
  width:        min(88vw, 1000px);
  max-width:    100%;
  min-width:    0;
  line-height:  0;
  cursor:       pointer;
}

button#menu-home-link {
  background: none;
  border:     none;
  padding:    0;
  text-align: left;
}

#menu-home-link img {
  width:        100%;
  height:       auto;
  aspect-ratio: 8028 / 2070;
  display:      block;
  filter:       drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
}

#menu-close {
  margin:        0;
  padding:       0.05em 0.2em;
  border:        none;
  background:    none;
  cursor:        pointer;
  font-family:   monospace;
  font-size:     var(--menu-close-fs);
  font-weight:   900;
  line-height:   1;
  color:         var(--menu-ink);
}

#menu-close:hover {
  background-color: var(--menu-ink);
  color:            var(--menu-coral);
}

#menu-close:focus-visible {
  outline:        3px solid var(--menu-ink);
  outline-offset: 4px;
}

/* List sits under the pod. --menu-fit is set in menu.js so every line fits. */
#menu-nav {
  --menu-fit:     32px;
  flex:           1 1 auto;
  min-height:     0;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  gap:            0.08em;
  box-sizing:     border-box;
  margin:         0;
  /* Bottom pad is 85% of the fitted type size, so a full list clears the viewport edge. */
  padding:        0.2em 4% 0.85em 25px;
  font-size:      var(--menu-fit);
}

a.menu-item,
button.menu-item {
  width:           fit-content;
  max-width:       100%;
  margin:          0;
  padding:         0;
  border:          none;
  background:      none;
  text-align:      left;
  text-decoration: none;
}

.menu-item {
  display:     block;
  cursor:      pointer;
  user-select: none;
  font-family: monospace;
  font-size:   1em;
  font-weight: 800;
  line-height: 1.25;
  color:       var(--menu-ink);
}

.menu-item .word {
  display:    inline-block;
  padding:    0.03em 0.1em;
  transition: background-color 0.07s ease, color 0.07s ease;
}

.menu-item:hover .word,
.menu-item:focus-visible .word {
  background-color: var(--menu-ink);
  color:            var(--menu-coral);
}

.menu-item:focus-visible {
  outline: none;
}

/* "Support 70 Seeds": highlighted at rest (the hover look, always on) */
.menu-item--featured .word {
  background-color: var(--menu-ink);
  color:            var(--menu-coral);
}
.menu-item--featured:hover .word { opacity: 0.85; }
.menu-item--featured:focus-visible .word { outline: 3px solid var(--menu-ink); outline-offset: 2px; }

.menu-title {
  align-self:       flex-start;
  width:            fit-content;
  margin:           0;
  padding:          0.03em 0.1em;
  user-select:      none;
  font-family:      monospace;
  font-size:        1.33em;
  font-weight:      800;
  line-height:      1.25;
  color:            var(--menu-coral);
  background-color: var(--menu-ink);
}