/*
body
    body-wrap
        main-nav
        main-breadcrumb
        main-container
            content
            footer
*/
body {
    background: #f0f5fa;
    background: linear-gradient(180deg, #fcfcff, #f3f3f9);
    background: #eef3f9;

    color: #262a3e;
    min-height: 100vh;
}

.body-wrap {
    display: grid;
    grid-template-columns: 44px auto;
    grid-template-rows: 44px auto;
    grid-template-areas: "nav breadcrumb" "main main";
    height: 100%;
    position: relative;
}

/*
 Layout Sections
 -------------------------------------------------*/
.main-nav {
    z-index: 999;
}

.main-breadcrumb {
    grid-area: breadcrumb;
    overflow: hidden;
}

.main-container {
    grid-area: main;
    overflow: auto;
    overflow-x: hidden;
    padding: 0 1.25em;
    max-width: 100vw;
}

.main-container > .panel {
    margin: 1em 0;
}

/*
 Footer (part of .main-container)
 -------------------------------------------------*/
footer {
    font: 500 .75rem system-ui, sans-serif;
    margin: 1.2083em 0 1.2083em 0;
}

footer > .container {
    align-items: center;
    display: flex;
    justify-content: space-between;
    height: 1em;
}

footer .container a {
    color: inherit;
}

footer .container p {
    color: #999;
    margin: 0 .5rem;
    text-align: right;
}

footer .container p:not(:last-child) {
    margin-right: 0;
    text-align: left;
}

/*
 Responsive Layouts
 -------------------------------------------------*/
@media screen and (min-width: 420px) {
    .main-breadcrumb {
        z-index: 1000;
    }
}

@media screen and (min-width: 1280px) {
    body:not(.force-main-nav-hover) .body-wrap {
        grid-template-columns: 316px auto;
        grid-template-rows: 22px 44px auto;
        grid-template-areas: "nav empty" "nav breadcrumb" "nav main";
    }

    body:not(.force-main-nav-hover) .main-nav {
        grid-area: nav;
    }

    body:not(.force-main-nav-hover) .main-breadcrumb {
        position: relative;
        width: calc(100% - 3rem);
        margin-left: 1.5rem;
    }


    body:not(.force-main-nav-hover) .main-container {
        padding: 0 1.5em;
    }

    body:not(.force-main-nav-hover) .main-container > .panel {
        margin: 2em 0;
    }

    body:not(.force-main-nav-hover) footer {
        margin: 1.75em 0;
    }
}