//
// Typography
//

//
// Scaffolding
//

// Root reset
html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
    &:extend(.copyText);
    background-color: @body-bg;

    text-rendering: optimizeLegibility;
    // Controversial! But prevents text flickering in
    // Safari/Firefox when animations are running
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: 'liga', 'kern';

    // remove old style numerals
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1;
}

// Legacy Text styles
.copyText {
    font-family: @font-family-base;
    font-size: @font-size-base;
    font-weight: @font-weight-base;
    line-height: @line-height-base;
    color: @text-color;
}
.copyTextMedium {
    &:extend(.fontLight);
    color: @blueDeep;
    font-size: 17px;
    line-height: 21px;
}
.copyTextSmall {
    font-family: @font-family-base;
    font-size: @font-size-small;
    font-weight: @font-weight-base;
    line-height: @line-height-small;
    color: @text-color;
}


//
// Links
//
a {
    color: @link-color;
    text-decoration: none;
    transition: .2s ease-out;

    &:hover,
    &:focus {
        color: @link-hover-color;
    }

    &:active {}
}



//
// Headings
//
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: @headings-font-family;
    font-weight: @headings-font-weight;
    line-height: @headings-line-height;
    color: @headings-color;
    margin-bottom: @line-height-base;

    // remove old style numerals
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1;
}

.h1, h1 {
    font-size: @font-size-h1;
}
.h2, h2 {
    font-size: @font-size-h2;
}
.h3, h3 {
    font-size: @font-size-h3;
}
.h4, h4 {
    font-size: @font-size-h4;
    color: @black;
}
.h5, h5 {
    color: @font-size-h5;
    color: @black;
}
.h6, h6 {
    font-size: @font-size-h6;
    color: @black;
}

.page-title {
    margin-top: 0;
    text-align: center;
}



// Reset fonts for relevant elements
input,
button,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

//
// Body text
//
p {
    margin: 0 0 @line-height-base;
}


//
// Emphasis & misc
//
small,
.small {
    font-size: @font-size-small;
    line-height: @line-height-small;
}

.mini {
    font-size: @font-size-mini;
    line-height: @line-height-small;
}

.large {
    font-size: @font-size-large;
    line-height: @line-height-large;
}

strong,
.strong,
.bold {
    font-weight: @font-weight-bold;
}

em,
.italic {
    font-style: italic;
    font-weight: @font-weight-normal;
}

// Alignment
.text-left           { text-align: left; }
.text-right          { text-align: right; }
.text-center         { text-align: center; }
.text-justify        { text-align: justify; }
.text-nowrap         { white-space: nowrap; }

// Transformation
.text-lowercase      { text-transform: lowercase; }
.text-uppercase      { text-transform: uppercase; }
.text-capitalize     { text-transform: capitalize; }


//
// Lists
//
// Unordered and Ordered lists
ul,
ol {
    margin-top: @line-height-base;
    margin-bottom: @line-height-base;
    padding-left: @line-height-base;

    li {
        margin-bottom: (@line-height-base / 2);
        padding-left: (@line-height-base / 2);
    }
    ul,
    ol {
        margin-bottom: 0;
    }
}

// List options
.list-unstyled {
    padding-left: 0;
    margin: 0;

    li {
        list-style: none;
        margin-bottom: 0;
        padding-left: 0;
    }
}

// Inline turns list items into inline-block
.list-inline {
    .list-unstyled;
    margin-left: -5px;

    > li {
        display: inline-block;
        padding-left: 5px;
        padding-right: 5px;
    }
}


//
// Blockquotes
//
blockquote {
    border-left: 3px solid @greySocial;
    margin-left: 0;
    margin-top: @line-height-base;
    margin-bottom: @line-height-base;
    padding: (@line-height-base/2) @line-height-base;
    color: @greyHr;
    font-style: italic;

    p,
    ul,
    ol {
        &:last-child {
            margin-bottom: 0;
        }
    }
}

cite {
    &:extend(.bold, .small);
    font-style: italic;
}

// Addresses
address {
    margin-bottom: @line-height-base;
    font-style: normal;
    line-height: @line-height-base;
}


hr {
    border: 0;
    height: 2px;
    background: @blueLight;
    margin: @spacer 0;
}