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

/*
 * Standard margin
 */

@margin: 20px;

/*
 * The Grid
 */
@gutter_width: @margin;
@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})";

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

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

/*
 * @import of dynamic variables
 */
@import '../dynamic.less';

/*
 * Typography
 */

body {
    .rems(14);
    font-family: @body_font;
    color: @text_color;
    font-family: @primary_font;
    line-height: 24px;
}

a {
    color: @highlight_color;
    text-decoration: underline;

    &:hover {
        text-decoration: none;
    }
}

p {
    line-height: 26px;
    margin: 0 0 30px;
}

small {
    .ems(13);
    line-height: 20px;
}

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);
    }

    & when (@selector = h2) {
        .rems(36);
    }

    & when (@selector = h3) {
        .rems(30);
    }

    & when (@selector = h4) {
        .rems(24);
    }

    & when (@selector = h5) {
        .rems(20);
    }

    & when (@selector = h6) {
        .rems(16);
    }
}

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 {
        margin: 20px 0;
    }

    @media @flyout {
        width: 100%;

        img {
            margin: 0 auto;
            display: block;
        }
    }

    @media @mobile {

        img {
            width: 45vw;
        }
    }
}

/*
 * Content/Sidebar
 */
.sidebar {
    margin: 0 0 @gutter_width 0;

    @media @desktop, @tablet {
        width: 30%;
        margin: 0 0 0 @gutter_width;
        float: right;
    }
}

.sidebar + .postContent {

    @media @desktop, @tablet {
        width: calc(70% ~"-" (@gutter_width * 2));
        float: left;
    }
}

/*
 * Title Wrap
 */
.titleWrap {
    .clearfix();

    .innerText {
        .wrapper();
    }
}

.wp-caption-text {
    .rems(11);
    margin: 0;
    padding: 0 4px 5px;
}

.bypostauthor {
    display: block;
}

.sticky {
    position: relative;
}

.gallery-caption {
    display: block;
    text-align: left;
    padding: 0 10px 0 0;
    margin-bottom: 0;
}