Fix focus colour for footer links

[markconroy]

Closes #307

What does this change?

Sets the focus state for links in footer to be dark (on yellow) instead of white (on yellow)

[msayoung]

@markconroy - the link text is now invisble on hover ! :)

[markconroy]

@msayoung ready for another review.

[msayoung]

Really sorry @markconroy

This is better , but now when you focus and THEN hover the text returns to white on yellow.

Can we keep it black please?

[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?

[markconroy]

@msayoung any thoughts on my last comment above? I think we might need to merge this as is.

[msayoung]

@markconroy you can chain psuedo classes so in this case I think we'd want to go for:

.region-microsites-footer a:focus,
.region-microsites-footer a:hover:focus{
  color: var(--footer-link-focus-color);
}
                        
.region-microsites-footer a:hover {
  color: var(--footer-link-hover-color);
}

[markconroy]

@msayoung ready for a retest.