/*
    The general strategy for mobile friendly layouts is to author for mobile first,
    and then specify non-mobile overrides

    // Mobile properties go here
    @media (min-width: 768px) {
        // Non mobile overrides go here
    }
*/

/* Uncomment to debug layout */
/* * {
    border-width: 0.5px;
    border-style: solid;
    border-color: pink;
} */

body {
    margin: 0px;
    padding: 0px;
    font-family: 'Century Gothic', 'Garamond', 'Times New Roman', 'serif';

    /*
        Prevent pico defaults from putting too much space between elements by using 
        margin instead of padding (because margins collapse https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)
        Most noticable in mobile layouts
    */
    header {
        padding-block: 0px;
        margin-block: var(--pico-block-spacing-vertical);
    }

    main {
        padding-block: 0px;
        margin-block: var(--pico-block-spacing-vertical);
    }

    footer {
        padding-block: 0px;
        margin-block: var(--pico-block-spacing-vertical);
    }
}


nav {
    /* Make navigation areas horizontal bars */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    vertical-align: top;

    /* Make sure there is some gap between navigation items */
    a {
        margin: auto 0.2em;
    }
}

p {
    margin-bottom: 0px; /*var(--pico-typography-spacing-vertical)*/
}

article {
    max-width: 768px;

    h1 {
        font-size: 1.2em;
    }
}

hr {
    width: 75%;
}

figure {
    /* 
        Layout the figure caption horizontal with the figure.
        We do this by using float: left on the image and clear: left after the figure
    */

    object {
        margin: auto 0.5em;
        float: left;

        @supports(float: inline-start) {
            float: inline-start;
        }
    }

    figcaption {
        padding: 0px;
        max-width: 768px;
    }

    &::after {
        display: block;
        content: "";
        clear: both;
    }
}

object {
    /* workaround bug where object tag has white background in dark mode */
    color-scheme: light;    
}

ul.plain-list {
    list-style-type: none;
    padding-left: 0;
}

ul.horizontal {
    list-style-type: none;
    padding-left: 0;

    >li {
        display: inline-block;
    }
}

.centered-text {
    text-align: center;
}

.centered-block-container {
    display: flex;
    flex-direction: column;
    justify-content: center;

    &>* {
        margin: 0 auto;
    }
}

.full-width {
    width: 100%;
}

.slideshow-text {
    font-size: 1.5em;
}

.black-background {
    background-color: black;
    color: white;
}

.overlay-container {
    >* {
        position: absolute;
        width: 100%;
        height: 100%;
    }
}

.overlay {
    display: flex;
    visibility: hidden;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}

.main-menu {
    /*
        The main menu is composed of a logo and a nav menu
        In mobile layouts the logo is on one line and the nav menu is on the next line
    */
    display: block;
    width: 100%;

    /* logo */
    figure {
        display: flex;
        flex-direction: row;
        
        object {
            flex-grow: auto;
            width: 3.2em;

            @media (min-width: 768px) {
                width: 7em;
                margin: auto 1em;
            }
        }

        figcaption {
            flex-grow: 1;

            a {
                font-size: 1.8em;

                @media (min-width: 768px) {
                    font-size: 2.5em;
                }
            }

            span {
                font-size: smaller;
            }

            @media (min-width: 768px) {
                flex-grow: auto;
            }
        }
    }

    /* nav menu */
    nav {
        a {
            font-weight: bolder;

            @media (min-width: 768px) {
                font-size: larger;
            }
        }

        >* {
            margin: auto 0.2em;
        }

        @media (min-width: 768px) {
            vertical-align: top;
            display: inline-block;
        }
    }

    /*
        In non-mobile layouts the log and nav menu are on one line
    */
    @media (min-width: 768px) {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
}

.nav-menu {
    margin-block: 1ex;

    a {
        font-size: 1.05em;

        @media (min-width: 768px) {
            margin: auto 0.5em;
            font-size: 1.5em;
        }
    }

    @media (min-width: 768px) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

.media-gallery {
    display: grid;
    grid-template-columns: 1fr;

    & article {
        margin-bottom: 20px;

        & iframe {
            width: 140px;
            height: 79px;

            @media (min-width: 768px) {
                width: 560px;
                height: 315px
            }
        }

        & footer {
            @media (min-width: 768px) {
                margin: 0.5em 1em 2em 1em;
            }
        }
    }

    @media (min-width: 768px) {
        grid-template-columns: 1fr 1fr 1fr;
    }
}