.block-system-main-menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  line-height: 1;
}

/** Define menu link colours */
.block-system-main-menu .block-content a {
  display: block;
  color: var(--primary-colour);
  text-decoration: none;
  padding: 0.25em 0.5em;
}

.block-system-main-menu .block-content li.active-trail > a,
.block-system-main-menu .block-content a:active,
.block-system-main-menu .block-content a:hover,
.block-system-main-menu .block-content a:focus,
.block-system-main-menu .block-content a.active {
  color: var(--secondary-colour);
}

.block-system-main-menu .block-content > ul {
  display: block;
  list-style-type: none;
  font-size: 2rem;
}

/* Dropdown Menu Arrow */
.block-system-main-menu .block-content > ul > li > a.has-submenu .sub-arrow {
  position: absolute;
  top: 50%;
  right: 0.5em;
  border-width: 5px;
  border-style: solid dashed dashed dashed;
  border-color: var(--primary-colour) transparent transparent transparent;
  background: transparent;
}

@media only screen and (min-width: 992px) {

  .block-system-main-menu .block-content > ul > li {
    display: block;
    float: left;
  }

  .block-system-main-menu .block-content > ul > li + li {
    margin-left: 0.25em;
  }

  .block-system-main-menu .block-content > ul > li {
    position: relative;
    display: block;
  }

  .block-system-main-menu .block-content > ul > li > a {
    padding: 0.5em;
  }

  .block-system-main-menu .block-content > ul > li:not(.has-children) a:hover:after,
  .block-system-main-menu .block-content > ul > li:not(.has-children) a:focus:after,
  .block-system-main-menu .block-content > ul > li:not(.has-children) a.active:after {
    display: block;
    content: ' ';
    border-bottom: 2px solid var(--primary-colour);
    margin-bottom: -2px;
  }

  /* .block-system-main-menu .block-content > ul > li.has-children:hover a,
  .block-system-main-menu .block-content > ul > li.has-children:focus a, */
  .block-system-main-menu .block-content > ul > li.has-children .highlighted {
    background-color: var(--lighter-grey-colour);
  }

  .block-system-main-menu .block-content > ul > li > a.has-submenu {
    padding-right: 1.25em;
  }

  /* .block-system-main-menu .block-content > ul > li > a.has-submenu .sub-arrow:after {
    display: inline-block;
    content: '+';
  } */

  /* .block-system-main-menu .block-content > ul.sm > li.has-children:hover > ul,
  .block-system-main-menu .block-content > ul.sm > li.has-children:focus > ul, */
  .block-system-main-menu .block-content > ul.sm > li.has-children > .highlighted + ul {
    display: block;
  }

  .block-system-main-menu .block-content > ul.sm > li.has-children > ul {
    position: absolute;
    top: 2.125em;
    left: 0;
    background-color: var(--lighter-grey-colour);
    white-space: nowrap;
  }

  .block-system-main-menu .block-content > ul.sm > li.has-children > ul li a {
    padding: 0.25em 0.5em;
  }

  .block-system-main-menu .block-content > ul.sm > li.has-children > ul li a:hover,
  .block-system-main-menu .block-content > ul.sm > li.has-children > ul li a:focus {
    background-color: var(--light-grey-colour);
  }

}