/* Contact form **************************************************************/
fieldset {
    display: grid;
    grid-gap: var(--minimum-gap);
    padding: var(--minimum-gap);
}

fieldset label {
    grid-column: 1 / 2;
}

fieldset input, fieldset textarea {
    grid-column: 2 / 3;
}

fieldset span.validity {
    grid-column: 3 / 4;
}

fieldset button {
    grid-column: 1 / span 2;
    justify-self: start;
}

@media (width > 55em) { /* var(--column-width) */
    fieldset {
        grid-template-columns: 5em 1fr 1em;
    }

    fieldset input, fieldset textarea {
        grid-column: 2 / 3;
    }

    fieldset span.validity {
        grid-column: 3 / 4;
    }

    fieldset .cf-turnstile {
        grid-column: 1 / 4;
    }
}

@media (width <= 55em) {
    fieldset {
        grid-template-columns: 1fr 1em;
    }

    fieldset input, fieldset textarea {
        grid-column: 1 / 2;
    }

    fieldset span.validity {
        grid-column: 2 / 3;
    }

    fieldset .cf-turnstile {
        grid-column: 1 / 3;
    }
}

button, input, textarea {
    font-size: 18px;
    max-width: calc(100vw - calc(5 * var(--minimum-gap)) - 2em);
}

input:invalid + span::after {
    content: "✖";
    color: #8b0000;
    position: absolute;
    margin-top: 4px;
}

input:valid + span::after {
    content: "✓";
    color: #009000;
    position: absolute;
    margin-top: 4px;
}

button {
    background-color: var(--primary-light-color);
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    color: var(--accent-color);
    padding: 5px 12px;
}

button:hover {
    border-color: var(--accent-color);
}