/* Contact page form ([contact-form-7 id="44345a0"]) → form.im-contact-form via shortcode_atts_wpcf7 */

/* Card */
.site-main .wpcf7 form.im-contact-form {
    box-sizing: border-box;
    width: min(100% - 32px, 960px);
    margin: clamp(36px, 5vw, 72px) auto;
    padding: clamp(24px, 4vw, 52px);
    border: 1px solid var(--im-line);
    border-radius: var(--im-radius);
    background: var(--im-surface);
    box-shadow: var(--im-shadow);
    /* The parent theme colors .wpcf7 grey. */
    color: var(--im-ink);
    font-family: var(--im-font);
    font-size: 16px;
    line-height: 1.6;
}

.site-main .wpcf7 form.im-contact-form .container.content {
    /* The form template wraps itself in the parent's padded .container. */
    width: auto;
    max-width: none;
    padding: 0;
}

/* Layout: flatten the template's left/right columns into one grid */
.site-main .wpcf7 form.im-contact-form .contact-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "name email"
        "message message"
        "newsletter newsletter"
        "captcha captcha"
        "submit submit";
    gap: 22px 24px;
    position: relative;
}

.site-main .wpcf7 form.im-contact-form .contact-form :is(.contact-form-left, .contact-form-right, .contact-form-left > p, .contact-form-right > p) {
    display: contents;
}

.site-main .wpcf7 form.im-contact-form .contact-form br,
.site-main .wpcf7 form.im-contact-form .contact-form-bottom:not(:has(*)) {
    /* wpautop inserts <br> between every field; the bottom slot is unused but would add a grid gap. */
    display: none;
}

.site-main .wpcf7 form.im-contact-form .contact-form-left label:has([name="your-name"]) {
    grid-area: name;
}

.site-main .wpcf7 form.im-contact-form .contact-form-left label:has([name="your-email"]) {
    grid-area: email;
}

.site-main .wpcf7 form.im-contact-form .contact-form-right label:has([name="your-message"]) {
    grid-area: message;
}

.site-main .wpcf7 form.im-contact-form [data-name="checkbox-754"] {
    grid-area: newsletter;
}

.site-main .wpcf7 form.im-contact-form .kc_captcha {
    grid-area: captcha;
}

.site-main .wpcf7 form.im-contact-form .contact-form .wpcf7-submit,
.site-main .wpcf7 form.im-contact-form .contact-form .wpcf7-spinner {
    grid-area: submit;
}

/* Fields */
.site-main .wpcf7 form.im-contact-form .contact-form label:has(.wpcf7-form-control-wrap) {
    display: grid;
    gap: 8px;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--im-ink);
    /* Form controls reset text-transform and letter-spacing, so only the label text is affected. */
    font-family: var(--im-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    line-height: 1.3;
    text-transform: uppercase;
}

.site-main .wpcf7 form.im-contact-form .wpcf7-form-control-wrap {
    display: block;
    min-width: 0;
}

.site-main .wpcf7 form.im-contact-form :is(.wpcf7-text, .wpcf7-textarea) {
    box-sizing: border-box;
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--im-line);
    border-radius: var(--im-radius-sm);
    background: #fff;
    box-shadow: none;
    color: var(--im-ink);
    font-family: var(--im-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.site-main .wpcf7 form.im-contact-form .wpcf7-textarea {
    display: block;
    height: auto;
    min-height: 180px;
    padding-block: 12px;
    resize: vertical;
}

.site-main .wpcf7 form.im-contact-form :is(.wpcf7-text, .wpcf7-textarea):hover {
    border-color: color-mix(in srgb, var(--im-deep) 28%, var(--im-line));
}

.site-main .wpcf7 form.im-contact-form :is(.wpcf7-text, .wpcf7-textarea):focus {
    border-color: var(--im-accent);
    outline: none;
}

.site-main .wpcf7 form.im-contact-form :is(.wpcf7-text, .wpcf7-textarea):focus-visible {
    outline: 3px solid var(--im-accent-light);
    outline-offset: 3px;
}

/* Newsletter checkbox */
.site-main .wpcf7 form.im-contact-form .wpcf7-checkbox .wpcf7-list-item {
    display: block;
    margin: 0;
}

.site-main .wpcf7 form.im-contact-form .wpcf7-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: auto;
    margin: 0;
    padding: 0;
    color: var(--im-ink);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
}

.site-main .wpcf7 form.im-contact-form .wpcf7-checkbox input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    border-radius: var(--im-radius);
    accent-color: var(--im-accent);
    cursor: pointer;
}

