/*
 * Contact Form 7 form elements.
 *
 * CF7 ships almost no styling of its own — inputs, checkboxes and the submit
 * button come out as browser defaults, which is why a form dropped on a page
 * looks nothing like the rest of the site. This aligns them with theme.json:
 * the Maax body font, the 10px radius used by .has-rounded-border, and a
 * submit button that matches .wp-element-button (pill, contrast fill).
 *
 * Everything is expressed in currentColor rather than in a fixed ink colour, so
 * the same form works on a white page and on the dark page template without a
 * second set of rules. That is what the theme's accent-4 / accent-5 presets are
 * (currentColor at 50% / 5%), and the field tokens below follow the same idea.
 *
 * The selectors carry .wpcf7 or .wpcf7 form on purpose: the theme sets
 * `:root p, p { margin-bottom: 1.5rem }`, and CF7 wraps every field in its own
 * <p>, so the form needs to outrank that to control its own rhythm.
 *
 * Scoped to CF7 — the core search block and any other form on the site are
 * untouched.
 */

.wpcf7 {
    /* Field box */
    --hl-form-radius: 10px;
    --hl-form-field-bg: color-mix(in srgb, currentColor 4%, transparent);
    --hl-form-field-bg-focus: color-mix(in srgb, currentColor 7%, transparent);
    --hl-form-border: color-mix(in srgb, currentColor 20%, transparent);
    --hl-form-border-hover: color-mix(in srgb, currentColor 45%, transparent);
    --hl-form-placeholder: color-mix(in srgb, currentColor 55%, transparent);

    /* Rhythm */
    --hl-form-gap: 1.25rem;

    /*
     * Kept distinct from the palette: a validation message is the one place on
     * the site where the colour carries meaning, and none of the five brand
     * colours reads as "wrong". Dark enough for white (~5.5:1); the dark page
     * template swaps in a lighter red below.
     */
    --hl-form-invalid: #c42b2b;
}

.page-template-pages-dark .wpcf7,
.work-template-default .wpcf7 {
    --hl-form-invalid: #ff9a9a;
}

/* ==========================================================================
   Rhythm — CF7 wraps each field in a <p>
   ========================================================================== */

.wpcf7 form p {
    margin: 0 0 var(--hl-form-gap);
}

.wpcf7 form p:last-of-type {
    margin-bottom: 0;
}

/*
 * The imported forms label their groups with inline <strong> and <h4> rather
 * than with real labels, so both need to read as a field label instead of as a
 * heading in the middle of the page.
 */
.wpcf7 form :is(h2, h3, h4, h5, h6) {
    font-size: var(--wp--preset--font-size--normal);
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 0.5rem;
    text-transform: none;
    letter-spacing: 0;
}

/*
 * A field label sits on its own line above its control. The label and the tag
 * are written on one source line in the form template, so CF7's autop does not
 * put a <br /> between them — this is what opens the gap instead.
 */
.wpcf7 form label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 500;
}

/* Percentage widths on the controls need a block box to resolve against. */
.wpcf7 .wpcf7-form-control-wrap {
    display: block;
}

/*
 * Grouped tickboxes are a fieldset with a legend, not a labelled control —
 * browsers give both a border and indentation that has to go.
 */
.wpcf7 form fieldset {
    /*
     * The options sit in their own <p> inside the fieldset, and that paragraph
     * is its parent's :last-of-type, so the rule above has already stripped its
     * trailing margin — the gap to the next field is this margin alone.
     */
    margin: 0 0 var(--hl-form-gap);
    padding: 0;
    border: 0;
}

.wpcf7 form legend {
    padding: 0;
    margin-bottom: 0.6rem;
    font-weight: 500;
}

/* ==========================================================================
   Text fields
   ========================================================================== */

.wpcf7 :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    textarea,
    select
) {
    /* CF7 emits size="40"/cols="40", which would otherwise set the width. */
    width: 100%;
    max-width: 100%;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--hl-form-border);
    border-radius: var(--hl-form-radius);
    background-color: var(--hl-form-field-bg);
    color: inherit;
    /* Inputs do not inherit type by default; 16px+ also stops iOS zooming in. */
    font-family: inherit;
    font-size: var(--wp--preset--font-size--normal);
    line-height: 1.4;
    transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
}

