/* The header's standing links — the page-to-page link and the language codes.

   Inverted against the page palette: the box takes the text colour and the
   label takes the background colour, so the pair follows whatever the editor
   sets. `line-height: 1` collapses the content box onto the type, which is what
   makes a single padding value read as equal space on all four sides — against
   the inherited 22px line height the box would carry extra room above and below
   that the sides do not have.

   Uppercasing is left to CSS rather than baked into the markup: the element
   keeps the real text — which for a language code is what `lang` and `hreflang`
   carry — and screen readers read that instead of spelling out an
   all-capitals string letter by letter.

   The labels are all capitals, so what has to look centred is the cap height,
   not the line box. In this face the capitals sit high in the box — far more
   room under the baseline than over the cap tops — so the vertical padding is
   uneven by that same amount. The values were measured off the rendered ink,
   not derived from the font's metrics, and centre the capitals to within half
   a pixel at both sizes.

   Padding is in `em`, so the box keeps its proportions at either size.

   On a phone the labels come out at 20px, under the 24px that would make them
   large text, so they are held to 4.5:1 like the body copy — and like it, fall
   just short of that on the editor-set palettes. */

.nav-link {
  display: inline-block;
  padding: 0.36em 0.4em 0.155em;
  font-size: calc(var(--fs-base) * 1.25);
  line-height: 1;
  text-transform: uppercase;
  color: var(--page-bg, var(--background));
  background-color: var(--page-fg, var(--foreground));
  /* The box is the affordance, so an underline would only double it up. */
  text-decoration: none;
}

/* Inverted back: the same two colours, swapped again. */
.nav-link:hover {
  color: var(--page-fg, var(--foreground));
  background-color: var(--page-bg, var(--background));
}

/* The sitewide ring is drawn in currentColor (base/reset.css), which here is
   the *background* colour — an invisible ring sitting on the page background.
   The foreground colour is the one that contrasts with what the ring is drawn
   on, so it is named explicitly. Under the pointer the two swap and
   currentColor would do, but a link can be hovered and focused at once, so the
   colour must not depend on which of the two is true. */
.nav-link:focus-visible {
  outline-color: var(--page-fg, var(--foreground));
}