Navigation Underline Color in 7.1

Site URL: https://minnow-bison-eb6k.squarespace.com/

I've already added a hover colour effect and an active colour change to the navigation but the colour of the underline that applies to hyperlinks doesn't seem to be changing when active. Is there a way that I can change the colour of the underline? Thanks for any tips!

The site password is: password

and below is the css I already have in place on the site:

/* Nav item color */
.header-nav-item a {
    color: Black !important; 
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: #ef5232 !important;
}
/* Nav item active color */
.header-nav-item--active a {
    color: #ef5232 !important;
}

/* Nav item hover color - underline */
.header-nav-item--active a {
    color: #ef5232;
}

.header-nav-item--active a {
   background-image: #ef5232;
}

@media (max-width: 800px) {
    .gallery-masonry .gallery-masonry-item img {
        height: 100%!important;
        width: 100%!important;
    }
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 1;
        column-gap: 0;
        padding: 0 10px;
        height: auto!important;
        display: block!important;
     }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }
    .gallery-masonry-item {
        position: relative!important;
        padding: 10px!important;
        transform: none!important;
        width: 93%!important;
        display: block;
       }
}

@media (max-width: 800px) {
.item-pagination-title, .item-pagination-icon {
  font-size: 15px !important;
  line-height: 19px !important;
} 
}

.header-menu-nav-item a {
    font-size: 25px;
}

@media screen and (max-width:800px) {
.gallery-grid-wrapper {
    grid-template-columns: repeat(1,1fr) !important;
      grid-row-gap: 5vw !important;
}
}

Hi. Have you solved it yet?

It seems to have resolved itself? Odd though.