// JOA - Intro (Overview)

@import "../../base-shared";

$icon-width: rem(31px);
$icon-padding: $size-default;
$body-padding: $size-default;

.usajobs-joa-intro {
  @include clearfix();
  padding: $size-default;

  @include media($ML) {
    padding-left: 0;
    padding-right: 0;
  }
}

.usajobs-joa-intro--pilot {
  padding: 0;

  &__container {
    position: relative;

    @include media($L) {
      @include span-columns(7, 12);
    }
  }
}

.usajobs-joa-summary {
  margin-bottom: $size-M;

  @include media($L) {
    @include span-columns(8, 12);
    margin-bottom: 0;
  }

  &__list {
    @include unstyledList();
    @include clearfix();
    margin-bottom: $size-M;
  }

  &__list > &__item {
    @include media($ML) {
      @include span-columns(3, 6);
    }

    &:nth-child(2n) {
      @include media($ML) {
        @include omega();
      }
    }
  }

  &__label {
    font-size: $base-font-size;
  }

  &__value,
  &__grades,
  &__salary,
  &__series {
    margin-top: 0;
    margin-bottom: $size-base;
  }

  &__salary {
    text-transform: lowercase;
  }

  &__closing-clock--is-warning {
    color: $color-gold;
  }

  &__closing-clock--is-critical {
    color: $color-secondary-darkest;
  }

  &__posting-duration {
    display: block;
    font-size: $small-font-size;
  }

  &__summary {
    @include media($M) {
      @include span-columns(3, 6);
    }

    @include media($L) {
      @include span-columns(4, 12);
    }
  }
}

.usajobs-joa-summary--pilot {
  &__list > &__item {
    @include media($SM) {
      @include span-columns(1, 2);
    }

    @include media($M) {
      @include span-columns(3, 6);
    }

    @include media($L) {
      float: none;
      width: 100%;
    }

    &:nth-child(2n) {
      @include media($SM) {
        @include omega();
      }
    }
  }
}

.usajobs-joa-intro {
  &__details-container {
    @include media($M) {
      @include span-columns(3, 6);
    }

    @include media($L) {
      @include span-columns(8, 12);
    }
  }

  &__details {
    @include unstyledList();

    @include media($L) {
      @include span-columns(6, 12);
    }
  }
}

.usajobs-joa-aside {
  @include media($L) {
    @include span-columns(4, 12);
    @include omega();
    max-height: 65rem; // We need a max height (even though it isn't really "enforced" to keep from pushing the main section down)
  }
}

.usajobs-joa-intro-hiring-paths {
  padding: $size-default;
  background-color: $color-gray-cool-light;

  @include media($L) {
    @include span-columns(4, 12);
    @include omega();
  }

  &__section-title {
    margin-top: 0;
  }

  &__list {
    @include unstyledList();
  }

  &__icon {
    display: inline-block;
    text-align: center;
    margin-right: $size-base;

    svg {
      width: 3rem;
      height: 3rem;
      vertical-align: middle;
    }
  }

  &__item > &__link {
    width: 100%;
    padding: $size-S 0;
    color: $color-base;
    text-decoration: none;

    &:visited,
    &:active,
    &:hover {
      color: $color-base;
    }

    &:hover {
      text-decoration: none;
      box-shadow: $focus-shadow;
    }
  }

  &__body {
    padding: 0 0 0 $size-default;
  }

  &__title {
    margin: 0;
    color: $color-primary;
    text-decoration: underline;
  }

  &__detail,
  &__sublist-item {
    font-size: $small-font-size;
    margin: 0;
  }

  &__sublist {
    margin-bottom: 0;
  }
}

.usajobs-joa--v1-5__intro-hiring-paths,
.usajobs-joa--v1-6__intro-hiring-paths,
.usajobs-joa--v1-7__intro-hiring-paths {
  position: relative;

  @include media($L) {
    float: none;
    width: 100%;
    padding: $size-M $size-default $size-default;
  }
}

.usajobs-joa--v1-7-intro-hiring-paths {
  &__body {
    padding: 0 0 0 $size-base;
  }
}

.usajobs-joa-intro-hiring-paths--pilot {
  position: relative;
  background-color: #eff6fb; // This is blue-5 in the v2 of the Standards
  margin-top: $size-M;
  padding: $size-M;

  @include media($L) {
    float: none;
    width: 100%;
  }

  &__section-title {
    font-size: 1.5rem;
    font-weight: normal;
    letter-spacing: 0.3em;
    text-transform: uppercase;
  }

  &__list {
    @include row();
  }

  &__list > &__item {
    @include media($M) {
      @include span-columns(3, 6);

      &:nth-child(2n) {
        @include omega();
      }
    }
  }

  &__icon {
    margin-right: 0;
  }

  &__body {
    padding-left: $size-S;
  }
}

