// A cover block is a full size cover with a fixed background for smaller screens.

@include td-box-height-modifiers(".td-hero-block");

.hero-gitops {
  margin-left: -15px;
  margin-right: -15px;

  @include media-breakpoint-down(md) {
    padding: 0 15px;
  }

  background: $flux-dark-blue;

  background: radial-gradient(circle at bottom left, $flux-darkest-blue, rgba($flux-dark-blue, 0.5) 30vw, transparent 80vw),
              linear-gradient(0deg, $flux-dark-blue, rgba($flux-darkest-blue, 0.3) 30px, rgba($flux-darkest-blue, 0.3) 150px, transparent 400px),
              linear-gradient(0deg, $flux-dark-blue, transparent 200px),
              radial-gradient(circle at top right, rgba($flux-light-blue, 0.8), rgba($flux-lighter-blue, 0.5) 40%, rgba($flux-dark-blue, 0.8) 50%, transparent),
              repeating-linear-gradient(15deg, rgba($flux-darkest-blue, 0.3), rgba($flux-darkest-blue, 0.3) 2px,  rgba($flux-dark-blue, 0.3) 2px, rgba($flux-dark-blue, 0.3) 4px),
              $flux-dark-blue;


  .td-hero-block {
    padding-bottom: 4rem;

  }

  section.row {
    margin-left: 0;
    margin-right: 0;
  }

  .hero-details {
    margin-top: 1.5rem;

    p {
      color: $flux-white;
      font-weight: 500;
      font-size: 1.4rem;
    }

    p:first-child {
      margin-bottom: 1.5rem;
    }

  }

  p {
    color: $flux-white;
  }

  h1 {
    color: rgba($flux-white, 0.95);
    font-size: 2.8em;
    padding-left: 14px;

    @include media-breakpoint-up(sm) {
      font-size: 3.8em;
    }
  }

  h2 {
    color: rgba($flux-white, 0.95);
    font-weight: 600;
    font-size: 1.4em;
  }

  a {
    color: $flux-light-blue !important;
    font-weight: 400;
    font-style: italic;
    text-decoration: underline;

    &:hover {
      color: $flux-darkest-blue !important;
      text-shadow: -1px 1px $flux-lighter-blue;
    }
  }

  a.btn {
    @include flat-white-button;
    border: none;
    text-decoration: none;

    margin-top: 1.5rem;
    
    font-style: normal;
    font-weight: 600;
    font-size: 1.5rem;

    .fa-arrow-right {
      font-size: 1rem;
      display: block;
      float: right;
      margin: 11px 0 0 14px;
    }
  }
}

.lead-flux section {
  padding: 0rem 0 1rem 0 !important;
  background: none;


  a[aria-hidden="true"] {
    display: none;
  }

  .td-arrow-down {
    &::before {
      border: {
        color: #{$flux-dark-blue} transparent transparent transparent;
      }
    }
  }
}