Keep the mobile menu closable when opened after scrolling (develop)

[mlaetitia]

Related to T51ENG-2081

Proposed changes

• Pin the header while the mobile menu is open, instead of leaving it to position: sticky, so the logo row and the Close button stay on screen
• Offset the pinned header by the admin bar height when the admin bar is present
• Hold the header's height on the wrapper while the menu is open, so taking the header out of the flow cannot shift the page's scroll position

Why are these changes being made?

• Opening the mobile menu after scrolling down left no way to close it. The scroll lock sets overflow: hidden on html, which drops sticky positioning and strands .header-main at its static offset near the top of the document. The fixed white bar behind the logo row still painted, so the header read as blank.
• A pinned header leaves the flow and shortens the page by its own height. Opening the menu within a header's height of the bottom made the browser clamp the scroll position, and closing the menu did not restore it. The wrapper padding keeps the page the same height either way.

Testing instructions

• On a phone-width viewport, scroll a few hundred pixels down any page, then open the menu. The logo, search, and Close button should sit at the top of the screen and the menu should close.
• Open the menu at the very top of the page and confirm nothing changed.
• Scroll to the very bottom of a page, open the menu, close it, and confirm the page has not moved.
• Log in and repeat with the admin bar showing: the header should sit below the bar, not under it.
• Open the menu on a page where the menu itself scrolls, scroll inside it, and confirm the items pass behind the header rather than over it.