Custom CSS to change colour of open menu items whilst keeping active folder css

Site URL: https://www.interaction-ld.com

I have added custom CSS to remove underlines from the main navigation menu and the folder menu items, which is working.  I have also added custom CSS for the hover and Active colours.  But what I cannot get to happen is to have the custom colour on a Folder Menu list - I want the Active Folder item AND the active folder header to have the same colour applied - I am able to get this to happen separately if I turn one piece of code off and visa versa, but I want both to be true at the same time.  This is the css as it is at the moment (website is not published right now so I hope this is enough to help):

/* Nav item active color */
.header-nav-item--active a {
    background-image: none !important;
      color: #CE0058 !important;
}
.header-nav-folder-content .header-nav-folder-item > a:hover {
    color: #CE0058 !important;
}
.header-nav-folder-content .header-nav-folder-item--active a {
    color: #CE0058 !important;
}
.header-nav-item:hover > a {
    color: #CE0058 !important;
}
/* Nav item remove underline */
.header-nav-wrapper a {
    background-image: none !important;
}
/*Removes underline from nav menu items*/
body:not( .header--menu-open ) .header-nav-folder-item--active .header-nav-folder-item-content, /* desktop */
:is( [aria-current="page"], /* mobile */
[aria-current="true"] ) .header-menu-nav-item-content
  {
    background-image : unset;
    }

Your site is private. Can you setup an access password & share url again? We can check easier

That's done - 'sqsforum'

Thank you

Edit this code

.header-nav-item--active a {
    background-image: none !important;
    color: #ce0058 !important;
}

to this

.header-nav-item--active>a {
    background-image: none !important;
    color: #ce0058 !important;
}