/**
 * GSE Theme – Navigation
 * Fixed top nav: info bar (#info-header) + main menu (#nav-header).
 */
@import url("variables.css");

nav {
  display: block;
  width: calc(100vw - 0px);
  position: fixed;
  z-index: 10;
  transition: transform var(--transition-fast) ease;

  @media screen and (max-width: 500px) {
    &.scroll-active {
      transform: translateY(-55px);
    }
  }

  #info-header {
    background-color: var(--color-dark);
    color: var(--color-light-alt);
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px;

    .title {
      color: inherit;
      font-family: var(--font-serif);
      font-size: 30px;
      font-weight: var(--fw-light);

      @media screen and (max-width: 650px) {
        font-size: 25px;
      }
      @media screen and (max-width: 500px) {
        font-size: 15px;
      }
      @media screen and (max-width: 375px) {
        font-size: var(--fs-sm);
      }
    }

    .fill {
      flex-grow: 1;
    }

    .contact {
      color: var(--color-light);
      border-color: var(--color-light);
      display: flex;
      flex-direction: row;
      align-items: center;
      transition: color var(--transition-fast), border-color var(--transition-fast);

      &:not(:last-child) {
        margin-right: 40px;

        @media screen and (max-width: 1150px) {
          margin-right: 20px;
        }
      }

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

      .icon {
        margin-right: 5px;
        font-size: var(--fs-lg);
        width: 40px;
        height: 40px;
        border-width: 1px;
        border-style: solid;
        border-color: inherit;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .text {
        margin-left: 5px;
        padding-left: 5px;
        border-color: inherit;
        border-left-width: 1px;
        border-style: solid;
        font-size: var(--fs-sm);
        font-weight: var(--fw-light);

        @media screen and (max-width: 1150px) {
          display: none;
        }
      }
    }
  }

  #nav-header {
    border-bottom: 1px solid var(--color-dark);
    background-color: var(--color-light);
    color: var(--color-dark);
    opacity: var(--opacity-subtle);
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 500px) {
      height: initial;
      opacity: 1;
    }

    .link {
      display: flex;
      font-size: var(--fs-base);
      cursor: pointer;
      margin: 0px 20px;
      transition: border var(--transition-fast) linear;
      color: var(--color-dark);

      a {
        color: var(--color-dark);
      }

      a.info {
        padding-left: 5px;
        color: var(--color-yellow);

        &:hover {
          color: var(--color-near-black);
        }
      }

      .icon {
        padding-right: 5px;
      }

      @media screen and (max-width: 650px) {
        font-size: var(--fs-xs);

        .hide {
          display: none;
        }
      }

      @media screen and (max-width: 500px) {
        align-items: center;
        justify-content: center;
        flex-grow: 1;
        margin: 0px 0px;
        height: 40px;

        a .text,
        a .icon {
          color: var(--color-darker) !important;
        }
      }

      /* Each nav item carries one accent color, used for its mobile tile
         background, its icon and its hover underline. */
      &:nth-child(1) {
        @media screen and (max-width: 500px) {
          background-color: var(--color-teal);
        }
        .icon {
          color: var(--color-orange);
        }
        &:hover .text {
          border-top: 2px solid var(--color-orange);
          border-bottom: 2px solid var(--color-orange);
        }
      }
      &:nth-child(2) {
        @media screen and (max-width: 500px) {
          background-color: var(--color-green);
        }
        .icon {
          color: var(--color-yellow);
        }
        &:hover .text {
          border-top: 2px solid var(--color-yellow);
          border-bottom: 2px solid var(--color-yellow);
        }
      }
      &:nth-child(3) {
        @media screen and (max-width: 500px) {
          background-color: var(--color-yellow);
        }
        .icon {
          color: var(--color-green);
        }
        &:hover .text {
          border-top: 2px solid var(--color-green);
          border-bottom: 2px solid var(--color-green);
        }
      }
      &:nth-child(4) {
        @media screen and (max-width: 500px) {
          background-color: var(--color-orange);
        }
        .icon {
          color: var(--color-teal);
        }
        &:hover .text {
          border-top: 2px solid var(--color-teal);
          border-bottom: 2px solid var(--color-teal);
        }
      }
    }
  }
}