/*
 * Widths
 */
@wrapper_width: 1360px;
@medium_width: 800px;
@mobile_width: 640px;

/*
 * The Grid
 */
@gutter_width: 20px;
@column_count: 24;

/*
 * Typography
 */
@base_font_size: 16;

/*
 * Border Radius
 */
@border_radius: 4px;

/*
 * Colours
 */
@border_color: #dde3e8;
@text_color: #323232;

@primary_color: #449bf7;
@secondary_color: #4ed2b5;

/*
 * Dark background / Light text
 */
@dark_color: #323232;
@light_text_color: @light_color;

/*
 * Light background / Dark text
 */
@light_color: #edf0f2;
@dark_text_color: @text_color;
@med_color: #b7babc;

/*
 * Alert Colours
 */
@alert_color: #e74c3c;
@information_color: #f1c40f;
@success_color: #2ecc71;

/*
 * Misc Colours
 */
@highlight_color: @primary_color;
@background_color: @light_color;
@mtc_blue: #0f55c4;

/*
 * Media Query Breakpoints
 */
@desktop: ~"all and (min-width: " (@wrapper_width + 20) ~ ")";
@tablet: ~"all and (min-width: " (@mobile_width + 1) ~ ") and (max-width: " (@wrapper_width + 19) ~ ")";
@medium: ~"all and (min-width: " (@medium_width + 1) ~ ") and (max-width: @{wrapper_width})";
@mobile: ~"all and (max-width: @{mobile_width})";

/*
 * @import of dynamic variables
 */
@import 'font_awesome/fontawesome.less';
@import 'mixins.less';
@import 'reset.less';
@import 'font.less';
@import 'form.less';
@import 'buttons.less';
@import 'holding.less';

/*
 * Site Styles
 */
.wrapper() {
    max-width: @wrapper_width;
    margin: 0 auto;
    .clearfix();
}

.wrapper {
    .wrapper();
}

/*
 * Body Tag
 */
html {
    font-size: @base_font_size + 0px;

    &:before {
        content: 'tablet: @{wrapper_width}, mobile: @{mobile_width}';
        position: absolute;
        top: 0;
        visibility: hidden;
    }
}

body {
    .ems(13);
    line-height: 1.462;
    font-family: @body_font;
    min-width: 320px;
    max-width: 100%;
}

/*
 * Typography
 */
a {
    color: @highlight_color;
}

p {
    line-height: 22px;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 15px 0;
    color: @text_color;
    font-family: @primary_font;
    line-height: 1;
}

.headingStyle(@selector: h1) {

    & when (@selector = h1) {
        .rems(44);
        line-height: 50px;
    }

    & when (@selector = h2) {
        .rems(36);
        line-height: 44px;
    }

    & when (@selector = h3) {
        .rems(30);
        line-height: 36px;
    }

    & when (@selector = h4) {
        .rems(24);
        line-height: 26px;
    }

    & when (@selector = h5) {
        .rems(20);
        line-height: 24px;
    }

    & when (@selector = h6) {
        .rems(16);
        line-height: 20px;
    }
}

h1 {
    .headingStyle(h1);
}

h2 {
    .headingStyle(h2);
}

h3 {
    .headingStyle(h3);
}

h4 {
    .headingStyle(h4);
}

h5 {
    .headingStyle(h5);
}

h6 {
    .headingStyle(h6);
}

/*
 * Site Logo
 */

.logo {
    float: left;
    padding: 0;
    margin: 30px 0;

    @media @tablet, @mobile {
        margin: 20px 0;
    }

    @media @mobile {
        width: 100%;
        text-align: center;
    }
}