/* --- Styles for Forms (Comments, Contact Form 7) --- */

/* Comment Form */
.comment-form label {
    display: block;
    margin-bottom: 0.5em;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    font-family: var(--font-body); /* Apply font to fields */
    width: 100%;
    padding: 10px;
    margin-bottom: 1em;
    border: 1px solid var(--color-border-medium);
    border-radius: 5px;
    box-sizing: border-box;
}
.comment-form .form-submit input[type="submit"] { /* Style as a button */
    display: inline-block;
    padding: 12px 25px;
    border-radius: 5px; 
    text-decoration: none;
    font-family: var(--button-font-family);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; 
    color: var(--button-tertiary-text-color); 
    background-color: var(--button-tertiary-bg-color);
    border: 1.5px solid var(--button-tertiary-border-color);
    cursor: pointer;
}
.comment-form .form-submit input[type="submit"]:hover {
    background-color: var(--button-tertiary-bg-hover-color);
    color: var(--button-tertiary-text-hover-color);
    border-color: var(--button-tertiary-border-hover-color);
}

/* Style for comment form error messages */
.comment-form-error, .wp-die-message {
    color: var(--color-primary);
    font-weight: bold;
    margin-bottom: 1em;
}

/* Testimonial Form (Contact Form 7) */
.wpcf7-form {
    width: 100%; /* Make sure the form takes the full width of its container column */
    max-width: 100%; /* Redundant but safe */
    box-sizing: border-box; /* Good practice if padding/border were added to the form */
}
/* Make sure paragraphs inside the form do not constrain the width */
.wpcf7-form p {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
.wpcf7-form .form-row-cf7 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 1.5em;
}
.wpcf7-form .form-field-half-cf7 {
    flex: 1 1 calc(50% - 10px);
    margin-bottom: 0;
    box-sizing: border-box;
}
.wpcf7-form .form-field-full-cf7 {
    width: 100%;
    margin-bottom: 1.5em;
    box-sizing: border-box;
}
.wpcf7-form .form-field-half-cf7 input[type="text"],
.wpcf7-form .form-field-half-cf7 input[type="email"],
.wpcf7-form .form-field-full-cf7 textarea {
    font-family: var(--font-body); /* Apply font to CF7 fields */
    font-size: 1.05em;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-border-medium);
    border-radius: 5px;
    box-sizing: border-box;
}

.wpcf7-form .wpcf7-form-control-wrap {
    display: block; /* Make sure the span wrapper takes the full width of its <p> parent */
}


/* General styles for CF7 input fields (when not in .form-field-xxx) */
/* This ensures they take the full available width */
.wpcf7-form p .wpcf7-form-control-wrap input[type="text"],
.wpcf7-form p .wpcf7-form-control-wrap input[type="email"],
.wpcf7-form p .wpcf7-form-control-wrap input[type="tel"],
.wpcf7-form p .wpcf7-form-control-wrap input[type="url"],
.wpcf7-form p .wpcf7-form-control-wrap textarea {
    font-family: var(--font-body); /* Make sure the font is consistent */
    width: 100%; /* the textarea takes the full width of its container span */
    padding: 10px;
    border: 1px solid var(--color-border-medium);
    border-radius: 5px;
    box-sizing: border-box;
}

.wpcf7-form label { /* General label style for CF7 */
    display: block;
    margin-bottom: 0.5em;
    /* Make sure labels do not constrain the width of their children */
    padding-left: 0;
    padding-right: 0;
    font-weight: normal;
    font-size: 1.05em;
}
.wpcf7-form .form-field-consent-cf7 {
    text-align: center;
}
.wpcf7-form .form-field-submit-cf7 {
    text-align: center;
    width: 100%;
}
.wpcf7-form .wpcf7-spinner {
    display: block;
    margin: 8px auto 0 auto;
}
.wpcf7-form .form-field-consent-cf7 .wpcf7-list-item {
    display: inline-block;
    text-align: left;
    margin-left: 0;
}
.wpcf7-form input[type="submit"].wpcf7-submit {
    /* display: inline-block; */
    display: table; /* allow centering with margin: auto while keeping intrinsic width */
    margin-left: auto;
    margin-right: auto;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-family: var(--button-font-family);
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    color: var(--button-tertiary-text-color);
    background-color: var(--button-tertiary-bg-color);
    border: 1.5px solid var(--button-tertiary-border-color);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.wpcf7-form input[type="submit"].wpcf7-submit:hover {
    background-color: var(--button-tertiary-bg-hover-color);
    color: var(--button-tertiary-text-hover-color);
    border-color: var(--button-tertiary-border-hover-color);
}

/* Responsive CF7 Styles */
@media screen and (max-width: 768px) {
    .wpcf7-form .form-row-cf7 {
        flex-direction: column;
        gap: 0;
    }
    .wpcf7-form .form-field-half-cf7 {
        margin-bottom: 1.5em;
    }
    .wpcf7-form .form-field-half-cf7,
    .wpcf7-form .form-field-full-cf7 {
        flex-basis: 100%;
        text-align: center;
    }
    /* Center the text content of paragraphs within the form on smaller screens */
    .wpcf7-form p {
        text-align: center;
    }

    .wpcf7-form input[type="text"],
    .wpcf7-form input[type="email"],
    .wpcf7-form textarea {
        width: 90%;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        text-align: left;
    }
    .wpcf7-form .form-field-consent-cf7 .wpcf7-list-item {
         max-width: 90%;
    }
}