/* ============================
   ** RESET
   ============================ */

img {
    font-style: italic;

    background-repeat: no-repeat;
    background-size: cover;

    shape-margin: 0;

    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

body,
div,
ul,
li,
h1,h2,h3 {
    margin: 0;
    padding: 0;
}



/* ============================
   ** SETUP
   ============================ */

:root {
    --sys-minwidth: 800px;

    --clr-background-dark: #1b1611;
    --clr-primary: #a37748;
    --clr-primary-light: #dba36d;

    --clr-background-body: #000;
    --clr-background-content: rgba(from var(--clr-primary-light) r g b / .5);

    --clr-nav-border: var(--clr-primary-light);
    --clr-nav-background: var(--clr-primary);
    --clr-nav-text: var(--clr-primary-light);
    --clr-nav-text-hilight: white;

    --clr-food-title-text: var(--clr-primary);
    --clr-food-background: var(--clr-primary);
    --clr-food-text: black;
    --clr-food-highlight-background: var(--clr-primary-light);


    --ff-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    --ff-body: var(--ff-primary);
    --ff-highlight: var(--ff-primary);
    --ff-menu: var(--ff-primary);

    --fs-primary: 10pt;

    --fs-body: var(--fs-primary);

    --fw-regular: 400;
    --fw-bold: 800;  

    --fw-body: var(--fw-regular);
    --fw-highlight: var(--fw-bold);
}


/* ============================
   ** LAYOUT
   ============================ */

/* GENERAL LAYOUT */
body {
    background-color: var(--clr-background-body);
    font-family: var(--ff-primary);

}

.wrapper {
    position: relative;

    min-width: 400px;
    max-width: 1600px;
    /* margin-inline: min(1rem, 2vw); */
    margin-inline: auto;
    /* padding-right: min(1rem, 1vw); */
    padding-inline: min(1rem, 1vw);
    padding-bottom: 12em;
}

#logo {
    display: block;
    margin: 0 auto;
}


/* MENU */
nav {
    display: flex;

    position: sticky;
    top: 1rem;
    width: fit-content;

    margin: 0 auto;
    z-index: 999;

    .navigation {
        list-style: none;

        position: fixed;
        display: flex;
        flex-direction: column;
        float: right;

        top: 15em;
        right: 2em;

        border: 0.2em solid var(--clr-nav-border);
        background-color: rgba(from var(--clr-nav-background) r g b / .5);
        backdrop-filter: blur(1rem);
        border-radius: 0.3rem;
        z-index: 999;

        width: 15em;
        padding: 2rem;

        gap: 1em;

        li {
            width: fit-content;
        }

        li {
            padding: 0;
            margin: 0;
        }
        li > a {
            text-decoration: none;
            color: var(--clr-nav-text);
            font-weight: 500;
        }

        li > a > b {
            color: var(--clr-nav-text-hilight);
        }

        li { position: relative; }

        li[data-active="true"]::before,
        li:not([data-active="true"]):hover::before {
            content: '';
            position: absolute;

            bottom: -6px;
            left: 7%;
            height: 5px;
            width: 86%;
            border-radius: 0.2em;

            background-color: var(--clr-nav-text);
        }

        li[data-active="true"]::after,
        li:not([data-active="true"]):hover::after {
                content: '';
            position: absolute;
            z-index: 10;

            bottom: -4px;
            left: 0;
            height: 1px;
            width: 100%;

            background-color: var(--clr-nav-text);
        }
    }

    ul.navigation[data-isopen="false"] {
        display: none;
    }

    div.navigation {
        float: none;
        display: flex;
        flex-direction: row;

        position: sticky;
        top: 1rem;


        width: fit-content;
        margin: 0 auto;
        z-index: 999;


        gap: 1em;
        margin-bottom: 2em;

        width: fit-content;
        padding: 0.75rem 2rem;

        color: var(--clr-nav-text);
        font-weight: 500;

        span > b {
            color: var(--clr-nav-text-hilight);
        }
        
        .hamburger-button {
            width: 50px;
            height: 19px;

            fill: var(--clr-nav-text);
        }

        .hamburger-button:hover {
            fill: var(--clr-nav-text-hilight);
        }
    }

    @media only screen and (min-width: 800px) {
        div.navigation { display: none; }
    
        ul.navigation {
            position: static;
            flex-direction: row;

            gap: 2em;
            margin-bottom: 2em;

            width: fit-content;
            padding: 0.75rem 2rem;
        }

        ul.navigation[data-isopen="false"] {
            display: flex;
        }
    
    }
}

