header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: var(--z-header);
  background-color: #FFFFFF;

  .header-inner {
    width: 100%;
    max-width: var(--layout-max-width);
    padding-inline: var(--layout-inline-padding);
    margin: 0 auto;
  }

  nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--layout-header-height);

    .nav-group {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: auto;
      height: 100%;
      & > a {
        display: block;
        margin: 0 var(--space-4);
      }
      &.primary > a {
        font-size: var(--font-size-2);
        line-height: var(--line-height-body-trimmed);
        color: var(--color-black);
        text-decoration: none;
        white-space: nowrap;
        transform: translateY(-1px);
        transition: color var(--motion-duration-standard) var(--motion-ease-standard);
        &:hover {
          color: var(--color-text-primary-hover);
        }
      }
      &.secondary > a.icon {
        position: relative;
        width: 14px;
        height: 14px;
        &:hover {
          stroke: var(--color-text-primary-hover);
        }
        svg {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  #maharam-logo {
    display: block;
    margin: 0;
    transition: fill var(--motion-duration-standard) var(--motion-ease-standard);
    &:hover {
      fill: var(--color-text-primary-hover);
    }
    svg {
      display: block;
      width: auto;
      height: 16.75px;
      transform: translateY(-3px);
    }
  }

}