.wpcf7 textarea {
    min-height: 9rem;
    resize: vertical;
}

/*
 * Tickboxes, the submit button and the file field draw their own box below, so
 * they are kept out of the text-field hover and focus treatment.
 */
.wpcf7 :is(input, textarea, select):not([type="submit"], [type="checkbox"], [type="radio"], [type="file"]):hover {
    border-color: var(--hl-form-border-hover);
}

.wpcf7 :is(input, textarea, select):not([type="submit"], [type="checkbox"], [type="radio"], [type="file"]):focus {
    border-color: currentColor;
    background-color: var(--hl-form-field-bg-focus);
    outline: 2px solid var(--wp--preset--color--accent-4);
    outline-offset: 2px;
}

.wpcf7 ::placeholder {
    color: var(--hl-form-placeholder);
    opacity: 1; /* Firefox dims placeholders again on top of the colour. */
}

/* ==========================================================================
   File field — the button half of it gets the small-pill treatment
   ========================================================================== */

.wpcf7 input[type="file"] {
    font-family: inherit;
    font-size: var(--wp--preset--font-size--small);
}

.wpcf7 input[type="file"]::file-selector-button {
    margin-right: 1rem;
    padding: 0.6rem 1.25rem;
    border: 0;
    border-radius: 100px;
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
    font-family: inherit;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 500;
    cursor: pointer;
}

/* ==========================================================================
   Checkboxes, radios and acceptance
   ========================================================================== */

/*
 * CF7's own sheet lays list items out inline with a 1em left margin and pads
 * the labels with `content: " "` pseudo-elements. Both are undone here in
 * favour of a grid: the Meetgroep list is eleven options long and reads as a
 * wall of text in a single column on a wide screen.
 */
.wpcf7 :is(.wpcf7-checkbox, .wpcf7-radio) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem 1.5rem;
}

@media (min-width: 600px) {
    /* Long lists — the eleven Meetgroep options — fill the width they are given. */
    .wpcf7 .wpcf7-checkbox {
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    }

    /*
     * Radios are short single-choice lists, so they get a fixed pair of columns
     * rather than the three auto-fit would give them at full content width.
     */
    .wpcf7 .wpcf7-radio {
        grid-template-columns: repeat(2, 1fr);
    }
}

.wpcf7 .wpcf7-list-item {
    display: block;
    margin: 0;
}

.wpcf7 .wpcf7-list-item-label::before,
.wpcf7 .wpcf7-list-item-label::after {
    content: none;
}

/* An option's label is body text, not a field label — undo the rule above. */
.wpcf7 .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}

.wpcf7 :is(input[type="checkbox"], input[type="radio"]) {
    flex: none;
    width: 1.15em;
    height: 1.15em;
    /* Follows the text colour, so it inverts with the dark template for free. */
    accent-color: currentColor;
    /* Nudge onto the cap height of the first line of the label. */
    margin: 0.15em 0 0;
    cursor: pointer;
}

/*
 * Acceptance renders as a bare inline span rather than as a .wpcf7-checkbox, so
 * it needs its own box to sit on its own line — it is a full-width statement
 * with a link in it, not one option among several.
 */
.wpcf7 .wpcf7-acceptance {
    display: block;
}

.wpcf7 .wpcf7-acceptance .wpcf7-list-item-label {
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.5;
}

/* The free_text option on the Meetgroep checkbox: "Ik zit in een andere …". */
.wpcf7 .wpcf7-list-item.has-free-text label {
    flex-wrap: wrap;
}

.wpcf7 input.wpcf7-free-text {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem 0.85rem;
    font-size: var(--wp--preset--font-size--small);
}

/* ==========================================================================
   Submit — theme.json's elements.button, one size up
   ========================================================================== */

.wpcf7 input[type="submit"] {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2.25rem;
    border: 0;
    border-radius: 100px;
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
    font-family: inherit;
    /* Body size rather than theme.json's `small` — a form's one action should
       not be the smallest text on the page. */
    font-size: var(--wp--preset--font-size--normal);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease-out;
}

