.header {
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-div {
    background-color: var(--color-bg);
    grid-column: 1; grid-row: 1;
}

.header .__container {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.header__logo {

    /*


    border-bottom: 0.5vh solid var(--color-grey);

    width: 50vw;
    margin-left: calc(50% - 50vw);
    padding-left: calc(50vw - 50%);
    
    height: 8vh;
    background-color: var(--color-primary);

    display: flex;
    align-items: center;
    justify-content: left;


    clip-path: polygon(0% 0%, 100% 0%, 97% 100%, 100% 100%, 0% 100%);
    */

}

.header img {
    max-height: 9vh; width: auto; object-fit: contain;
    height: auto;
    padding: 0 var(--spacing-md);
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.header nav ul {
    display: flex;

    gap: var(--spacing-lg);
    margin: var(--spacing-sm) var(--spacing-md);
}

.header nav ul li {

    width: 9vw;
    height: 8vh;


    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0;
    /* transform: skewX(-20deg); */
}

.header li:after {
    content: "";
    height: 0.5vh;
    width: 60%;
    background-color: var(--color-grey);
    transition: all 0.3s ease;
}

.header li:hover:after,
.header li:focus-within:after,
.header li.header__nav-item--active:after {
    width: 90%;
    background-color: var(--color-primary);
}

.header li:hover a,
.header li:focus-within a,
.header li.header__nav-item--active a {
    color: var(--color-primary);
}
.header a {
    font-family: var(--font-family-headings), sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-grey);
    transition: color 0.3s;

    /* transform: skewX(20deg); */
}

.header .__graphics-container {
    position: relative;
    display: block;
    width: 100%;
    height: 5vh; /* Adjust this to change the overall thickness of the header */
}

.header .__bottom-graphic {
    border-top: 0.5vh solid var(--color-grey);
    /* Dynamic sizing */
    width: 100%;
    height: 100%;

    /*
     * The clip-path polygon points map out the shape clockwise starting from the top-left:
     * 1. 0% 0%       -> Top-left corner
     * 2. 100% 0%     -> Top-right corner
     * 3. 100% 50%    -> Bottom-right corner (determines the thinness of the right side)
     * 4. 65% 50%     -> Start of the upward slope on the right
     * 5. 60% 100%    -> End of the upward slope on the left
     * 6. 0% 100%     -> Bottom-left corner
     */
    clip-path: polygon(0% 0%, 100% 0%, 100% 55%, 40% 55%, 35% 100%, 0% 100%);
    background-color: var(--color-primary);
    z-index: 0;
    transition: all 0.3s ease;
}

.header .__bottom-graphic-2 {
    z-index: 2;
    background-color: var(--color-primary);
    width: 100%;
    height: 35%;
    top: 0; left: 0;
    position: absolute;
    border-top: 0.5vh solid var(--color-grey);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transition: all 0.3s ease;
}

.header.scrolled .__bottom-graphic-2 {
    width: 100%;
    height: 100%;
}

@media (max-width: 899px) {
    .header .__container {
        flex-direction: column;

    }

    .header .__container nav ul {
        gap: var(--spacing-sm);
        margin: var(--spacing-sm) 0;
        align-items: center;
        align-content: space-around;
        justify-content: space-around;
    }

    .header nav ul li {
        width: auto;
        height: auto;
        padding: var(--spacing-xs) 0;
    }
}