.content {
    background-color: rgba(from var(--clr-background-content) r g b / .3);
    backdrop-filter: blur(0.5rem);

    --food-image-width: 80px;
    --food-text-width: 250px;

    @media only screen and (min-width: 800px) {
        --food-image-width: 100px;
        --food-text-width: 300px;
    }

    /* margin: min(2rem, 1vh) min(2rem, 1vw);
    padding: min(1rem, 1vh); */

    padding-bottom: 2em;
   
    border-radius: min(2%, 8px);
}

.footer {
    --_inline-padding: min(2rem, 3vw);

    position: fixed;
    z-index: -10;

    width: calc( 100% - 3 * var(--_inline-padding));
    min-width: 400px;
    max-width: calc(1600px - 3 * var(--_inline-padding));

    bottom: 0;

    height: 173px;

    padding-left: calc(var(--_inline-padding));

    .info {
        float: left;

        >span {
            display: block;

            color: var(--clr-primary-light);
        }
    }

    img {
        /* position: fixed; */
        /* right: 0; */
        float: right;
        /* margin-right: min(1rem, 1vw); */

        width: min(577px, 65vw);

        @media only screen and (max-width: 800px) {
            display: none;
        }
    }


}



/* FOOD MENU */

article.foodgroup {
    --food-image-width: 80px;
    --food-text-width: 250px;

    @media only screen and (min-width: 950px) {
        --food-image-width: 100px;
        --food-text-width: 300px;
    }

    h1 {
        text-align: center;

        font-size: 2rem;
        color: var(--clr-food-title-text);
        font-weight: 800;
    }

    > .food-prologue {
        display: flex;
        flex-direction: column;
        gap: 0.2em;
        align-items: center;
        width: fit-content;

        margin: 2rem auto;
        padding: 1em;

        outline: 0.3rem  dashed var(--clr-background-content);
        background-color: var(--clr-background-content);

        span {
            display: block;
            font-weight: 600;
        }
    }

    > .food-epilogue {
        display: flex;
        padding: 1em;
        flex-direction: column;
        gap: 0.2em;
        align-items: center;
        width: fit-content;
        margin: 2rem auto;

        outline: 0.3rem  dashed var(--clr-background-content);
        background-color: var(--clr-background-content);

        h2 {
            font-size: 1.5em;
            font-weight: 800;
            text-align: center;
            margin-bottom: 1em;
        }

        span {
            display: block;
            font-weight: 600;
        }

        ul {
            list-style: none;

            display: flex;
            flex-direction: column;
            justify-items: center;
            padding-inline: 2em;

            li {
                display: grid;
                justify-content: space-evenly;
                grid-template-columns: 1fr 1fr;
                padding-bottom: 1em;

                span {
                    max-width: 15em;
                }

                span:last-of-type  {
                    justify-self: right;
                    align-content: end;
                }
            }

            li::after {
                content: '';
                height: 3px;
                width: 200%;
                border-bottom: 1px solid black;

            }
        }

        p:last-child {
            border: 3px solid var(--clr-background-content);
            border-radius: 6px;
            padding: 0.2em;
            font-weight: 600;
            font-size: 1.2em;
        }
    }

    ul.food {
        display: flex;
        justify-content: center;

        flex-wrap: wrap;
        gap: 1em;

        list-style: none;

        li {
            grid-template-columns: var(--food-image-width) auto;
            grid-template-areas:
            "image name"
            "image description"
            "image price";

            display: grid;
            gap: 0.2em;
            padding-inline: 0.2em;
            background-color: var(--clr-primary);
            width: calc(var(--food-image-width) + 2rem + var(--food-text-width));
            border-radius: 20px 2px 20px 2px;

            img {
                grid-area: image;
                width: var(--food-image-width);
                border-radius: 40% 40% 10% 10%;
                place-self: center;
            }

            .name {
                grid-area: name;
                font-size: 1.5em;
                font-weight: 800;
            }

            .description {
                grid-area: description;
                height: 2.5em;
            }

            .price {
                grid-area: price;
                place-self: start;
                background-color: var(--clr-primary-light);
                color: var(--clr-background-dark);
                font-weight: 700;
                padding: 0.2em;
                border-radius: 33%;
                margin: 0.2em;
            }
        }

        @media only screen and (max-width: var(800px)) {
            li {
                border-radius: 2px 20px 2px 20px;

            }
        }
    }
}