// Fix for documentation only
.main-content .usajobs-joa-intro-hiring-paths {
  .usajobs-joa-intro-hiring-paths__link {
    text-decoration: none;
  }
}

.no-flexbox .usajobs-joa-intro-hiring-paths {
  &__link {
    @include clearfix();
    display: table;
  }

  &__figure,
  &__body {
    display: table-cell;
  }

  &__body {
    @include calc(
      width,
      "100% - " ($icon-width + $icon-padding + $body-padding)
    );

    .lt-ie9 & {
      width: 75%;
    }
  }
}

.flexbox .usajobs-joa-intro-hiring-paths {
  &__link {
    display: flex;
    align-items: top;
  }

  &__figure {
    flex-shrink: 0;
  }

  &__body {
    flex: 1;
    min-width: 0;
  }

  // Added in v1-6
  &__explanation-text {
    margin-top: 0;
  }
}

.usajobs-joa-intro--v1-5,
.usajobs-joa-intro--v1-6,
.usajobs-joa-intro--v1-7 {
  padding-top: 0;

  @include media($L) {
    padding-bottom: 0;
  }

  &__container {
    position: relative;

    @include media($L) {
      @include span-columns(8, 12);
    }
  }
}

.usajobs-joa-overview {
  position: relative;
  background-color: $color-white;
  margin-bottom: $size-default;

  @include media($M) {
    padding: $size-default;
    @include boxShadow(1);
  }

  @include media($L) {
    padding: $size-M;
  }

  &__header {
    display: none;
    margin-top: 0;
    color: $color-primary-alt-darkest;

    @include media($M) {
      display: block;
    }
  }
}

.usajobs-joa-overview--pilot {
  @include media($L) {
    margin-top: $size-M;
    padding: 0 $size-default;
  }

  &__header {
    display: none;
    color: $color-primary-darkest;

    @include media($L) {
      display: block;
      padding-top: $size-base;
      border-top: 3px solid $color-primary-darkest;
    }
  }
}

.usajobs-joa-closing-types {
  padding: $size-S;
  font-size: $small-font-size;
  background-color: $color-gold-lighter;

  a,
  a:active,
  a:hover,
  a:visited {
    color: $color-base;
  }
}

.usajobs-joa-intro-second-announcement {
  position: relative;
  margin: $size-default 0;
  padding: $size-M $size-default $size-default;
  background-color: $color-white;

  &__item {
    padding: $size-base 0;
    color: $color-base;
    text-decoration: none;
  }

  &__link {
    display: block;
    margin-top: $size-S;

    &:hover {
      text-decoration: none;
      box-shadow: $focus-shadow;
    }
  }
}

// Fighting design standards specificity
.usajobs-joa-intro-second-announcement
  .usajobs-joa-intro-second-announcement__link {
  text-decoration: none;
}

.no-flexbox .usajobs-joa-intro-second-announcement {
  &__item {
    @include clearfix();
    display: table;
  }

  &__figure,
  &__body {
    display: table-cell;
  }

  &__body {
    @include calc(
      width,
      "100% - " ($icon-width + $icon-padding + $body-padding)
    );

    .lt-ie9 & {
      width: 75%;
    }
  }
}

.flexbox .usajobs-joa-intro-second-announcement {
  &__item {
    display: flex;
    align-items: top;
  }

  &__figure {
    flex-shrink: 0;
  }

  &__body {
    flex: 1;
    min-width: 0;
  }
}

// New Help section in JOA pilot
.usajobs-joa-help {
  display: block;
  margin: $size-S 0;
  padding: $size-default $size-default $size-default 0;

  @include media($L) {
    margin: $size-M 0;
    padding: $size-default;
  }

  &__link {
    @include permaLink();
    text-decoration: none;
  }

  &__figure {
    font-size: $h3-font-size;
    margin-right: $size-base;
  }

  &__body {
    text-decoration: underline;
  }
}

.flexbox .usajobs-joa-help {
  &__link {
    display: flex;
    align-items: center;
  }

  &__figure {
    flex-shrink: 0;
  }

  &__body {
    flex: 1;
    min-width: 0;
  }
}