// Modify any of the following 3 variables to update overall site width...
$grid-column-width: 60px;
$grid-column-count: 12;
$grid-gap: 20px;

// We're implicitly defining "full" and "main" grid template areas by specifying "-start" and "-end" - see
// https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/
$grid-template-cols: [full-start] 1fr [main-start] repeat(#{$grid-column-count}, minmax(auto, #{$grid-column-width})) [main-end] 1fr [full-end];

$site-width: ($grid-column-count * ($grid-column-width + $grid-gap)) - $grid-gap; // 940px
$site-padding: $grid-gap;

$bg-blue: rgb(69, 108, 169);
$bg-grey: #ccc;
$color-light: #fff;

$mq-small: 480px;
$mq-medium: 640px;
$mq-large: 980px;

// -------------------------------------------------------
// Simple reset, basic styling
// -------------------------------------------------------
* {
    box-sizing: border-box;
    margin: 0;
}

html {
    height: 100%;
}

.skiplinks {
    position: absolute;
}

// Accessibility
.accessibility {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;

    &:focus {
        background: $color-light;
        clip: auto;
        font-weight: bold;
        height: auto;
        left: 10px;
        margin: 0;
        overflow: visible;
        padding: 5px;
        top: 10px;
        width: auto;
    }
}

.full,
.site-wide {
    > .wrapper {
        margin: 0 auto;
        padding-left: $grid-gap;
        padding-right: $grid-gap;

        @media (min-width: #{$site-width + (2 * $grid-gap)}) {
            max-width: $site-width;
            padding-left: 0;
            padding-right: 0;
        }
    }
}

// -------------------------------------------------------
// Page template grid  - CSS Grid
// -------------------------------------------------------
// -------------------------------------------------------
// Standards CSS grid support - use @supports instead of Modernizr "grid" detection
// -------------------------------------------------------
@supports (grid-area: auto) {
    body {
        display: grid;
        grid-gap: $grid-gap;
        grid-template-columns: $grid-template-cols;
        grid-template-rows: auto 1fr auto;
        min-height: 100vh;

        > * {
            grid-column: main;
        }
    }

    .site-main,
    .site-content-sidebar-wrapper {
        grid-column: 1 / span $grid-column-count + 2;
        // Define inner grid
        display: grid;
        grid-gap: $grid-gap;
        grid-template-columns: $grid-template-cols;
    }

    .site-sidebar,
    .site-content {
        grid-column: 2 / span $grid-column-count;
    }

    .site-sidebar {
        grid-row: 1;
    }

    .site-wide {
        grid-column: 2 / span $grid-column-count;
    }

    .full {
        grid-column: full;
    }

    @media (min-width: #{$mq-medium + 1}) {
        .site-content {
            // e.g. 12 cols, start at col 5, span 9 cols (75% overall width)
            grid-column: #{($grid-column-count * .25) + 2} / span $grid-column-count * .75;
        }

        .site-sidebar {
            // e.g. 12 cols, span 3 cols (25% overall width)
            grid-column: 2 / span $grid-column-count * .25;
        }
    }
}

// -------------------------------------------------------
// Page template grid layout - CSS Flexbox
// -------------------------------------------------------
// -------------------------------------------------------
// 1. Edge uses old CSS grid syntax so fallback to flexbox instead, and use flexbox for IE11/10 too - see
//      https://rachelandrew.co.uk/archives/2017/04/04/edge-starts-work-on-their-grid-implementation-update/
//      https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks
// 2. Sticky footer - see
//      https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
// -------------------------------------------------------
@mixin layout-page-fallback {
    .site-full {
        margin-left: -$grid-gap;
        margin-right: -$grid-gap;
    }

    .site-main {
        padding: 0 $grid-gap;
    }

    .site-header,
    .site-main,
    .site-full,
    .site-wide,
    .site-content-sidebar-wrapper,
    .site-sidebar {
        margin-bottom: $grid-gap;
    }

    .site-content-sidebar-wrapper {
        display: table;
        width: 100%;
    }

    .site-sidebar {
        display: table-caption;
    }
}

@mixin layout-page-flex {
    @include layout-page-fallback;

    body {
        display: flex;
        flex-direction: column; // [2]
        height: 100%; // [2]
    }

    .site-header,
    .site-footer {
        flex: none; // [2]
    }

    .site-main,
    .site-content-sidebar-wrapper {
        flex: 1 0 auto; // [2]
    }

    .site-full,
    .site-wide {
        flex: 1 0 100%;
    }

    @media (min-width: #{$mq-medium + 1}) {
        .site-main,
        .site-content-sidebar-wrapper {
            // Define inner flex container
            align-content: flex-start;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .site-content-sidebar-wrapper {
            flex-direction: row-reverse;
            max-width: $site-width;
        }

        .site-sidebar,
        .site-content {
            flex: 1 0 auto;
        }

        .site-sidebar {
            display: inline-block; // To override "table-caption" in mobile view
            margin-right: $grid-gap;
            max-width: (.25 * $grid-column-count * $grid-column-width) + (((.25 * $grid-column-count) - 1) * $grid-gap);
        }
    }
}

// e.g. Edge
@supports not (grid-area: auto) {
    @include layout-page-flex;
}

// e.g. IE11/IE10
.flexbox.no-flexboxlegacy {
    @include layout-page-flex;
}

// -------------------------------------------------------
// Page template grid layout - NO CSS Grid / Flexbox
// -------------------------------------------------------
// -------------------------------------------------------
// Fallbacks - no grid / no flexbox
// -------------------------------------------------------
@mixin clearfix {
    &:before,
    &:after {
        content: '';
        display: table;
    }

    &:after {
        clear: both;
    }
}

.no-flexbox.no-flexboxlegacy {
    @include layout-page-fallback;

    .site-main {
        margin: 0 auto;
        max-width: #{$site-width + (2 * $site-padding)};
    }

    .site-full {
        margin-left: 0;
        margin-right: 0;
    }

    .site-content,
    .site-sidebar {
        margin-right: 0;
        max-width: 100%;
    }

    @media (min-width: #{$mq-large + 1}) {
        .site-content-sidebar-wrapper {
            @include clearfix;
        }

        .site-content {
            float: right;
            // 75% overall width
            max-width: (.75 * $grid-column-count * $grid-column-width) + (((.75 * $grid-column-count) - 1) * $grid-gap);
            width: 100%;
        }

        .site-sidebar {
            float: left;
            // 25% overall width
            max-width: (.25 * $grid-column-count * $grid-column-width) + (((.25 * $grid-column-count) - 1) * $grid-gap);
            width: 100%;
        }
    }
}

// -------------------------------------------------------
// Internal content "grid" layout - uses flexbox
// 1. Left over "grid-items" grow to fill row
// 1a. Deal with remainder of 1
// See http://www.heydonworks.com/article/flexbox-grid-finesse for [1] and [1a]
// 2. Or ... left over "grid-items" have same widths as all the rest
// 3. Equal height "grid-items"
// -------------------------------------------------------
@mixin flex-size($flex-width, $property: flex-basis) {
  #{$property}: calc(#{$flex-width} - #{$grid-gap});
}

.grid {
    display: flex;
    flex-wrap: wrap;

    @media (min-width: #{$mq-small + 1}) {
        margin-right: -$grid-gap;
    }
}

.grid-item {
    display: flex; // [3]
    flex: 0 0 100%; // [2]
    flex-direction: column; // [3]
    margin-bottom: $grid-gap;

    @media (min-width: #{$mq-small + 1}) {
        @include flex-size(50%);
        margin-right: $grid-gap;

        @for $i from 3 through 6 {
            .grid-#{$i} & {
                @include flex-size(100% / $i);
            }
        }
    }
}

.grid-item-wrap {
    flex: 1 0 auto; // [3]
}

// Nested grids
.grid {
    .grid {
        margin-bottom: -$grid-gap;
    }
}

// Asymmetric grids
.grid-2-wide-left {
    @media (min-width: #{$mq-small + 1}) {
        > .grid-item:first-child {
            @include flex-size(66.667%);
        }

        > .grid-item:last-child {
            @include flex-size(33.333%);
        }
    }
}

.grid-2-wide-right {
    @media (min-width: #{$mq-small + 1}) {
        > .grid-item:first-child {
            @include flex-size(33.333%);
        }

        > .grid-item:last-child {
            @include flex-size(66.667%);
        }
    }
}

.grid-2-wide-left,
.grid-2-wide-right {
    @media (min-width: #{$mq-small + 1}) and (max-width: #{$mq-medium}) {
        > .grid-item:first-child,
        > .grid-item:last-child {
            @include flex-size(50%);
        }
    }
}

// Grid items span multiple cols
.grid,
.grid-3,
.grid-4,
.grid-5,
.grid-6 {
    @media (min-width: #{$mq-medium + 1}) {
        .g2 { @include flex-size(16.667%) }
        .g3 { @include flex-size(25%) }
        .g4 { @include flex-size(33.333%) }
        .g5 { @include flex-size(41.667%) }
        .g6 { @include flex-size(50%) }
        .g7 { @include flex-size(58.333%) }
        .g8 { @include flex-size(66.667%) }
        .g9 { @include flex-size(75%) }
        .g10 { @include flex-size(83.333%) }
    }
}

// Last "grid-item" wraps before we hit mobile breakpoint
:not([data-cols-fill='true']) {
    @media (min-width: #{$mq-small + 1}) and (max-width: #{$mq-medium}) {
        @for $i from 3 through 6 {
            &.grid-#{$i} {
                .grid-item {
                    @include flex-size(100% / ($i - 1));
                }
            }
        }
    }

    @media (min-width: #{$mq-small + 1}) and (max-width: #{$mq-large}) {
        // Nested grid
        .grid-item {
            .grid-item {
                @include flex-size(100%);
            }
        }
    }
}

