// ==========================================================================
// Headers
// ==========================================================================


// Header
//
// - Navigation
// - Logo
// - Hero

.wrapper-full {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 66.25em;
  width: 93.96226%;
  position: relative;
  max-width: none;
  width: 100%;
  padding: 20px;

  &:after {
      content: "";
      display: table;
      clear: both;
  }
}

#header {
  background-color: #3B2F63;
  @include background-image(radial-gradient(50% top, circle, rgba(84, 90, 182, 0.6) 0%, rgba(84, 90, 182, 0) 75%),
                            radial-gradient(right top, circle, rgba(121, 74, 162, 1) 0%, rgba(121, 74 ,162, 0) 57%));
  background-repeat: no-repeat;
  // Show only the top of the gradient when rendering
  // a header without hero
  background-size: 100% 1000px;
  color: lighten($purple, 30%);
  margin: 0;
  position: relative;
}

#navigation {
  $padding-nav: 20px;
  $padding-nav-inner: 7px;
  $color-link: #F2EEFF;
  $font-size: 14px;
  $font-size-sm: (($font-size / 1px) - 1) + px;
  $font-size-xs: (($font-size / 1px) - 2) + px;
  $dropdown-padding: 16px;

  position: relative;
  font-size: 14px;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  line-height: 1;

  * {
    @include box-sizing(border-box);
  }

  ul {
    position: relative;
    padding: 0;
    list-style: none;
  }

  li {
    float: left;
    margin: 0;
    padding: 0 10px;
    line-height: 1.4;

    @include media($desktop) {
      float: none;
      padding: 0;
    }

    a {
      text-decoration: none;
      &:hover {
        text-decoration: none;
      }
    }

    > a {
      display: inline-block;
      padding: 4px 0;
      text-decoration: none;
      color: fade-out($color-link, .4);

      &:hover {
        color: $white;
      }

      &:focus {
        outline: 0;
      }

      &.highlight {
        background: fade-out(black, .8);
        border-radius: $border-radius;
        color: $white;
        padding: 6px 12px;

        &:hover {
          background: rgba(0, 0, 0, 0.3);
        }
      }
    }
  }

  // Top level nav items with dropdown
  .main-nav > .has-dropdown {

    > a {

      //Caret
      &:after {
        content: "";
        display: inline-block;
        position: relative;
        top: -1px;
        @include size(10px 6px);
        margin-left: 5px;
        background-image: asset-url('nav-dropdown-caret.svg');
        background-repeat: no-repeat;
        opacity: .5;
      }
    }

    &[class*="glostick"] {

      a:after {
        display: none;
      }
    }

    // Anchor color on hover
    &:hover {

      > a {
        color: $white;

        &:after {
          opacity: 1;
        }
      }
    }

  }

  // All nav items with dropdown
  .has-dropdown {

    // Show dropdown on hover
    &:hover {

      > .dropdown {
        visibility: visible;
        opacity: 1;
        margin-top: 3px;
        @include transition-delay(0s);
      }
    }

    @media screen and (min-width: $bp-lg + 1) {
      // Second level+ dropdowns
      .has-dropdown {
        position: relative;

        > .dropdown {
          left: 180px;
          top: -7px;
          margin: 0;
        }

        > a {

          //Caret
          &:after {
            content: "";
            display: inline-block;
            position: relative;
            top: 1px;
            @include size(6px 10px);
            margin-left: 7px;
            background-image: asset-url('nav-flyout-caret.svg');
            background-repeat: no-repeat;
            opacity: .7;
          }
        }

        &:hover {

          > .dropdown {
            margin-top: 0;
            left: 183px;
          }
        }
      }
    }
  }

  .dropdown {
    margin-top: 0;
    font-size: $font-sm;
    min-width: 200px;
    font-size: 14px;
    font-weight: normal;

    @media screen and (min-width: $bp-lg + 1) {
      position: absolute;
      background: $white;
      border-radius: $border-radius;
      z-index: 3;
      padding: $dropdown-padding/2 $dropdown-padding;
      padding-right: 0;
      overflow: visible;
      box-shadow: 0 2px 7px fade-out($black, .825);
    }

    &[class*="glostick"] {
      padding: 0;

      @include media($desktop) {
        display: none;
      }
    }

    // Hit area
    &:after {
      content: "";
      position: absolute;
      top: -3px;
      left: 0;
      background: transparent;
      height: 3px;
      width: 100%;
    }

    // Transition
    visibility: hidden;
    opacity: 0;
    @include transition(visibility 0s 0.15s, opacity 0.15s, margin-top .15s, left .15s);

    li a {
      color: #444;
      font-weight: 400;

      &:hover {
        color: $purple;
      }

      &.bookends-icon:before {
        background-repeat: no-repeat;
        opacity: .9;
        content: '';
        display: inline-block;
        height: 24px;
        width: 24px;
        vertical-align: middle;
        margin-right: 8px;
        position: relative;
        top: -2px;
      }

      &.elements:before {
        background-image: asset-url('bookends/icons/elements-information.svg');
      }
      &.addons:before {
        background-image: asset-url('bookends/icons/addons.svg');
      }
      &.buttons:before {
        background-image: asset-url('bookends/icons/buttons.svg');
      }
      &.buildpacks:before {
        background-image: asset-url('bookends/icons/buildpacks.svg');
      }
      &.platform:before {
        background-image: asset-url('bookends/icons/platform.svg');
      }
      &.dx:before {
        background-image: asset-url('bookends/icons/dx.svg');
      }
      &.flow:before {
        background-image: asset-url('bookends/icons/flow.svg');
      }
      &.cd:before {
        background-image: asset-url('bookends/icons/cd.svg');
      }
      &.opex:before {
        background-image: asset-url('bookends/icons/opex.svg');
      }
      &.runtime:before,
      &.dyno:before {
        background-image: asset-url('bookends/icons/runtime.svg');
      }
      &.postgres:before {
        background-image: asset-url('bookends/icons/postgres.svg');
      }
      &.kafka:before {
        background-image: asset-url('bookends/icons/kafka.svg');
      }
      &.redis:before {
        background-image: asset-url('bookends/icons/redis.svg');
      }
      &.connect:before {
        background-image: asset-url('bookends/icons/connect.svg');
      }
      &.enterprise:before {
        background-image: asset-url('bookends/icons/enterprise.svg');
      }
      &.teams:before {
        background-image: asset-url('bookends/icons/teams.svg');
      }
      &.spaces:before {
        background-image: asset-url('bookends/icons/spaces.svg');
      }
    }

    p a {
      color: #222;
    }

    &.more {
      width: 160%;
      max-width: 160%;
      position: absolute;
      left: 0;
      right: 0;
      display: block;
      padding: $dropdown-padding/2 0 $dropdown-padding 0;

      .more-title {
        color: #999;
        display: block;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .05em;
        margin: 12px 0 $dropdown-padding/2;
        padding-bottom: ceil($dropdown-padding/1.5);
        border-bottom: 1px solid #ddd;
      }

      section {
        display: inline-block;
        float: left;
        height: 100%;
        margin: 0;
        padding: 0 $dropdown-padding;

        @include media($tablet) {
          float: none;
          height: auto;
          padding: 0;
          margin: 12px 0;
        }

        > ul {
          padding-left: 1px;
          padding-right: 1px;
        }
      }

      .more-resources,
      .more-heroku-is {
        width: 20%;

        @include media($tablet) {
          width: 100%;
        }
      }

      .more-languages {
        width: 15%;

        @include media($tablet) {
          width: 100%;
        }
      }

      .more-blog {
        width: 45%;

        .btn-xs {
          border-radius: $border-radius;
          padding: .7em 1.5em;
        }

        img {
          max-width: 90%;
          display: block;
          margin-bottom: 10px;
        }

        @include media($tablet) {
          width: 100%;
        }

        a {
          color: $purple;
        }

        h3 {
          margin-top: 13px;
          margin-bottom: 2px;
          padding: 0;
          font-size: 16px;
          line-height: 1.4em;
          text-align: left;
        }

        p {
          font-size: $font-sm;
          line-height: 1.4;
          color: #333;
          font-weight: 500;
          margin: .7em 0;

          a {
            color: #333;
            font-weight: 600;

            &:hover {
              color: $purple;
            }
          }
        }

        .blog-date {
          margin: 1px 0;
          color: #888;
          font-size: $font-xs;
        }
      }

      .btn-inline {
        margin: 5px 0;
        font-size: $font-xs;
        padding-left: 1.5em;
        padding-right: 1.5em;
      }
    }

    ul {
      margin: 0;
    }

    li {
      float: none;
      $white-space: nowrap;
      padding: 0;
      padding-right: $dropdown-padding;
    }

  }

  .main-nav {
    float: left;
    margin: 7px 0 0 15px;
  }

  @include media($desktop) {
    .nav-more {
      display: none;
    }
  }

  .tool-nav {
    float: right;
    margin: ($padding-nav-inner + 1) 0 0 0;

    li {
      font-size: $font-sm;
      padding: 0 ceil($padding-nav-inner/2);
      margin: 0 10px;
      &:last-child {
        padding-right: 0;
        margin-right: 0;
      }
    }
  }

  .user {

    li {
      font-size: $font-base;
    }

    > span {
      color: lighten($purple, 10%);
      color: fade-out($white, .8);
      margin: 0 .2em;
    }

    &.logged-in {
      > a:first-child {
        margin-right: 12px;
      }
    }

    .button_to {
      display: inline-block;

      input {
        padding: 7px 0;
        display: inline-block;
        background-color: transparent;
        border: none;
        color: rgb(199, 192, 222);
        outline: none;

        &:hover {
          color: #FFF;
        }
      }
    }
  }



  .nav-wrapper {
    @include media($desktop) {
      display: none;
      overflow: auto;
    }
  }

  &.active {

    .nav-wrapper {

      $nav-wrapper-bg: fade-out(darken($purple, 45%), .05);

      display: block;
      position: fixed;
      z-index: 11;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: $nav-wrapper-bg;

      &:before {
        content: "";
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        height: 100px;
        z-index: 0;
        @include linear-gradient($nav-wrapper-bg 50%, fade-out($nav-wrapper-bg, 1) 100%, $fallback: transparent);
      }
    }

    #logo {
      position: fixed;
      z-index: 12;

      a {
        @include media($bp-sm) {
          overflow: hidden;
          width: 40px;
        }
      }
    }

    .main-nav {
      position: relative;
      width: 100%;
      padding: 100px 40px;
      font-size: 1.5em;
      margin: 0;
      z-index: -1;

      @include media($bp-sm) {
        padding: 100px 20px;
      }

    }

    .tool-nav {
      position: fixed;
      top: 20px;
      right: 50px;
      margin: 8px 0 0 0;

      @include media($bp-sm) {
        width: 100%;
        padding-left: 150px;
      }

      li {
        float: left;
        margin: 0 16px 0 0;
        padding: 0;

      }

    }

    .glostick__menu-icon:first-child {
      display: none;
    }

    .site-search {
      margin-right: 0;
    }

    .dropdown {
      margin-top: 8px;
      margin-bottom: 16px;
      visibility: visible;
      opacity: 1;
      width: 100%;

      li {
        display: block;
        font-size: 1.25em;

        a {
          color: fade-out($white, .2);
          font-weight: 500;

          &:hover {
            color: $blue;
          }
        }
      }

      &.more {
        margin-top: 35px;
        text-align: left;
        position: relative;

        section {
          padding: 0 16px 0 0;
        }

        .more-title {
          color: $purple;
          border-bottom: 1px solid $purple;
        }

        .btn-default {
          background: transparent;
          color: $white;
        }

        .more-blog {

          h3,
          h3 a {
            color: $white;
          }

          p {
            color: fade-out($white, .2);

            a {
              color: $white;
            }
          }
        }
      }

    }


    li {

      &.has-dropdown {

        .dropdown {
          margin-top: 8px;
          margin-bottom: 16px;
          margin-left: 0;

          // Second level+ dropdowns
          .dropdown {
            margin: 0;

            li {
              margin-left: 30px;
            }
          }

          &.more {
            margin-bottom: 0;
          }
        }

        > a {
          &:after {
            display: none;
          }
        }
      }

      > a {
        color: fade-out($white, .1);

        &:hover {
          color: $white;
        }

        &.highlight {
          background: $purple;
          padding: 9px 12px;
        }
      }

      .more-link {
        display: none;
      }
    }

    .mobile-nav {
      position: fixed;

      span {

        &:nth-child(1) {
          top: 6px;
          width: 0%;
          left: 50%;
        }

        &:nth-child(2) {
          @include transform(rotate(45deg));
        }

        &:nth-child(3) {
          @include transform(rotate(-45deg));
        }

        &:nth-child(4) {
          top: 6px;
          width: 0%;
          left: 50%;
        }
      }
    }

  }

  .mobile-nav {
    display: none;
    position: absolute;
    top: 32px;
    right: 23px;
    z-index: 12;
    @include hide-text();
    width: 30px;
    height: 20px;
    @include transform(rotate(0deg));
    @include transition(.3s ease-in-out);
    cursor: pointer;

    span {
      display: block;
      position: absolute;
      height: 2px;
      width: 100%;
      background: #C7BFDF;
      border-radius: 9px;
      opacity: 1;
      left: 0;
      @include transform(rotate(0deg));
      @include transition(.15s ease-in-out);

      &:nth-child(1) {
        top: 0px;
      }

      &:nth-child(2),
      &:nth-child(3) {
        top: 8px;
      }

      &:nth-child(4) {
        top: 16px;
      }
    }

    @include media($desktop) {
      display: block;
    }
  }


  //- Search
  $search-icon-size: 14px;

  .site-search {
    @include box-sizing(border-box);
    position: relative;
    display: block;
    float: right;
    margin-top: -2px;
    margin-right: -10px;

    @include media($bp-sm) {
      float: none;
    }

    .gsc-input input.gsc-input {
      width: 145px !important;
      padding: 7px $search-icon-size*2 7px 10px !important;
      background: fade-out($white, .9) !important;
      color: $white;
      color: fade-out($white, .5);
      font-size: 13px !important;
      line-height: 1.35;
      font-weight: 300;
      @include transition(.15s ease-in-out);
      -webkit-font-smoothing: subpixel-antialiased;

      @include placeholder {
        color: fade-out(#fff, .5);
      }

      @include media($bp-sm) {
        width: 100% !important;
      }

      &:hover {
        box-shadow: 0;
      }

      &:focus {
        background: fade-out($white, .1) !important;
        color: #222;

        @include placeholder {
          color: #aaa;
        }

        @media  screen and (min-width: 1110px) {
          width: 200px !important;
        }
      }
    }

    input[type="search"],
    input[type="text"] {
      position: relative;
      width: 100%;
      font-size: 14px;
      padding: 7px $search-icon-size*2 7px 10px;
      border: 1px solid $white;
      border-radius: $border-radius;
      @include box-sizing(border-box);

      &:focus {
        outline: 0;
      }
    }

    .gsc-search-button {
      position: static;
      &:after {
        content: "";
        display: block;
        position: absolute;
        right: 8px;
        top: 8px;
        width: $search-icon-size;
        height: $search-icon-size;
        background-color: transparent;
        background-repeat: no-repeat;
        background-image: asset-url('bookends/icons/search-sprite.png');
        transition: none;
        @include hidpi {
          background-image: asset-url('bookends/icons/search-sprite_2x.png');
          background-size: 28px 28px;
        }
      }
      input {
        display: none;
      }
    }

    [class*="icon-search"],
    [class^="icon-search-"] {
      display: inline-block;
      width: $search-icon-size;
      height: $search-icon-size;
      background-repeat: no-repeat;
      background-image: asset-url('bookends/icons/search-sprite.png');
      transition: none;
      @include hidpi {
        background-image: asset-url('bookends/icons/search-sprite_2x.png');
        background-size: 28px 28px;
      }
    }

    .gsc-clear-button {
      display: none;
    }

    .gsc-branding {
      display: none;
    }
  }
}

