/* Styles for non-manager pages*/

header{
    margin-bottom: 3em;
    padding: 0.5em 1em 0.5em 1em;

    display: flex;
    justify-content: space-between;
    align-items: center;

    background: var(--primary-clr);
    color: var(--tertiary-clr);

    border-radius: var(--border-radius);
    box-shadow: 4px 4px 4px var(--shadow-clr);
}
header a{
    display: flex;
    flex-direction: column;
    align-items: center;

    color: var(--tertiary-clr);

    transition: var(--transition);
}
header li:hover a{
    text-decoration: underline;
}
header li:hover a, header nav ul li a svg:hover svg{
    color: var(--hover-clr-1);
}
header .left-header{
    display: flex;
    align-items: center;
    gap: 0.5em;
}
header .left-header p span{
    font-family: var(--tertiary-font);
    font-size: 0.9em;
}
header nav ul{
    display: flex;
    align-items: center;
    gap: 1em;
}
header nav ul li a svg{
    width: 25px;
    transition: var(--transition);
}
header nav ul li a{
    position: relative;
}

.numberItems{
    padding: 0em 0.2em 0em 0.2em;

    position: absolute;
    top: -5px;    
    right: -5px;

    border-radius: 50px;

    background: var(--secondary-clr);
}

footer{
    margin-top: 3em;
    padding: 1em;

    display: flex;
    flex-direction: column-reverse;
    gap: 2em;

    background: var(--primary-clr);
    
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: 4px 4px 4px var(--shadow-clr);
}
footer p span{
    color: var(--placeholder-clr)
}
footer nav{
    display: flex;
    flex-direction: column;
    gap: 1em;
}
footer nav ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
footer nav ul li svg, 
footer nav ul li svg path{
    color: var(--tertiary-clr);
    fill: var(--tertiary-clr);
}
footer nav ul li a{
    color: var(--footer-font-clr);
}
footer nav ul li{
    display: flex;
    align-items: center;
    gap: 0.3em;
}


@media(max-width: 768px){
    header a{
        font-size: 0.7em;
    }
    header svg{
        width: 20px;
    }
}


@media(min-width: 1024px){
    header .left-header p span{
        font-size: 1em;
    }
    header nav ul{
        gap: 3.5em;
    }

    footer{
        padding: 1em;

        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2em;

        background: var(--primary-clr);

        border-radius: var(--border-radius);
        text-align: center;
    }
    footer nav{
        display: flex;
        flex-direction: row;
        gap: 2em;
    }
    footer p {
        width: 25vw;
    }
    footer nav ul{
        display: flex;
        gap: 1.5em;
    }
    footer nav ul li svg{
        width: 25px;
    }
    footer nav ul li a{
        font-size: 0.8em;
    }
    footer p span{
        font-size: 0.9em;
    }
}