.navbar-nav {
  flex-wrap: nowrap;

  /* Top level links */

  .nav-link {
    --bs-nav-link-color: var(--color-black);
    --bs-nav-link-hover-color: var(--color-raspberry);
    --bs-nav-link-font-size: .9rem;
    --bs-nav-link-font-weight: 500;
    padding: .6rem;

    &:is(:hover, :focus, :focus-within) {
      color: var(--color-dk-raspberry);
    }

    &:focus-visible {
      border: none;
      box-shadow: var(--nav-link-focus-box-shadow);
      outline: none;
    }
  }

  .nav-item.dropdown {
    display: grid;
    grid-template-columns: 1fr auto;
    position: relative;
  }

  /* Second level links */
  .dropdown-toggle {
    border: none;
    background: none;
    &::after {
      --bs-link-color: var(--color-black);
      border-left: none;
      border-top: none;
      transform: rotate(45deg);
      margin-top: -.2rem;
    }

    &:is(:focus-visible) {
      outline-offset: -2px;
    }
  }

  .dropdown-menu {
    --bs-dropdown-border-radius: 0;
    --bs-dropdown-link-hover-bg: var(--color-lt-grey);
    --bs-dropdown-link-color: var(--color-black);
    --bs-dropdown-link-active-bg: var(--color-yellow);
    --bs-dropdown-link-active-color: var(--color-black);
    padding: 0;

    .dropdown-item {
      padding: 0;
      white-space: wrap;
    }

    .dropdown-item.active a {
      cursor: default;
    }

    .nav-link {
      --bs-nav-link-font-size: .8rem;
      --bs-nav-link-font-weight: 400;
    }
  }

}

/* Adjust font size in FR */

@media (width >= 75rem) and (width < 80rem) {
  html[lang=fr] .navbar-nav .nav-link {
    --bs-nav-link-font-size: .8rem;
    --bs-navbar-nav-link-padding-x: .4rem;
  }
}

/* Larger screen dropdowns */

.offcanvas:not(.show) .navbar-nav {
  .dropdown-menu {
    top: 2.4rem;
    width: 13rem;
  }

  .dropdown-toggle {
    margin-left: -.5rem;
  }
}

/* Make sure the last dropdown item doesn't overlap on off the right side */
@media (width >= 75rem) and (width <= 91rem) {
  .navbar-nav .nav-item:last-child .dropdown-menu {
    right: 0;
  }
}

@media (width >=75rem) {
  .dropdown:hover > .dropdown-menu {
    display: block;
  }
}
/* In offcanvas menu */

.offcanvas.showing .navbar-nav,
.offcanvas.show .navbar-nav  {
  .dropdown-toggle {
    justify-content: space-between;
    align-items: center;
  }

  .dropdown {
    border: none;
    justify-content: space-between;
  }

  .nav-link--level-0 {
    padding-inline: 0;
  }

  .dropdown-menu {
    grid-column: span 2;
  }
}