//////////////////////////////// HOMEPAGE STYLES ///////////////////////////////

.home-content {
  color: $article-bold;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;

  .section{
    width: 100%;
    margin: 0 auto;
    padding: 2rem 2rem 0;
    display: block;
    position: relative;
  }

  //////////////////////////// SEARCH SECTION STYLES ///////////////////////////
  .search {
    .sidebar--search {
      font-size: 1.1rem;

      input {
        padding: .75em 2.35rem .75rem 1rem;
        border-radius: 6px;
        position: relative;
        box-shadow: none;

        &::placeholder  {color: rgba($sidebar-search-text, .65);}
      }

      &:after {
        font-size: 2rem;
        top: .45rem;
        right: .45rem;
      }

      .algolia-autocomplete {  
        position: relative;      

        &:after {
          content: "";
          position: absolute;
          display: block;
          border-radius: 6px;
          top: 0;
          left: 0;
          box-shadow: 2px 2px 6px $sidebar-search-shadow;
          height: 100%;
          width: 100%;
          mix-blend-mode: multiply;
          z-index: -1;
        }
      }

      .algolia-autocomplete.algolia-autocomplete-left, .algolia-autocomplete.algolia-autocomplete-right {

        .ds-dropdown-menu {
          top: auto !important;
          left: 0 !important;
          margin-bottom: 1.5rem;

          &:after {
            content: "";
            box-shadow: 2px 2px 6px $sidebar-search-shadow;
            height: 100%;
            width: 100%;
            mix-blend-mode: multiply;
          }
        }
      }
    }
  }

  ///////////////////////////////// SPAN STYLES ////////////////////////////////

  // span {
  //   &.magenta {color: $br-new-magenta;}
  //   &.orange {color: $r-dreamsicle;}
  //   &.blue {color: $b-pool;}
  // }

  ////////////////////////////////// PRODUCTS //////////////////////////////////
  /// 
  
  .padding-wrapper {padding: 0 2rem;}

  h1 {
    text-align: center;
    color: $article-heading;
  }

  .product-group {
    background: $article-bg;
    padding: 3rem;
    margin-bottom: 2rem;
    border-radius: 30px;

    .products {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      margin: 0 -1rem;
    }

    .product {
      padding: 0 1rem;
      display: flex;
      flex: 1 1 50%;
      flex-direction: column;
      justify-content: space-between;
      max-width: 33%;
      min-width: 200px;

      .product-info {
        p {
          margin-bottom: .5rem;
          font-size: 1.1rem;
          line-height: 1.5rem;
          color: rgba($article-text, .7);
        }
      }

      &.beta {
        .product-info h3::after {
          content: "beta";
          margin-left: .5rem;
          font-size: 1rem;
          padding: .25em .5em .25em .4em;
          @include gradient($grad-burningDusk);
          color: $g20-white;
          border-radius: $radius * 2;
          font-style: italic;
          vertical-align: middle;
        }
      }

      ul.product-links {
        padding-left: 0;
        list-style: none;

        li:not(:last-child) {margin-bottom: .35rem;}

        a {
          text-decoration: none;
          color: $article-heading;
          font-weight: $medium;
          position: relative;

          &::before {
            content: "";
            position: absolute;
            bottom: -2px;
            height: 2px;
            width: 0%;
            @include gradient($grad-burningDusk);
            transition: width .2s;
          }

          &::after {
            content: "\e90a";
            font-family: 'icomoon-v4';
            font-weight: bold;
            font-size: 1.3rem;
            display: inline-block;
            position: absolute;
            @include gradient($grad-burningDusk);
            background-clip: text;
            -webkit-text-fill-color: transparent;
            right: 0;
            transform: translateX(.25rem);
            opacity: 0;
            transition: transform .2s, opacity .2s;
          }

          &:hover {
            &::before {width: 100%;}
            &::after {transform: translateX(1.5rem); opacity: 1;}
          }
        }
      }
    }

    h2 {
      display: inline-block;
      font-size: 2.75rem;
      margin: 0;
      color: $article-bg;
      @include gradient($grad-burningDusk);
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    h3 {
      font-size: 1.6rem;
      margin: 1rem 0 0;

      a {
        text-decoration: none;
        color: $article-heading;
        position: relative;

        &::before {
          content: "";
          position: absolute;
          bottom: -2px;
          height: 2px;
          width: 0%;
          @include gradient($grad-burningDusk);
          transition: width .2s;
        }

        &:hover::before {width: 100%;}
      }

      .version {
        font-size: .9em;
        opacity: .5
      }
    }

    h4 {
      font-size: 1.1rem;
      margin: 1.5rem 0 .5rem;
      display: inline-block;
      padding-right: 1rem;
      color: rgba($article-text, .7);
      background: $article-bg;
    }

    .category-head{
      margin: 1rem 0 2rem;
      &::after {
        content: "";
        display: block;
        border-top: 1px solid $article-hr;
        margin-top: -1.15rem;
      }
    }
  }

  // InfluxDB 3 Section //

  #influxdb3 {
    margin-top: 1.75rem;

    h2 + p {margin-top: .75rem;}
  }

  #telegraf {
    background: linear-gradient(65deg, #020d66, $br-dark-blue);
    color: $g20-white;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    .bg-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('/img/bg-texture-new.png');
      background-position: bottom;
    }

    h2 {
      font-size: 2.5rem;
      @include gradient($grad-tealDream, 270deg);
      background-clip: text;
      -webkit-text-fill-color: transparent;

      & + p {margin-top: .65rem;}
    }

    ul.product-links {
      padding-left: 0;
      margin: 0 3rem 0 2rem;
      list-style: none;

      li:not(:last-child) {margin-bottom: .35rem;}

      a {
        text-decoration: none;
        color: $g20-white;
        font-weight: $medium;
        position: relative;

        &::before {
          content: "";
          position: absolute;
          bottom: -2px;
          height: 2px;
          width: 0%;
          @include gradient($grad-tealDream, 270deg);
          transition: width .2s;
        }

        &::after {
          content: "\e90a";
          font-family: 'icomoon-v4';
          font-weight: bold;
          font-size: 1.3rem;
          display: inline-block;
          position: absolute;
          @include gradient($grad-tealDream, 270deg);
          background-clip: text;
          -webkit-text-fill-color: transparent;
          right: 0;
          transform: translateX(.25rem);
          opacity: 0;
          transition: transform .2s, opacity .2s;
        }

        &:hover {
          &::before {width: 100%;}
          &::after {transform: translateX(1.5rem); opacity: 1;}
        }
      }
    }
  }

  ///////////////////////////////// LEARN ITEMS ////////////////////////////////

  #learn-more {
    margin-bottom: 2rem;

    h3 {
      font-size: 1.8rem;
      margin: 1rem 0 2rem;
    }

    .learn-items {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;

      .item {
        max-width: 25%;
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        margin: 0 .75rem;

        .icon {
          svg {max-height: 60px; max-width: 60px}
          .c1 {fill: $home-icon-c1;}
          .c2 {fill: $home-icon-c2;}
          .magenta {fill: $br-new-magenta;}
        }

        h4 {
          font-size: 1.4rem;
          margin: 1rem 0 0;
        }

        p {
          margin: .5rem 0 1.5rem;
          line-height: 1.7rem;
          &:last-child {margin-bottom: 0;}
        }
        a {
          position: relative;
          display: inline;
          color: $article-heading;
          font-weight: $medium;
          text-decoration: none;
          
          &::before {
            content: "";
            display: inline-block;
            position: absolute;
            left: 0;
            bottom: -4px;
            margin-top: .25rem;
            height: 2px;
            @include gradient($grad-burningDusk);
            width: 0;
            transition: width .2s;
          }
          &::after {
            content: "\e90a";
            font-family: 'icomoon-v4';
            font-weight: bold;
            font-size: 1.3rem;
            display: inline-block;
            position: absolute;
            @include gradient($grad-burningDusk, 270deg);
            background-clip: text;
            -webkit-text-fill-color: transparent;
            right: 0;
            transform: translateX(.25rem);
            opacity: 0;
            transition: transform .2s, opacity .2s;
          }

          &:hover {
            &::before {width: 100%;}
            &::after {transform: translateX(1.5rem); opacity: 1;}
          }
        }

        & > *:last-child {margin-top: auto}
      }
    }
  }


  #copyright {
    width: 100%;
    padding: 1rem 3rem;
    color: rgba($article-text, .5);

    p {
      margin: 0;
      text-align: right;
      font-size: .9rem;      
    }
  }

  /////////////////////////// HOMEPAGE MEDIA QUERIES ///////////////////////////

  @media (max-width: 900px) {
    .product-group .products .product {
          max-width: 50%;
          margin-bottom: 2rem;
    }
  }

  @media (max-width: 720px) {
    .product-group {
      .products {
        flex-direction: column;

        .product {
          margin-bottom: 1rem;
          max-width: 100%;

          ul {margin-bottom: 0;}
        }
      }
    }
    #telegraf {
      flex-direction: column;
      align-items: flex-start;
      ul.product-links {margin: 1rem 0 0;}
    }
  }

  @include media(medium) {    
    #learn-more {
      margin-bottom: 0;
      
      h4 {margin-top: 0;}
    
      .learn-items {
        flex-wrap: wrap;
        .item {
          max-width: 45%;
          flex: 1 1 50%;
          margin-bottom: 2rem;
        }
      }
    }
  }

  @include media(small) {
    .section, .padding-wrapper{padding: 0 1rem}
    h1 {
      font-size: 1.55rem;
      line-height: 1.5rem;
      padding: 0 1.75rem;
      margin-bottom: -.5rem;
    }
    .product-group {
      padding: 1.5rem;
      p, .product .product-info p {font-size: 1.05rem;}      

      h2 {font-size: 2.1rem;}
      h3 {font-size: 1.5rem;}
      h4 {font-size: 1rem;}
    }
    #telegraf {
      padding: 1.75rem;
      h2 {font-size: 2rem;}
    }
    #learn-more {
      h3 {font-size: 1.5rem;}
      .learn-items .item h4 {font-size: 1.2rem;}
    }
    #copyright p {
      text-align: center;
    }
  }

  @media (max-width: 540px) {
    #learn-more {
          
      .learn-items {
        flex-direction: column;
        .item {
          max-width: 100%;
          margin: 0 0 2rem;
        }
      }
    }
  }
}