$navBackground: #424a55;
$navHeight: 4.5rem;
$footerBackground: darken($navBackground, 7%);

@import 'vendor/assets/stylesheets/dvl/core';
@import 'vendor/assets/stylesheets/dvl/components/alerts';
@import 'vendor/assets/stylesheets/dvl/components/labels';
@import 'vendor/assets/stylesheets/dvl/components/navbar';
@import 'vendor/assets/stylesheets/dvl/components/splash_footer';

// Variables

$kbBlue: #21BEDB;
$kbBlueGray: #F3F6F8;

// Base

body {
  background: $lightestGray;
}

.fluid-width-video-wrapper {
  margin-bottom: $lineHeight;
}

.container {
  width: 90%;
  max-width: $maxWidth;
  margin: 0 auto;
  @include cf;
}

.content {
  margin: $lineHeight auto;
}

input[type="search"] {
  padding-left: 10px;
}

.capitalize {
  text-transform: capitalize;
}

.teal {
  background: #3bccaf;
  color: #fff!important;
  border: 1px solid #31bca0;

  &:hover {
    background: #31bca0;
  }
}

.gray {
  color: $darkGray;
}

// Home page

.main {
  padding: 20px 10px;
}

.listings {
  text-align: center;
  max-width: 800px;
  margin: 1rem auto !important;

  .item {
    text-align: center;
  }

  a {
    color: $kbBlue;
  }

  h3 a {
    color: black;
    text-decoration: none;
  }

  ul {
    margin-bottom: $lineHeight;

    li {
      margin-top: $rhythm;
    }
  }
}

.public_footer {
  .container {
    max-width: 38rem;
  }
}

@media only screen and (min-width: $lapWidth) {
  .listings {
    .item {
      text-align: left;
    }
  }
}

.toc_section {
  text-align: left;
  li a {
    font-size: $fontSmall;
  }
}

.toc_section h4 {
  font-size: 1rem;
  text-transform: uppercase;
}

.landing {
  padding: 3rem 0;
  text-align: center;
  width: 90%;
  margin: 0 auto;
  h1 {
    margin-bottom: $lineHeight * 2;
  }
  .or-browse {
    display: inline-block;
    font-size: 0.9rem;
    margin-top: 0.5rem;
  }

    a {
      color: $kbBlue;
    }

  .centersearch-form {
    max-width: 460px;
  }
}

// Search

.centersearch-form {
  position: relative;
  margin: 0 auto;
  width: 300px;

  .centersearch-input {
    height: 50px;
    padding-left: 36px;
    font-size: 1.1rem;
  }

  &:after {
    position: absolute;
    font-size: 16px;
    top: 13px;
    left: 10px;
    content: "\f002";
    font-family: 'FontAwesome';
    color: $darkGray;
  }
}

@media only screen and (min-width: $lapWidth) {
  .centersearch-form {
    width: auto;
    max-width: 400px;
  }
}

.search-results {
  margin: 2rem auto;
  width: 90%;
  max-width: 700px;
}

.search-results-loading {
  font-size: 40px;
  color: $darkGray;
  text-align: center;
  height: 100px;
  line-height: 100px;
}

.no-search-results, .no-query {
  height: 100px;
  text-align: center;

  h3 {
    line-height: 60px;
    color: $darkerGray;
  }
}

.results-count {
  text-align: center;
  padding-bottom: 1rem;

  h3 {
    color: $darkerGray;
  }
}

.result {
  margin-bottom: 1.5rem;
}

.highlight {
  background: $blueHighlight;
}

.result-body {
  padding-left: 10px;
}

// TOC

.toc_section ul {
  list-style: none;
  padding: 0.25rem 0 1rem;
}

.toc_section li {
  margin: 0.5rem 0 0;
}

.toggle_toc {
  color: black;
}

.left_nav {
  background: $lighterGray;
  border-radius: $radius;
  .navigation {
    margin-bottom: $lineHeight;
    .styled_select_wrapper {
      width: 100%;
    }
  }

  .toc_section {
    a {
      color: $black;
      display: block;
      width: 100%;
      text-decoration: none;
      border-radius: $radius;
      padding: $rhythm;
      &:hover {
        color: $kbBlue;
      }
      &:active {
        color: darken($kbBlue,5%);
      }
      &.current_article {
        background: rgba($kbBlue,0.5);
        &:hover,
        &:focus,
        &:active {
          color: $black;
        }
      }
    }
    li {
      margin: 0;
    }
    ul {
      margin: 0;
    }
    p {
      padding-bottom: 15px;
      word-wrap: break-word;
    }

    h4 {
      font-size: $fontSmaller;
      text-transform: uppercase;
      letter-spacing: $letterspaceSmaller;
      font-weight: $weightNormal;
      color: $darkerGray;
      margin: 0;
      position: relative;
      width: 100%;
      span {
        font-size: 0.75rem;
        opacity: 0.5;
        position: absolute;
        top: 0;
        right: 0;
        line-height: $lineHeight;
      }
       &:hover,
       &.active {
        color: $darkestGray;
      }
      &.active {
        font-weight: $weightBold;
      }
      &.active {
        margin: 0;
        span {
          opacity: 1;
        }
      }
    }
  }
}

