/* input(83,26): run-time error CSS1034: Expected closing parenthesis, found '<'
input(100,26): run-time error CSS1034: Expected closing parenthesis, found '<' */
.page > header {
    border-bottom: var(--header-border-width) var(--header-border-style) var(--header-border-color);
    padding: var(--gap-primary) 0;
    color: var(--color-text-primary);
    box-shadow: 0px 3px 1rem .5rem #000000;
    background-color: var(--color-header-background);
    background-size: cover;

    position: sticky;
    top: 0;
    z-index: 1000;
}

header .logoAndContactInfo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2xs);
    flex-wrap: wrap;
}

header .logoAndContactInfo i{
    margin-right: var(--space-3xs);
}

header .logoAndContactInfo .logo {
    width: clamp(20rem, 50vw, 35rem);
}

header .logoAndContactInfo .contactInfo{
    font-size: var(--step-header-contactInfo);
    flex-shrink:0;
}

header .logoAndContactInfo .contactInfo a:hover{
    color: var(--color-primary);
}

header nav {
    padding-top: var(--space-xs);
}

header nav ul {
    --flexItemsPerRow: 6;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: flex-end;
    margin: 0;
}

header nav li {
    font-size: var(--step-0);
    list-style: none;
    border-radius: var(--radius-fixed-2);
    transition: background 500ms;
    background-color: #00000085;
    border: 1px solid var(--color-primary);
    /*background-color: #817760;*/
}

header nav li:hover{
    background-color: var(--color-primary);
    background-color: #ff6c00cc;
}

header nav li a {
    display: inline-block;
    padding: .1rem var(--space-xs);
}

.logo img {
    -webkit-filter: drop-shadow(5px 5px 5px #000000);
    filter: drop-shadow(5px 5px 5px #000000);
}

header .logoAndContactInfo .slogan {
    padding: var(--space-3xs) 0 0 0;
    font-style: italic;
    text-align: center;
}

@media screen and (width <= 700px) {
    header nav ul {
        --flexItemsPerRow: 3;
        gap: var(--space-2xs);
    }

    header nav li {
        width: calc((100% / var(--flexItemsPerRow)) - (((var(--flexItemsPerRow) - 1) / var(--flexItemsPerRow)) * var(--space-2xs)));
    }

    header nav ul > li{
        flex-grow: 1;
        text-align: center;
        white-space: nowrap;
    }
}

@media screen and (width <= 620px) {
    header .logoAndContactInfo{
        justify-content: center;
    }

    header .logoAndContactInfo .logo {
        width: 100%;
        flex-grow: 1;
    }
}