[data-cols-fill='true'] {
    .grid-item {
        flex-grow: 1; // [1]
        // 220px (i.e. same width as sidebar, based on 25% of overall width)
        min-width: (.25 * $grid-column-count * $grid-column-width) + (((.25 * $grid-column-count) - 1) * $grid-gap);
    }

    @for $i from 3 through 6 {
        &.grid-#{$i} {
            :nth-last-child(2):nth-child(#{$i}n) {
                @include flex-size(100% / ($i - 1), min-width); // [1a]
            }
        }
    }
}

// -------------------------------------------------------
// Internal content "grid" layout fallbacks - uses inline-block
// -------------------------------------------------------
.no-flexbox.no-flexboxlegacy {
    .grid {
        letter-spacing: -.4em;
        margin-right: 0;
        width: 102%;

        > .grid-item {
            display: inline-block;
            letter-spacing: normal;
            margin-right: 0;
            padding-right: 2%;
            vertical-align: top;
            width: 100%;

            @media (min-width: #{$mq-medium + 1}) {
                width: 50%;
            }

            .grid-item {
                width: 100%;
            }
        }
    }
}

// -------------------------------------------------------
// Styling for decorative purposes only
// -------------------------------------------------------
body {
    font-family: sans-serif;
}

h1,
h2,
p {
    font-size: 16px;
    margin-bottom: 1em;
}

