/* CSS reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}

b, h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

img {
    max-width: 100%;
}

/* Prevent body scrolling when dialog is open */
body:has(dialog[open]) {
    overflow: hidden;
}

/* Global properties */

:root {
    --color-primary: #205E99;

    --color-text-light: #fff;
    --color-text-dark: #222;

    --color-muted: #999;

    --border-radius: 3px;

    --margin-xs: 0.5em;
    --margin-sm: 1em;
    --margin-md: 1.5em;
    --margin-lg: 2em;
    --margin-xl: 3em;
    --margin-xxl: 6em;

    --body-max-width: 1400px;

}

.center {
    text-align: center;
}

.border {
    border: 1px solid var(--color-muted);
}

@font-face {
    font-family: 'Roboto Flex';
    src: url('/font/RobotoFlex.ttf') format('truetype');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}

@font-face {
    font-family: 'Architects Daughter';
    src: url('/font/ArchitectsDaughter-Regular.ttf') format('truetype');
}


body {
    font-family: 'Roboto Flex', sans-serif;
    color: var(--color-text-dark);

    /* body spans at least full height - footer is always at the bottom*/
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-block: 0;
    gap: var(--margin-sm);
}


main {
    /* main spans remaining space to push footer down*/
    flex: 1;

    padding: var(--margin-lg);

    & li {
        list-style-type: none;
        position: relative;
        padding-inline-start: 2ch;

        &::before {
            content: '•';
            position: absolute;
            left: 0;
        }
    }
}

/* Limit total width */
.navigation, .footer, main {
    max-width: var(--body-max-width);
    margin-inline: auto;
}

/* Layout of navigation and footer */
.navigation, .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: var(--margin-sm) var(--margin-lg);
}

/* Blue navigation and footer*/
nav, footer {
    background: var(--color-primary);
    color: var(--color-text-light);

    & a {
        color: inherit;
    }
}

header {

    & .title {
        display: grid;
        grid-template-columns: max-content auto;
        align-items: start;
        justify-content: center;
        gap: var(--margin-lg);
        margin-block-start: var(--margin-lg);
        margin-inline: var(--margin-lg);

        & img {
            width: 150px;
        }
    }

    & .heading {
        text-align: center;
        font-weight: bold;
        font-size: 2em;
    }

    & .subtitle {
        padding-block-start: var(--margin-xs);

        font-size: 75%;
        color: var(--color-primary);
    }
}

nav {
    & a {
        text-decoration: none;
        font-weight: bold;
        padding: var(--margin-xs);
        border-radius: var(--border-radius);

        &:not(.active):hover {
            text-decoration: underline;
        }

        &.active {
            background: var(--color-text-light);
            color: var(--color-primary);
        }
    }

    .navigation-menu-button {
        display: none;
    }
}

/* Main content */

main {
    display: grid;
    gap: var(--margin-xl);

    /* Only show sidebars if present */

    &:has(aside) {
        grid-template-columns: 15% 1fr 15%;
    }
}

aside {
    display: flex;
    flex-direction: column;
    gap: var(--margin-xl);
}


footer {
    & a:not(:hover) {
        text-decoration: none;
    }
}

/* Phone and email links should not be underlined */
/* This affects main contents and the footer */
a[href^="tel:"], a[href^="mailto:"] {
    text-decoration: none;
}


@media screen and (max-width: 1000px) {

    nav {
        display: grid;
        grid-template-columns: 1fr auto;

        & > div {
            padding: var(--margin-md) !important;
        }

        & .navigation {
            flex-direction: column;
            align-items: start;

            margin-inline: inherit; /* Reset margin: auto from desktop version */

            & a {
                transition-property: height, padding, margin, opacity, visibility;
                transition-duration: 300ms;
            }
        }

        & .navigation-menu-button {
            display: flex;
            align-items: start;
            cursor: pointer;
            font-weight: bold;

            svg {
                padding-block-start: var(--margin-xs);
            }
        }

        &:not(.open) a {

            &:not(.active) {
                visibility: hidden;
                height: 0;
                padding-block: 0;
                margin-block: 0;
                opacity: 0;
            }

            &.active {
                background: inherit;
                color: inherit;
            }
        }
    }

    header {
        .title {
            grid-template-columns: auto;

            img {
                display: none;
            }
        }
    }

    main {

        &:has(aside) {
            grid-template-columns: 1fr;
        }

        & aside {
            display: none;
        }
    }

    .footer {
        flex-direction: column;
        text-align: center;

        & > div:not(:last-child) {
            margin-bottom: var(--margin-sm);
        }
    }
}