/* ─────────────────────────────────────────────────────────────
   Forms

   Generic on purpose — every form on the site is this same
   component with a different field list. Styled from the theme
   tokens in style.css, so changing the brand colour restyles
   every form with it.

   This file styles the FORM only. Section chrome (heading,
   contact details, two-column layout) lives in the block that
   hosts it — see blocks/contact/reach/.
   ───────────────────────────────────────────────────────────── */

.jm-form-block__title {
    margin: 0 0 12px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

.jm-form-block__intro {
    margin: 0 0 28px;
    max-width: 52ch;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.75;
}

/* ─── Outcome notice ───────────────────────────────────────────
   Rendered server-side so it survives with JS off, and placed in
   the reading order rather than floated into a corner. The old
   toast version could do neither, and depended on a query arg
   WordPress throws away — see the note in view.php.             */
.jm-form-notice {
    margin: 0 0 24px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.6;
}

.jm-form-notice--ok {
    background: #f0fdf4;
    color: #166534;
    box-shadow: inset 0 0 0 1px rgba(22, 101, 52, 0.22);
}

.jm-form-notice--error {
    background: #fef2f2;
    color: #991b1b;
    box-shadow: inset 0 0 0 1px rgba(153, 27, 27, 0.22);
}

/* ─── The honeypot ─────────────────────────────────────────────
   Moved off-screen rather than display:none — some bots skip
   anything that is not rendered, and the point is that they
   should fill it in.                                            */
.jm-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ─── Fields ───────────────────────────────────────────────── */
.jm-form__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

@media (min-width: 620px) {
    .jm-form__grid { grid-template-columns: repeat(2, 1fr); }
    /* Full width by default; only fields marked half share a row. */
    .jm-field { grid-column: 1 / -1; }
    .jm-field--half { grid-column: span 1; }
}

.jm-field__label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.jm-field__req {
    margin-left: 2px;
    color: var(--error);
}

.jm-field__input {
    display: block;
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: var(--bg-white);
    color: var(--text-primary);
    font-family: inherit;
    /* 1rem, deliberately: anything under 16px makes iOS Safari zoom the
       whole page the moment the field takes focus. */
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.jm-field__input::placeholder { color: var(--text-light); }

.jm-field__input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.jm-field__input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

textarea.jm-field__input {
    resize: vertical;
    min-height: 130px;
}

.jm-field__input--select {
    appearance: none;
    /* The arrow is drawn rather than loaded — one fewer request, and it
       takes the brand colour without a second file to keep in step. */
    background-image: linear-gradient(45deg, transparent 50%, var(--primary) 50%),
                      linear-gradient(135deg, var(--primary) 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 42px;
}

/* ─── Radio groups ─────────────────────────────────────────── */
.jm-field__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.jm-choice {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: var(--bg-white);
    font-size: 15px;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.jm-choice input { accent-color: var(--primary); }

.jm-choice:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-light);
}

.jm-choice:has(input:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ─── File fields ──────────────────────────────────────────────
   The native control is kept and driven by its own label rather
   than replaced: it stays keyboard-reachable, announces itself
   correctly and still works with the script absent.             */
.jm-file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* Off-screen, not display:none — hidden inputs drop out of the tab
   order and stop being focusable, which would break keyboard use. */
.jm-file__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.jm-file__button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: var(--bg-white);
    color: var(--primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
    .jm-file__button:hover {
        border-color: var(--primary);
        background: var(--primary-light);
    }
}

/* The ring belongs on the label, since that is what the eye sees —
   the input it is bound to is off-screen. */
.jm-file__input:focus-visible + .jm-file__button {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.jm-file__list {
    margin: 0;
    flex: 1 1 12ch;
    min-width: 0;
    font-size: 14px;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.jm-file.is-invalid .jm-file__list { color: var(--error); }
.jm-file.is-invalid .jm-file__button { border-color: var(--error); }

.jm-field__hint {
    margin: 7px 0 0;
    font-size: 12px;
    color: var(--text-light);
}

/* ─── Foot ─────────────────────────────────────────────────── */
.jm-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 26px;
}

.jm-form__submit {
    padding: 14px 32px;
    font-size: 16px;
}

.jm-form__submit:disabled {
    opacity: 0.6;
    cursor: progress;
}

.jm-form__required {
    margin: 0;
    font-size: 12px;
    color: var(--text-light);
}

.jm-form__legal {
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-light);
}

.jm-form__legal a { color: var(--primary); }

@media (max-width: 768px) {
    .jm-form__submit { width: 100%; }
}