Header CTA hover state hamburger menu open

The client wants to use a mobile Hamburger Menu on Desktop view with a CTA Button next to the Menu icon. As the navigation is toggled the CTA changes color which is cool, however when hovering over it the font color is the same as the background and no longer visible. How can I target the color of the text on the open menu only? Thanks!

This is the custom code I have added: 

// Burger
.header .header-burger{
display:flex}
.header-nav, {
display:none}
.header--menu-open .header-menu {
opacity: .99; visibility: visible;}
.header .header-burger{
display:flex}

// burger menu thickness
.top-bun, .patty, .bottom-bun {
  height: 2px !important;
  border-radius: 5px;}

// CTA Color
.header-actions .btn {
  background: var(--primaryButtonBackgroundColor)!important;
  color: var(--primaryButtonTextColor)!important;
}
// CTA Hover
.header-actions .btn:hover {
  background: none!important;
  color: var(--secondaryButtonTextColor)!important;}


// CTA padding
.header-actions {
  padding-right: 25px;
  list-style: none!important; 
}

// CTA Menu open
@media screen and (min-width: 768px) {
.header-menu-cta {display: none;}
}

@media only screen and (min-width:768px) {.header-menu-nav-item a, .header-menu-actions.language-picker.language-picker-mobile {
  font-size: 3vmax;
  }}

If you share site url, we can check easier

https://raspberry-apple-wwrg.squarespace.com

@DavidHernandez To change the header CTA hover button text color when the hamburger menu is open, add this code under Website > Pages > Website Tools > Custom CSS.

#header .header-actions-action .sqs-button-element--primary:hover {
    color: #313532 !important;
}

I think the code should be

body.header--menu-open a.btn:hover {
    color: #313532 !important;
}