@import 'facades/config';
@import 'facades/mixins';

// 
// Global typography styles for headings, paragraphs etc.
// ----------------------------------------------------------------------------------------

/*
  Headings
  ------------------------------------
  1. Fixes spacing and optimizes appearance
  2. Sexier rendering in webkit and ios/android
  
*/



body{ 
  font-family: $font-family;  
}

@include establish-baseline($font-size);

// links
a { color: $link-color; }
a:visited { color: $link-visited-color; }
a:hover { color: $link-hover-color; }
a:focus { outline: thin dotted; }

h1, h2, h3, h4, h5, h6 {  
  margin:0;
  font-weight: bold;  
  text-rendering: optimizelegibility; // 1
  -webkit-font-smoothing: subpixel-antialiased;
  &.headline{
    @include box-sizing(border-box);
  }
  // this fixes rhythm breakage introduced by the added tag
  small{
    @include inline-block(baseline);
    margin:-.2em 0;
    font-size:.75em;
  }
}

@function _heading_size($num){
  $sizes: $heading-font-sizes;
  $orig: 30px 24px 18px 14px;
  
  @if $num > length($sizes){ @return nth($orig, $num); }
  @return nth($sizes, $num);
}


h1 {
  @include font-size(_heading_size(1), 2);
  @if $include-headline-styles == true{
    &.headline{
      @include leading(1, _heading_size(1));
      @include margins(1, _heading_size(1));
    }
  }
}

h2 {
  @include font-size(_heading_size(2));
  @include margins(.5, _heading_size(2));
  @if $include-headline-styles == true{
    &.headline{
      @include margins(1, _heading_size(2));
    }
  }
}

h3 {
  @include font-size(_heading_size(3));
  @include margins(.5, _heading_size(3));
  @if $include-headline-styles == true{
    &.headline{
      @include margins(.5, _heading_size(3));
    }
  }
}


h4 {
  @include font-size(_heading_size(4));
  @include margins(.5, _heading_size(4));
}

h5 {
  @include font-size(12px);
}

h6 {
  @include font-size(11px);
  text-transform:uppercase;
}


/*
  Headings
  ------------------------------------
*/

p {
  font-size:$font-size;
  line-height:$line-height;
  @include margins(0 1, $font-size);
}


/*
  Lists
  ------------------------------------
*/

ul, ol {
  @include font-size($font-size, 1);
  @include margins(0 1, $font-size);
  line-height:1;
  margin-left: 1.6em;
  padding:0;
  
  &.block{
    margin-left:0;
    list-style:none;
  }
  
  ul, ol{
    @include margins(.5, $font-size);
  }
  
}



ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li {
  @include leading(1);
}

// for some reason older ie makes list items slightly smaller?
.lt-ie9 li{
  @include leading(1.01);
}

dl{
  dt{ 
    font-weight:bold; 
  }
  
  dd{ 
    margin:rhythm(.5) 0 rhythm(.5) rhythm(.5); 
  }
}