/**
 * Contact Form 7 Styles
 * Loaded on: pages with CF7 shortcode
 *
 * @package MCJ Child Theme
 * @version 1.0.0
 */

/* Contact Form 7 Base Styles */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 input[type="submit" i] {
     background-color: #fff;
     color: #000;
     border-radius: 5px;
     border: 1px solid #bbb;
     padding: 15px 10px;
     margin: 0;
     width: 100%;
}

.wpcf7 input[type="submit" i] {
     color: var(--white);
     width: 100%;
     background-color: var(--limegreen) !important;
     border: 1px solid var(--limegreen) !important;
     border-radius: var(--btnBRadius);
     font-family: var(--bodyFont);
     letter-spacing: 1px;
     background: var(--green);
     border-color: var(--green);
     color: #19231F;
     font-size: 17px;
     text-transform: uppercase;
     font-weight: 700;
}

/* Two Column Layout */
.wpcf7 textarea.twocol,
.wpcf7 input.twocol {
     width: 49.5%;
}

/* Validation */
.wpcf7-not-valid-tip {
     position: absolute !important;
}

.wpcf7 form.invalid .wpcf7-response-output {
     border-color: #dc3232;
     margin-top: 0px;
}

.wpcf7 textarea.twocol~.wpcf7-not-valid-tip,
.wpcf7 input.twocol~.wpcf7-not-valid-tip {
     max-width: 100% !important;
     left: 0px;
     top: 2em;
     font-size: 0.8em;
}

.wpcf7 p label:first-child .twocol {
     margin-right: 1%;
}

.wpcf7 p input.twocol:last-child {
     margin-right: 0;
}

.wpcf7 span.wpcf7-form-control.wpcf7-acceptance {
     font-size: 14px;
}

/* Submit Button Hover */
.wpcf7 input[type="submit" i]:hover,
.wpcf7 input[type="submit" i]:focus,
.wpcf7 input[type="submit" i]:active {
     color: var(--darkgreen);
     background-color: var(--gold) !important;
     border: 1px solid var(--gold) !important;
}

/* Subscribe Form (inline layout) */
.subscribe-form .wpcf7 form {
     display: flex;
     gap: 10px;
     flex-direction: row;
     justify-content: center;
     align-items: baseline;
     max-width: 450px;
}

.subscribe-form .wpcf7 form input {
     width: 100%;
}

.subscribe-form .wpcf7 form.sent .wpcf7-response-output {
     width: 100%;
     position: absolute;
     bottom: -50%;
}

/* Responsive Forms */
@media (max-width: 991px) {
     .subscribe-row.cta .subscribe-form .wpcf7 form {
          gap: 5px;
          max-width: 300px;
     }
}

@media (max-width: 500px) {
     .wpcf7 p input.twocol:first-child {
          margin-right: 3%;
     }

     .wpcf7 p input.twocol:last-child {
          margin-right: 0;
     }

     .wpcf7 textarea.twocol,
     .wpcf7 input.twocol {
          width: 47%;
     }
}