@import url("reset.css");

:root {
    --content-width: 1000px;
    --spacing-unit: 15px;
    --rule-width: 2px;
    --shim-thickness: 5px;
    --rounding-radius: 3px;
    --sidebar-width: 250px;
    --small-font-size-abs: 0.85rem;
    --small-font-size-rel: 0.85em;

    --thankful-gray-400: #6c7589;
    --thankful-gray-500: #525a6e;
    --thankful-gray-600: #384157;

    --vigilance-red-400: #f03d37;
    --vigilance-red-500: #c43c35;
    --vigilance-red-600: #9e342d;

    --ethic-green-400: #1da444;
    --ethic-green-500: #25893d;
    --ethic-green-600: #226f33;

    --aged-canvas-400: #fff2d6;
    --aged-canvas-500: #fae2ab;
    --aged-canvas-600: #efd7a0;

    --thankful-gray-gradient: linear-gradient(
        to bottom,
        var(--thankful-gray-400),
        var(--thankful-gray-500),
        var(--thankful-gray-600)
    );
    --vigilance-red-gradient: linear-gradient(
        to bottom,
        var(--vigilance-red-400),
        var(--vigilance-red-500),
        var(--vigilance-red-600)
    );
    --ethic-green-gradient: linear-gradient(
        to bottom,
        var(--ethic-green-400),
        var(--ethic-green-500),
        var(--ethic-green-600)
    );
    --aged-canvas-gradient: linear-gradient(
        to bottom,
        var(--aged-canvas-400),
        var(--aged-canvas-500),
        var(--aged-canvas-600)
    );
}

.thankful-gray {
    background-image: var(--thankful-gray-gradient) !important;
    color: white !important;
}

.vigilance-red {
    background-image: var(--vigilance-red-gradient) !important;
    color: white !important;
}

.ethic-green {
    background-image: var(--ethic-green-gradient) !important;
    color: white !important;
}

.aged-canvas {
    background-image: var(--aged-canvas-gradient) !important;
    color: black !important;
    border: 1px inset var(--thankful-gray-600);
}

body {
    font-family: "Ubuntu Sans", sans-serif;
    padding: var(--spacing-unit);
    background-color: var(--aged-canvas-500);
}

.wrapper {
    margin: 0 auto;
    max-width: var(--content-width);

    display: flex;
    flex-direction: column;
    gap: var(--spacing-unit);
}

.card {
    background-color: var(--aged-canvas-400);
    padding: var(--spacing-unit);
    border-radius: var(--rounding-radius);
    border: var(--rule-width) solid var(--thankful-gray-500);
}

main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-unit);
}

@media screen and (min-width: 800px) {
    body {
        padding: calc(2 * var(--spacing-unit));
    }

    .wrapper {
        display: grid;
        grid-template-columns: var(--sidebar-width) auto;
        gap: calc(2 * var(--spacing-unit));
    }

    .maybe-sidebar {
        position: sticky;
        top: calc(2 * var(--spacing-unit));

        /*
         * For reasons I don't understand, using flex here applies the correct
         * top margin to the h1 when calculating the sticky position
         */
        display: flex;
        flex-direction: column;
    }

    main {
        gap: calc(2 * var(--spacing-unit));
    }
}

h1,
h2,
h3,
h4,
h5,
h6,
subtitle,
nav,
p {
    margin: 0.5rem 0;
}

h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
    /* Extra space if paragraph immediately follows heading (no subtitle) */
    margin-top: 1rem;
}

blockquote {
    padding-left: var(--spacing-unit);
    border-left: var(--rule-width) solid var(--thankful-gray-500);
}

a {
    color: var(--ethic-green-600);
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }

    h1 &,
    h2 &,
    h3 &,
    h4 &,
    h5 &,
    h6 & {
        color: unset;
    }
}

.page-subtitle {
    font-size: var(--small-font-size-abs);

    display: flex;
    align-items: baseline;
    gap: var(--shim-thickness);
}

.button-list {
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-flow: wrap;
    align-items: baseline;
    gap: var(--shim-thickness);
}

.button {
    display: inline-block;
    border-radius: var(--rounding-radius);
    padding: var(--shim-thickness);
    background-image: var(--thankful-gray-gradient);

    &,
    * {
        color: white;
    }
}

a.button {
    font-size: var(--small-font-size-abs);

    &,
    * {
        text-decoration: none;
    }

    mark {
        background-color: transparent;
    }

    &:hover {
        box-shadow: var(--rule-width) var(--rule-width) var(--rounding-radius)
            var(--thankful-gray-400);
    }

    &:active {
        box-shadow: 0 0 var(--rounding-radius) black inset;
    }
}

.inline-button {
    font-size: var(--small-font-size-rel);
    border-radius: var(--rounding-radius);
    padding: var(--shim-thickness);
}