Fix focus link colour for mobile menu

[markconroy]

Closes #306

Sets focus colour for mobile menu items to dark (on yellow) instead of white (on yellow).

[msayoung]

This does fix the focus, but it's now black on black on hover.
I think we need to set a specfiic focus colour alongside the focus background colour rather than reusing the hover variable?

[markconroy]

Whaaaaat? How did I miss that. I'll get it sorted.

[markconroy]

Ready again @msayoung

[msayoung]

better, but the text is now white on yellow when focus and hover are applied.

[markconroy]

@msayoung I'm not sure this is fixable.

I'm not aware of a CSS property for "do this when hovered and focussed at the same time", I think we've only got :hover and :focus, unless we put !important perhaps on the :hover state?

[msayoung]

@markconroy this should do it:

.off-canvas a:focus,
.off-canvas a:focus:hover {
  color: var(--off-canvas-link-focus-color);
}

.off-canvas a:hover {
  color: var(--off-canvas-link-hover-color);
}

[markconroy]

I'm about to test this, and then go a a bottle of champagne if it works. I never even thought of the idea of :focus:hover, sooo clever.

[markconroy]

@msayoung You're a genius. It works. Let's get this approved