/**
 * Forms: native fields and WPForms inside the theme's containers.
 *
 * Colors come from colors.css. GeneratePress prints the field and button
 * colors from the same variables (includes/setup/palette.php maps its
 * Customizer form settings to the palette), so buttons.css and this file only
 * add layout. WPForms runs with "Base styling only" and modern markup; its
 * base CSS sets no colors, so the theme's field and button rules apply.
 */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="search"],
textarea,
select {
    border-color: var(--border-clr);
    color: var(--font-clr);
}

::placeholder {
    color: var(--placeholder-clr);
    opacity: 1;
}

/* WPForms */
.grid-container .wpforms-container.wpforms-block {
    margin: 0;
}

.grid-container .wpforms-container {
    margin-top: 0;
}

.grid-container .wpforms-container:last-child {
    margin-bottom: 0;
}

.grid-container .wpforms-container .wpforms-field {
    padding-top: 0;
}

div.wpforms-container-full :is(input, textarea, select)::placeholder {
    color: var(--placeholder-clr);
    opacity: 1;
}

.wpforms-container .wpforms-field-label {
    color: var(--heading-clr);
    font-weight: 600;
}

.wpforms-container .wpforms-field-sublabel,
.wpforms-container .wpforms-field-description {
    color: var(--placeholder-clr);
}

.wpforms-container .wpforms-submit-container {
    margin-top: 20px;
}

div.wpforms-container-full .wpforms-form button[type=submit] {
    padding: var(--button-padding);
    border: 0;
}

/* Hers Klub (site draft): small spaced capital labels, 2px field borders
   with soft corners and a lavender focus ring. */
.wpforms-container .wpforms-field-label {
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.wpforms-container .wpforms-field-label .wpforms-required-label {
    color: inherit;
}

.wpforms-container .wpforms-field-description {
    font-size: 15px;
    line-height: 1.5;
}

.wpforms-container :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea) {
    border-width: 2px;
    border-radius: 4px;
    padding: 14px 16px;
}

.wpforms-container :is(input, textarea):focus-visible {
    outline: 3px solid var(--highlight-clr);
    outline-offset: 2px;
}