//------------------------- Normalize Header -------------------------
@mixin header-normalize {
    .masthead-headers,
    .nav-bar,
    .site-header .search-bar {
        display: block;
        height: auto;
    }

    .masthead-headers,
    .nav-bar {
        text-align: center;
    }
}

//------------------------- Normalize Primary and Secondary Content -------------------------
@mixin pri-sec-content-normalize {
    .entry-cr,
    .comments-cr,
    .page-nav,
    #secondary-cr,
    .main-content-hr-cr {
        max-width: none;
    }
    
    @include mq($monitor, true) {        
        .secondary-sidebar-active {
            #{$skeleton} {
                max-width: 70rem;
            }
        } 
        
        .secondary-sidebar-active {
            #primary {
                float: left;
                margin-right: -20rem;
            }
            #secondary {
                float: right;
                width: 20rem;
            }
            .site-content {
                padding-right: 20rem;
            }
        } 
    }
    
    #main-cr {
        max-width: 70rem;
    }
}


//------------------------- Dark Search Theme -------------------------
@mixin search-invert {
    .site-header {
        .search-bar-title .label,
        .search-submit {
            background-position: 0 0;
        }    
        .search-field {
            color: $color1;            
            &::-webkit-input-placeholder {
                color: $color1;
            }
            &::-moz-placeholder {
                color: $color1;
            }
            &::-ms-input-placeholder {
                color: $color1;
            }
        }
    }  
}


// Fallback px for rem font sizes (to support IE8-)
// http://www.stubbornella.org/content/2013/07/01/easy-peasy-rem-conversion-with-sass/
@function calculateRem($size) {
    $remSize: $size / 16px;
    @return #{$remSize}rem;
}

@mixin fontSize($size) {
    font-size: $size; //Fallback in px
    font-size: calculateRem($size);
}

%fontSize {
    @include fontSize(72px);
}

// Future Plan: lay down all typography style guide sizes and declare only their variables: Small, Medium, Large


// Converting 1px to rem
$base-font-size: 16;
$one-unit: (1 / $base-font-size) + rem;


// Media Query
$legacy: 240;
$mobile: 320;
$phablet: 600;
$tablet: 768;
$monitor: 980;
$desktop: 1024;
$widescreen: 1280;
$moviehouse: 1440;

// Media Query Max Width
@mixin mq-max($device-width) {
    @media only screen and (max-width: $device-width+px - 1) {
        @content 
    }
}

// Width and Height Size
@mixin size($width, $height: $width) {
    width: $width;
    height: $height;
}

// Media Query
// http://alwaystwisted.com/post.php?s=2013-04-01-my-media-query-mixin
@mixin mq($point, $IE9: false, $query1: min, $query2: width) {
    @if $IE9 == true {
        .lt-ie9 {
            @content;
        }
    }
    @media only screen and (#{$query1}-#{$query2}: $point / $base-font-size +em) {
        @content;
    }
}


// IE Fix Classes
@mixin lt-ie9-fix {    
    .lt-ie9 {
        @content;
    }
}

@mixin lt-ie8-fix {    
    .lt-ie8 {
        @content;
    }
}


//------------------------- Tools -------------------------

// Clearfix
@mixin cf {
    &:before,
    &:after {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }    
}

%cf {@include cf;}


// Visually Hidden
@mixin vhide {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

%vhide {@include vhide;}


// Visually Hidden Reversed
@mixin vhide-rev {
    clip: rect(auto, auto, auto, auto);
    height: auto;
    margin: auto;
    overflow: auto;
    padding: 0;
    position: static;
    width: auto;
}

%vhide-rev {@include vhide-rev;}


// Image Replacement
@mixin ir {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    overflow: hidden;
    *text-indent: -9999px;
    
    &:before {
        content: "";
        display: block;
        width: 0;
        height: 150%;
    }
}

%ir {@include ir;}


// Pseudo Content
@mixin psu-ct {
    &:after {
        content: '';
        position: absolute;
    }
}

%psu-ct {@include psu-ct;}


// Center Lists
@mixin mid-list {
    text-align: center;
    
    & > li {
        display: inline-block;
    }
}

%mid-list {@include mid-list;}


// Responsive Image
@mixin res-img {
    max-width: 100%;
    height: auto;
}

%res-img {@include res-img;}


//------------------------- Selector Blocks -------------------------

$skeleton: "
    #masthead-cr,
    #main-cr,
    #colophon-cr";

$typography: "
    html,
    button,
    input,
    select,
    textarea";
    
// Active Area
$active-area1: "
    .entry-hr a:hover,
    .entry-title,
    .entry-title-link,
    .entry-ct a,
    .entry-fr a:hover,
    .widget-area a,
    .comment-hr a:hover,
    .comment-form-admin a:hover,
    .comment-ct a,
    .entry-actions a,
    .comment-actions a,
    .entry-ct .more-link";

    // Active Area
$active-area2: "
    .page-nav-links a:hover,
    .page-links a:hover,
    .menu-toggle,
    .menu-active div.nav-menu > ul,
    .menu-active div.nav-menu li,
    div.nav-menu li,
    div.nav-menu li > a:hover,
    div.nav-menu li:hover a,
    input[type='submit']";