.site-main .wpcf7 form.im-contact-form .wpcf7-checkbox input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--im-accent-light);
    outline-offset: 3px;
}

.site-main .wpcf7 form.im-contact-form .wpcf7-list-item-label::before,
.site-main .wpcf7 form.im-contact-form .wpcf7-list-item-label::after {
    /* CF7 pads the label with spaces; the flex gap already separates it. */
    content: none;
}

/* Image captcha */
.site-main .wpcf7 form.im-contact-form .kc_captcha {
    display: block;
    width: auto;
    min-width: 0;
    /* The captcha plugin sets margin-bottom inline. */
    margin: 0 !important;
    /* mmu_travel frames the wrapper in black at max-content width. */
    border: 0;
    background: transparent;
}

.site-main .wpcf7 form.im-contact-form .kc_captcha .wpcf7-cf7ic {
    display: block;
}

.site-main .wpcf7 form.im-contact-form .kc_captcha .captcha-image.cf7ic-style1 {
    box-sizing: border-box;
    display: grid;
    justify-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 20px clamp(16px, 3vw, 28px);
    /* The captcha plugin sets border and background inline. */
    border: 1px solid var(--im-line) !important;
    border-radius: var(--im-radius);
    background: #fff !important;
}

.site-main .wpcf7 form.im-contact-form .kc_captcha .cf7ic_instructions {
    color: var(--im-ink);
    /* Inline font-size from the captcha plugin settings. */
    font-size: 15px !important;
    line-height: 1.5;
    text-align: center;
}

.site-main .wpcf7 form.im-contact-form .kc_captcha .cf7ic_instructions > span {
    color: var(--im-deep);
    font-weight: 700;
}

.site-main .wpcf7 form.im-contact-form .kc_captcha .cf7ic-sr-fs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.site-main .wpcf7 form.im-contact-form .kc_captcha .cf7ic-icon-wrapper label {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    /* Inline icon size from the captcha plugin settings. */
    font-size: 26px !important;
    line-height: 0;
}

