.nav {
  & > :not(:last-child) {
    margin-block: 0 var(--spacing-block-sm);
  }

  li {
    list-style-type: none;
  }
}

.nav__bottom-row {
  display: flex;
  flex-direction: column;
}

.nav__nav-links {
  display: grid;
  grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
  column-gap: var(--grid-gutter-width);

  li {
    list-style-type: none;
    margin: 0;
  }
}

.nav__logo {
  font-family: var(--font-serif);
  font-size: var(--font-size-5);
  font-weight: 700;
  line-height: 1.15;

  /* This gradient is based on                  *
   * colours.$primary-60 -> colours.$secondary-60 *
   * using Josh W Comeau's gradient generator   */
  width: fit-content;
  background-image: linear-gradient(
    45deg,
    hsl(248deg 100% 75%) 0%,
    hsl(227deg 100% 70%) 24%,
    hsl(211deg 100% 58%) 40%,
    hsl(205deg 100% 50%) 51%,
    hsl(202deg 100% 49%) 60%,
    hsl(200deg 100% 47%) 66%,
    hsl(197deg 100% 44%) 70%,
    hsl(194deg 100% 41%) 73%,
    hsl(190deg 100% 38%) 76%,
    hsl(186deg 100% 35%) 79%,
    hsl(181deg 100% 33%) 84%,
    hsl(177deg 100% 32%) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  a {
    text-decoration: none;
    border: var(--border-width) dotted transparent;
    transition: border-color 100ms;

    &:is(:focus, :focus-visible, :focus-within) {
      box-shadow: none;
      outline: none;
      border-color: var(--special-text-color);
      transition: border-color 300ms;
    }
  }
}

.nav__breadcrumbs {
  li {
    list-style: '▸';
    list-style-position: inside;
  }
}

.nav__switch-language-link {
  text-align: right;
}