nav {
  position: fixed;

  z-index: 1000;
  overflow: hidden;

  width: 100%;
  max-height: var(--nav-height);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;

  padding-inline: 5%;
  padding-block: calc(var(--progress-bar-height) * 1.5);

  background-color: transparent;
  backdrop-filter: blur(3rem);
  border-radius: 0 0 7rem 3rem / 0 0 1.5rem 1rem;

  transition: max-height 300ms ease-in-out, background-color 300ms ease-in-out;
}

nav[data-scrolled] {
  background-color: hsl(100 100% 100% / 0.75);
  backdrop-filter: blur(0.375rem);
}

.nav__logo > img {
  height: calc(var(--nav-height) - var(--progress-bar-height) * 3);
}

.nav__mobile-menu-btn {
  display: none;
}

.nav__links {
  padding: 0;

  display: flex;
  align-items: center;
  gap: 2vw;
}

.nav__links > li {
  list-style-type: none;

  transition: transform 200ms ease-in-out;
}

.nav__links > li:hover,
.nav__links > li:focus,
.nav__links > li[data-current-site] {
  transform: scale(1.1);
}

.nav__links > li > a {
  font-weight: 700;
  font-size: min(1.25rem, 4.375vw);

  color: var(--blue-clr);
  text-decoration: none;
  /* text-transform: uppercase; */

  transition: color 200ms ease-in-out;

  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}

@media screen and (min-width: 1600px) {
  .nav__links > li > a {
    font-size: 1.75rem;
  }
}

.nav__links > li[data-current-site] > a {
  color: var(--pink-clr);
}

.nav__links > li:hover > a,
.nav__links > li:focus > a {
  color: var(--pink-clr-light);
}

.nav__links > hr {
  height: min(1.25vw, 3rem);

  border-left: dashed 1px var(--blue-clr);
}

@media screen and (max-width: 960px) {
  nav {
    border-radius: 0 0 5vw 3vw/ 0 0 3vw 2vw;
  }

  nav[data-expanded="true"] {
    max-height: 100vh;
  }

  .nav__logo {
    flex-basis: 50%;
  }

  .nav__mobile-menu-btn {
    all: unset;

    height: max(calc(var(--nav-height) - 2rem), 1.25rem);
    aspect-ratio: 1;

    cursor: pointer;
  }

  .nav__mobile-menu-btn > svg > path {
    fill: var(--pink-clr);
  }

  .nav__links {
    flex-direction: column;
    gap: 0.75vw;
    flex-basis: 100%;
    padding-block: 2vw;
  }

  .nav__links > li {
    width: 100%;
    margin-left: 2%;

    transition: margin-left 200ms ease-in-out;
  }

  .nav__links > li:hover,
  .nav__links > li:focus,
  .nav__links > li[data-current-site] {
    transform: none;

    margin-left: 5%;
  }

  .nav__links > hr {
    width: 100%;
    height: 0;

    border-top: dashed 1px var(--blue-clr);
  }
}