/* Default header is compressed */
.site-head {

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 10vh;
    transition: opacity 0.6s var(--ease-OutQuint);
    z-index: 10;
    background: transparent;

}

/* Big header style */
.site-head--compact {

    top: 0;
    height: 3rem;
    /* Large padding */
}

.site-head--bg {

    background: white;
}


.site-head--animate {

    transition: height 0.6s var(--ease-OutQuint), opacity 0.6s var(--ease-OutQuint);

}


.site-head__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 1rem 2rem 0.5rem 2rem;
    box-sizing: border-box;
}


.site-head__brand {
    display: flex;
    /* Ensures alignment */
    align-items: flex-start;
    width: 20vw;
    /* or use max-width, or a responsive unit */
    max-width: 300px;
    min-width: 100px;

    /* Vertically center logo */
    /* height: 60px; */
    /* Set your desired header/logo height */
    /* max-height: 100px; */
    /* Optional: limit max height */
}

.site-head--compact .site-head__brand {
    width: 75px;
    max-width: 150px;
    min-width: 50px;
    /* height: 40px; */
    /* max-height: 80px; */
}

/* Remember: Add class to SVG */


.site-head__brand .site-logo {
    display: block;
    /* position: static; */


    /* min-width: 150px;
    max-width: 200px; */
    width: 100%;
    height: auto;

    /* aspect-ratio: 3 / 1; */

    /* Match .wrapper and .site-head__inner padding */
    /* top: 1.5rem; */
    /* height: clamp(5px, 4vw, 30px); */
    color: white;
}

.site-head--bg .site-logo {
    color: black;
}


.site-head--animate .site-logo {

    transition: all 0.6s var(--ease-OutQuint);
}


.site-head--compact site-logo {

    color: black;
    /* height: clamp(20px, 6vw, 60px); */
    top: 4rem;
    /* top: 4rem;
    left: 4rem; */
}

@media (min-width: 768px) {

    .site-head {
        height: 15vh;

    }

    .site-head--compact {
        height: 8vh;
    }

    .site-head__inner {
        padding: 0 5rem 0 2rem;


    }

    .site-head__brand {
        display: flex;

        /* Ensures alignment */
        /* align-items: center; */
        width: 10vw;
        /* or use max-width, or a responsive unit */
        max-width: 350px;
        min-width: 75px;
        /* Vertically center logo */
        /* height: 60px; */
        /* Set your desired header/logo height */
        /* max-height: 100px; */
        /* Optional: limit max height */
    }

    .site-head--compact .site-head__brand {
        width: 200px;
        /* height: 40px; */
        /* max-height: 80px; */
    }
}