/* HEADER */

header#masthead {
    background: linear-gradient(
        to bottom,
        var(--landing-page-bg-color-1),
        var(--landing-page-bg-color-2)
    );
    border-bottom: 2px solid #fff;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    color: var(--header-text-color);
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    gap: 0.5rem 1rem;
    font-family: "Sofia Sans Condensed", Arial, Helvetica, sans-serif;
    padding: 0 1em 0 0;
    position: sticky;
    top: 0;
    z-index: 999;

    a,
    .menu-toggle {
        color: var(--header-link-color);
        transition: 0.5s;

        &:hover {
            color: var(--header-text-color);
        }
    }

    .site-branding {
        flex: 0;
        text-wrap: pretty;

        .site-title {
            height: 100%;
            width: fit-content;
            background: linear-gradient(to right, #0a2138 50%, #24486d);
            clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
            display: flex;
            align-items: center;
            font-size: 1.7rem;
            font-weight: bold;
            margin: 0;
            padding: 0.25em 1em 0.25em 0.25em;

            #header-logo {
                --logo-width: 100px;

                min-width: var(--logo-width);
                max-width: var(--logo-width);

                @media screen and (max-width: 400px) {
                    --logo-width: 100px;

                    min-width: var(--logo-width);
                    max-width: var(--logo-width);
                }
            }
        }
    }

    #header-message {
        min-width: 225px;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 1.2em;
        padding-right: 1em;

        p {
            margin: 0;
        }
    }

    #header-menu-wrapper {
        height: fit-content;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        margin: auto;

        ul#icons {
            gap: 0.5rem;

            a {
                &:has(img) {
                    &:hover {
                        box-shadow: 0 0 10px var(--header-link-color);
                    }

                    &:has(img.social) {
                        &:hover {
                            box-shadow: 0 0 10px var(--header-link-color);
                        }
                    }
                }
            }
        }

        #site-navigation {
            min-width: fit-content;
            display: flex;
            align-items: center;
            flex: 0;
            text-transform: uppercase;

            a {
                font-size: 1.4em;
            }
        }
    }

    @media screen and (max-width: 600px) {
        gap: 0;
        padding: 0;

        #header-message {
            min-width: auto;
            font-size: 1em;
            justify-content: center;
        }

        #header-menu-wrapper {
            ul#icons {
                display: flex;
                align-items: center;
                flex-direction: column;
                flex-wrap: nowrap;
                gap: 0.5rem;
                justify-content: center;

                img {
                    &.social {
                        height: 20px;
                    }

                    &:not(.social) {
                        height: auto;
                        width: 24px;
                    }
                }
            }

            button.menu-toggle {
                svg {
                    height: 35px;
                    position: relative;
                    top: 3px;
                }
            }
        }
    }
}

/* NAVIGATION */

.main-navigation {
    display: block;
    width: 100%;
}

.main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    float: left;
    position: absolute;
    top: 100%;
    left: -999em;
    z-index: 99999;
}

.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation.toggled ul,
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul,
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
    min-width: 200px;
    background-color: #0a2138;
    border-radius: 0.5em 0 0.5em 0.5em;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    position: absolute;
    left: auto;
    top: 2rem;
    z-index: 999;
    text-align: right;

    &.sub-menu {
        background-color: #24486d;
    }
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul,
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
    display: flex;
    right: 0;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    display: block;
    /* text-decoration: none; */
}

@media screen and (width < 850px) {
    /* collapsed menu */
    .menu-toggle {
        appearance: none;
        background-color: transparent;
        border: 0;
        display: flex;
        padding: 0 !important;

        &:hover {
            cursor: pointer;
            background-color: transparent;
        }

        svg {
            height: 40px;
            width: auto;
            stroke: currentColor;
            fill: none;
        }
    }

    .main-navigation.toggled ul:not(.sub-menu) {
        display: flex;
        right: 1rem;
    }

    .site-branding {
        .site-title {
            font-size: 1.3rem;
        }
    }

    header#masthead {
        #header-menu-wrapper {
            gap: 0.5rem;
        }
    }
}

@media screen and (width >= 850px) {
    /* expanded menu */
    .menu-toggle {
        display: none;
    }

    .main-navigation ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.5rem 1rem;
    }
}