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

.site-header {
  --color-nav-separator: var(--gray6);

  font-family: var(--font-family-monospace);
  margin-block: var(--space-m) var(--space-xl);
}

@media (prefers-color-scheme: dark) {
  .site-header {
    --color-nav-separator: var(--gray4);
  }
}

.site-header__content {
  border-bottom: 2px dashed var(--gray6);
  gap: var(--space-l);
  padding-bottom: var(--space-xs);

  .site-header__title {
    color: var(--gray1);
    font-size: var(--text-m);
    font-weight: normal;
    letter-spacing: 0.05em;

    a {
      color: inherit;
    }

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

  .site-header__nav {
    font-size: var(--text-s);
    font-weight: normal;

    ul {
      --spacing: 1ch;

      display: flex;
      gap: var(--spacing);
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        margin: 0;
        padding: 0;
      }

      li:not(:first-child)::before {
        color: var(--color-nav-separator);
        content: ":";
        font-weight: bold;
        justify-content: center;
        margin-inline-end: var(--spacing);
      }
    }
  }
}