@import "~@department-of-veterans-affairs/css-library/dist/tokens/scss/variables";
@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-process-list";
@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-form-process";
@import "../../../../platform/forms/sass/m-schemaform";
@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-modal";
@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-omb-info";
@import "../../../../platform/forms/sass/m-form-confirmation";
@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/mixins";

.container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.arp-footer {
  background-color: var(--vads-color-primary-darker);
  min-width: 100%;

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

// 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;
}

.header {
  min-height: auto;
  -webkit-font-smoothing: antialiased;

  &__govt-site {
    width: 100%;
    padding: 8px 16px;
    max-width: 960px;
    @media (min-width: $medium-screen) {
      margin: 0 auto;
      padding: 4px 16px;
      align-items: center;
    }

    &-explanation {
      flex-direction: column;
      font-size: 12.8px;
      line-height: 14.08px;

      @media (min-width: $medium-screen) {
        flex-direction: row;
        margin: 4px 0 4px 8px;
      }

      &-sub-text {
        text-decoration: underline;
        display: flex;
        @media (min-width: $medium-screen) {
          margin-left: 8px;
        }
      }
    }
  }

  &__flag {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    @media (min-width: $medium-screen) {
      margin: 4px 0;
    }
  }
}
.user-nav {
  margin-left: auto;

  &__chevron {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
}
.nav {
  flex-wrap: wrap;
  border-bottom: 2px solid $vads-color-primary-darker;

  &:has(.nav__container-secondary) {
    border-bottom: none;
  }

  &__container-primary {
    padding: 8px 16px;
    @media (min-width: $medium-screen) {
      padding: 20px 16px;
    }
  }
  &__container-secondary {
    background-color: var(--vads-color-primary-darker);
  }

  &__sign-in {
    margin-left: auto;
  }

  &__user-list {
    list-style: none;
    margin: 0;
    padding: 0 16px;

    li {
      border-bottom: 4px solid $vads-color-white;
      padding: 16px 0;

      &:first-child {
        border: none;
        margin-bottom: 0;
      }
    }

    a {
      width: max-content;
      text-decoration: none;
      .nav__full-width & {
        font-weight: 700;
      }
    }
  }

  &__user-btn {
    width: max-content;
    &-icon {
      margin-left: 8px;
      visibility: visible;
    }
  }

  &__container {
    width: 100%;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 960px;
    align-items: center;
    flex-wrap: nowrap;
  }

  &__decorator {
    display: none;
    width: 100%;
    height: 1px;
    background-color: var(--vads-color-white);
    margin-bottom: 48px;

    &--login {
      margin: 0 auto !important;
    }

    @media (min-width: $medium-screen) {
      display: flex;
      max-width: 960px;
      margin: 0 auto 48px;
    }
  }

  &__btn {
    background-color: $vads-color-primary;
    color: $vads-color-white;
    padding: 12px 20px;
    font-weight: 700;
    text-decoration: none;
    height: 40px;
    display: flex;
    align-items: center;
    margin-left: auto;

    &.is--sign-in {
      border-radius: 4px;
      padding: 12px;
      width: 90px;
      justify-content: center;

      &:hover,
      &:focus {
        text-decoration: none;
        background-color: $vads-color-primary-darker !important;
      }
    }

    &.is--menu {
      padding: 10px 12px;
      margin-right: 0;
      max-width: 85px;
      font-size: 16px;
    }

    &.is--open {
      margin: 0;
      padding-bottom: 8.4px;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
      padding: 10px 12px;
      margin-right: 0;
      max-width: 85px;

      &::after {
        content: "";
        background-color: $vads-color-primary;
        height: 16px;
        width: 85px;
        position: absolute;
        bottom: -15px;
        left: 0;
      }
    }
    &:visited {
      color: $vads-color-white;
    }

    &:hover {
      background-color: $vads-color-white;
      color: $vads-color-primary;
    }

    &--user {
      background-color: transparent;
      margin-right: 0;
      [icon="account_circle"] {
        svg {
          width: 22px;
          height: 22px;
        }
      }
      &:hover {
        background-color: transparent !important;
        border-radius: 0;

        @media (min-width: $medium-screen) {
          background-color: $vads-color-primary !important;
          color: $vads-color-white !important;
        }
      }

      &:focus {
        .user-nav__chevron {
          transform: rotate(90deg);
        }
      }

      &-name {
        margin: 0 4px;
        > span {
          text-transform: lowercase;
          display: inline-block;
          &:first-letter {
            text-transform: uppercase;
          }
        }
      }
    }

    .nav__container-primary & {
      &:hover {
        background-color: $vads-color-primary;
        color: $vads-color-white;
      }
    }

    .nav__container-secondary & {
      background-color: var(--vads-color-primary-darker);
      margin-left: unset;
      padding: 24px 16px;
      &:hover {
        background-color: $vads-color-primary;
        color: $vads-color-white;
        text-decoration: none;
      }
    }
  }

  &__link {
    align-items: center;
    text-decoration: none;
  }
  &__logo {
    height: 24px;
    margin-right: 10px;

    &--desktop {
      height: auto;
      width: 428px;
    }

    &-text {
      display: flex;
      flex-wrap: wrap;
      width: 40%;
      color: var(--vads-color-base);
      line-height: 15.08px;
      font-size: 12px;
    }
  }

  &__dropdown {
    width: 174px;
    padding: 0;

    .nav__full-width & {
      position: fixed;
      left: 0;
      right: 0;
      background-color: $vads-color-primary;
      color: $vads-color-white;
      margin-top: 7px;
    }

    .nav__user-menu & {
      right: 0;
    }
  }

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

.home {
  -webkit-font-smoothing: antialiased;

  &__container {
    max-width: 960px;
    margin: 0 auto;

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

      @media (min-width: $small-desktop-screen) {
        padding: 0;
        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: 960px;
      margin: 0 auto;
      color: $vads-color-base-lightest;
      padding: 30px 16px;

      @media (min-width: $medium-screen) {
        padding: 72px 16px;
      }
    }
    &-header {
      margin-bottom: 20px;
      color: $vads-color-white;
    }

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

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

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

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

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

    h2 {
      margin: 0 0 24px 0;
    }
    &-copy {
      margin-bottom: 32px;
    }

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

  &__full-width {
    h3 {
      margin: 0;
    }
    &.is--lighter {
      background-color: $vads-color-primary-lighter;
    }
  }
  &__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;
    }
  }
  &__portal-img {
    width: 100%;

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

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