/* The banner on every page: the LEITMOTIV wordmark, as on the public site. */
@layer components {
  .app-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--space-6);
    /* Line the wordmark up with the left edge of the main column. */
    padding-block: var(--space-4);
    padding-inline: max(var(--space-6), (100% - var(--width-page)) / 2 + var(--space-6));
    background: var(--color-surface);
    border-block-end: var(--border);
  }

  /* The main sections, right-aligned as on the public site. */
  .main-nav {
    margin-inline-start: auto;

    & ul {
      display: flex;
      gap: var(--space-2);
      list-style: none;
      padding: 0;
    }

    & li + li {
      margin: 0;
    }

    & a {
      display: block;
      padding: var(--space-2) var(--space-3);
      border-radius: var(--radius-s);
      font: var(--text-body-strong);
      color: var(--color-muted);
      text-decoration: none;

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

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

  /* Who is signed in, and the sign-out button, after the sections. */
  .app-header__user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    font: var(--text-body-strong);
    color: var(--color-muted);
  }

  .wordmark {
    font: var(--text-body-strong);
    font-size: 1.25rem;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-ink);

    &:hover {
      text-decoration: none;
    }
  }
}