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

:root {
  --site-header-footer-border-color: light-dark(var(--gray6), var(--gray4));
  --site-header-footer-nav-separator: var(--site-header-footer-border-color);
}


.site-header {
  font-family: var(--font-family-monospace);
  margin-block: var(--space-m) var(--space-xl);
}


.site-header__content {
  border-bottom: 2px dashed var(--site-header-footer-border-color);
  gap: var(--space-l);
  grid-column: main-start / main-end;
  padding-bottom: var(--space-xs);

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

    a {
      color: inherit;
    }

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


.site-nav {
  font-size: var(--text-m);
  font-weight: normal;

  ul {
    --spacing: 2ch;

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

    .site-nav__item {
      margin: 0;
      padding: 0;
    }

    .site-nav__item::after {
      color: var(--site-header-footer-nav-separator);
      justify-content: center;
    }

    :is(.site-nav__item, .site-nav__item--dir)::after {
      content: "/";
    }

    .site-nav__item--file::after {
      content: "*";
    }
  }
}

@media screen and (max-width: 480px) {
  .site-header__content {
    grid-column: full-start / full-end;
    padding-inline: var(--gutter-width);
  }
}





/*************************
 * COMPONENT: SITE FOOTER
 *************************/

.site-footer {
  border-top: 2px dashed var(--site-header-footer-border-color);
  color: var(--text-color-secondary);
  font-size: var(--text-s);
  grid-column: main-start / main-end;
  margin-block: var(--space-xl) var(--space-m);
  padding-block-start: var(--space-s);
}

@media screen and (max-width: 480px) {
  .site-footer {
    grid-column: full-start / full-end;
    padding-inline: var(--gutter-width);
  }
}