////////////////////////////// HOMEPAGE VARIABLES //////////////////////////////

$home-body-width: 1300px;

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

body.home {
  background-image: url('/img/hero-bg-light-1-diamond.png');
  background-size: 65%;
  background-repeat: no-repeat;
}

.home {
  color: $article-bold;

  .section{
    width: 100%;
    margin: 0 auto;
    padding: 2rem 2rem 0;
    max-width: $home-body-width;
    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;}
  }

  ///////////////////////////// EXPANDABLE BUTTONS /////////////////////////////

  .exp-btn-wrapper {
    position: relative;
    display: block;

    .exp-btn {
      background: $br-dark-blue;
      border-radius: 6px;
      color: $br-teal;
      padding: 1.5rem 2rem;
      font-weight: $medium;
      align-items: center;
      min-width: 340px;
      min-height: 70px;
      cursor: pointer;
      transition: color .2s, background .2s, padding .2s;

      &:hover, &.open {
        background: $br-teal;
        color: $br-dark-blue;
      }

      p {
        margin: 0 !important;
        text-align: center;
      }
      & > * {width: 100%;}

      &.open {
        padding: 0;        
        li a {padding: 1rem 2rem;}
      }
    }

    .exp-btn-links { 
      border-radius: 6px;
      color: $br-dark-blue;
      margin: 0;
      padding: 0;
      list-style: none;
      width: 100%;
      height: 100%;
      display: none;
      
      li {
        background: $br-teal;
  
        &:first-child {
          border-radius: 6px 6px 0 0;
          border-bottom: 1px solid rgba($br-dark-blue, .5);
        }
        &:last-child {
          border-radius: 0 0 6px 6px;
          border-bottom: none;
        }
        a {
          display: block;
          padding: 0rem 2rem;
          color: $br-dark-blue;
          text-decoration: none;
          text-align: center;
          transition: padding .2s;
        }
      }
    }
  
    .close-btn {
      position: absolute;
      top: 38%;
      right: -32px;
      color: rgba($br-teal, .6);
      font-size: 1.5rem;
      display: none;
      cursor: pointer;
      transition: color .2s;
  
      &:hover {
        opacity: 1;
        color: $br-teal;
      }
    }
  }

  //////////////////////////////// PRODUCT CARDS ///////////////////////////////

  .product-cards {
    display: flex;
    flex-direction: row;

    .card {
      padding: 3rem;
      background: $sidebar-search-bg;
      border-radius: 30px;
      box-shadow: 1px 1px 7px $sidebar-search-shadow;
      flex: 1 1 0;
      display: flex;
      flex-direction: column;

      &:first-child {margin-right: 1rem}
      &:last-child {margin-left: 1rem}

      h3 {
        margin: 0 0 1.5rem;
        line-height: 1.1em;
        font-size: 2.75rem;
      }

      p {
        margin-bottom: 2rem;
      };

      .card-links {
        margin-top: auto;
        
        a {
          position: relative;
          display: block;
          color: $article-text;
          font-weight: $medium;
          text-decoration: none;
          margin-bottom: .3rem;
          
          &:after {
            content: "";
            display: block;
            margin-top: .15rem;
            border-top: 2px solid $br-new-magenta;
            width: 0;
            transition: width .2s;
          }

          &:hover{
            color: $br-new-magenta;
            &:after {width: 30%}
          }
        }
      }
    }
  }

  ///////////////////////// GENERAL BLUE SECTION STYLES ////////////////////////

  .section.blue {

    h2, h3, h4 {
      color: $br-teal;
    }

    .padding-wrapper {
      width: 100%;
      max-width: $home-body-width;
      color: $g20-white;
      background: $br-dark-blue;
      background-size: cover;
      border-radius: 30px;
    }

    &.flush-left .padding-wrapper {
      padding: 2rem;
      background-image: url('/svgs/home-bg-circle-right.svg')}
    &.flush-right .padding-wrapper {
      padding: 2rem;
      background-image: url('/svgs/home-bg-circle-left.svg');
    }
  }

  ////////////////////////////// INFLUXDB SECTION //////////////////////////////

  #influxdb {
    
    padding-top: .5rem;
    display: flex;

    .actions {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 50%;
      padding: 0 3rem 3rem;
      flex: 1 1 0;
    }

    h2 {
      margin: 0;
      font-size: 3.5rem;
      line-height: 1.1em;
      & + p {
        font-size: 1.2rem;
        margin: .5rem 0 2rem;
      }
    }

    h3 {
      margin: 0;
      color: $g20-white;
      font-size: 2.25rem;

      & + p {margin: .5rem 0;}
    }

    .hero-img {
      background-image: url('/img/wind-turbine.jpg');
      background-size: cover;
      margin: -.5rem .75rem 0 1rem;
      z-index: -1;
      min-height: 600px;
      border-radius: 0 0 30px 30px;
      flex: 1 1 0;
    }
  }

  #influxdb-btn {  
    .exp-btn {
      @include gradient($grad-burningDusk, 270deg);
      color: $g20-white;
      position: relative;
      z-index: 1;

      &:after {
        content: "";
        top: 0;
        left: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        @include gradient($grad-coolDusk);
        border-radius: 6px;
        z-index: -1;
        opacity: 0;
        transition: opacity .2s;
      }

      &:hover, &.open {
        &:after {opacity: 1;}  
      }

      &.open {
        padding: 0;        
        li a {padding: 1rem 2rem;}
      }
    }

    .exp-btn-links { 
      color: $g20-white;      
      li {
        @include gradient($grad-coolDusk);
  
        &:first-child {
          border-bottom: 1px solid rgba($body-bg, .5);
          a:after {border-radius: 6px 6px 0 0;}
        }

        &:last-child a:after {border-radius: 0 0 6px 6px;}

        a {
          color: $g20-white;
          position: relative;
          z-index: 1;
          
          &:after {
            content: "";
            top: 0;
            left: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            @include gradient($grad-burningDusk, 270deg);
            border-radius: 6px;
            z-index: -1;
            opacity: 0;
            transition: opacity .2s;
          }

          &:hover:after {opacity: 1}
        }
      }
    }
  
    .close-btn {
      color: rgba($br-new-magenta, .6);  
      &:hover {color: $br-new-magenta;}
    }
  }

  ///////////////////////////////// API SECTION ////////////////////////////////

  #api-guides {
    .padding-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 3.5rem;

      .text {margin-right: 2rem;}

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

      p {
        margin: .5rem 0;
        line-height: 1.5rem;
      }
    }
  }

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

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

    h4 {
      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;}
        }

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

        p {
          margin: .5rem 0 1.5rem;
          line-height: 1.7rem;
        }
        a {
          position: relative;
          color: $br-new-magenta;
          font-weight: $medium;
          text-decoration: none;
          
          &:after {
            content: "";
            display: block;
            margin-top: .25rem;
            border-top: 2px solid $br-new-magenta;
            width: 0;
            transition: width .2s;
          }

          &:hover:after {width: 30%}
        }

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

  ////////////////////////////// TICK STACK STYLES /////////////////////////////

  #tick {
    padding-bottom: 0;

    .padding-wrapper {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 2rem 3rem;

      h4 {
        margin: 0;
        font-size: 1.5rem;
        & > a {color: inherit; text-decoration: none;}
        & + p {margin: .5rem 0;}
      }
      h5 {
        margin: 0 0 .5rem;
        text-transform: uppercase;
        letter-spacing: .06rem;
        // font-weight: $medium;
      }

      .tick-title {
        padding-right: 3rem;
      }

      .tick-links {
        border-left: 1px solid rgba($br-teal, .3);
        padding-left: 3rem;
        display: flex;

        ul {
          padding: 0;
          margin-right: 4rem;
          list-style: none;

          &:last-child {margin-right: 0;}
    
          li a {
            color: $g20-white;
            line-height: 1.6rem;
            text-decoration: none;
    
            &:hover {color: $br-teal;}
            span {
              font-size: .75em;
              opacity: .5;
            }
          }
        }
      }    
    }
  }

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

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

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

  @media (max-width: 900px) {
    #tick .padding-wrapper{
      flex-direction: column;
      align-items: flex-start;
      padding-top: 3rem;

      .tick-links {
        padding-left: 0;
        border: none;
      }
    }
  }

  @include media(medium) {
    #influxdb {
      .actions {
        max-width: 100%;
        padding-top: 3rem;
        text-align: center;
      }
      .hero-img {display: none}
    }
    #api-guides {
      .padding-wrapper{
        flex-direction: column;
        align-items: flex-start;
        padding: 3rem;
      }
      .exp-btn-wrapper {width: 100%;}
      .exp-btn {
        margin-top: 2rem;
        width: 100%;
        background: $br-teal;
        color: $br-dark-blue;
      }
    }
    .product-cards {
      flex-direction: column;
      .card {
        margin-bottom: 2rem;
        &:first-child {margin-right: 0;}
        &:last-child {margin-left: 0;}
      }
    }
    #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: 1rem 1rem 0;}
    .search.section {padding-top: .25rem;}
    .exp-btn-wrapper .exp-btn {min-width: revert;}
    .product-cards .card {
      padding: 2rem;
      margin-bottom: 1rem;

      h3 {font-size: 2rem;}
    }
    #influxdb {
      .actions {padding: 2rem;}
      h2 {font-size: 2.65rem;}
    }
    #api-guides {
      .padding-wrapper {
        padding: 2rem;
        h3 {font-size: 1.6rem;}
        p {font-size: 1.1rem;}
      }
    }
    #learn-more {
      h4 {margin-left: 1rem;}
      .learn-items {
        flex-direction: column;
        .item {max-width: 100%;}
      }
    }
    #tick .padding-wrapper {padding: 2rem;}
  }

  @media (max-width: 480px) {
    #tick .padding-wrapper .tick-links {flex-direction: column;}
  }
}