// JOA - Banner

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

.usajobs-joa-banner {
  background-color: $color-primary-alt-darkest;

  &__body {
    max-width: $site-max-width;
    margin-left: auto;
    margin-right: auto;
    padding: $size-default;

    @include media($ML) {
      padding-left: $size-M; // to align with current non-full-bleed header
      padding-right: $size-M; // to align with current non-full-bleed header
    }
  }

  &__title {
    @include h2();
    margin: 0 0 $size-base 0;
    color: $color-white;

    @include media($ML) {
      @include h1();
      margin: 0;
      color: $color-white;
    }
  }

  &__dept {
    margin-top: $size-S;
    text-transform: uppercase;
    font-weight: normal;
    color: $color-white;
  }

  &__agency {
    @include h4();
    display: block;
    margin: 0 0 $size-default 0;
    font-weight: normal;
    color: $color-white;

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

.usajobs-joa-banner--v1-3 {
  &__agency {
    margin-bottom: $size-S;
  }
}

.usajobs-joa-banner--pilot {
  margin-bottom: $size-SM;
  background-color: $color-primary-darkest;

  @include media($M) {
    margin-bottom: 0;
  }

  &__body {
    @include media($ML) {
      padding-bottom: $size-M;
    }
  }

  &__agency {
    display: block;
    margin: 0;
    padding: $size-base 0;
    text-transform: initial;
  }

  &__dept {
    margin-bottom: 0;
  }
}