@import url("https://static.auburnalabama.org/assets/coa-styles/reset.css") layer(reset);
@import url("https://static.auburnalabama.org/assets/coa-styles/theme.css") layer(theme);
@import url("https://static.auburnalabama.org/assets/coa-styles/form.css") layer(extensions.form);

@layer app {
    :root {
        font-size: 14px;
    }
    body {
        background-color: var(--surface-body-bg);
        display: grid;
        grid-template-rows: auto 1fr;
    }
    /* App header */
    body > header {
        background-color: var(--surface-menu-bg);
        color: var(--surface-menu);
        display: grid;
        grid-template-columns: auto 1fr auto;
    }
    nav ul {
        list-style: none;
        padding: var(--lg-space) 0;
        margin: 0;
    }
    nav ul a {
        color: unset;
        display: block;
        padding: var(--lg-space);
        text-decoration: none;
    }
    /* App content */
    body > main {
        color: var(--surface-body);
        overflow-x: hidden;
        position: relative;
    }
    main header,
    main nav,
    main form,
    main p {
        box-sizing: border-box;
        padding: var(--sm-space) var(--space);
    }
    /* Headings */
    h1 { /*should appear in body > nav */
        color: var(--surface-menu-bold);
        font-size: 1.24rem;
        margin: 0;
        text-align: center;
    }
    h2 {
        color: var(--surface-body-bold);
        font-size: 1rem;
        margin: var(--sm-space) 0 var(--space) 0;
    }
    h3 {
        color: var(--surface-body);
        font-size: 1.5rem;
        margin: var(--sm-space) 0 var(--space) 0;
    }
    /*Widescreen/Desktop*/
    @media screen and (orientation: landscape) {
        body {
            grid-template-rows: none;
            grid-template-columns: auto 1fr;
        }
        body > header {
            grid-template-columns: none;
            grid-template-rows: auto 1fr auto;
            border-radius: 0 var(--lg-space) var(--lg-space) 0;
        }
        body > footer { /* //TODO: footer style */
            position: fixed;
        }
        h1 {
            margin: 0 var(--md-space);
            border: 1px solid var(--surface-card);
            border-width: 0 0 1px 0;
            padding: var(--md-space) 0;
        }
    }
    /*Portrait/phone*/
    @media screen and (orientation: portrait) {
        body > header {
            align-items: center;
        }
        body > header ul {
            display: flex;
            flex-direction: row;
        }
    }
    /*Overrides*/
    form {
        max-width: 100%;
    }
}