:root
{
    --sz_header_logo: 200px;
}
#main > header
{
    display: grid;
    grid-template-columns: var(--sz_header_logo) 1.5fr 0.1fr;
    min-width: var(--sz_width_min);
    background-color: white;
}
    #main > header > *
    {
        display: flex;
        position: relative;
        align-items: center;
    }
    #main > header > .apprenticeshipalliance_nav_logo
    {
        background-image: url(/images/apprenticeshipalliance.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left center;
        width: var(--sz_header_logo);
    }
    .linkedin:before
    {
        background-image: url(/images/social_linked_in.png);
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        width: var(--sz_button);
        height: var(--sz_button);
    }
    #main > header > nav
    {

    }
        #main > header > nav > *
        {
            display: inline-flex;
            position: relative;
            justify-content: center;
            align-items: center;
            height: 100%;
            padding-left: 10px;
            padding-right: 10px;
            margin-left: 10px;
            margin-right: 10px;
        }
            #main > header > nav > * > a
            {
                text-decoration: none;
                color: black;
            }
            #main > header > nav > *:hover
            {
                background-color: var(--color_primary_light);
                border-top-left-radius: calc(10 * var(--sz_border_bottom));
                border-top-right-radius: calc(10 * var(--sz_border_bottom));
            }
            #main > header > nav > *.selected
            {
                font-weight: bold;
                color: var(--color_primary);
            }
                #main > header > nav > *.selected:after
                {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: -1px;
                    width: 100%;
                    border: var(--sz_border_bottom) solid var(--color_primary);
                }
                    #main > header > nav > *:hover.selected:after
                    {
                        border-color: black;
                    }
/********************* Start Media queries for different layouts */
@media screen and (max-width: 1200px)
{

}
@media screen and (max-width: 768px)
{
    #main > header
    {
        grid-template-columns: 250px 1.5fr 0.001fr;
        margin-left: 0;
        margin-right: 0;
    }
    /* Force selected nav link to 100% of available space */
    #main > header > nav > *.selected
    {
        display: flex;
        width: 100%;
    }
        #main > header > nav > *.selected:after
        {
            content: unset;
        }
    /* Make social media links disappear */
    #main > header > nav:not(:hover) > *:not(.selected)
    {
        display: none;
    }
    /* social links need to disappear */
    #main > header > :nth-child(3)
    {
        display: none;
    }
    #main > header > nav:hover
    {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: calc(100% - var(--sz_header_logo));
        background-color: white;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        box-shadow: 1px 1px 10px black;
    }
        #main > header > nav:hover > *
        {
            display: flex;   /* Force override */
            width: unset;
            justify-content: center;
            align-items: center;
            min-height: var(--sz_header_height);
            border-top-left-radius: unset;
            border-top-right-radius: unset;
        }
}