@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');

:root {
    font-family: 'Google Sans', sans-serif;
    font-size  : 16px;
}

body {
    margin     : 0;
    padding    : 0;
    line-height: 1.5rem;

    display              : grid;
    grid-template-rows   : auto 1fr;
    grid-template-columns: 13rem 1fr;
    grid-template-areas  :
        'header header'
        'nav main';

    background-color: #fafafa;
    background-image:
        linear-gradient( #eee 1px, transparent 1px ),
        linear-gradient( 90deg, #eee 1px, transparent 1px );
    background-size    : 4px 4px;
    background-position: 0 0;

    & > header {
        grid-area       : header;
        background-color: #9cf;
        border-bottom   : 3px double #369;
        line-height     : 1.125rem;
        box-shadow      : 0 0 0.25em rgba( 0, 0, 0, 0.25 );

        p.title {
            margin        : 0 0 0 0;
            padding       : 0.5em 0.25em 0.25em 0.25em;
            font-size     : 2em;
            font-weight   : bold;
            letter-spacing: 0.125em;
            font-style    : italic;

            a {
                text-decoration: none;
                color          : #c0f0ff;
            }
        }

        p.subtitle {
            margin        : 0 0 0 2em;
            padding       : 0.25em;
            font-size     : 1.25em;
            color         : #369;
            letter-spacing: -1px;
        }
    }

    nav, main {
        margin          : 1rem;
        border          : 1px solid silver;
        background-color: white;
        border-radius   : 0.5em;
        overflow        : hidden;
        box-shadow      : 0 0 0.25em rgba( 0, 0, 0, 0.25 );

        p.header {
            font-size       : 1.125rem;
            margin          : -0.5rem -0.5rem -0.25rem -0.5rem;
            font-weight     : bold;
            background-image: linear-gradient( to bottom, #fafafa, #ccc );
            padding         : 0 0.25em;
        }
    }

    nav {
        grid-area     : nav;
        align-self    : start;
        padding       : 0.5rem;
        padding-bottom: 0;

        p:not(.header), ul {
            font-size: 0.8rem;
        }

        ul, p:not(.header) {
            line-height: 1.25em;
        }

        ul {
            padding-left: 1em;
            line-height: 1.5em;
        }

        ul.testaments > li {
            font-weight: bold;
        }

        ul.sections > li {
            font-weight: normal;
            font-style: italic;
        }

        ul.books > li {
            font-style: normal;
        }
    }

    main {
        grid-area     : main;
        align-self    : start;
        margin-left   : 0;
        padding       : 1rem;
        padding-bottom: 0;

        h1 {
            font-size       : 1.125rem;
            margin          : -1rem -1rem 1rem -1rem;
            font-weight     : bold;
            background-image: linear-gradient( to bottom, #fafafa, #ccc );
            padding         : 0 0.25em;
        }

        obml {
            reference {
                display: none;
            }

            header {
                font-size: 1.125em;
                font-weight: bold;
            }

            sub_header {
                font-weight: bold;
            }

            verse_number, footnote, crossref {
                vertical-align: super;
                font-size     : 0.75em;
                line-height   : 0;
            }

            verse_number {
                font-weight : bold;
                margin-right: 0.25em;
            }

            footnote, crossref {
                a {
                    text-decoration: none;
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }

            indent[level="1"] { margin-left: 1.5em }
            indent[level="2"] { margin-left:   3em }
            indent[level="3"] { margin-left: 4.5em }
            indent[level="4"] { margin-left:   6em }

            woj {
                color: #c00;
            }

            italic {
                color     : #333;
                font-style: italic;
            }

            small_caps {
                font-variant: small-caps;
            }
        }

        div.footnotes, div.crossrefs {
            ul {
                padding-left: 2em;
            }

            li {
                list-style : none;
                text-indent: -1.25em;
            }

            a {
                vertical-align: super;
                font-size     : 0.75em;
                line-height   : 0;
            }
        }
    }
}

@media ( max-width: 600px ) {
    body {
        grid-template-rows   : auto auto auto;
        grid-template-columns: 1fr;
        grid-template-areas  :
            'header'
            'main'
            'nav';

        main {
            margin-left  : 1rem;
            margin-bottom: 0;
        }

        nav {
            p:not(.header), ul {
                font-size: 1rem;
            }
        }
    }
}