Handle sticky position with focus inside

[gfellerph]

          This is a good idea, but it leaves us with the issue that the controls are still focusable. Earlier, I was thinking that we should not make them focusable by hiding them with `display: none`, but that leaves us with the issue that we don't know what to do with these controls when they are only partially visible.

I think a better idea would be to only apply the sticky behaviour when the focus is not inside the global navigation. When the page is scrolled, header is sticky, and the user navigates to the language switch via keyboard, we should show the header in full to make sure everything is properly visible. I think that could be done through CSS alone, making it more reliable.

.global-nav:focus-within {
  // Reset all sticky styles
}

// Or the opposite
.global-nav:not(:focus-within) {
  // Sticky styles
}

Originally posted by @gfellerph in #4767 (comment)

Since we're using position: sticky on the .global-header and on the .local-header elements, we can simply override the point, when they get sticky to inset-block-start: 0px for the .global-header and inset-block-start: var(--global-header-height) for the .local-header element to show them as if we were scrolling to the top.

[gfellerph]

:has(.global-sub:focus-within),
:has(.local-sub:focus-within) {
--show-header-full: 0;
}