@use "sass:color" as c;

@use "general" as *;
@use "fonts" as *;
@use "main-palette" as mp;

.header-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0px;
    height: fit-content;
    flex-direction: row;
    .header {
        display: flex;
        flex-direction: column;
        h1 {
            display: none;
            height: 0;
        }
        .header-banner {
            background-image: url("/img/home_banner.jpg");
            width: 298px;
            height: 140px;
            border-right: 1px solid mp.$border;
            border-bottom: 1px solid mp.$border;
            border-radius: 0% 0% 20px 0%;
        }
        .header-banner:hover {
            background-image: url("/img/home_banner_hover.jpg");
        }
    }
    .navbar-wrapper {
        display: flex;
        align-items: flex-start;
        margin: 8px 0px 2px 0px;
        width: 100%;

        .navbar-content {
            display: flex;
            flex-direction: column;
            width: 100%;

            ul {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                list-style: none;
                padding: 0 4px;
                li {
                    display: flex;
                    margin: 2px;
                    a,
                    p {
                        padding: 0.2em 0.5em;
                        border: 1px solid mp.$border;

                        background: mp.$bg;
                        background: linear-gradient(
                            0deg,
                            rgba(0, 0, 0, 1) 10%,
                            c.adjust(
                                    $color: mp.$link,
                                    $saturation: 4%,
                                    $lightness: -20%
                                )
                                100%
                        );

                        color: mp.$text;
                        font-family: $ll;
                        font-weight: normal;
                        font-size: 1em;
                        text-decoration: none;
                        /*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/

                        &:hover {
                            background: linear-gradient(
                                0deg,
                                rgba(0, 0, 0, 1) 0%,
                                c.adjust(
                                        $color: mp.$link,
                                        $saturation: 4%,
                                        $lightness: -10%
                                    )
                                    100%
                            );
                        }
                    }
                    p {
                        cursor: default;
                    }
                    --hover-image: url("/img/nav/default_hover.jpg");
                    /* TODO: finish each navbar image
                    &#home:hover ~ #nav-hover { --hover-image: url('/img/nav/home_hover.jpg'); }
                    &#about:hover ~ #nav-hover { --hover-image: url('/img/nav/about_hover.jpg'); }
                    &#blog:hover ~ #nav-hover { --hover-image: url('/img/nav/blog_hover.jpg'); }
                    &#reviews:hover ~ #nav-hover { --hover-image: url('/img/nav/reviews_hover.jpg'); }
                    &#links:hover ~ #nav-hover { --hover-image: url('/img/nav/links_hover.jpg'); }
                    &#contact:hover ~ #nav-hover { --hover-image: url('/img/nav/contact_hover.jpg'); }
                    */
                }
                #nav-hover {
                    width: 100%;
                    height: 104px;
                    max-height: 103px;
                    background: mp.$bg;
                    background-image: var(--hover-image, none);
                    /* temporary until i finish navbar images */
                    &:hover {
                        --hover-image: url("/img/nav/temp_hover.jpg");
                    }
                }
            }
        }
    }
}