/* * pm-mega — the Products mega menu panel (WO-18). * * Source frame: docs/design/frames/18-mega-menu.json (node 55:862) — the * panel under the header band: inset 96 from both edges (not full bleed — * contradictions[0]), 8px below the bar, padding 48 / 80, gap 24, four * equal cards gap 8, each 266 × 478 at 1440 (measured.panel, * measured.panel.cards.card_box). * * Compiled to assets/css/components/mega-menu.css by src/build-tokens.mjs, * which substitutes the breakpoint markers (a comment holding `@bp `) * with the pixel value from tokens/tokens.json. Never type a breakpoint * width here. * * Every colour is a --pm-color-* token; spacing, motion and font values * come from tokens/tokens.json. No hex value and no literal breakpoint * width may appear in this file. The two values the token file does not * hold (the blurb's 16px body size, the eyebrow rule's 40 × 1) are typed * with a comment citing the extract — the same technique as the header's * 14px and the gallery card's 18px. * * The panel anchors to the header: .pm-header { position: relative } below * (WO-17's later position: fixed keeps the anchor). The card reuses the * .pm-gallery-card classes for image and caption so WO-12's CSS styles it — * mega-menu.php enqueues poortman-gallery-card alongside this file. * * Below the laptop breakpoint the panel is never rendered open (WO-18 AC 3): * every panel rule is scoped to laptop and above, the markup's hidden * attribute keeps it display: none, and the behaviour bails on matchMedia — * the mobile navigation (WO-19) owns products below this width. */ /* * The hidden attribute is the closed state. The UA stylesheet already * hides it; this explicit guard keeps the panel closed even under a * stylesheet that sets display on the panel's classes. */ .pm-mega[hidden] { display: none; } /* * The panel's positioning ancestor is the header band (WO-18 decision). * The panel renders inside the Products item (navigation.php, test round 1: * DOM-adjacent to the trigger for the keyboard's tab order), but no element * between the panel and the header is positioned, so the header is the * nearest positioned ancestor and top: calc(100% + 8px) is 8px below the * bar at every header variant and width. The overlay variant's own * position: absolute (header.css, WO-38) wins on the contact page by * specificity; the anchor is the same element either way. */ .pm-header { position: relative; } /* * The trigger (WO-18 AC 1, re-shaped by WO-83): the Products item IS this * button now — the walker writes chevron then label inside it, and no link * beside it (the user's ruling of 2026-09-21: with no products overview * page, the item navigates nowhere). The button is the item's flex row, so * WO-82's `li:has(> .pm-header__mega-toggle) { gap }` moved onto it and the * old `width: 16px` / `order: -1` (a chevron-only button ordered before the * link) went with them. * * Box model (WO-82 AC 1, unchanged): the frame's 32px row = the 16px line + * 2×8 block padding, centred in the 80px bar. The 4px chevron-to-label gap * is the language switcher's own (16-header.json#measured.right_cluster * .language) — no mega measurement exists for it. `font: inherit` — a *