header.old {
  --logo-height: 3.75rem;

  .hmn-logo {
    height: var(--logo-height);
    width: 100%;
    text-transform: uppercase;
    font-family: 'MohaveHMN', sans-serif;
    font-size: 2rem;

    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;

    &.big {
      @media screen and (min-width: 35em) {
        width: 11.25rem;
      }
    }

    &.small {
      @media screen and (min-width: 35em) {
        width: var(--logo-height);
        padding: 0.8rem;
        text-align: justify;
        text-align-last: justify;
        text-justify: inter-character;
        flex-direction: column;
        font-size: 1rem;
        line-height: 1em;
        align-items: stretch;
      }
    }
  }

  .items {
    position: relative;
    /* will be used on mobile, when .root-item is not relative */
  }

  .root-item {
    @media screen and (min-width: 35em) {
      & {
        position: relative;
        /* makes submenus align to this item instead of the screen */
        height: var(--logo-height);
      }
    }

    &:not(:hover):not(.clicked)>.submenu {
      display: none;
    }

    &.clicked .svgicon {
      transform: rotate(180deg);
    }

    >a {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-weight: bold;
    }

    .svgicon {
      font-size: 0.7em;
    }
  }

  &:not(.clicked) .root-item:not(:hover),
  &.clicked .root-item:not(.clicked) {
    >.submenu {
      display: none;
    }
  }

  .submenu {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 100;
    min-width: 10rem;
    border-top-style: solid;
    border-bottom-style: solid;

    @media screen and (min-width: 35em) {
      & {
        border-top-style: none;
        border-left-style: solid;
        border-right-style: solid;
        left: initial;
        right: initial;
      }
    }

    >a {
      display: block;
      white-space: nowrap;
      z-index: 1;
      font-weight: bold;
      text-align: center;

      @media screen and (min-width: 35em) {
        & {
          text-align: left;
        }
      }
    }
  }
}

header {
  --bg-header: var(--c3);
  --border-header: 1px;

  background-color: var(--bg-header);
  border-bottom-style: solid;
  border-bottom-width: var(--border-header);

  .hmn-logo {
    font-family: 'MohaveHMN', sans-serif;
    text-transform: uppercase;
    font-size: 1.6rem;
    padding: 0.6rem 0.8rem;
    line-height: 1;
  }

  .menu-chevron {
    /* ensure that it also has .svgicon */
    display: inline-block;
    margin-left: var(--spacing-1);
  }

  .avatar {
    width: 1.8rem;
    height: 1.8rem;
  }

  .header-nav {

    >a,
    >.root-item>a {
      display: block;
      padding: var(--spacing-3);
    }
  }

  .root-item {
    position: relative;
  }

  .submenu {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 100;
    min-width: 8rem;
    background-color: var(--bg-header);
    border-style: solid;
    border-width: var(--border-header);
    border-top-width: 0;
    top: 100%;

    >a {
      padding: var(--spacing-2) var(--spacing-3);
      display: block;
      white-space: nowrap;
      z-index: 1;
    }
  }

  .root-item {
    &:not(:hover):not(.clicked)>.submenu {
      display: none;
    }

    &.clicked .svgicon {
      transform: rotate(180deg);
    }
  }

  &:not(.clicked) .root-item:not(:hover),
  &.clicked .root-item:not(.clicked) {
    >.submenu {
      display: none;
    }
  }
}

.header-transparent {
  header {
    --bg-header: rgba(0, 0, 0, 0.4);
    --border-header: 0;
    --color: #fff;
  }
}