header {
  width: 100%;
  border: unset;

  .head {
    display: grid;
    grid-template-columns: 8rem calc(100% - 28rem) 20rem;
    max-width: 72rem;
    padding: 2rem 4rem;
    margin: 0 auto;

    .logo {
      margin: .45rem .5rem .35rem;

      span {
        font-size: 2rem;
      }
    }

    .nav,
    .cta,
    .user {
      list-style-type: none;
      white-space: nowrap;
      padding: 0;
      margin: 0;
    }

    .nav {
      grid-column: 2;
      padding: 0 2rem;

      li {
        display: inline-block;
        
        a {
          display: inline-block;
          color: var(--ft-color);
          font-size: 1.1rem;
          font-weight: 500;
          padding: 0;
          margin: .75rem .5rem;
          
          &:hover {
            color: var(--f-color);
          }
        }

        .highlight {
          color: var(--f-color);
        }
      }
    }
    
    .cta {
      grid-column: 3;

      .pimary,
      .secondary {
        float: right;
        margin: 0;

        a {
          display: inline-block;
          font-size: 1.1rem;
          font-weight: 500;
          
          span {
            color: var(--fs-color);
            font-weight: 400;
          }
        }
      }
      
      .pimary a {
        color: var(--f-color);
        background: var(--btn-bg);
        font-size: 1rem;
        font-weight: 600;
        padding: .6rem .85rem;
        margin: .15rem 0 .15rem 1rem;
        border: .15rem solid var(--s-color);
        border-radius: var(--radius);
        text-align: center;
        cursor: pointer;

        &:hover {
          background: var(--btn-hover);
          border-color: var(--btn-hover);
        }
      }

      .secondary a {
        color: var(--ft-color);
        padding: 0;
        margin: .75rem 1.15rem .75rem 1.15rem;
        
        &:hover {
          color: var(--f-color);
          cursor: pointer;
        }
      }
    }

    /*
    .user {
      
      .avatar {
        position: relative;
        float: right;

        a {
          margin: 0;
        }

        .dropdown {
          position: absolute;
          top: 2.25rem;
          right: 0;
          display: none;
          padding: 1.25rem 0 0 0;
          z-index: 999;

          a {
            display: block;
          }

          &:hover {
            display: block;
          }

          .menu {
            width: 12rem;
            background: var(--b-color);
            padding: 1.25rem 1.5rem;
            border: .1rem solid var(--br-color);
            border-radius: var(--radius);

            a {
              display: block;
              width: fit-content;
              color: var(--fs-color);
              font-size: 1rem;
              font-weight: 600;
              padding: 0;
              margin: .5rem 0;

              &:hover {
                color: var(--w-color);
                cursor: pointer;
              }
            }

            hr {
              width: 100%;
              height: .1rem;
              color: var(--hr-color);
              background-color: var(--hr-color);
              border: none;
              padding: 0;
              margin: .75rem auto;
            }
          }
        }

        .username {
          float: right;
          color: var(--fs-color);
          font-size: 1.1rem;
          font-weight: 600;
          padding: 0 0 .75rem;
          margin: .75rem .5rem 0 .5rem;

          &:hover {
            color: var(--w-color);
          }

          &:hover ~ .dropdown {
            display: block;
          }
        }

        .img {
          float: right;
          height: 3rem;

          &:hover ~ .dropdown {
            display: block;
          }

          img {
            border-radius: 100%;
          }
        }
      }
    }
    */
  }

  /*
  .head.dashboard {
    grid-template-columns: 8rem calc(100% - 8rem);

    li {
      float: right;
      
      a {
        display: inline-block;
        color: var(--fs-color);
        font-size: 1.1rem;
        font-weight: 600;
        padding: 0;
        margin: .75rem .5rem;
        
        &:hover {
          color: var(--w-color);
        }
      }

      .highlight {
        color: var(--w-color);
      }
    }

    .user {
      grid-column: 2;
    }
  }
  */
}