:root {
  --header-height: 56px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: var(--header-padding, 16px 24px);
  background: var(--header-bg, rgba(var(--color-rgb-white), 0.7));
  backdrop-filter: blur(10px);
  height: var(--header-height, 56px);
}

header nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

header nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--header-nav-list-gap, 4px);
  align-items: center;
}

header nav ul:nth-child(2) {
  justify-content: center;
}

header nav ul:nth-child(3) {
  justify-content: flex-end;
}

header nav ul li a {
  text-decoration: none;
  font-weight: var(--header-nav-link-font-weight, var(--font-weight-medium));
  font-size: var(--header-nav-link-font-size, var(--font-size-md));
  line-height: var(--header-nav-link-line-height, var(--line-height-md));
  color: var(--header-nav-link-color, var(--color-gray-950));
  padding: var(--header-nav-link-padding, 8px);
  border-radius: var(--header-nav-link-border-radius, 4px);
  white-space: nowrap;

  &:hover {
    text-decoration: underline;
  }

  &.active {
    background-color: var(--header-nav-link-active-bg, var(--color-gray-200));
    color: var(--header-nav-link-active-color, var(--color-gray-950));

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

@media (max-width: 768px) {
  header {
    padding-left: 16px;
    padding-right: 16px;
  }

  header nav ul:nth-child(2),
  header nav ul:nth-child(3) {
    display: none;
  }
}