.still_need_help_container {
  margin-top: $lineHeight;
  h3 {
    margin-bottom: $rhythm;
  }
  i {
    margin-left: $rhythm * 2;
  }
}

// Breadcrumbs

.breadcrumbs {
  list-style: none;
  li {
    display: inline-block;
    font-size: $fontSmaller;
    &:after {
      content: '\f054'; // right caret
      font-family: 'FontAwesome';
      color: $gray;
      font-size: 0.75rem;
      display: inline-block;
      line-height: 1;
      margin: 0 $rhythm;
      text-align: center;
    }
    &:last-child:after {
      content: none;
    }
  }
}


// Article layout

$leftNavWidth: 300px;

.left_nav {
  padding: 1rem 0;
  i {
    margin-right: $rhythm;
  }
}

.left_nav_toggle {
  display: block;
  font-size: 1.2rem;
  color: $darkerGray;
}

.left_nav_inner {
  display: none;
  margin-top: 1rem;
  .left_nav.open & {
    display: block;
  }
}

@media only screen and (min-width: $deskWidth) {
  .left_nav,
  .article {
    float: left;
  }
  .left_nav {
    width: 27%;
    margin-right: 6%;
    height: 100%;
    padding: 0 2rem 2rem;
  }
  .left_nav_toggle {
    display: none;
  }

  .left_nav_inner {
    display: block;
  }
  .article {
    width: 66%;
    height: 100%;
  }
}

// Article

.article {
  padding: 0;

  .article_body {
    h2, h3, h4, h5, h6 {
      // for anchor links on left side
      padding-left: 1.5rem;
      margin-left: -1.5rem;
    }

    ul {
      @include formatted_list_ul;
    }

    ol {
      @include formatted_list_ol;
    }
  }

  img {
    border: 1px solid $gray;
    box-shadow: 0 1px 0 rgba(#000,0.03);
  }

  .anchor {
    padding-right: 8px;
    position: absolute;
    vertical-align: middle;
    :hover {
      color: black;
    }
    i {
      font-size: 60%;
      color: gray;
    }
  }
  h2 .anchor {
    margin-left: -3rem;
    padding-left: 1rem;
  }
  h3 .anchor {
    margin-left: -2.2rem;
    padding-left: 1rem;
  }
}

.article_toc {
  margin-top: $rhythm * 2;

  ol {
    @include formatted_list_ol;
    color: $kbBlue;
    li {
      margin-bottom: 0;
      &:last-child {
        margin-bottom: $lineHeight;
      }
    }
    a {
      color: $kbBlue;
    }
  }
}

.choose_article {
  font-size: 4rem;

  span {
    vertical-align: middle;
    font-size: 1rem;
  }
}

// Tables

td {
  min-width: 10rem;
}

// Formrenderer

.embed_example {
  margin-bottom: $lineHeight;
  padding: $rhythm * 2;
  border: 1px solid $gray;
  border-radius: $radius;
}

.example_content {
  border-left-style: solid;
  border-left-width: $rhythm * 2;
  border-radius: $radius;
  padding: $rhythm * 2;
  background-color: #efefef;
  margin-bottom: $lineHeight;
  position: relative;
  .fr_response_field_section_break {
    h2, h3, h4 {
      margin-bottom: $rhythm;
    }
  }
  .fr_response_field:last-child {
    margin-bottom: 0;
  }

  &:after {
    display: none;
    position: absolute;
    top: $rhythm * 2.5;
    right: $rhythm * 2;
    color: $darkerGray;
    font-size: $fontSmall;
    text-transform: uppercase;
    letter-spacing: $letterspaceSmall;
    line-height: 1;
    background: rgba(#fff,0.8);
    border-radius: $rhythm * 2;
    padding: $rhythm / 2 $rhythm;
    margin-top: - ($rhythm / 2);
  }
}

@media only screen and (min-width: $lapWidth) {
  .example_content:after {
    display: block;
  }
}

.example_content_good {
  border-left-color: $successColor;

  &:after {
    content: 'Good';
  }
}

.example_content_bad {
  border-left-color: $errorColor;

  &:after {
    content: 'Bad';
  }
}
