/*  --------------------------------------------------------------  */
/*  BLOCK   : app                                                   */
/*  --------------------------------------------------------------  */
/*  DESC    : App wrapper                                           */
/*          : by default set to a grid if supported                 */
/*          : with grid areas for header, nav, content, sidebar &   */
/*          : footer. Assumes .b-header, .b-nav, .b-content,        */
/*          : .b-sidebar & .b-footer                                */
/*          :                                                       */
/*  --------------------------------------------------------------  */
/*  BROWSERS: All                                                   */
/*          : Uses vh/vw if available                               */
/*          : Uses flexbox if available                             */
/*          : Uses grid if available                                */
/*  --------------------------------------------------------------  */
/*  REQUIRES: scaffold.css                                          */
/*          :                                                       */
/*  --------------------------------------------------------------  */
/*  ELEMENTS:                                                       */
/*          :                                                       */
/*  --------------------------------------------------------------  */
/*  MODSint : -emptyApp - Leave as block                            */
/*          :                                                       */
/*  --------------------------------------------------------------  */
/*  MODSext : -hideSite - Hide content of b-app if set on ancestor  */
/*          :                                                       */
/*  --------------------------------------------------------------  */
/*  VARS    : --b-app__bgc - app bg colour                          */
/*          :              - {default} = #ffffff                    */
/*          : --b-app__c   - app text colour                        */
/*          :              - {default} = #111111                    */
/*          : --b-app__pad - b-app warapper padding                 */
/*          :              - {default} = 0                          */
/*          :                                                       */
/*  --------------------------------------------------------------  */
/*  DEFAULTS:                                                       */
/*          : breakpoint h - 480px                                  */
/*          : breakpoint w - 320px                                  */
/*  --------------------------------------------------------------  */
/*  NOTES & :                                                       */
/*  CAVEATES:                                                       */
/*  --------------------------------------------------------------  */
/*  USEAGE  :                                                       */
/*  --------------------------------------------------------------  */
/*
*/

/*  --------------------------------------------------------------  */
/*  BASIC                                                           */
/*  --------------------------------------------------------------  */
/*  default app block behaviour */
.b-app {
    /* scope custom props */
    --_c: var(--b-app__c);
    --_bgc: var(--b-app__bgc);
    --_pad: var(--b-app__pad);

/*
    display: block;

    max-height: 100%;
    min-height: 100%;
    max-width: 100%;
    height: 100%;
    width: 100%;
*/

    background-color: #ffffff;
    background-color: var(--_bgc, #fffff);

    color: #111111;
    color: var(--_c, #111111);

    padding: 0;
    padding: calc(var(--_pad, 0) * 1rem);
}

/* hide site if in maintenance or landing mode */
.-maint.-hideSite ~ .b-app,
.-landing.-hideSite ~ .b-app { display: none; }

/*  general layout rules for elements */
.b-app > * {
    /*
    margin: 0 auto;
    margin-bottom: 2.4rem;
    margin-bottom: calc(--margin-base);
*/
    /*    background-color: inherit;*/
    /*    color: inherit;*/
    margin: 1rem;
}
.b-app > * {}
.b-app > .b-footer {
    margin: 0;
}
.b-app > .b-header {
    /*
    margin: 0;
    margin-bottom: 2.4rem;
    margin-bottom: calc(--margin-base);
*/
}



@media (max-width: 1268px) {

    .b-app > .b-header {
        /*        margin: 0;*/
    }
}

@media (min-width: 1268px) {
    .b-app > .b-sidebar {
        /*        margin: 0;*/
    }
    .b-app > .b-nav {
        /*        margin: 0;*/
    }
}
/*  ========================== END BLOCK =========================  */

/*  --------------------------------------------------------------  */
/*  with VH/VW [not currently used as using buggyfill & hacks       */
/*  --------------------------------------------------------------  */
/*@supports (height: 1vh) {}*/

/*  --------------------------------------------------------------  */
/*  with FLEXBOX                                                    */
/*  --------------------------------------------------------------  */
/*@supports (display: flex) {}*/

/*  --------------------------------------------------------------  */
/*  with CUSTOM PROPS                                               */
/*  --------------------------------------------------------------  */
/*@supports (--test: test) {}*/

/*  --------------------------------------------------------------  */
/*  with GRID                                                       */
/*  --------------------------------------------------------------  */
@supports (display: grid) {
    .b-app:not(.-emptyApp) {
        display: grid;
        grid-template-areas: "header header header" "nav content side" "footer footer footer";
        grid-template-columns: 200px 1fr 200px;
        grid-template-rows: auto 1fr auto;

/*        height: 100vh;*/
        /* viewportUnitsBuggyFill hacks for safari mobile, opera min, android < 4.4, etc */
/*        content: 'viewport-units-buggyfill; height: 100vh';*/

        grid-gap: 1rem;
    }
    .b-app > * {
        margin: 0;
    }
    .b-header {
        grid-area: header;
    }
    .b-content {
        grid-area: content;
    }
    .b-nav {
        grid-area: nav;
    }
    .b-sidebar {
        grid-area: side;
    }
    .b-footer {
        grid-area: footer;
    }

    @media (max-width: 1268px) {
        .b-app:not(.-emptyApp) {
            grid-template-areas: "header" "nav" "content" "side" "footer";
            grid-template-columns: 100%;
            /*                    grid-template-rows: auto minmax(75px, auto) 1fr minmax(75px, auto) auto;*/
            grid-template-rows: auto max-content 1fr max-content max-content;
        }
    }
}
/*  ========================== END BLOCK =========================  */

/*  --------------------------------------------------------------  */
/*  with GRID & CUSTOM PROPS [not currently used]                    */
/*  --------------------------------------------------------------  */
/*@supports (display: grid) and (--test: test) {}*/
/*  ========================== END BLOCK =========================  */

/*  --------------------------------------------------------------  */
/*  OVERRIDES DEFAULT                                               */
/*  --------------------------------------------------------------  */

/*  --------------------------------------------------------------  */
/*  OVERRIDES with GRID                                             */
/*  --------------------------------------------------------------  */
@supports (display: grid) {
}