Fix the header search on tablet and phone, and keep the header on one row on desktop

Problem/Motivation

• 768: the header search button sits on top of the menu toggle (axe target-size, serious).
• 390: the open search field is mostly hidden behind the header, so typed text is not visible.
• Tablet and phone: the open search has no reachable close button (its X sat under the toggle).
• 992 to 1399: the menu wraps and Search drops to a second or third row.
• /search: the keyword field and Search button stack below 768, and the text button is 22 px tall on phones.

Steps to reproduce

Install Educare, open the front page at 390, 768 and 1200 wide, open the header search and type.

Proposed resolution

Follow the VBE Stylesheet navbar (header-mobile, header-desktop, menu-dropdown):

• The menu collapses into the toggle below 1200 (xl). The design has no tablet frame, so tablet uses the mobile variant.
• Header line below 1200: search and a bare X/hamburger, 24 px icons 24 px apart; the focus ring shows for keyboard focus only.
• Open menu below 1200: a full-height panel under the header, items at 32 px with a 48 px pitch, parents open their children inline. Focus moves into it, the page behind is inert and does not scroll, and Escape or the X closes it.
• Search below 1200: field and accent disc on one line, the header grows to hold it, and the search icon turns into the X. From 1200: one magnifier, an underline-only field and the X; 1200 to 1399 shows the icon without its label.
• Desktop dropdown: opens under the header with 240 px cards, 20 px titles and a navy underline on the open parent.
• /search: field and button share a row from 576 up; the button gets a 40 px tap target.

Remaining tasks

• ✅ File an issue
• ❌ Addition/Change/Update/Fix
• ❌ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support
• ➖ User Guide Documentation support
• ➖ UX/UI designer responsibilities
• ❌ Accessibility and Readability
• ❌ Reviewed by a human
• ❌ Code review by maintainers
• ❌ Full testing and approval
• ❌ Credit contributors
• ❌ Review with the product owner
• ❌ Update Release Notes
• ❌ Release
• ❌ Follow-up: header height and the phone side margin (header section config), desktop link size and gap, and the "Search by keyword..." placeholder still differ from the design.

User interface changes

• Before: at 768 the search icon sits on the toggle, at 390 the open field is behind the header, and from 992 to 1399 the header takes two or three rows.
• After: one header row at every width. Tablet and phone follow header-mobile, closed, with search open and with the menu open. Desktop follows header-desktop for the open search and the dropdown; the closed 1440 header is unchanged.

Release notes snippet

• Fixed the header search on tablet and phone, and kept the header on one row on desktop.