/* Custom theme styles for acronyms.space */

:root {
    font-size: 85%;
    --grid-columns: 2;
}

main > header {
    margin-bottom: calc(var(--pico-block-spacing-vertical) * 2);
    background-color: var(--pico-card-background-color);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
    border-bottom: 1px solid var(--pico-muted-color);

    nav {
        padding: var(--pico-block-spacing-vertical) 0;
    }

    h1 {
        margin-bottom: 0;

        a {
            text-decoration: none;
            color: var(--pico-primary);
            text-transform: uppercase;
        }

        small {
            display: block;
            margin-top: 0.5rem;
            color: var(--pico-muted-color);
            font-size: 1rem;
            font-weight: normal;
        }
    }
}

.domain-section {
    margin-bottom: calc(var(--pico-block-spacing-vertical) * 2);

    h2 {
        border-bottom: 1px solid var(--pico-muted-color);
        padding-bottom: 0.5rem;
        margin-bottom: var(--pico-block-spacing-vertical);
    }
}

.acronym-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pico-block-spacing-vertical);
}

.acronym-card {
    flex: 0 0 calc((100% - (var(--grid-columns) - 1) * var(--pico-block-spacing-vertical)) / var(--grid-columns));
    min-width: 250px;
    max-width: 600px;
    border: 1px solid var(--pico-muted-color);

    header {
        padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);

        h3 {
            display: inline-block;
            margin-bottom: 0;

            a {
                text-decoration: none;
            }
        }

        .expansion {
            color: var(--pico-muted-color);
            margin-top: -0.5rem;
        }
    }

    p {
        padding-left: var(--pico-block-spacing-horizontal);
        padding-right: var(--pico-block-spacing-horizontal);
    }

    hr {
        margin-left: calc(-1 * var(--pico-block-spacing-horizontal));
        margin-right: calc(-1 * var(--pico-block-spacing-horizontal));
    }

    .references {
        ul {
            li {
                list-style: none;
            }
        }
    }
}

@media (min-width: 992px) {
    :root {
        --grid-columns: 3;
    }
}