/* ============================================================
 * Tresl-styled Contact Form 7
 *
 * Pill-shaped inputs with a dark slate outline, label above each
 * field, large rounded textarea, and a filled-pill select for the
 * "What is your email regarding?" dropdown. Mirrors the design
 * spec used on /contact-us/.
 * ============================================================ */

.tresl-cf__row {
    display: grid;
    grid-template-columns: 1fr;
    /* `gap` is the horizontal space between columns in a 2-col row. */
    gap: 18px;
    /* Vertical breathing room between rows. */
    margin-bottom: 0;
}

/* CF7 wraps text/<br> sequences in <p> tags by default. Strip every
   margin inside the form chrome so the only vertical spacing comes
   from the explicit row spacing below. */
.wpcf7 .tresl-cf__field,
.wpcf7 .tresl-cf__field p,
.wpcf7 .tresl-cf__row p,
.wpcf7 form > p {
    margin: 0;
}

/* Controlled spacing between adjacent rows. */
.tresl-cf__row + .tresl-cf__row {
    margin-top: 20px;
}

.tresl-cf__row--2 {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 720px) {
    .tresl-cf__row--2 { grid-template-columns: 1fr; }
}

.tresl-cf__field {
    display: flex;
    flex-direction: column;
}

.tresl-cf__label {
    display: block;
    color: #003844;
    font-family: 'Lato', system-ui, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 10px;
}

/* CF7 auto-inserts <br> after each form-tag by default. Hide them
   inside our field wrapper so the label sits flush against its input
   without extra vertical space. */
.wpcf7 .tresl-cf__field br {
    display: none;
}

/* ============================
 * Inputs (text/email/tel) + textarea
 * ============================ */
.wpcf7 .tresl-cf__field input[type="text"],
.wpcf7 .tresl-cf__field input[type="email"],
.wpcf7 .tresl-cf__field input[type="tel"],
.wpcf7 .tresl-cf__field input[type="number"],
.wpcf7 .tresl-cf__field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 22px;
    border: 3px solid #003844;
    border-radius: 50px;
    background-color: #FFFFFF;
    color: #003844;
    font-family: 'Lato', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* Placeholder color: medium slate */
.wpcf7 .tresl-cf__field input::placeholder,
.wpcf7 .tresl-cf__field textarea::placeholder {
    color: #6c7984;
    opacity: 1;
}

.wpcf7 .tresl-cf__field input:focus,
.wpcf7 .tresl-cf__field textarea:focus {
    border-color: #1A6DB6;
    box-shadow: 0 0 0 3px rgba(26, 109, 182, .12);
}

/* Textarea: rounded rectangle, not full pill */
.wpcf7 .tresl-cf__field--message textarea {
    border-radius: 22px;
    padding: 18px 22px;
    min-height: 200px;
    resize: vertical;
}

/* ============================
 * Select (dropdown)
 * ============================ */
.wpcf7 .tresl-cf__field--select select {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 44px 14px 22px;
    border: 3px solid #003844;
    border-radius: 50px;
    background-color: #003844;
    color: #FFFFFF;
    font-family: 'Lato', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 22px center;
    background-size: 12px 8px;
}

.wpcf7 .tresl-cf__field--select select:focus {
    box-shadow: 0 0 0 3px rgba(26, 109, 182, .25);
}

/* Native dropdown options (white background, dark text — the popout
   is browser-rendered and only honors color + bg, not radius/font). */
.wpcf7 .tresl-cf__field--select select option {
    background-color: #FFFFFF;
    color: #003844;
}

/* ============================
 * Submit button
 * ============================ */
.tresl-cf__row--submit {
    margin-top: 8px;
    grid-template-columns: 1fr;
}

.wpcf7 .tresl-cf__row--submit input[type="submit"],
.wpcf7 .tresl-cf__row--submit button[type="submit"] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 36px;
    border: 2px solid #003844;
    border-radius: 999px;
    background-color: #003844;
    color: #FFFFFF;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: normal;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
    box-shadow: none;
}

.wpcf7 .tresl-cf__row--submit input[type="submit"]:hover,
.wpcf7 .tresl-cf__row--submit button[type="submit"]:hover,
.wpcf7 .tresl-cf__row--submit input[type="submit"]:focus,
.wpcf7 .tresl-cf__row--submit button[type="submit"]:focus {
    background-color: transparent;
    color: #003844;
    box-shadow: none;
    outline: none;
    transform: translateY(-1px);
}

/* ============================
 * Validation messages
 * ============================ */
.wpcf7 .wpcf7-not-valid-tip {
    margin-top: 6px;
    color: #c62828;
    font-family: 'Lato', system-ui, sans-serif;
    font-size: 13px;
}

.wpcf7 .wpcf7-response-output {
    margin: 18px 0 0;
    padding: 14px 18px;
    border-radius: 8px;
    border-width: 1px;
    font-family: 'Lato', system-ui, sans-serif;
    font-size: 14px;
}

/* Loader spinner positioning */
.wpcf7 .wpcf7-spinner {
    margin-left: 12px;
    vertical-align: middle;
}