/* Puifín — corporate enquiry form.
   Tokens, buttons and the charter CTA live in puifin.css; this is the form. */

/* ---------- Enquiry form ---------- */
.pf-enquiry { max-width: 820px; margin-inline: auto; }

.pf-enquiry__charter {
    display: inline-block;
    margin-bottom: .75rem;
    padding: .35rem .7rem;
    background: var(--pf-bg);
    border-left: 3px solid var(--pf-accent);
    color: var(--pf-ink);
}

.pf-enquiry__intro {
    margin-bottom: 1.75rem;
    color: var(--pf-muted);
    line-height: 1.6;
}

.pf-enquiry__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1.5rem;
}

/* Stays a block. Contact Form 7's auto-paragraph puts a <br> between the
   label text and the control, and wraps the whole label in its own <p>, so
   the grid's children are those paragraphs. Making the label a flex column
   turns both the <br> and the required asterisk into flex items on lines of
   their own. */
.pf-field { display: block; font-weight: 600; color: var(--pf-ink); }
.pf-field--wide { margin-top: 1.1rem; }

/* Those generated paragraphs are the actual grid cells. */
.pf-enquiry__grid > p { margin: 0; }

/* Hidden by the script in inc/puifin-enquiry.php, which hides the generated
   paragraph rather than the label: an empty <p> still occupies a grid cell
   and pushes every field after it into the wrong column. Without JavaScript
   nothing is hidden and the field is simply always visible. */
.pf-enquiry__grid > p[hidden],
.pf-conditional[hidden] { display: none; }

.pf-req { color: var(--pf-accent); }

.pf-hint {
    display: block;
    margin-top: .35rem;
    font-weight: 400;
    font-size: .85rem;
    color: var(--pf-muted);
    line-height: 1.45;
}

.pf-enquiry input[type="text"],
.pf-enquiry input[type="email"],
.pf-enquiry input[type="tel"],
.pf-enquiry input[type="number"],
.pf-enquiry select,
.pf-enquiry textarea {
    width: 100%;
    margin-top: .4rem;
    padding: .7rem .8rem;
    font: inherit;
    font-weight: 400;
    color: var(--pf-ink);
    background: #fff;
    border: 1px solid var(--pf-line);
    border-radius: 2px;
}
.pf-enquiry :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--pf-accent);
    outline-offset: 1px;
    border-color: var(--pf-accent);
}
.pf-enquiry textarea { resize: vertical; }

.pf-consent {
    margin: 1.5rem 0 0;
    padding: 1rem 1.1rem;
    background: var(--pf-bg);
    border-radius: 3px;
    font-size: .95rem;
}
.pf-consent .wpcf7-list-item { margin: 0; }
/* use_label_element puts the box and its text in a <label>, which defaults to
   inline: the box sat on the line above its own wrapped text. */
.pf-consent .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}
.pf-consent input[type="checkbox"] {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: .15rem 0 0;
    accent-color: var(--pf-accent);
}
.pf-consent .pf-hint { margin-top: .5rem; padding-left: 1.7rem; }

.pf-enquiry__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin: 1.75rem 0 0;
}

.pf-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: 0 2.5rem;
    font: inherit;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
    color: #fff;
    background: var(--pf-accent);
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.pf-submit:hover,
.pf-submit:focus-visible { background: #1a1a1a; transform: translateY(-1px); }
.pf-submit:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 3px; }
.pf-submit[disabled] { opacity: .6; cursor: progress; transform: none; }

.pf-enquiry__reassure { margin: 0; font-size: .9rem; color: var(--pf-muted); }

/* CF7 drops a spinner next to the button the moment it submits. Left alone it
   is an orphaned dot on its own line. */
.pf-enquiry .wpcf7-spinner { margin: 0; }

/* CF7's own validation styling is sparse; make errors unmissable */
.pf-enquiry .wpcf7-not-valid { border-color: #c0261a; background: #fff6f5; }
.pf-enquiry .wpcf7-not-valid-tip { color: #c0261a; font-weight: 400; font-size: .85rem; }

/* ---------- The three states after you press Send ---------- */
.pf-enquiry .wpcf7-response-output {
    margin: 1.75rem 0 0;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--pf-line);
    border-left-width: 4px;
    border-radius: 2px;
    font-size: .98rem;
    line-height: 1.55;
    background: var(--pf-bg);
    color: var(--pf-ink);
}
/* Sent. The one message most visitors will ever see, so it reads as a
   confirmation rather than as a notice that something happened. */
.pf-enquiry form.sent .wpcf7-response-output {
    border-color: #c9e3d2;
    border-left-color: #1a7f37;
    background: #f1f9f3;
}
/* Failed to send, or blocked by the spam check: both need a phone number,
   because the visitor cannot fix either one. */
.pf-enquiry form.failed .wpcf7-response-output,
.pf-enquiry form.aborted .wpcf7-response-output,
.pf-enquiry form.spam .wpcf7-response-output {
    border-color: #f0c9c5;
    border-left-color: #c0261a;
    background: #fff6f5;
}
/* Something in the form itself is wrong, which the visitor can fix. */
.pf-enquiry form.invalid .wpcf7-response-output,
.pf-enquiry form.unaccepted .wpcf7-response-output,
.pf-enquiry form.payment-required .wpcf7-response-output {
    border-color: #f2dcb3;
    border-left-color: #b8730a;
    background: #fdf8ef;
}

@media (max-width: 782px) {
    .pf-enquiry__grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   The short contact form
   --------------------------------------------------------------------------
   The theme's own form, still on /contact/. It is four fields and a button,
   so it does not need the enquiry grid, but it should not look like it came
   from a different site either.
   ========================================================================== */
.pf-enquiry--short { max-width: 620px; margin-inline: 0; }

.pf-enquiry--short .ireca_contact label {
    display: block;
    margin-bottom: 1rem;
}
.pf-enquiry--short .ireca_contact input[type="text"],
.pf-enquiry--short .ireca_contact input[type="email"],
.pf-enquiry--short .ireca_contact textarea {
    margin-top: 0;
}
.pf-enquiry--short .ireca_contact textarea { min-height: 9rem; }

/* The theme styles this submit as a pill in its own font. */
.pf-enquiry--short .ireca_contact input[type="submit"],
.pf-enquiry--short .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: 0 2.5rem;
    font: inherit;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: none;
    color: #fff;
    background: var(--pf-accent);
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.pf-enquiry--short .wpcf7-submit:hover,
.pf-enquiry--short .wpcf7-submit:focus-visible {
    background: #1a1a1a;
    transform: translateY(-1px);
}