.mobile-nav {
  @include hide-text();
  width: 30px;
  height: 20px;
  position: relative;
  @include transform(rotate(0deg));
  @include transition(.3s ease-in-out);
  cursor: pointer;

  span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #C7BFDF;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    @include transform(rotate(0deg));
    @include transition(.15s ease-in-out);

    &:nth-child(1) {
      top: 0px;
    }

    &:nth-child(2),
    &:nth-child(3) {
      top: 8px;
    }

    &:nth-child(4) {
      top: 16px;
    }
  }
}

.active {
  .mobile-nav {
    display: block;

    span {
      &:nth-child(1) {
        top: 6px;
        width: 0%;
        left: 50%;
      }

      &:nth-child(2) {
        @include transform(rotate(45deg));
      }

      &:nth-child(3) {
        @include transform(rotate(-45deg));
      }

      &:nth-child(4) {
        top: 6px;
        width: 0%;
        left: 50%;
        background: blue;
      }
    }
  }
}

#logo {
  float: left;
  font-size: 1em;
  margin: 0;

  a {
    @include hide-text;
    @include size(143px 40px);
    background-image: asset-url('logo.svg');
    display: block;
    background-repeat: no-repeat;
  }
}

.prop-label {
  display: block;
  float: left;
  padding: .7em 0 0 .8em;
  font-size: 1.25em;
  font-weight: 400;
}

