@import "~@department-of-veterans-affairs/css-library/dist/tokens/scss/variables";

.arp-container {
  max-width: 984px;
  width: 100%;
  padding: 0 $vads-spacing-2;
  margin: 0 auto $vads-spacing-6;

  &:has(.poa-request) {
    margin: 0 auto 32px;
  }
}

.status {
  color: $vads-color-base;

  &--processing {
    background-color: $vads-color-gray-light-alt;
    border: 1px solid $vads-color-base-dark;
  }
  &--declination,
  &--expiration {
    background-color: $vads-color-error-lighter;
    border: 1px solid $vads-color-error;
  }
  &--pending {
    background-color: $vads-color-warning-lighter;
    border: 1px solid $vads-color-warning-darker;
  }
  &--acceptance {
    background-color: $vads-color-success-lighter;
    border: 1px solid $vads-color-success;
  }
}
.container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.arp-footer {
  background-color: var(--vads-color-primary-darker);
  padding: 30px 16px;
  width: 100%;

  &__container {
    max-width: 984px;
    margin: 0 auto 20px;
  }

  h3,
  h2 {
    margin: 0 0 16px 0;
  }
  .usa-grid-full {
    max-width: 984px;
  }
  .va-footer-links-bottom {
    padding: 0;
    max-width: 984px;
    ul {
      max-width: 720px;
      padding-bottom: 20px;
    }
  }

  a:hover {
    color: var(--vads-color-warning) !important;
  }

  p,
  p > a {
    font-family: $font-family-serif;
  }
}

// There is a div in content-build accredited-representative-portal.html that
// would require changes to platform code to remove. For now this scss hides it.
.arp-footer-hidden {
  display: none;
}

