Apply the second megamenu feedback round (develop)

[mlaetitia]

Related to #

Proposed changes

• Panel items now fill column one before column two, matching the order they are added in WP Admin. The walker emits one --megamenu-tracks custom property per panel and the stylesheet places the items.
• Featured image is 16:9, cropped with object-fit: cover.
• Menu items with a dropdown get a chevron, drawn as a masked inline SVG so it takes the link colour and rotates when the panel opens.
• Switching between panels is instant in both directions, so no frame is left with neither panel painted.
• Mobile: the logo keeps its stacking context while the menu closes, so the closing panel no longer paints over it.
• Mobile: the Get Involved button fades in and out with the panel instead of appearing at full opacity the moment the menu opens.

Why are these changes being made?

Second round of partner feedback on the mega menu. Five of the six items were code; the sixth, making Get Involved persistent in the mobile menu, is a menu setting and needed no change.

The column order was the substantive one. CSS grid cannot fill column one before column two without knowing the row count, and letting the featured card imply it made the card's height drive every row. The walker counts each panel's children once and hands the count to CSS, which keeps the layout in the stylesheet rather than stamping coordinates onto every list item.

Two flickers surfaced while testing. On desktop, hiding the outgoing panel instantly while the incoming one still faded in left roughly 200ms with the page showing through; both sides are now instant. On mobile, #227 gave the logo a z-index scoped to the open-menu class, but the panel keeps painting for 300ms after that class is dropped, so the fading panel covered the logo. The logo now holds its stacking context unconditionally.

Testing instructions

Above 1200px:

• Hover each top-level item with a dropdown. Items should read down column one, then down column two: About gives Mission & History / Team / Board of Directors / Programs, then Financials & Annual Reports / Sponsors / Logo & Trademark / Contact.
• Licensing has a featured card. Seven items split 4 and 3, with the card spanning the full panel height in a third column.
• Move between panels without leaving the menu. The swap should be clean, with no moment where the page shows through.
• Check the chevron rotates on open and follows the link colour.
• Add or remove an item in Appearance > Menus and confirm the columns rebalance.

Below 1200px:

• Open the menu, then close it, and watch the logo. Nothing should flash over it.
• Repeat after scrolling down the page, which is the case Keep the mobile menu closable when opened after scrolling (develop) #227 fixed.
• The Get Involved button should fade in with the panel and fade out with it, with white text on green.

Worth a pass in Safari and Firefox: the chevron uses a CSS mask, and the panel layout uses a custom property in repeat().

[nickvidal]

Thanks @mlaetitia for handling the column order. Have a wonderful weekend ahead of you!