#hero {
  @include background-image(radial-gradient(0% bottom, ellipse, rgba(118, 72, 160, 0.7) 0%, rgba(118, 72, 160, 0) 60%),
                            radial-gradient(90% bottom, ellipse, rgba(82, 63, 140, 1) 0%, rgba(82, 63, 140, 0) 40%));

  color: lighten($purple, 30%);
  padding: 0;
  margin: 0;

  .wrapper {
    padding-bottom: 5.625em;
    padding-top: 4em;
    position: relative;
  }

  .button {
    @include background-image(linear-gradient($white, #E7E4EE));
    background-color: $white;
    color: darken($purple, 10%);
    display: inline-block;
    min-width: 240px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  .header-group {
    margin: 0;
  }

  h1, h2 {
    -webkit-font-smoothing: antialiased;
  }

  h1 {
    color: $white;
  }

  h2, h3, h4, h5 {
    color: $purple-light;

    &.white {
      color: $white;
    }
  }

  h4, h5 {
    font-weight: $font-normal;
  }

  small {
    display: block;
    margin-top: 0.4em;
  }
}

body.purple {
  background-color: #3B2F63;
  @include background-image(radial-gradient(50% top, circle, rgba(84, 90, 182, 0.6) 0%, rgba(84, 90, 182, 0) 75%),
                            radial-gradient(right top, circle, rgba(121, 74, 162, 1) 0%, rgba(121, 74 ,162, 0) 57%));
  background-repeat: no-repeat;
  background-size: 100% 1000px;
  color: lighten($purple, 30%);
  margin: 0;
  padding: 0;

  #header {
    background: transparent;
  }

  .page-content {
    background: transparent;
  }
}