/* ---------------------------------------
   Page section / anchor navigation
--------------------------------------- */

.page-nav {
    display: none;
}

/* ---------------------------------------
   Pages WITHOUT Page Nav

   No 2-column grid.
   Header/banner still overlays normally.
--------------------------------------- */

.out_wrap:not(:has(> .page-nav)) > .page_header {
    width: 100%;
}

.out_wrap:not(:has(> .page-nav)) > main {
    width: 100%;
}

.out_wrap:not(:has(> .page-nav)) > aside {
    float: none;

    width: 100%;
    max-width: none;
}


/* ---------------------------------------
   Desktop Layout
--------------------------------------- */

@media screen and (min-width: 981px) {

    /* ---------------------------------------
       Create 2-column grid ONLY when
       Page Nav exists
    --------------------------------------- */

    .out_wrap:has(> .page-nav) {
        display: grid;

        grid-template-columns:
            var(--toplogosize-dep) minmax(0, 4fr);

        column-gap: calc(var(--toplogomarginright) + 1rem);
        row-gap: 0;

        align-items: start;

        clear: both;
        overflow: visible;
    }


    /* =======================================
       CASE 1
       Page Header + Page Nav
    ======================================= */

    /* Full-width banner/header */
    .out_wrap:has(> .page_header):has(> .page-nav) > .page_header {

        grid-column: 1 / -1;
        grid-row: 1;

        width: 100%;
        min-width: 0;
    }


    /* Page Nav */
    .out_wrap:has(> .page_header):has(> .page-nav) > .page-nav {

        grid-column: 1;
        grid-row: 2;

        min-width: 0;
    }


    /* Main Content */
    .out_wrap:has(> .page_header):has(> .page-nav) > main {

        grid-column: 2;
        grid-row: 2;

        width: 100%;
        min-width: 0;
    }


    /* Empty spacer after main */
    .out_wrap:has(> .page_header):has(> .page-nav) > main + div:empty {

        grid-column: 1;
        grid-row: 3;
    }


    /* Aside below main */
    .out_wrap:has(> .page_header):has(> .page-nav) > aside {

        grid-column: 2;
        grid-row: 3;

        width: 100%;
        min-width: 0;
    }


    /* Section navigation below main */
    .out_wrap:has(> .page_header):has(> .page-nav) > #section_nav {

        grid-column: 2;
        grid-row: 3;
        min-width: 0;

    }


    /* =======================================
       CASE 2
       Page Nav WITHOUT Page Header
    ======================================= */

    /* Page Nav */
    .out_wrap:not(:has(> .page_header)):has(> .page-nav) > .page-nav {

        grid-column: 1;
        grid-row: 1;

        min-width: 0;
    }


    /* Main Content */
    .out_wrap:not(:has(> .page_header)):has(> .page-nav) > main {

        grid-column: 2;
        grid-row: 1;

        width: 100%;
        min-width: 0;
    }


    /* Empty spacer after main */
    .out_wrap:not(:has(> .page_header)):has(> .page-nav) > main + div:empty {

        grid-column: 1;
        grid-row: 2;
    }


    /* Aside below main */
    .out_wrap:not(:has(> .page_header)):has(> .page-nav) > aside {

        grid-column: 2;
        grid-row: 2;

        width: 100%;
        min-width: 0;
    }


    /* Section navigation below main */
    .out_wrap:not(:has(> .page_header)):has(> .page-nav) > #section_nav {

        grid-column: 2;
        grid-row: 2;

        width: 100%;
        min-width: 0;
    }


    /* ---------------------------------------
       Main sizing overrides
    --------------------------------------- */

    .out_wrap:has(> .page-nav) .main_size,
    .out_wrap:has(> .page-nav) main:not(.full_width) {
        width: 100%;
        min-width: 0;
    }


    /* ---------------------------------------
       Sticky Page Navigation
    --------------------------------------- */

    .page-nav {
        display: block;

        position: sticky;
        align-self: start;

        top: 1rem;

        margin-top: 1rem;

        padding: 1rem 0.5rem;

        background: #fff;

        border-top: 5px solid var(--primarygreen);

        box-shadow:
            0 20px 20px rgba(0, 0, 0, 0.08);
    }
}


/* ---------------------------------------
   Navigation List
--------------------------------------- */

.page-nav ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.page-nav li {
    margin: 0;
    padding: 0;

    border-bottom:
        1px solid var(--lightgreenbg);
}

.page-nav li:last-child {
    border-bottom: 0;
}


/* ---------------------------------------
   Navigation Links
--------------------------------------- */

.page-nav a {
    display: block;

    padding: 0.5rem 0;

    line-height: 1.4;

    text-decoration: none;
}

.page-nav a:hover,
.page-nav a:focus {
    text-decoration: underline;
}


/* ---------------------------------------
   Anchor Scroll Position

   Prevent an H2 from being hidden behind
   the site header when clicking a nav link.
--------------------------------------- */

main h2 {
    scroll-margin-top: 7.5rem;
}