/* The banner and the menu under it. */
@layer components {
  .banner {
    width: 100%;
    height: auto;
  }

  .site-nav {
    --cluster-space: var(--space-1) var(--space-3);

    padding: var(--space-2) var(--gutter);
    background-color: var(--color-surface);

    & a {
      color: var(--color-nav-link);

      &:hover,
      &[aria-current] {
        color: var(--color-nav-link-current);
      }
    }
  }

  .site-nav__brand {
    font-size: var(--font-size-md);
    margin-inline-end: var(--space-2);

    .site-nav &,
    .site-nav &:hover {
      color: var(--color-nav-link-current);
    }
  }
}