/*************************
 # COMPONENT: SITE HEADER
 *************************/

.site-header {
  border-bottom: 3px solid var(--gray6);
}

.site-header__container {
  align-items: baseline;
  display: flex;
  gap: var(--space-l);

  .site-header__title {
    font-family: var(--font-family-heading);
    font-size: var(--text-l);
    font-weight: 600;
    letter-spacing: 0.05em;

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

  .site-header__nav {
    font-size: smaller;
    font-weight: normal;

    ul {
      display: flex;
      list-style: none;
      padding-inline: 0;

      li {
        margin: 0;
        padding: 0;
      }

      li:not(:last-child)::after {
        content: "•";
      }
    }
  }
}

.site-header__container,
.site-footer__container {
  /* Center the content and ensure a minimum margin. The calculation in the
   * second argument does what `auto` would do if it could be used in max(). */
  margin-inline: max(var(--space-s), 50% - var(--content-width) / 2);
  max-width: var(--content-width);
}