Lettre: Fix styling issues for top nav menu

[edanzer]

Changes proposed in this Pull Request:

• Reduces the font size of items in the nave menu. Among other things this fixes an issue with text for medium-to-longer page titles wrapping on small screens.
• Ensure wrapping text doesn't align left.
• Remove underline from :focus items. This was producing a situation where the first item in the menu was always underlined, even when it was not current.
• Add underline to current item. The current item in the menu will now be underlined.

Before

After

Related issue(s):

#7071
#7072

Testing instructions

1. Checkout this branch to your local WordPress instance.
2. Ensure you have multiple items on your menu, including one page with a long page title.
3. Confirm:
   • First item isn't always underlined by default
   • Current page is underlined
   • Font size is smaller
   • If longer item does wrap, it is still aligned right.

[simison]

Removing focus-underline so that wrong link isn't highlighted as "current" element could impact browsing the navigation with keyboard? Also weird how first element was focused when the navigation opens?

cc @scruffian hi! Is this something that should be improved in Gutenberg? (See PR description for screenshots)