fix: #3631544 Fix the header search on tablet and phone, and keep the header on one row on desktop

Issue: https://www.drupal.org/project/vartheme_bs5_educare/issues/3631544

Follows the VBE Stylesheet navbar frames (header-mobile, header-desktop, menu-dropdown).

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

Checked in Chromium, Firefox and WebKit at 320 to 1440 with the keyboard; axe clean on the front page and /search. The closed 1440 header is pixel-identical.

Remaining (not theme): header height and phone side margin come from the header section config; desktop link size and gap, and the placeholder ellipsis, are left as they are.

AI-Generated: Yes

Checkpoints:

• File an issue
• Addition/Change/Update/Fix
• Testing to ensure no regression
• Automated unit testing coverage
• Automated functional testing coverage
• UX/UI designer responsibilities
• Readability
• Accessibility
• Performance
• Security
• Developer Documentation
• User Guide Documentation
• Reviewed by human
• Code review by maintainers
• Full testing and approval
• Credit contributors
• Review with the product owner
• Release notes snippet
• Release