/* recruit page */

// import global variables
@import "./variables.less";

// import partials
@import "./typed-terminal.less";
@import "./timeline.less";
@import "./cards.less";
@import "./chat.less";
@import "./collapses.less";
@import "./aside-menu.less";

@lineWidth: 1.9rem;
@contentMaxWidth: 980px;

.recruit {
  padding: calc(~"@{headerHeight} + 18px") @horizontalPadding;

  h2,
  h3,
  h4 {
    font-weight: 400;
    color: @titleColor;
  }

  .section {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
  }

  h2.title {
    display: inline-block;
    position: relative;
    margin: 0 auto 1.6rem;
    font-size: 1.1rem;

    &::before {
      content: " ";
      position: absolute;
      right: -2.5rem;
      top: 50%;
      transform: translateY(-50%);
      width: @lineWidth;
      height: 1px;
      background: black;
    }

    &::after {
      content: " ";
      position: absolute;
      left: -2.5rem;
      top: 50%;
      transform: translateY(-50%);
      width: @lineWidth;
      height: 1px;
      background: black;
    }
  }

  .desc {
    max-width: 38em;
    margin: 0 auto;
    font-size: 0.8rem;
    line-height: 1.7;
    text-align: center;
  }

  .logo-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: 100%;
    margin: 1em auto;
    padding: 0 1em;

    img {
      display: block;
      width: auto;
      height: 48px;
      margin: 1em;
    }
  }
}

.timeline-wrapper {
  position: relative;
  width: 85%;
  margin: 3em auto 2em;
}

.map-wrapper {
  width: 100%;
  margin: 2em auto 1em;

  text[href="http://simplemaps.com"] {
    font: 300 10px arial, sans-serif !important;
  }
}

.section-culture .cards {
  justify-content: center;
  align-items: stretch;
  margin: 0 auto;
}

.section-culture .card {
  width: 48%;
  max-width: 380px;
  margin: 20px 1%;
}

#positions-tabs,
#qa-tabs {
  width: 100%;
  margin: 0 auto;

  dt {
    position: relative;
    display: inline-block;
    width: auto;
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 0 12px;
    margin: 6px;
    background: @silverWhite;
    cursor: pointer;
    font-size: 15px;
    line-height: 1.8;
    color: @bannerBgColor;

    &.is-active {
      background: @bannerBgColor;
      color: white;
    }
  }

  & > dt.is-active::after {
    height: 0;
  }

  dd {
    border: 1px solid transparent;
    min-height: 360px;
  }
}

#positions-tabs {
  max-width: 1024px;
}

.timeline-wrapper,
.map-wrapper,
.logo-list,
.section-culture .cards {
  max-width: @contentMaxWidth;
}

#qa-tabs {
  max-width: 800px;
}

@media (max-width: 767px) {
  .section-culture .card {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 599px) {
  .recruit {
    .timeline-wrapper {
      width: 100%;
    }

    .map-wrapper {
      text[href="http://simplemaps.com"] {
        font: 300 8px arial, sans-serif !important;
      }
    }

    .logo-list {
      img {
        height: 36px;
      }
    }
  }

  #positions-tabs dt,
  #qa-tabs dt {
    font-size: 13px;
  }
}

@media (min-width: 600px) {
  #positions-tabs,
  #qa-tabs {
    dt {
      min-width: 10px;
    }
  }
}