.wrapper {
    background-color: $bg-grey;
    padding: 10px 0;
}

.full {
    background-color: rgba($bg-blue, .2);

    &.site-main {
        background-color: transparent;
    }

    > .wrapper {
        background: $bg-blue;
        color: $color-light;
    }
}

.site-header,
.site-footer {
    > .wrapper {
        height: 100%;
    }
}

.site-full {
    background-color: rgba($bg-blue, .5);
    padding: $site-padding;
}

.site-main,
.site-content-sidebar-wrapper {
    outline: 4px dashed tomato;
    position: relative;

    &:before,
    &:after {
        background-color: rgba(tomato, .7);
        content: '<main id="main">';
        display: inline-block;
        color: $color-light;
        padding: 5px;
        position: absolute;
        right: 0;
        top: 0;
    }

    &:after {
        bottom: 0;
        content: '</main>';
        top: auto;
    }
}

.site-content-sidebar-wrapper {
    outline-color: darkolivegreen;

    &:before,
    &:after {
        background-color: rgba(darkolivegreen, .7);
    }

    &:before {
        content: '<div class="site-content-sidebar-wrapper">';
    }

    &:after {
        content: '</div>';
    }
}

.grid-item-wrap {
    background-color: darkolivegreen;
    color: $color-light;
    padding: $grid-gap;

    .grid-item-wrap {
        background-color: rgba(tomato, .5);
    }
}