Button text is dark after clicking a club category filter on Affiliated Clubs page

[sunnwydays]

If you try to filter clubs by category on the Affiliated Clubs page, the category name on the button becomes dark with poor contrast against the selected button background until you click elsewhere, after which it will turn white.

I tried changing this block to be more specific and have the styles marked as important, but it only made the buttons no longer change colour on selection.

<style>
.category-button.is-vp-academic {
  background-color: var(--vp-academic-color, #003366);
  color: white;
}
</style>

to this:

<style>
/* Adding .button makes this more specific than the library's default */
.button.category-button.is-selected {
  background-color: var(--vp-academic-color, #003366) !important;
  color: white !important;
}

/* Ensure it stays white even if the mouse is hovering or the button is focused */
.button.category-button.is-selected:hover,
.button.category-button.is-selected:focus {
  color: white !important;
  background-color: var(--vp-academic-color, #003366) !important;
}
</style>