//Typography

//Reset

//
//@variables
//
@import 'functions';

$typography-line-height: 1.6 !default;
$typography-reset: true !default;

// Paragraphs settings
$paragraph-font-weight: inherit !default;
$paragraph-font-size: px-to-rems(14) !default;
$paragraph-line-height: 1.5 !default;
$paragraph-text-rendering: optimizeLegibility !default;

//Lists
$list-font-size: $paragraph-font-size !default;
$list-line-height: $paragraph-line-height !default;
$list-margin-bottom: px-to-rems(20) !default;
$list-margin-left: px-to-rems(15) !default;

//Data lists
$data-list-margin-bottom: px-to-rems(20) !default;
$data-list-line-height: 1.2 !default;
$data-list-font-weight: bold !default;
$data-list-data-margin-left: px-to-rems(10) !default;

// Anchors settings
$anchor-color: #0088cc !default;
$anchor-text-decoration: none !default;
$anchor-text-decoration-hover: underline !default;

// Headings settings
$headings-margin-top: 0.35714286rem !default;
$headings-margin-bottom: px-to-rems(16) !default;
$headings-font-weight: 400 !default;
$headings-line-height: 1.4 !default;
$headings-text-rendering: optimizeLegibility !default;
$headings-color: #222 !default;
$h1-font-size: px-to-rems(36) !default;
$h2-font-size: px-to-rems(28) !default;
$h3-font-size: px-to-rems(25) !default;
$h4-font-size: px-to-rems(20) !default;
$h5-font-size: px-to-rems(16) !default;
$h6-font-size: px-to-rems(14) !default;

//small settings
$small-color: #ecf0f1 !default;
$small-font-size: 60% !default;

//hr settings
$hr-color: #DDD !default;
$hr-style: solid !default;
$hr-border-width: 0.07142857rem !default;
$hr-margin-top: px-to-rems(22) !default;
$hr-margin-bottom: $hr-margin-top !default;

//Blockquote
$blockquote-color: #777 !default;
$blockquote-background: lighten(#EFEFEF, 5%) !default;
$blockquote-line-height: 1.8em !default;
$blockquote-border-width: 5px !default;
$blockquote-border-style: solid !default;
$blockquote-border-color: #DDD !default;
$blockquote-padding-left: 1.5em !default;
$blockquote-padding-right: $blockquote-padding-left !default;
$blockquote-padding-top: 1rem !default;
$blockquote-padding-bottom: $blockquote-padding-top !default;
$blockquote-border-primary-color: lighten(#3498d9, 20%) !default;
$blockquote-border-success-color: lighten(#2ECC71, 20%) !default;
$blockquote-border-danger-color: lighten(#E74C3C, 20%) !default;

@if ($typography-reset) {
  a, abbr, acronym, address, 
  b, big, cite, code, del, em, 
  i, ins, kbd, mark, output, 
  q, ruby, s, samp, small, 
  strong, sub, sup, div,
  time, u, dfn, 
  h1, h2, h3, h4, h5, h6, p, pre,
  table, caption, tbody, tfoot, 
  thead, tr, th, td, canvas, 
  embed, figure, iframe, 
  {
    margin: 0;
    padding: 0;
  }

  p {
    font-weight: $paragraph-font-weight;
    font-size: $paragraph-font-size;
    margin-bottom: px-to-rems(16);
    text-rendering: $paragraph-text-rendering;
    line-height: $paragraph-line-height;
  }

  a {
    color: $anchor-color;
    line-height: inherit;
    text-decoration: $anchor-text-decoration;

    &:hover,
    &:focus {
      text-decoration: $anchor-text-decoration-hover;
    }

    img {
      border: none;
    }
  }

  h1, h2, h3, h4, h5, h6 {
    margin: $headings-margin-top 0 $headings-margin-bottom 0;
    font-family: inherit;
    font-weight: $headings-font-weight;
    line-height: $headings-line-height;
    text-rendering: $headings-text-rendering; // Fix the character spacing for headings
    font-style: normal;
    color: $headings-color;

    small {
      font-weight: normal;
      line-height: 0;
      color: $small-color;
      font-size: $small-font-size;
    }
  }

  h1 { font-size: $h1-font-size } 
  h2 { font-size: $h2-font-size } 
  h3 { font-size: $h3-font-size } 
  h4 { font-size: $h4-font-size } 
  h5 { font-size: $h5-font-size; } 
  h6 { font-size: $h6-font-size; } 

  hr {
    clear: both;
    margin: $hr-margin-top 0 $hr-margin-bottom;
    height: 0;
    border: $hr-style $hr-color;
    border-width: $hr-border-width 0 0;
  }

  //Emphasis & miscelaneous

  em, strong, b, small {
    line-height: inherit;
  }

  em { 
    font-style: italic; 
  }

  strong, b {
    font-weight: bold; 
  }

  small {
    font-size: $small-font-size;
  }

  //Lists
  ul, 
  ol,
  dl {
    font-size: $list-font-size;
    padding: 0;
    margin-bottom: $list-margin-bottom;
    margin-left: $list-margin-left;
    line-height: $list-line-height;
  }

  ul ul,
  ul ol,
  ol ol,
  ol ul {
    margin-bottom: 0;
  }

  // Remove default list styles
  ul.no-style,
  ol.no-style {
    margin-left: 0;
    list-style: none;
  }

  // Description Lists
  dl {
    margin-bottom: $data-list-margin-bottom;
  }
  dt,
  dd {
    line-height: $data-list-line-height;
  }
  dt {
    font-weight: $data-list-font-weight;
  }
  dd {
    margin-left: $data-list-data-margin-left / 2;
  }
  // Horizontal layout (like forms)
  .dl-horizontal {
    @extend %clearfix; // Ensure dl clears floats if empty dd elements present
    dt {
      float: left;
      clear: left;
      text-align: right;
    }
  }

  //Blockquote
  blockquote {
    color: $blockquote-color;
    font-style: italic;
    line-height: $blockquote-line-height;
    border-left: $blockquote-border-width $blockquote-border-style $blockquote-border-color;
    padding: $blockquote-padding-top 0 $blockquote-padding-bottom $blockquote-padding-left;
    background: $blockquote-background;

    &.primary { border-color: $blockquote-border-primary-color; }
    &.success { border-color: $blockquote-border-success-color; }
    &.danger { border-color: $blockquote-border-danger-color; }

    p {
      margin-bottom: 0;
    }
  }
}