.wpcf7 input[type="submit"]:hover {
    background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 85%, transparent);
}

.wpcf7 input[type="submit"]:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent-4);
    outline-offset: 2px;
}

.wpcf7 input[type="submit"]:disabled {
    opacity: 0.5;
}

/*
 * The dark template paints the page in contrast, so a contrast-filled button
 * would disappear into it — swap fill and text there.
 */
.page-template-pages-dark .wpcf7 input[type="submit"],
.work-template-default .wpcf7 input[type="submit"] {
    background-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
}

.page-template-pages-dark .wpcf7 input[type="submit"]:hover,
.work-template-default .wpcf7 input[type="submit"]:hover {
    background-color: color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent);
}

/* Sits next to the submit button while the request is in flight. */
.wpcf7 .wpcf7-spinner {
    background-color: currentColor;
    margin: 0 0 0 1rem;
    vertical-align: middle;
}

/* ==========================================================================
   Required markers
   ========================================================================== */

/*
 * CF7 adds .wpcf7-validates-as-required to any control written with a `*` — on
 * the control itself for text fields, on the wrapping span for checkbox and
 * radio groups. A required [acceptance] gets neither that class nor
 * aria-required, but it is the one acceptance without `optional`.
 *
 * :has() is what makes this possible at all: the label is written before its
 * control, and there is no previous-sibling combinator. Browsers without it
 * just show no marker — the form stays usable.
 *
 * Decoration only. The state a screen reader acts on is CF7's aria-required, so
 * the asterisk is not announced, which is the intent: read aloud it would be
 * "star". Explain it once in the form template with a line like
 * `<p>* verplicht veld</p>` so the symbol has a stated meaning (WCAG 3.3.2).
 */
.wpcf7 form label:has(+ .wpcf7-form-control-wrap .wpcf7-validates-as-required)::after,
.wpcf7 form fieldset:has(.wpcf7-validates-as-required) legend::after,
.wpcf7 form .wpcf7-acceptance:not(.optional) .wpcf7-list-item-label::after {
    /* Non-breaking space: the marker must not wrap onto its own line. */
    content: "\00a0*";
    color: var(--hl-form-invalid);
}

/* ==========================================================================
   Validation and response messages
   ========================================================================== */

.wpcf7 .wpcf7-not-valid {
    border-color: var(--hl-form-invalid);
}

.wpcf7 .wpcf7-not-valid-tip {
    margin-top: 0.4rem;
    color: var(--hl-form-invalid);
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.4;
}

/*
 * CF7 draws this as a 2px box in one of five hues. Here it is a quiet tinted
 * panel with a colour bar down the side, so a failed submit does not put a
 * traffic-light rectangle in the middle of the page. The message text carries
 * the meaning; the bar only reinforces it.
 */
.wpcf7 form .wpcf7-response-output {
    margin: var(--hl-form-gap) 0 0;
    padding: 1rem 1.25rem;
    border: 0;
    border-radius: var(--hl-form-radius);
    background-color: var(--hl-form-field-bg);
    box-shadow: inset 3px 0 0 currentColor;
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.5;
}

/*
 * CF7 empties the message with innerText = "" but leaves the element in the
 * flow, and its own sheet only hides it in the init, resetting and submitting
 * states — so a cleared panel stays on screen in every other status, including
 * the `validating` one it enters on each field change. Hide it when there is
 * nothing in it; the server renders it with no whitespace either, so this also
 * covers first paint.
 */
.wpcf7 form .wpcf7-response-output:empty {
    display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
    background-color: var(--wp--preset--color--accent-1);
    color: var(--wp--preset--color--contrast);
}

.wpcf7 form:is(.invalid, .unaccepted, .failed, .aborted, .spam, .payment-required) .wpcf7-response-output {
    box-shadow: inset 3px 0 0 var(--hl-form-invalid);
}

@media (prefers-reduced-motion: reduce) {
    .wpcf7 :is(input, textarea, select) {
        transition: none;
    }
}