/* .lang-switch: the NL/EN switch in the header. The current language is a
   dark pill like the current section; the other one a quiet link. */
@layer components {
  .lang-switch {
    display: flex;
    gap: var(--space-1);
    font-size: var(--text-small);
    line-height: var(--leading-small);

    & a {
      padding: var(--space-1) var(--space-2);
      border-radius: var(--radius-s);
      color: var(--color-muted);
      text-decoration: none;
      font-weight: 500;

      &:hover { background: var(--color-surface-2); color: var(--color-ink); }

      &[aria-current="true"] {
        background: var(--color-text);
        color: var(--color-surface);
      }
    }
  }
}