/*
 * ASSC main navigation colour scheme.
 * Scoped exclusively to the Drupal main menu block.
 */

 /*
  * Active/current top-level menu item.
  * Drupal places the active class on the LI element.
  */
#block-mainmenu ul.ul-parent-main > li.active,
#block-mainmenu ul.ul-parent-main > li.menu-item--active-trail {
  background: #c00 !important;
  background-color: #c00 !important;
}

#block-mainmenu ul.ul-parent-main > li.active > a,
#block-mainmenu ul.ul-parent-main > li.menu-item--active-trail > a,
#block-mainmenu ul.ul-parent-main > li > a.is-active,
#block-mainmenu ul.ul-parent-main > li > a[aria-current="page"] {
  background: #c00 !important;
  background-color: #c00 !important;
  background-image: none !important;
  color: #fff !important;
}

/*
 * All dropdown panels, including nested dropdown panels.
 */
#block-mainmenu ul.ul-parent-main ul.ul-child-main {
  background: #c00 !important;
  background-color: #c00 !important;
  background-image: none !important;
}

/*
 * Normal dropdown list items and links.
 */
#block-mainmenu ul.ul-parent-main ul.ul-child-main > li,
#block-mainmenu ul.ul-parent-main ul.ul-child-main > li > a,
#block-mainmenu ul.ul-parent-main ul.ul-child-main > li > a.w3-button {
  background: #c00 !important;
  background-color: #c00 !important;
  background-image: none !important;
  color: #fff !important;
}

/*
 * Hover and keyboard-focus appearance.
 */
#block-mainmenu ul.ul-parent-main ul.ul-child-main li > a:hover,
#block-mainmenu ul.ul-parent-main ul.ul-child-main li > a:focus,
#block-mainmenu ul.ul-parent-main ul.ul-child-main li > a:focus-visible {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #222 !important;
}

/*
 * Keep dropdown arrows visible against the red background.
 */
#block-mainmenu ul.ul-parent-main li.active > span,
#block-mainmenu ul.ul-parent-main li.menu-item--active-trail > span {
  color: #fff !important;
}

/*
 * ASSC main navigation spacing and typography.
 * Restrict these adjustments to the desktop horizontal main menu.
 */

/* Reduce horizontal spacing between top-level menu items. */
@media screen and (min-width: 993px) {
  #block-mainmenu ul.ul-parent-main > li > a {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}

/* Pure white text for normal top-level menu links. */
#block-mainmenu ul.ul-parent-main > li > a,
#block-mainmenu ul.ul-parent-main > li > a:visited {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Pure white text for normal dropdown links. */
#block-mainmenu ul.ul-parent-main ul.ul-child-main > li > a,
#block-mainmenu ul.ul-parent-main ul.ul-child-main > li > a:visited {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Preserve dark text on white dropdown hover/focus background. */
#block-mainmenu ul.ul-parent-main ul.ul-child-main li > a:hover,
#block-mainmenu ul.ul-parent-main ul.ul-child-main li > a:focus,
#block-mainmenu ul.ul-parent-main ul.ul-child-main li > a:focus-visible {
  color: #222222 !important;
}

/* Keep active menu text and its arrow white. */
#block-mainmenu ul.ul-parent-main > li.active > a,
#block-mainmenu ul.ul-parent-main > li.menu-item--active-trail > a,
#block-mainmenu ul.ul-parent-main > li.active > span,
#block-mainmenu ul.ul-parent-main > li.menu-item--active-trail > span {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* ASSC: Black font on top-level menu hover */
#block-mainmenu ul.ul-parent-main > li > a:hover,
#block-mainmenu ul.ul-parent-main > li > a:focus,
#block-mainmenu ul.ul-parent-main > li > a:focus-visible {
  color: #000000 !important;
  opacity: 1 !important;
}

/*
 * ASSC: Keep the desktop dropdown arrow next to its menu label.
 * The arrow is a sibling of the link in the V2 theme markup.
 */
@media screen and (min-width: 993px) {
  #block-mainmenu ul.ul-parent-main > li.li-expanded > a {
    display: inline-block !important;
    width: auto !important;
  }

  #block-mainmenu ul.ul-parent-main > li.li-expanded > span.dropdown-arrow {
    position: static !important;
    display: inline-flex !important;
    vertical-align: middle;
    width: auto !important;
    height: auto !important;
    padding: 0 0 0 6px !important;
    margin: 0 !important;
    align-items: center;
  }
}