feat: #3617500 Match the header search to the Figma design system

Follows the Educare Figma design system for the header search, across the desktop header, the search bar and the mobile header.

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

What changed

• Desktop header shows the word Search beside the magnifier, via a new show_label prop on the Icon Toggle (default false, so nothing else changes).
• Search bar matches the design: bottom-only hairline rule, 42px row, small subtle placeholder, and a round accent disc for submit carrying a 16px magnifier and no visible text.
• Mobile header swaps the trigger glyph to a close mark when open, and the hamburger becomes an X when the menu is open.
• Every inline class="{{ …|join(' ') }}" in the component became a named *_attributes object, lazy-initialised, classes merged first, all declared in the docblock.
• The visible label and aria-label now swap together, so the announced name never disagrees with the visible one.

Tokens only: --bs-accent, $dark-border, $subtle-text, $font-size-sm, $line-height-base, $border-width, $border-radius-pill, $spacer, $h4-font-size, $body-color. No px literals, no new hex.

Verified in a real browser

On a fresh Varbase 11 install with this theme, computed values (not class names), 0 console errors at both viewports:

• desktop closed: label visible, icon 24px, gap 8px
• desktop open: border-bottom 1px solid rgb(64, 68, 86), row 42px, input 14px/21px, submit 32x32 pill, background-color rgb(255, 154, 82), icon 16px
• mobile: label hidden, trigger carries the close glyph, bar close button hidden

---

Checkpoints

• File an issue
• Addition/Change/Update/Fix
• Reviewed by a human
• Code review by maintainers

AI-Generated: Yes