@import "~bootstrap/scss/bootstrap-utilities";
@import "../../common/scss/variables";
@import "../../common/scss/functions";

.al-page-index {
  .al-hero-cta-primary {
    background: #24c2ff;
    color: #222222;

    &:hover {
      background: darken(#24c2ff, 5%);
    }
  }

  .al-hero-cta-secondary {
    background: $al-c-atlantis;
    color: #222222;

    &:hover {
      background: darken($al-c-atlantis, 5%);
    }
  }

  .al-hero-cta-tertiary {
    background: $al-c-candlelight;
    color: #222222;

    img {
      display: inline;
      height: 1em;
    }

    &:hover {
      background: darken($al-c-candlelight, 5%);
    }
  }

  .al-index-feature-container {
    background: #0e3b5c;

    .al-index-feature-icon {
      color: lighten($al-font-color, 10%);
      font-size: 32px;
      padding-right: 22px;
    }
  }

  .al-index-community-container {
    background: #0e3b5c;

    .al-index-community-icon {
      color: $al-font-color;
      font-size: 32px;
      padding-right: 22px;
      flex: 0;

      &.img {
        height: 32px;
        box-sizing: border-box;
      }
    }

    @include media-breakpoint-up(md) {
      .al-index-community-content-wrap {
        display: flex;
        flex-direction: column;
        flex: 1;

        p {
          flex: 1;
        }
      }
    }

    .al-community-cta {
      min-width: 120px;
    }
  }

  .al-index-backed-by {
    h2.border-bottom {
      border-bottom-color: lighten($al-body-background, 8%) !important;
    }

    @include media-breakpoint-up(md) {
      padding-top: 72px !important;
      padding-bottom: 102px !important;
    }

    .al-backed-by-list {
      justify-content: center;

      div.col {
        text-align: center;
      }

      .al-backer-logo-container {
        height: 100%;
      }

      .al-backer-logo {
        max-width: 120px;
        width: 100%;
      }
    }
  }

  .al-index-commercial-support {
    h2.border-bottom {
      border-bottom-color: lighten($al-body-background, 8%) !important;
    }

    @include media-breakpoint-up(md) {
      padding-top: 72px !important;
      padding-bottom: 102px !important;
    }

    .al-commercial-supporter-list {
      justify-content: center;

      div.col {
        text-align: center;
      }

      .al-commercial-supporter-logo-container {
        height: 100%;
      }

      .al-commercial-supporter-logo {
        max-width: 120px;
        width: 100%;
      }
    }
  }

  .al-index-faq {
    background: #0e3b5c;

    .accordion-button {
      border: none;
      box-shadow: none;
      font-weight: normal;
      background: #104469;

      &:active, &.active, &:hover, &:focus {
        box-shadow: none;
        outline: none;
        border: none;
      }

      &:not(.collapsed) {
        background: #104469;
        color: $al-font-color;
      }
    }

    .accordion-body {
      background: #114a73;
    }
  }

  .al-index-newsletter {

    @include media-breakpoint-up(md) {
      padding-top: 80px;
      padding-bottom: 80px;
    }

    .al-newsletter-button {
      background: #0e3b5c;

      &:hover {
        background: lighten(#0e3b5c, 5%);
      }
    }
  }

  .al-index-press {
    background: #0e3b5c;

    @include media-breakpoint-up(md) {
      padding-top: 72px !important;
      padding-bottom: 72px !important;
    }

    .al-index-press-item {
      margin-bottom: 10px;

      blockquote.blockquote {
        padding-bottom: 7px;
        font-family: $al-font-family-accent;
        font-size: 1.4rem;

        &:before {
          content: open-quote;
          padding-right: 3px;
        }

        &:after {
          content: close-quote;
          padding-left: 3px;
        }

        &:before,
        &:after {
          font-family: $al-font-family-accent;
          vertical-align: top;
          display: inline-block;
          color: #faf5f5;
          font-weight: bold;
          font-size: 1rem;
        }
      }

      figcaption.blockquote-footer {
        color: $al-font-color;

        cite {
          font-style: normal;
        }

        a {
          text-decoration: none;

          &:hover {
            text-decoration: underline;
            color: lighten($al-link-color, 10%);
          }
        }
      }
    }
  }
}