Claro, Olivero and Umami hover/focus styles leak into the navigation

After investigation i found that not only Umami overrides styles of Navigation module, but also Claro and even Olivero sometimes. It's related to some global selectors which have bigger specificity than our global:

:where(.admin-toolbar) *:focus {
    outline: var(--admin-toolbar-size-focus) solid var(--admin-toolbar-color-focus);
}

Here is screenshot illustrating that styles from Claro theme are overriding :focus on logotype in navigation bar.

And now i think that having such selectors in user themes is a pretty popular thing:

a:focus {
    ... something like setting outline globally for all links ...
}

And now we can't guarantee themes will never override navigation module styles. So we have to increase specificity of our selectors. To be sure we are safe in terms of styles no matter which theme is used.

@finnsky suggested to go with this way https://developer.mozilla.org/en-US/docs/Web/CSS/@layer and i will try to implement it now

UPD:

Seems we can't go with @layer at-rules.

@layer is useful only when need to override user agent styles seems like. But any CSS property written by us (author styles) has bigger specificity than @layer's. Always. Which means if we will wrap some code in @layer - user themes will still override navigation module styles.

Will try to increase specificity of our selectors without @layer

Yes there are also other places where styles are getting overriden by umami. I agree with #2 and #3, we need to increase the specificity for selectors.
e.g: .toolbar-menu__link:hover to a.toolbar-menu__link:hover

Task is finished. Now Olivero, Claro and Umami are not overriding hover and focus styles of the navigation module

Merged, thank you!

Automatically closed - issue fixed for 2 weeks with no activity.