.site-navigation {
  
  /* Desktop: horizontal menu - always visible */
  @media (min-width: 768px) {
    .navbar-collapse {
      display: block;
    }
    
    ul {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      gap: var(--margin-s);
    }
  }
  
  /* Mobile: vertical menu - hidden by default */
  @media (max-width: 767.98px) {
    .navbar-collapse {
      display: none;
    }
    
    .navbar-collapse.show {
      display: block;
    }
    
    ul {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {

      font-family: var(--ff-sans2);
      font-size: var(--fc-small);
      font-weight: var(--fw-semibold);

      a {
        
        color: var(--white);
        padding: var(--margin-xxs) var(--margin-xs);
        text-transform: uppercase;
        text-decoration: none;
        text-shadow: 0 2px 2px var(--c-black-transparent-2);

        &:hover {
          color: var(--white);
          
        }

        &.nav-link.active {
          color: var(--white);
          border-bottom: 2px solid var(--c-white-transparent-3);
          text-shadow: 0 2px 4px var(--c-black-transparent-3);
        }
      }
    }
  }

  .menu--secondary-menu ul li {
    a {
      color: var(--accent-5);
    }

    &:nth-child(1) a {
      color: var(--accent-5);
    }

    &:last-child a {
      background: transparent;
      color: var(--accent-4);
      border: 2px solid var(--accent-3);
      border-radius: var(--br-s);
      text-shadow: none;
      padding: var(--margin-xxs) var(--margin-s);

    }
  }
}


@media all and (width <= 767px) {

  .site-navigation {
    flex: 1 1 50%;

    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: var(--margin-s);

    .menu--main {
      ul {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
        gap: var(--margin-s);
      }
    }

    .menu--secondary-menu {
      ul {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: var(--margin-s);
      }
    } 
  }

  /* overriding useless rules: */
  nav.menu--main {
        margin-left: 0;
        width: 100%;
        padding-bottom: 0;
  }
}


/* menu toggler styles */

.navbar-toggler {
    border: 0 solid var(--c-white-transparent-3);
}

.navbar-toggler:focus {
    border: 1px solid var(--c-white-transparent-1);
    box-shadow: 0 0 0 0.2rem var(--c-white-transparent-2);
}

.navbar-toggler-icon {
    display: inline-block;
    width: var(--fs-h1);
    height: var(--fs-h1);
    vertical-align: middle;
    color: var(--c-white-transparent-1);
    stroke: var(--c-white-transparent-1);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" /></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    /* little tricks to change colour of svg in background-image */
    filter: invert(1) grayscale(1) brightness(200%);
    opacity: 0.7;
}