//==============================================================================
// TYPOGRAPHY
//==============================================================================

// CUSTOM FONTS
// -----------------------------------------------------------------------------

// If having local font-face fonts import them like so
// To support older browsers check http://www.fontspring.com/blog/smoother-rendering-in-chrome-update

// @font-face {
//    font-family: <fontname>, $stack;
//    src: url('<path to fontfile>.woff') format('woff'),
//         url('<path to fontfile>.ttf') format('truetype');
// }




/*==============================================================================
 Headers

 You can get the same styling anywhere using classes .h1-.h6

 Markup:
 <h1>Header 1</h1>
 <h2>Header 2</h2>
 <h3>Header 3</h3>
 <h4>Header 4</h4>
 <h5>Header 5</h5>
 <h6>Header 6</h6>
==============================================================================*/

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
}



h1,
.h1 {
    @include headers(3);
}



h2,
.h2 {
    @include headers(2.75);
}



h3,
.h3 {
    @include headers(2);
}



h4,
.h4 {
    @include headers(1.8);
}



h5,
.h5,
h6,
.h6 {
    @include headers(1);
}


/*==============================================================================
 Section titles

 Markup:
 <h5 class="b-title {$modifiers}"> Header 5 as a title</h5>

 #{$namespace}title--primary - Primary title
 #{$namespace}title--secondary - Secondary title
==============================================================================*/

#{$namespace}title {
}



#{$namespace}title--primary {
}



#{$namespace}title--secondary {
}



/*==============================================================================
 Section subtitles

 Markup:
 <h5 class="b-subtitle {$modifiers}"> Header 5 as a subtitle</h5>
 <p class="b-subtitle {$modifiers}"> Paragraph 5 as a subtitle</p>

 #{$namespace}subtitle - Primary subtitle
 ==============================================================================*/


#{$namespace}subtitle {
}





/*==============================================================================
Paragraphs

Markup:
    <p class="{$modifiers}"> Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Vero, deleniti adipisci cupiditate quibusdam labore saepe! Cumque, et,
    fuga assumenda tempora nisi similique quae dicta ab repellendus eum nam
    aperiam quas.</p>

    #{$namespace}text--normal - body type size
    #{$namespace}text--big - big paragraph, maybe for intros & stuff like this"
    #{$namespace}text--small - small paragraph, don't use instead of the "small" element
==============================================================================*/

p {
    @include rem(margin, 0 0 $verticalspace);
}



p,
#{$namespace}text--normal {
    @include rem(font-size, $basefont);
}



#{$namespace}text--big {
    @include rem(font-size, $basefont * 1.5 );
}



#{$namespace}text--small {
    @include rem(font-size, $basefont * .9 );
}


/*==============================================================================
Blockquotes

Markup:
    <blockquote class="{$modifiers}">
        This is a blockquote
        <footer class="blockquote-source"> Someone </footer>
    </blockquote>

    #{$namespace}blockquote--left - aligned left
    #{$namespace}blockquote--right - aligned right
    #{$namespace}blockquote--center - centered
==============================================================================*/

blockquote {
    @include rem(margin, 0 0 $verticalspace);

    > :last-child,
    > :last-child > :last-child {
        margin-bottom: 0;
    }
}



#{$namespace}blockquote--left{
    border-left: .3em solid #222;
    padding-left: 1em;
}



#{$namespace}blockquote--right{
    border-right: .3em solid #222;
    padding-right: 1em;
    text-align: right;
}



#{$namespace}blockquote--center{
    border-top: .3em solid #222;
    border-bottom: .3em solid #222;
    padding: 1em;
    text-align: center;
}



#{$namespace}blockquote__source{
    @include rem(font-size, 12px);
}



#{$namespace}blockquote-source:before{
    content:"—";
}



em,
i,
cite,
q {
    font-style: italic;
}



small,
#{$namespace}small-text {
    font-size: 75%;
}



strong,
b {
    font-weight: bold;
}



abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}



address{
    font-style: normal;
}



sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
}



sup {
    top: -0.5em;
}



sub {
    bottom: -0.25em;
}



pre,
code,
kbd,
samp {
    font-family: monospace, monospace;
    -webkit-font-smoothing: subpixel-antialiased;
}



pre {
    @include rem(margin-bottom, $verticalspace);
    @include rem(font-size, 13px);
    @include rem(border, 1px, solid #ddd);
    @include rem(box-shadow, 0 0 20px, rgba(0,0,0,.1) inset);
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 1em;
    max-height: 20em;
    overflow: auto;
    display: block;
    clear: both;
}



code {
    line-height: 1;
}



del,
s {
    text-decoration: line-through;
}



q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}



hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc; // change border colour to suit your needs
    margin:1em 0;
    padding: 0;
}