.nav-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: end;
  font-family: var(--font-1);
  gap: 0.75rem; /* space around the separators */
  /* color: var(--other-text-3); */
  /* -webkit-text-stroke: 0.5px black; */
}

.nav-toggle {
  color: var(--other-text-3);
  background: transparent;
  border: none;
}

.nav-list a {
  text-decoration: none;
  color: inherit;
  font-weight: 600;
}

/* add | after each item except the last */
.nav-list li:not(:last-child)::after {
  content: "|";
  margin-left: 0.5rem;
}

/* first I will try to just change the css of the nav */
/* .mobile-menu {
  display: none;
  width: 100%;
  background: var(--second-color);
}
.mobile-menu.open {
  display: block;
} */

/* max-width means "this width or smaller" */
@media (max-width: 1140px) {
  /* 1) Hide nav list by default on mobile */
  .nav-list {
    display: none;
  }

  /* 2) Mobile menu container (closed state) */
  .mobile-menu {
    display: none; /* closed */
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    z-index: 9999; /* must be a number */
    background: var(--fourth-color);
  }

  /* 3) Open state */
  .mobile-menu.open {
    display: block;
  }

  /* 4) Show & style nav items when open */
  .mobile-menu.open .nav-list {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: var(--other-text-3);
  }

  .mobile-menu.open .nav-list li:not(:last-child)::after {
    content: none;
  }
}

@media (max-width: 500px) {
  .nav-list {
    display: none;
  }
  .mobile-menu.open .nav-list {
    /* display: flex; */
    /* flex-direction: column; */
    align-items: center;
    /* color: var(--other-text-3); */
  }
  .mobile-menu.open .nav-list li:not(:last-child)::after {
    content: none;
    margin-left: 0.5rem;
  }
}

/* min-width means "this width or bigger" */
@media (min-width: 1140px) {
  .nav-toggle {
    display: none;
  }
  .mobile-menu {
    display: none;
  }
}