<section id="header">

    <!-- A div for the "hero" section.. the large visual at the top -->
    <div id="hero">
        <a href="/">
            <img src="..."/>
            <h1>JS</h1>
        </a>
    </div>

    <!-- A nav for the site navigation -->
    <nav>
        <ul>
            <li><a href="/theology">Theology</a></li>
            <li><a href="/dev">Software</a></li>
            <li><a href="/me">About</a></li>
        </ul>
    </nav>
</section>
    

/*
The styles for the site "header"

The header currently contains a "hero" image, with
centered text "JS" and a few links for site navigation
 */
#site-header {
    width: 100vw; /*Full width (100 view-width units)*/
    max-width: 1020px; /*but not too big*/
    margin: 0 auto 2em; /*left-right centered, space at the bottom*/
    height: 66vh; /*more than half the view-height*/

    /*
    The Layout of the header
    ---------------------------
    */
    display: flex;
    flex-flow: column nowrap; /*A column of things*/
    align-items: center; /*centered on the page*/
    justify-content: flex-start; /*starting at the top*/


    box-shadow: 0 0 2px var(--shadow-color); /*A slight box-shadow to differentiate the header from the body*/

    & #hero {
        width: 100%;
        height: 60vh;

        position: relative; /*explicit, for the sake of the img's absolute position*/

        & a {
            /*no link styling here*/
            color: unset;
            text-decoration: none;
        }

        & img {
            /* HERO IMAGE */
            width: 100%; /*full width*/
            height: 100%; /*full height*/
            object-fit: cover; /*better "cropping" for different ratios*/
            position: absolute; /*take it out of the flow, so we can center the text more easily*/

            z-index: -1; /*and layer it behind the text*/

            /* Some custom style for the books hero image */
            @nest .books & {
                filter: blur(0.7px) grayscale(65%);
            }
        }

        & h1 {
            /* HERO TEXT */
            font-family: stoke, sans-serif; /*Fancy Font Family*/
            font-size: 9.313em; /*Giant size*/


            line-height: 60vh; /* center it vertically, same line-height as container height*/
            text-align: center; /* center ir horizontally */

            mix-blend-mode: color-burn;
            /*Cool effect with the font and the image:
                 All of the various mix-blend-modes have different effects,
                 after some experimenting this one seems to best for this site*/

            /*clear spacing things*/
            margin: 0;
            padding: 0;

            /*Customize the heading text for the dev section, which has
            a dark colored hero image*/

            @nest .dev & {
                color: white;
                mix-blend-mode: soft-light;
            }

            @nest .books & {
                mix-blend-mode: hard-light;
            }
        }
    }

    & nav {
        flex-grow: 1; /*take up any remaining space in the #site-header*/
        width: 100%; /*full width*/
        max-width: 1020px; /*but not too big*/

        line-height: 6vh; /*should be the remaining space.. to center the nav items vertically*/

        & a {
            /*no link styles in the nav*/
            text-decoration: none;
            color: unset;

            display: inline-block; /*take up the whole li area, not just the text*/
        }

        & ul {
            list-style-type: none; /*no bullets*/

            /*clear the spacings*/
            padding: 0;
            margin: 0;

            /*Nav Item Layout:*/
            display: flex;
            flex-flow: row wrap; /*A row of items*/
            justify-content: space-evenly; /*evenly spaced*/

        }
    }
}