/* =========================
 *  *  *    Wrapper
 *   *   *  ========================= */

.dcf-contact-form-wrap {
    max-width: min(var(--wp--style--global--content-size, 720px), 100%);
    margin-inline: auto;
    padding-block: clamp(0.5rem, 1vw, 1rem);
}

/* =========================
 *  *  *    Form layout
 *   *   *  ========================= */

.dcf-contact-form {
    display: grid;
    gap: 1rem;
}

.dcf-contact-form .dcf-field label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.35rem;
}

/* =========================
 *  *  *    Inputs
 *   *   * ========================= */

.dcf-contact-form input[type="text"],
.dcf-contact-form input[type="email"],
.dcf-contact-form textarea {
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--wp--preset--color--contrast-3, #d0d7de);
    border-radius: 6px;
    background: var(--wp--preset--color--base-2, #fff);
    color: inherit;
    font: inherit;
    line-height: 1.4;
}

.dcf-contact-form textarea {
    min-height: 8rem;
    resize: vertical;
}

/* =========================
 *  *  *    Validation styling
 *   *   * ========================= */

/* When aria-invalid is used */
.dcf-contact-form [aria-invalid="true"] {
    border-color: #cc3340;
    outline-color: #cc3340;
}

/* Native browser validation fallback */
.dcf-contact-form input:invalid,
.dcf-contact-form textarea:invalid {
    border-color: #cc3340;
}

.dcf-contact-form .dcf-error {
    color: #cc3340;
    font-size: 0.925rem;
    margin-top: 0.4rem;
    min-height: 1.1em;
}

/* =========================
 *  *  *    Notices
 *   *   * ========================= */

.dcf-notice {
    padding: 0.85rem 1rem;
    border-left: 4px solid transparent;
    border-radius: 6px;
    margin-bottom: 1rem;
    background: var(--wp--preset--color--base-2, #f7f7f7);
}

.dcf-notice-success {
    border-left-color: #1a7f37;
}

.dcf-notice-error {
    border-left-color: #cc3340;
}

/* =========================
 *  *  *    Submit Button
 *   *   * ========================= */

.dcf-contact-form button[type="submit"] {
    display: inline-block;
    padding: 0.89rem 1.2rem;
    width: 20em;
    margin: auto;
    margin-top: 0.5rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font: inherit;
    line-height: 1.4;
    background: var(--dcf-submit-button-color, #000);
    background-color: var(--dcf-submit-button-color, #000);
    color: var(--wp--preset--color--base, #fff);
    transition: opacity 0.15s ease, transform 0.05s ease;
    box-sizing: border-box;
}

.dcf-contact-form button[type="submit"]:hover {
    opacity: 0.9;
}

.dcf-contact-form button[type="submit"]:active {
    transform: translateY(1px);
}

/* =========================
 *  *  *    Dark mode support
 *   *   *  ========================= */

@media (prefers-color-scheme: dark) {

    .dcf-contact-form input[type="text"],
    .dcf-contact-form input[type="email"],
    .dcf-contact-form textarea {
        background: var(--wp--preset--color--base, #111);
        border-color: var(--wp--preset--color--contrast-3, #444);
        color: var(--wp--preset--color--contrast, #eee);
    }

    .dcf-notice {
        background: rgba(255,255,255,0.06);
    }

}