/*------------------------------------*\
    PAGE SETUP
    anchor footer to bottom of the viewport on short pages
\*------------------------------------*/

@use "../../settings";

html {
    min-height: 100%;
    position: relative;
}

.ds_page {
    display: grid;
    min-height: 100vh;
    grid-template:
        'page-top' auto
        'page-middle' 1fr
        'page-bottom' auto;

    &__top {
        grid-area: page-top;
    }

    &__middle {
        grid-area: page-middle;
    }

    &__bottom {
        grid-area: page-bottom;
    }
}

.ds_site-footer {
    position: static;
    bottom: 0;
    left: 0;
    right: 0;
}

.ds_page__middle {
    display: grid;
    grid-template-rows: auto 1fr;
    padding-bottom: 4rem;
    position: relative;
}


/*------------------------------------*\
    PRE FOOTER BACKGROUND
    for when a block immediately preceding the footer has a non-white background
\*------------------------------------*/

.ds_page__middle:has(.ds_pre-footer-background) {
    padding-bottom: 0;
}

.ds_page__middle.js-pre-footer-background {
    padding-bottom: 0;
}

.ds_pre-footer-background {
    padding-bottom: 4rem;
}




/*------------------------------------*\
    CATEGORY PAGE SUB-LAYOUT
\*------------------------------------*/

.category-lower,
.ds_category-lower {
    background: settings.$ds_colour__background--secondary;
    border-top: 0.0625rem solid settings.$ds_colour__border--faint;
    margin-top: -0.0625rem;
}

.ds_page__middle:has(.category-lower),
.ds_page__middle:has(.ds_category-lower) {
    grid-template-rows: auto;

    &:has(.ds_breadcrumbs) {
        grid-template-rows: auto 1fr;
    }

    > #main-content {
        display: grid;
        grid-template-rows: auto 1fr;
    }
}