Make navigation links turn red upon hovering

Greetings,

I hope to get my navigation menu text to turn red when hovered over. I have some other CSS running that may conflict with the code I tried. The site can be found here:

https://emu-caribou-zf2g.squarespace.com/

Password: catbird

And here is the CSS I currently have added:

.header-burger { display:flex!important}
.header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;}
.header-nav, .header-actions {visibility:hidden!important}
.header-menu-nav-item {line-height: 25px!important;}

/* Navigation Font Size */
.header-menu-nav-item a {
  font-size: 20px !important;
}

/* Hide 'View Event' button */
a.eventlist-button.sqs-editable-button.sqs-button-element--primary {
  display: none;
}
/* desktop menu spacing */
@media screen and (min-width:768px) {
.container.header-menu-nav-item a {
    margin-top: 15px;
    margin-bottom: 15px;
}
}
/* Hamburger Hover Color */
.burger-inner:hover .top-bun, .burger-inner:hover .patty, .burger-inner:hover .bottom-bun
{background-color:red !important;}

/* Nav item hover color */
.header-nav-item a:hover {
    color: red !important;
}

Thanks for any insight here!

Brilliant, thank you MayaViolet!