/**
 * WP Secure Comment Form — base stylesheet.
 *
 * Until 3.3.0 these rules lived in a <style> block that js/form.js appended
 * inside the form element. They are a real file now so that a chosen style in
 * assets/styles/ can override them: an inline block in the body always came
 * after anything in <head>, so it won every tie on specificity.
 *
 * Everything a style pack needs to change is a custom property below. A style
 * pack should redefine tokens, not re-declare layout — that keeps the packs
 * short and stops them drifting apart from this file's markup.
 */

.wscf-form {
    /* Type */
    --wscf-font: inherit;
    --wscf-label-font: inherit;
    --wscf-label-weight: bold;
    --wscf-label-size: inherit;
    --wscf-label-spacing: normal;
    --wscf-label-transform: none;
    --wscf-font-size: inherit;

    /* Colour */
    --wscf-text: inherit;
    --wscf-label-color: inherit;
    --wscf-required: #dc3232;
    --wscf-field-bg: #fff;
    --wscf-field-text: inherit;
    --wscf-border: #ddd;
    --wscf-border-focus: #007cba;
    --wscf-placeholder: #767676;

    /* Button */
    --wscf-button-bg: #007cba;
    --wscf-button-bg-hover: #006ba1;
    --wscf-button-text: #fff;
    --wscf-button-weight: normal;
    --wscf-button-transform: none;
    --wscf-button-spacing: normal;

    /* Shape */
    --wscf-radius: 4px;
    --wscf-field-padding: 8px;
    --wscf-gap: 15px;

    font-family: var(--wscf-font);
    font-size: var(--wscf-font-size);
    color: var(--wscf-text);
}

/*
 * Premium field visibility.
 *
 * Scoped to .wscf-form on purpose: a bare `.hidden` is one of the most common
 * class names on the web and would collide with the active theme.
 */
.wscf-form .hidden {
    display: none;
}

/* Layout ------------------------------------------------------------------ */

.wscf-form .form-row {
    margin-bottom: var(--wscf-gap);
}

.wscf-form .form-group {
    display: flex;
    gap: var(--wscf-gap);
    flex-wrap: wrap;
}

.wscf-form .form-field {
    flex: 1;
    min-width: 250px;
}

@media (max-width: 768px) {
    .wscf-form .form-field {
        min-width: 100%;
    }
}

/* Labels ----------------------------------------------------------------- */

.wscf-form label {
    display: block;
    margin-bottom: 5px;
    font-family: var(--wscf-label-font);
    font-weight: var(--wscf-label-weight);
    font-size: var(--wscf-label-size);
    letter-spacing: var(--wscf-label-spacing);
    text-transform: var(--wscf-label-transform);
    color: var(--wscf-label-color);
}

.wscf-form .required-mark {
    color: var(--wscf-required);
}

/* Fields ----------------------------------------------------------------- */

.wscf-form input[type="text"],
.wscf-form input[type="email"],
.wscf-form input[type="tel"],
.wscf-form input[type="file"],
.wscf-form textarea {
    /*
     * border-box so width:100% plus padding cannot overflow a half-width
     * column — themes that do not set it globally would break the grid.
     */
    width: 100%;
    box-sizing: border-box;
    padding: var(--wscf-field-padding);
    border: 1px solid var(--wscf-border);
    border-radius: var(--wscf-radius);
    background: var(--wscf-field-bg);
    color: var(--wscf-field-text);
    font-family: var(--wscf-font);
    font-size: inherit;
}

.wscf-form input[type="text"]:focus,
.wscf-form input[type="email"]:focus,
.wscf-form input[type="tel"]:focus,
.wscf-form input[type="file"]:focus,
.wscf-form textarea:focus {
    border-color: var(--wscf-border-focus);
    outline: none;
}

/*
 * File Upload.
 *
 * Deliberately uses only the tokens declared at the top of this file, so the four
 * style packs in assets/styles/ pick the control up without being touched — none
 * of them knows this field exists.
 */
.wscf-form input[type="file"] {
    cursor: pointer;
}

/* The browser's own "Choose file" button, which inherits none of the above. */
.wscf-form input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 6px 12px;
    border: 1px solid var(--wscf-border);
    border-radius: var(--wscf-radius);
    background: var(--wscf-field-bg);
    color: var(--wscf-field-text);
    font-family: var(--wscf-font);
    font-size: inherit;
    cursor: pointer;
}

.wscf-form input[type="file"]:hover::file-selector-button {
    border-color: var(--wscf-border-focus);
}

.wscf-form .wscf-upload-hint {
    margin: 5px 0 0;
    font-size: 0.85em;
    color: var(--wscf-placeholder);
}

.wscf-form input::placeholder,
.wscf-form textarea::placeholder {
    color: var(--wscf-placeholder);
}

.wscf-form textarea {
    min-height: 120px;
    resize: vertical;
}

/* Submit ----------------------------------------------------------------- */

.wscf-form button[type="submit"] {
    background: var(--wscf-button-bg);
    color: var(--wscf-button-text);
    border: none;
    padding: 10px 20px;
    border-radius: var(--wscf-radius);
    cursor: pointer;
    font-family: var(--wscf-font);
    font-size: inherit;
    font-weight: var(--wscf-button-weight);
    letter-spacing: var(--wscf-button-spacing);
    text-transform: var(--wscf-button-transform);
}

.wscf-form button[type="submit"]:hover {
    background: var(--wscf-button-bg-hover);
}

.wscf-form button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Status ----------------------------------------------------------------- */

.wscf-form .wscf-status {
    padding: 10px;
    border-radius: var(--wscf-radius);
    margin-top: 10px;
}

/*
 * An empty status div would otherwise leave a 20px coloured-less gap under the
 * button on first paint.
 */
.wscf-form .wscf-status:empty {
    padding: 0;
    margin-top: 0;
}

.wscf-form .wscf-status.success {
    background: #d4edda;
    color: #155724;
}

.wscf-form .wscf-status.error {
    background: #f8d7da;
    color: #721c24;
}

.wscf-form .wscf-status.processing {
    background: #fff3cd;
    color: #856404;
}

/*
 * Cloudflare Turnstile container.
 *
 * The widget itself is a fixed-size iframe Cloudflare renders and styles, so
 * there is nothing here but the gap between it and the submit button.
 */
.wscf-form .wscf-turnstile {
    margin-bottom: 15px;
}
