/* ==========================================================================
   Layout: header, main navigation, footer
   Breakpoint: desktop from 960px wide, mobile below that.
   ========================================================================== */

@layer layout {

    /* Header
       ====================================================================== */

    header #main_nav {
        z-index: 10000;
        #swink_logo {
            background: url("../ui/swink-logo.svg") left top no-repeat;
            float: left;
            position: absolute;
            top: 25px;
            left: 35px;
            width: 153px;
            height: 113px;
            text-indent: -200vw;
            z-index: inherit;
        }
    }


    /* Footer
       ====================================================================== */

    footer {
        background: var(--red-light) url('../ui/swink-footer.svg') left bottom no-repeat;
        position: relative;
        h2 {
            clear: both;
            color: var(--red-bright);
            font-family: var(--font-headline);
            font-size: var(--big-size);
            line-height: var(--big-leading);
            margin-bottom: var(--big-space);
            padding: 2vh 0;
            &::before {
                content: "";
                display: table;
            }
        }
        .footer-drop {
            background: url('../ui/swink-drop.svg') left top no-repeat;
            float: left;
            text-indent: -200vw;
            width: 62px;
            height: 81px;
        }
        .contact a {
            color: var(--red-bright);
            text-decoration: none;
        }
        .address {
            font-size: 0.8rem;
            line-height: 1rem;
            text-transform: uppercase;
            p {
                margin-bottom: 1rem;
                padding-left: 40px;
                &.wisconsin {
                    background: url('../ui/footer-wi.svg') left center no-repeat;
                }
                &.utah {
                    background: url('../ui/footer-ut.svg') left center no-repeat;
                }
            }
            .socials {
                display: flex;
                flex-wrap: nowrap;
                justify-content: flex-start;
                margin-bottom: 2rem;
                li {
                    flex-basis: 10%;
                    a {
                        float: left;
                        text-indent: -200vw;
                        width: 28px;
                        height: 28px;
                    }
                    .facebook {
                        background: url('../ui/footer-facebook.svg') center center no-repeat;
                    }
                    .instagram {
                        background: url('../ui/footer-instagram.svg') center center no-repeat;
                    }
                }
            }
        }
    }


    /* Desktop
       ====================================================================== */

    @media screen and (width >= 960px) {

        main {
            width: calc(100vw - 55px);
        }

        /* Vertical menu down the right-hand edge */
        header #main_nav {
            button {
                display: none;
            }
            nav {
                background-color: white;
                display: flex;
                font-family: var(--font-headline);
                font-size: 18pt;
                justify-content: space-around;
                position: fixed;
                right: 0;
                bottom: 0;
                width: 55px;
                height: 100vh;
                z-index: inherit;
                li {
                    display: inline-block;
                    flex: 0 1 auto;
                    width: 55px;
                    height: 33%;
                    text-align: center;
                    writing-mode: vertical-rl;
                    a {
                        color: var(--red-bright);
                        padding-left: 8px;
                        position: relative;
                        right: 14%;
                        text-decoration: none;
                        &.active {
                            border-left: 5px solid var(--red-bright);
                        }
                    }
                    &.home {
                        display: none;
                    }
                }
            }
        }

        footer {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            column-gap: 2vw;
            padding: 8vh 100px 2vh 100px;
            .contact {
                grid-area: 01 / 02 / 02 / 09;
            }
            .address {
                grid-area: 02 / 10 / 03 / 13;
                place-self: end start;
                .socials {
                    padding-left: 20px;
                    li {
                        padding-left: 20px;
                    }
                }
            }
        }

    } /* end desktop */


    /* Mobile
       ====================================================================== */

    @media screen and (width < 960px) {

        /* Full-screen menu behind the hamburger button */
        header #main_nav nav {
            font-family: var(--font-headline);
            font-size: calc(42px + 3vw);
            z-index: 10000;
            button {
                background-color: transparent;
                border: 0;
                color: var(--red-bright);
                cursor: pointer;
                display: inline-block;
                position: fixed;
                top: 20px;
                right: 20px;
                margin: 0;
                padding: 0;
                width: 40px;
                height: 40px;
                z-index: 99999;
                .line1, .line2, .line3 {
                    background-color: var(--red-bright);
                    display: block;
                    margin: 7px 0;
                    width: 35px;
                    height: 4px;
                    transition: 0.4s;
                }
            }
            ul {
                align-items: center;
                background-color: white;
                display: flex;
                flex-flow: column nowrap;
                gap: 10vh;
                justify-content: center;
                overflow: hidden;
                position: fixed;
                width: 100vw;
                height: 0;
                transition: all 0.5s ease;
                visibility: hidden; /* closed menu links can't be reached by keyboard */
                z-index: 99998;
            }
            a {
                color: var(--red-bright);
                text-decoration: none;
            }
            &.open {
                ul {
                    width: 100vw;
                    height: 100vh;
                    visibility: visible;
                }
                .line1 {
                    transform: rotate(45deg) translate(7px, 5px);
                }
                .line2 {
                    opacity: 0;
                }
                .line3 {
                    transform: rotate(-45deg) translate(10px, -8px);
                }
            }
        }

        footer {
            padding: 100px calc(20px + 2vw);
            .address .socials {
                margin: 40px 0;
            }
        }

    } /* end mobile */


    /* Respect the "reduce motion" system setting.
       This comes after the mobile rules so it wins over their transitions. */
    @media (prefers-reduced-motion: reduce) {
        header #main_nav nav {
            ul,
            button .line1,
            button .line2,
            button .line3 {
                transition: none;
            }
        }
    }

} /* end layout */