/* * Mega Menu (Tuotteet) — Sprint 2. Loads after header-footer.css. Desktop * only (>=1024px) — .site-nav itself is already hidden below that * breakpoint (header-footer.css), and mobile navigation is untouched by * this file entirely (the mobile nav loop in site-header.php never calls * hitsiaijat_render_mega_menu_trigger()). * * No-JS / no-desktop baseline: the markup from inc/mega-menu.php has no * `hidden` attribute, so it's a normal in-flow list of real category links * by default — same progressive-enhancement contract already used for * .mobile-nav / .site-header__search in header-footer.css. Only once `.js` * is on (added by navigation.js, guaranteed to run first — see * inc/enqueue.php's script dependency) does this become an absolutely * positioned, hidden-until-opened dropdown. * * Every value below is an existing token from tokens.css — no new colors, * shadows, radii, fonts, or container sizes. `--z-dropdown` was already * reserved for exactly this use (DOCX 4.5) and previously unused. */ .site-nav__mega-group { display: inline-flex; align-items: center; gap: var(--space-1); } /* Pre-existing bug found during this redesign's visual verification, fixed here as a direct blocker (not baseline noise — see the task's own allowance to touch header-footer.css "at proven necessity", and this is the smaller, safer fix that doesn't even require touching that file): header-footer.css's Header v2 dark-bar treatment sets `.site-header__bar .site-nav__list a { color: var(--color-text-on-dark) }` (specificity 0,2,1) so the three TOP-LEVEL nav links read white against the dark bar. That descendant selector has no way to distinguish "a direct nav link" from "a link nested inside the mega menu panel, many levels down" — .mega-menu is itself inside .site-nav__list in the DOM, so every link inside it (column titles, categories, grandchildren) silently inherited that same white color against this panel's own light (--color-bg-surface) background, making all of it invisible. #hitsiaijat-mega-menu is the panel's own existing, real id (see inc/mega-menu.php) — an ID selector (specificity 1,0,0) beats the offending rule outright, regardless of source order, without needing the "duplicate a class to bump specificity" trick used elsewhere in this codebase (see catalog.css's own comment on that pattern). */ #hitsiaijat-mega-menu a { color: var(--color-text-default); } /* Focus-visible fix (component-scoped, Option A): every real inside the panel (column titles, sublist links, view-all) is plain-classed or unclassed, so Astra's bare a:focus-visible (0,1,1) otherwise wins dotted/1px. The ID here already beats Astra's specificity outright, so one rule covers all three link types without repeating the fix per sub-selector. */ #hitsiaijat-mega-menu a:focus-visible { outline: var(--border-width-active) solid var(--color-industrial-900); outline-offset: 2px; } /* Navigation v2.2: single unified control replacing the old separate "$nav_item link + square chevron button" pair (inc/mega-menu.php). Reuses the one existing filled-blue-button treatment in this codebase (header-footer.css's `.site-header .icon-button.site-header__nav-toggle`, --color-brand-blue-600 + --color-text-on-dark) rather than inventing a second blue — this is now that token's second, deliberate use, still scoped to real button-style controls only, not a general nav color. Base sizing/spacing mirrors components.css's `.btn` (min-height --touch-target-min, --radius-control, --space-2 gap) without adding that class to the markup, so this stays independent of `.btn`'s other variants and their focus/disabled states. */ .site-nav__mega-trigger { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target-min); padding-inline: var(--space-4); background-color: var(--color-brand-blue-600); color: var(--color-text-on-dark); border: none; border-radius: var(--radius-control); font-family: var(--font-body); font-weight: 600; font-size: var(--text-button-size); cursor: pointer; } .site-nav__mega-trigger:hover { background-color: var(--color-brand-blue-700); /* one step darker than --color-brand-blue-600, same relationship .btn--brand:hover has to .btn--brand */ } /* Focus-visible fix (component-scoped, Option A): real