/* @import "wqstyle.root.css"; */

/*  -------------------------------
    Options
    - wq-style: Use this attribute to apply all styles.
    - wq-style-layout: Use this attribute to apply the layout styles.
    - wq-style-no-layout: Use this attribute to disable the layout styles.
*/

/* -------------------------------
    Body
*/

:is([wq-style], [wq-style-layout]):not([wq-style-no-layout]) {
    &:is(html, body) {
        background-color: var(--ecy-color-primary-ebbblue);
        min-height: 100vh;
        display: grid;
        grid-template-columns: minmax(1em,3em) 1fr minmax(1em,3em);
        grid-template-rows: auto 1fr auto; /* header body footer */
        grid-template-areas:
            "header header header"
            ". main ."
            ". footer .";  
    }

    & header {
        grid-area: header;
    }

    & main {
        grid-area: main;
    }

    & footer {
        grid-area: footer;
    }
}

/* -------------------------------
    Header
*/

:is([wq-style], [wq-style-layout]):not([wq-style-no-layout]) {
    & header {
        background-color: var(--wq-color-header);
        font-family: var(--wq-font-primary);
        box-sizing: border-box;
    }

    & header {
        & .environment {
            width: 100%;
            min-height: 10px;
            background-color: var(--ecy-color-primary-solaryellow);
            text-align: center;
            font-weight: bold;
            line-height: 2em;           
        }

        & .banner {
            width: 100%;
            background-color: white;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 1em;

            & > div:first-child {
                padding-left: 1em;
            }
            & > div:last-child {
                padding-right: 1em;
            }
        }

        & .ecology-logo {
            width: 260px;
        }
    }

    & nav {
        font-weight: 700;
    }
}

/* -------------------------------
    Main content
*/

:is([wq-style], [wq-style-layout]):not([wq-style-no-layout]) :is(main, #main) {
    background-color: var(--wq-color-body);
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 1em 2em;
}

/* -------------------------------
    Footer
*/

:is([wq-style], [wq-style-layout]):not([wq-style-no-layout]) {
    & footer {
        box-sizing: border-box;
        width: 100%;
        margin-top: 0em;
        min-height: 3em;
        padding-left: 2.5em;
        white-space: nowrap;
        color: black;
        background-color: var(--wq-color-footer);
    }

    & footer ul {
        list-style: none;
    }

    & footer li {
        font-size: 1.2rem !important;
        color: var(--wq-color-primary);
    }

    & footer li a {
        color: #000;
        text-decoration: none;
        white-space: nowrap;
        padding: 0px 3px;
    }

    & footer li :is(a:hover, a:focus) {
        color: #fff;
        background-color: var(--wq-color-primary);
        text-decoration: underline;
        border-radius: 5px;
    }

    @media(max-width: 576px) {
        & footer {
            padding-left: 1em;
        }

        & footer ul {
            display: flex;
            flex-direction: column;
        }
    }

    @media(min-width: 576px) {
        & footer ul {
            padding: inherit 0 10px 0;
            margin: 0;
        }

        & footer li {
            display: inline;
            margin-right: 1.5em;
        }
    }
}