: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
            {
                display: block;
                text-decoration: none;
                color: black;
            }

            #main > header > nav > *.selected
            {
                font-weight: bold;
                color: var(--color_primary);
            }
                #main > header > nav > *.selected:after
                {
                    content: "";
                    position: absolute;
                    bottom: 3px;
                    left: -1px;
                    width: 100%;
                    border: var(--sz_border_bottom) solid var(--color_primary);
                }
                    #main > header > nav > *:hover.selected:after
                    {
                        border-color: black;
                    }

/* Hover styling for devices with a mouse or similar pointer */
@media (hover: hover) and (pointer: fine)
{
    #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));
    }
}
/********************* Start Media queries for different layouts */
@media screen and (max-width: 1200px)
{

}
@media screen and (max-width: 768px)
{
    /* This is for devices with a mouse and can hover over something like a MS Surface or a desktop computer */
    #main:not([data-ismobile="mobile"]) > header
    {
        grid-template-columns: 250px 1.5fr 0.001fr;
        margin-left: 0;
        margin-right: 0;
    }
    #main:not([data-ismobile="mobile"]) > header > nav > *.selected
    {
        /* Force selected nav link to 100% of available space */
        display: flex;
        width: 100%;
    }
        #main:not([data-ismobile="mobile"]) > header > nav > *.selected:after
        {
            /* Remove the underline */
            content: unset;
        }

    #main:not([data-ismobile="mobile"]) > header > nav:not(:hover) > *:not(.selected)
    {
        /* Make non active links disappear */
        display: none;
    }

    #main:not([data-ismobile="mobile"]) > header > :nth-child(3)
    {
        /* social links need to disappear */
        display: none;
    }
    #main:not([data-ismobile="mobile"]) > 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:not([data-ismobile="mobile"]) > 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;
        }

    /* Android or IOS */
    #main[data-ismobile="mobile"] > header
    {
        grid-template-columns: 1fr;
        margin-left: 0;
        margin-right: 0;
        position: relative;
    }
        #main[data-ismobile="mobile"] > header > nav,
        #main[data-ismobile="mobile"] > header > :nth-child(3)
        {
            /* social links need to disappear */
            display: none;
        }
            #main[data-ismobile="mobile"] > header:before
            {
                content: attr(data-active_page);
                display: flex;
                position: absolute;
                top: 0;
                right: 0;
                width: calc(100% - var(--sz_header_logo));
                height: 100%;
                justify-content: center;
                align-items: center;
                font-weight: bold;
            }
            #main[data-ismobile="mobile"] > header.clicked > nav
            {
                /* Display the nav block when the logo is clicked */
                display: grid;
                grid-template-columns: 1fr;
                grid-gap: var(--sz_button_margin);
                position: absolute;
                top: var(--sz_header_height);
                right: 0;
                width: 100%;
                background-color: white;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                box-shadow: 1px 11px 10px black;
                padding-bottom: var(--sz_button_margin);
            }
                #main > header > .apprenticeshipalliance_nav_logo
                {
                    /* This makes the entire heading clickable */
                    width: 100%;
                }
                #main[data-ismobile="mobile"] > header.clicked > nav > div
                {
                    display: flex;
                    position: relative;
                    justify-content: center;
                    align-items: center;
                    min-height: calc(0.5 * var(--sz_header_height) );
                }
                    #main[data-ismobile="mobile"] > header.clicked > nav > div.selected
                    {
                        border: unset;
                    }
                    #main[data-ismobile="mobile"] > header.clicked > nav > div:after
                    {
                        content: "→";
                        display: flex;
                        position: absolute;
                        top: 0;
                        right: 0;
                        height: 100%;
                        justify-content: flex-end;
                        align-items: center;
                        font-weight: bold;
                        border: unset;
                    }
}