.site-main .wpcf7 form.im-contact-form .kc_captcha .captcha-image label > input + svg {
    box-sizing: content-box !important;
    padding: 12px;
    border: 1px solid var(--im-line);
    border-radius: var(--im-radius);
    background: var(--im-surface);
    color: color-mix(in srgb, var(--im-ink) 72%, var(--im-surface));
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.site-main .wpcf7 form.im-contact-form .kc_captcha .captcha-image label > input:checked + svg {
    padding: 12px;
    border: 1px solid var(--im-accent);
    background: color-mix(in srgb, var(--im-accent) 10%, var(--im-surface));
    box-shadow: inset 0 0 0 1px var(--im-accent);
    color: var(--im-accent);
}

.site-main .wpcf7 form.im-contact-form .kc_captcha .captcha-image label > input:focus + svg {
    /* The plugin swaps padding for a 2px border on focus; keep the tile size stable. */
    padding: 12px;
    border-width: 1px;
}

.site-main .wpcf7 form.im-contact-form .kc_captcha .captcha-image label > input:focus-visible + svg {
    outline: 3px solid var(--im-accent-light);
    outline-offset: 3px;
}

@media (hover: hover) {
    .site-main .wpcf7 form.im-contact-form .kc_captcha .captcha-image label > input:not(:checked) + svg:hover {
        border-color: color-mix(in srgb, var(--im-accent) 45%, var(--im-line));
        color: var(--im-accent);
    }
}

/* Submit */
.site-main .wpcf7 form.im-contact-form .contact-form .wpcf7-submit {
    justify-self: end;
    box-sizing: border-box;
    width: auto;
    /* The parent theme caps every submit button at max-content. */
    max-width: none;
    min-height: 46px;
    /* The parent theme floats and spaces the button with !important. */
    float: none !important;
    margin: 0 !important;
    padding: 12px 28px;
    border: 1px solid var(--im-gold);
    border-radius: var(--im-radius-sm);
    background: var(--im-gold);
    color: var(--im-ink);
    font-family: var(--im-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease, padding .2s ease;
}

.site-main .wpcf7 form.im-contact-form .contact-form .wpcf7-submit:hover {
    border-color: color-mix(in srgb, var(--im-gold) 85%, var(--im-deep));
    background: color-mix(in srgb, var(--im-gold) 85%, var(--im-deep));
    color: var(--im-ink);
}

.site-main .wpcf7 form.im-contact-form .contact-form .wpcf7-submit:focus-visible {
    outline: 3px solid var(--im-accent-light);
    outline-offset: 3px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .site-main .wpcf7 form.im-contact-form .contact-form .wpcf7-submit:hover {
        box-shadow: 0 10px 24px color-mix(in srgb, var(--im-accent) 26%, transparent);
    }
}

/* The spinner sits inside the pill while sending instead of taking its own row. */
.site-main .wpcf7 form.im-contact-form .contact-form .wpcf7-spinner {
    z-index: 1;
    justify-self: end;
    align-self: center;
    width: 20px;
    height: 20px;
    margin: 0 18px 0 0;
    background-color: color-mix(in srgb, var(--im-on-deep) 35%, transparent);
    opacity: 1;
    pointer-events: none;
}

.site-main .wpcf7 form.im-contact-form .contact-form .wpcf7-spinner::before {
    top: 3px;
    left: 3px;
    width: 5px;
    height: 5px;
    background-color: var(--im-on-deep);
    transform-origin: 7px 7px;
}

.site-main .wpcf7 form.im-contact-form.submitting .wpcf7-submit {
    padding-right: 52px;
}

/* Validation & response */
.site-main .wpcf7 form.im-contact-form :is(.wpcf7-text, .wpcf7-textarea).wpcf7-not-valid {
    border: 1px solid var(--im-accent);
    box-shadow: inset 0 0 0 1px var(--im-accent);
}

.site-main .wpcf7 form.im-contact-form .wpcf7-not-valid-tip {
    margin: 6px 0 0;
    color: var(--im-accent);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.site-main .wpcf7 form.im-contact-form .kc_captcha:has(.wpcf7-not-valid-tip) .captcha-image.cf7ic-style1 {
    border-color: var(--im-accent) !important;
    box-shadow: inset 0 0 0 1px var(--im-accent);
}

.site-main .wpcf7 form.im-contact-form .kc_captcha .wpcf7-not-valid-tip {
    text-align: center;
}

.site-main .wpcf7 form.im-contact-form .wpcf7-response-output {
    /* The parent theme pins the response 60px above the form at 65% width. */
    position: static;
    width: auto;
    margin: 24px 0 0;
    padding: 14px 18px;
    border: 1px solid var(--im-line);
    border-left: 4px solid var(--im-deep);
    border-radius: var(--im-radius);
    background: #fff;
    color: var(--im-ink);
    font-size: 15px;
    line-height: 1.5;
}

.site-main .wpcf7 form.im-contact-form.sent .wpcf7-response-output {
    border-color: color-mix(in srgb, var(--im-deep) 18%, var(--im-line));
    border-left-color: var(--im-deep);
    background: color-mix(in srgb, var(--im-deep) 6%, #fff);
    color: var(--im-deep);
    font-weight: 600;
}

.site-main .wpcf7 form.im-contact-form:is(.invalid, .unaccepted, .failed, .aborted, .spam, .payment-required) .wpcf7-response-output {
    border-color: color-mix(in srgb, var(--im-accent) 30%, var(--im-line));
    border-left-color: var(--im-accent);
    background: color-mix(in srgb, var(--im-accent) 6%, #fff);
}

/* Responsive */
@media (max-width: 768px) {
    .site-main .wpcf7 form.im-contact-form .contact-form {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "name"
            "email"
            "message"
            "newsletter"
            "captcha"
            "submit";
        gap: 18px;
    }
}

@media (max-width: 540px) {
    .site-main .wpcf7 form.im-contact-form {
        padding: 22px 18px;
    }

    .site-main .wpcf7 form.im-contact-form .contact-form .wpcf7-submit {
        justify-self: stretch;
        width: 100%;
    }

    .site-main .wpcf7 form.im-contact-form .kc_captcha .captcha-image.cf7ic-style1 {
        padding-inline: 12px;
    }

    .site-main .wpcf7 form.im-contact-form .kc_captcha .cf7ic-sr-fs {
        gap: 6px;
    }

    /* Keep all six tiles in one row on phones. */
    .site-main .wpcf7 form.im-contact-form .kc_captcha .cf7ic-icon-wrapper label {
        font-size: 20px !important;
    }

    .site-main .wpcf7 form.im-contact-form .kc_captcha .captcha-image label > input + svg,
    .site-main .wpcf7 form.im-contact-form .kc_captcha .captcha-image label > input:is(:checked, :focus) + svg {
        padding: 10px;
    }
}