.home {
  -webkit-font-smoothing: antialiased;
  &__login {
    padding: 12px 20px;
    background-color: $vads-color-link;
    border-radius: 0.25rem;
    color: $vads-color-white !important;
    text-decoration: none;
    font-weight: 700;
    display: block;
    text-align: center;

    &:hover {
      background-color: $vads-color-primary-dark;
    }
  }
  &__container {
    max-width: 984px;
    margin: 0 auto;

    &--portal {
      padding-bottom: 56px !important;
    }

    .is--redesign & {
      max-width: 984px;
    }

    .home__full-width--portal & {
      display: flex;
      align-items: center;
      flex-direction: column-reverse;

      @media (min-width: $medium-screen) {
        padding: 0;
        flex-direction: row;
      }
      .is--redesign & {
        flex-direction: column;

        @media (min-width: $medium-screen) {
          flex-direction: row;
        }
      }
    }
  }
  &__hero {
    background-position: center;
    background: linear-gradient(
        0deg,
        rgba(0, 71, 149, 0.46),
        rgba(0, 71, 149, 0.46)
      ),
      url("../../../site/assets/img/arp-hp-hero.jpg");
    background-size: cover;
    background-position: center;

    &-container {
      max-width: 984px;
      margin: 0 auto;
      color: $vads-color-base-lightest;
      padding: 30px 16px;

      @media (min-width: $medium-screen) {
        padding: 72px 16px;

        .is--redesign & {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
    &-header {
      margin-bottom: 20px;
      color: $vads-color-white;
    }

    &-sub-header {
      font-size: 24px;
      font-family: $font-family-serif;

      &--login {
        margin-top: 0;
      }
    }

    &-bg {
      background-color: $vads-color-primary-dark;
      padding: 20px;
      border-radius: 8px;

      @media (min-width: $medium-screen) {
        max-width: 544px;
        padding: 50px;
      }

      &--login {
        background-color: $vads-color-white;
        color: $vads-color-base;
        width: 100%;
        padding: 30px;
        margin-top: 24px;

        @media (min-width: $medium-screen) {
          margin-top: 0;
        }
      }
    }
  }

  &__card {
    margin-left: 24px;
    max-width: 228px;
  }

  &__content {
    padding: 32px 16px;
    max-width: 732px;
    flex-direction: column;

    &.is--redesign & {
      padding: 0 16px;
    }

    &--portal {
      align-items: center;
      padding: 32px 16px;

      .is--redesign & {
        @media (min-width: $medium-screen) {
          padding: 0 16px !important;
        }
      }

      p {
        margin-top: 0;
      }
    }

    &--veteran {
      max-width: 780px;

      p {
        margin-top: 0;
      }
    }
    &--accreditation {
      align-items: center;
      justify-content: space-between;
      div {
        width: 100%;
        @media (min-width: $medium-screen) {
          width: 50%;

          &:last-child {
            width: 100%;
            max-width: 558px;
          }
        }
      }
      h2 {
        margin: 0;
      }
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      @media (min-width: $medium-screen) {
        flex-direction: row;
      }

      li {
        width: 100%;
        margin-bottom: 20px;

        @media (min-width: $medium-screen) {
          width: 228px;
          margin-left: 24px;
          margin-bottom: 0;
        }
      }
    }

    .is--redesign & {
      display: flex;
    }

    &--desktop-row {
      @media (min-width: $medium-screen) {
        flex-direction: row;
        max-width: 100%;
      }
    }

    @media (min-width: $medium-screen) {
      padding: 52px 16px;

      .is--redesign & {
        padding: 0;
      }
    }

    h2 {
      margin: 0 0 24px 0;

      .home__content--portal & {
        margin: 0;
        width: 228px;
      }
    }
    &-copy {
      margin-bottom: 32px;

      .is--redesign & {
        width: 100%;

        @media (min-width: $medium-screen) {
          width: 228px;
        }
      }
    }

    .vads-u-background-color--primary & {
      color: $vads-color-base-lightest;
    }
  }

  &__full-width {
    h3 {
      margin: 0 0 4px 0;
      padding-bottom: 8px;
    }

    &.is--small-padding {
      padding: 40px 0 !important;
    }

    .is--redesign & {
      @media (min-width: $medium-screen) {
        padding: 72px 0;
      }
    }
  }
  &__link {
    font-weight: 700;

    .vads-u-background-color--primary & {
      color: $vads-color-base-lightest;
    }

    &--email {
      word-break: break-all;
    }
  }

  &__overlay {
    position: relative;

    ~ div {
      @media (min-width: $medium-screen) {
        margin-left: 55px;
        width: 50%;
        padding: 60px 0;
      }
    }

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: rgba($vads-color-primary-dark, 0.46);
    }
  }

  &__sub-header {
    @media (min-width: $medium-screen) {
      font-size: 20px;

      &--login {
        font-size: 16.96px;
      }
    }
  }
  &__portal-img {
    width: 100%;
    max-width: 732px;

    @media (min-width: $medium-screen) {
      width: 464px;
      height: 340px;
    }

    &.is--left-img {
      padding: 40px 16px 24px 16px;
      @media (min-width: $medium-screen) {
        padding: 0;
        margin-right: 24px;
      }
    }
    &.is--right-img {
      padding: 40px 16px 24px 16px;
      @media (min-width: $medium-screen) {
        padding: 0;
        margin-left: 24px;
      }
    }
    .is--redesign & {
      @media (min-width: $medium-screen) {
        width: 564px;
        height: auto;
      }
    }
  }

  &__banner {
    &-email {
      margin-bottom: 0;
    }
  }
}

.hp {
  &__img {
    margin-bottom: 24px;
    @media (min-width: $tablet) {
      margin-bottom: 0;
    }
    .hp__content--get-started & {
      @media (min-width: $tablet) {
        padding: 0 24px 0 0;
      }

      @media (min-width: $small-desktop-screen) {
        padding: 0;
      }
    }

    .hp__content--improve & {
      @media (min-width: $tablet) {
        padding: 0 0 0 24px;
      }
      @media (min-width: $small-desktop-screen) {
        padding: 0;
      }
    }
    &--portal {
      @media (min-width: $small-desktop-screen) {
        .hp__content--improve & {
          margin-left: auto;
          display: flex;
        }
      }
    }
  }
  &__content {
    &--hero {
      @media (min-width: $tablet) {
        align-items: center;
      }
    }
    &--get-started {
      margin-bottom: 48px !important;
      align-items: center;
      @media (min-width: $small-desktop-screen) {
        margin-bottom: 72px !important;
      }

      div:nth-child(2) {
        @media (min-width: $small-desktop-screen) {
          margin-left: auto;
        }
      }

      .hp__copy {
        @media (min-width: $small-desktop-screen) {
          margin-left: auto;
          max-width: 396px;
        }
      }
      h2 {
        margin-top: 0;
      }
    }

    &--improve {
      align-items: center;
      @media (max-width: $tablet) {
        flex-direction: column-reverse;
      }
      @media (min-width: $tablet) {
        align-items: center;
      }
      div:nth-child(2) {
        @media (min-width: $small-desktop-screen) {
          margin-left: auto;
        }
      }

      .hp__copy {
        @media (min-width: $small-desktop-screen) {
          max-width: 396px;
        }
      }
      h2 {
        margin-top: 0;
      }
    }
    &--portal {
      div:first-child {
        align-self: center;
      }
      h2 {
        margin-top: 0;
      }
    }
    &--veteran {
      h2 {
        margin: 0 0 24px 0;
      }
    }

    &--accreditation {
      align-items: center;

      div:nth-child(2) {
        margin-left: auto;
      }
      h2 {
        margin-top: 0;
      }
    }
  }
  &__hero {
    background-position: center;
    background: linear-gradient(
        0deg,
        rgba(0, 71, 149, 0.46),
        rgba(0, 71, 149, 0.46)
      ),
      url("../../../site/assets/img/arp-hp-hero.jpg");
    background-size: cover;
    background-position: center;
    padding: 30px 0;

    @media (min-width: $medium-screen) {
      padding: 48px 30px;
    }

    @media (min-width: $small-desktop-screen) {
      padding: 72px 16px;
    }

    &-bg {
      background-color: $vads-color-primary-dark;
      padding: 20px;
      border-radius: 8px;
      @media (min-width: $medium-screen) {
        padding: 50px 16px;
      }

      @media (min-width: $small-desktop-screen) {
        padding: 50px 70px 50px 50px;
      }
    }
    &-header {
      margin-bottom: 20px;
      color: $vads-color-white;
    }

    &-sub-header {
      color: $vads-color-white;
      font-size: 24px;
      font-family: $font-family-serif;

      &--login {
        margin-top: 0;
      }
    }
  }
  &__container {
    padding: 40px 16px;
    .vads-grid-row {
      max-width: 984px;
      margin: 0 auto;
    }

    @media (min-width: $medium-screen) {
      padding: 48px 30px;
    }

    @media (min-width: $small-desktop-screen) {
      padding: 72px 16px;
    }

    &.is--lighter {
      background-color: $vads-color-primary-lighter;
    }
  }

  &__card {
    margin-bottom: 20px;
    display: flex;
    h3 {
      margin-top: 0;
    }
    &:last-child {
      @media (min-width: $tablet) {
        padding-right: 0;
      }
    }

    h3 {
      margin-top: 0;
    }

    @media (min-width: $tablet) {
      padding-right: 20px;
      margin-bottom: 0;
    }

    @media (min-width: $small-desktop-screen) {
      padding: 0 0 0 24px;
    }

    &:first-child {
      padding: 0;
    }
  }
}
.is--login {
  margin-left: auto;
}
.is--sm-padding {
  @media (min-width: $small-desktop-screen) {
    padding: 40px 16px;
  }
}
.arp-full-width-alert {
  width: 100%;

  &__questions {
    font-weight: 700;
  }
}

.poa-requests-page-table-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.limitations-row {
  display: flex;
  align-items: center;
  gap: 8px;

  &__warning-icon {
    color: var(--vads-color-action-focus-on-light);
  }
}

.relationship-row {
  display: block;
  font-size: 14px;
  line-height: 1;
}

.arp-full-width-alert {
  width: 100%;

  &__questions {
    font-weight: 700;
  }
}

.mobile {
  @media (min-width: $medium-screen) {
    display: none !important;
  }
}
.desktop {
  @media (max-width: $medium-screen) {
    display: none !important;
  }
}

#poa-request__search-form {
  margin-bottom: 0;
  .poa-request-search__form-buttons-container {
    display: inline-block;
    margin-top: 24px;
    margin-bottom: 0;
  }
  .poa-request-search__form-submit {
    height: 40px;
  }
  .poa-request-search__form-reset {
    padding-top: 7px;
    height: 40px;
  }
}
.poa-search {
  max-width: 627px;
  margin-bottom: 20px;
  width: 100%;
}
.yellow-warning {
  color: var(--vads-color-warning-dark);
}
hr.claimant-search {
  border-color: var(--vads-color-base-light);
  border-bottom: 0px;
  margin: 16px 0;
}
h2.claimant-name {
  margin-bottom: 5px;
  margin-top: 24px;
}
.poa-status-cta {
  margin-bottom: 16px;
}

.login {
  button {
    width: 100% !important;
    max-width: 330px !important;
    padding: 0.75em;
    font-size: 16px;
    margin: 1em 0;
    white-space: normal !important;

    &::before {
      display: none;
    }

    img {
      height: 1em;
      padding: 0 0.25em;
    }
  }
}

.arp__home__link--learn-more {
  margin-bottom: 24px;
  display: block;
}

.arp__home__link--watch-video {
  margin-bottom: 24px;
  display: block;
}

.arp__landing__card-body {
  margin: 0;
}
