fix: stop the navbar shifting when the active link goes bold

[magnus-madsen]

The active nav link carries fw-bold, and Open Sans 700 glyphs are wider than 400, so the current page's <li> grows a few pixels and every item after it slides right.

The fix mirrors the transparent border-bottom one rule above it, which already prevents the same shift on the vertical axis: reserve the widest state on every item. Each link now renders an invisible bold copy of its own label via ::after, so its width is the bold width in both states.

• visibility: hidden is the load-bearing part — it keeps the duplicated text out of the accessibility tree, so the link is still announced once. height: 0 alone would hide it from the eye but not from a screen reader.
• The pseudo-element is not in the DOM, so the served HTML, copy/paste, find-in-page, and crawlers all see each label exactly once.
• Scoped to the existing @media (min-width: 992px) block: in the collapsed menu the links stack full-width and there is nothing to shift.

Letting the browser measure it avoids hard-coding nine per-item widths, which would drift silently the next time a label is renamed or one is added.

🤖 Generated with Claude Code