// Normalize

@import (less) "vendor/normalize-css/normalize.css";

// CFPB icon font

@import (less) "vendor/cfpb-font-icons/src/less/icons.less";

// Chosen.js

@import (less) "vendor/chosen/public/chosen.css";

// Tidy Table

@import (less) "vendor/tidy-table/jquery.tidy.table.css";

// Grid

@import "vendor/ghost/src/cf-grid.less";

// Ghost grid settings

@wrapper-width: 960px;

// Variables / Mixins

@import "less/color.less";
@import "less/fonts.less";
@import "less/typo.less";
@import "less/forms.less";
@import "less/utils.less";
@import "less/mixins.less";

// Modules

@import "less/modules/filter.less";
@import "less/modules/preview.less";
@import "less/modules/chosen.less";
@import "less/modules/charts.less";

// Pages

@import "less/pages/homepage.less";
@import "less/pages/explore.less";
@import "less/pages/learn-more.less";
@import "less/pages/for-filers.less";
@import "less/pages/list-of-fields.less";
@import "less/pages/api.less";
@import "less/pages/summary-table.less";


// Bootstrap

@import "vendor/bootstrap/less/variables.less";
@import "vendor/bootstrap/less/tooltip.less";

// Import this stylesheet after Bootsrap to override
@import "less/tooltips.less";


// General housekeeping

body, html {
  margin: 0 0 0 0;
  background: @white;
  font-family: @body-font;
}

nav ul {
  padding-left: 0;
}

nav li {
  list-style-type: none;
  display: inline-block;
}

// Links

.hmda .continue {
  display: block;
  text-align: center;
  text-transform: uppercase;
  .avenir-next-bold;
}

// There's no global wrapper because sections of the page need 
// to bleed to the edge of the screen.

.hmda {

  header,
  footer > nav {
    .wrapper();
  }

}

// Top banner in header of the page

.top-banner {
  background-color: @light_field10;
  height: 20px;
  margin-bottom: 20px;
  padding-top: 3px;
  .avenir-next;
  font-size: 11px;
  display: none;

  &> .inner {
    .wrapper(); 
  }

  p {
    margin: 0;
    padding: 0;
  }

  .return-cfgov {
    float: left;
  }

  .official-website { 
    float: right;
  }

  img {
    vertical-align: center;
    margin: 0 0 1px 10px;
    padding: 0;
  }
}

strong {
  .avenir-next-demi;
}

// Header and footer

.hmda {

  header {
    .logo {
      display: inline-block;
      margin: 15px 0;
      a {
        display: block;
        background-image: url(../img/logo_mobile_2x.png);
        text-indent: -9999999px;
        background-size: 167px 36px;
        width: 167px;
        height: 36px;
      }
    }
    nav {
      margin-bottom: 10px;
      display: none;
      li a {
        padding-left: 10px;
        text-align: left;
      }
    }
    .navicon {
      background-color: #e7e7e6;
      color: #75787b;
      font-size: 2em;
      padding: 0 10px;
      position: absolute;
      top: 15px;
      right: 15px;
      i {
        line-height: 1em;
        padding-top: 13px;
        display: block;
      }
    }
    ul {
      .mobile-nav();
    }
    a.active {
      background-color: @gold;
    }
  }

  footer {

    color: @darkgray;
    margin-top: 70px;
    background-color: @light_field10;
    a:link,
    a:visited {
      color: @darkgray;
    }  

    .primary {
      font-size: .875em;
      line-height: 1.75em;
      padding-top: 60px;
      li {
        display: block;
      }
    }
    .tertiary {
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
      font-size: .7em;
      line-height: 1.2em;
      margin-top: 25px;
      li {
        display: block;
        padding-bottom: 8px;
      }
    }
    .social {
      position: absolute;
      top: 0;
      left: 15px;
      font-size: 30px;
      margin: 0;
      i {
        margin-left: 5px;
        font-size: .9em;
        position: relative;
        top: .1em;
      }
      .icon-youtube {
        font-size: .7em; 
      } 
      a:hover {
        color: @pacific50;
        text-decoration: none;
      }
    }
  }

}

p {
  a:link {
    border-bottom: 1px dotted @pacific;
    color: @pacific;
    text-decoration: none;
  } 
  a:hover {
    border-bottom: 1px solid @navy;
    color: @navy;
    text-decoration: none;
  }
  a.focus {
    border-bottom: 1px solid @pacific;
    color: @pacific;
    outline: thin dotted;
    text-decoration: none;
  }
  a.visited {
    color: @teal;
    border-bottom: 1px solid @teal;
  }
}

a.action-arrow {
  .avenir-next-demi;
  font-size: 1.1em;
  display: inline-block;
  &:hover {
    text-decoration: underline;
  }
  &:active {
    color: @navy;
  }

  i {
    font-size: .9em;
    margin-left: .5em;
  }

  .icon-right {
    font-size: .7em;
    position: relative;
    bottom: .25em;
  } 

  .icon-pdf {
    font-size: .85em;
    position: relative;
  } 
}

// Tooltip text

.help-text {
  .visuallyhidden;
}

// Viewport adjustments

@media only screen and ( min-width: 768px ) {

  .hmda {

    .top-banner {
      display: block;
    }

    header {
      .logo {
        width: 30%;
        float: left;
        display: block;
        margin: 0;
        a {
          display: inline;
          background-image: none;
        }
      }
      nav {
        width: 70%;
        margin-bottom: 18px;
        display: block;
        float: left;
        height: 30px;
        margin-top: 20px;
      }
      .navicon {
        display: none;
      }
      ul {
        .horiz();
        text-align: right;
        li {
          margin-left: 20px;
          padding-left: 0;
          a {
            padding-left: 0;
          }
        }
        a {
          background-color: transparent;
          .avenir-next;
          &:hover {
            background-color: transparent;
            color: @pacific;
          }
        }
      }
      a.active {
        .avenir-next-demi;
        background-color: transparent;
      }
      .clearfix();
    }

    footer {
      .primary {
        padding-top: 0;
        li {
          display: inline-block;
          &:after {
            content: "|";
            padding: 0 10px;
          }
          &:last-child {
            &:after {
              content: " ";
              padding: 0;
            }
          }
        }
      }
      .tertiary {
        font-size: .875em;
        line-height: 1.5em;
        margin-top: 0;
        li {
          padding-bottom: 0;
        }
      }
      .primary,
      .tertiary {
        .column(8);
        border: 0;
      }
      .social {
        .column(4);
        text-align: right;
        position: relative;
      }

    }

  }

}

@media only screen and ( min-width: 768px ) and (max-width: 965px) {
  .hmda {
    header {
      ul {
        li {
          a {
            font-size: 13px;
          }
        }
      }
    }
  }
}