/*
 * Form styling. Gravity Forms' own CSS is disabled (inc/gravity-forms.php), so
 * everything here is ours, built on the theme tokens. Targets GF 2.5+ markup
 * (.gform_wrapper …). A starting point — extend per form design.
 */

.gform_wrapper form {
    margin: 0;
}

/*
 * Twelve columns, the same track count Gravity Forms' own grid uses, so the
 * width classes its layout editor writes (.gfield--width-half and friends) map
 * onto whole numbers of tracks and line up with each other.
 */
.gform_wrapper .gform_fields {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Full width is the default, so a field with no width class — and every field
 * on a narrow screen, since the spans below only start at 600px — fills the
 * row. min-width: 0 is what makes the spans hold: a grid item's automatic
 * minimum is its content, so a long label or an <input size="..."> would
 * otherwise push its track past the share it was given.
 */
.gform_wrapper .gfield {
    grid-column: 1 / -1;
    min-width: 0;
}

/*
 * Hidden fields still occupy a cell and a 20px gap unless they are taken out
 * of flow — visible as a mysterious blank column next to a half-width field,
 * since GF's own CSS, which normally does this, is switched off.
 */
.gform_wrapper .gfield.gform_hidden,
.gform_wrapper .gfield--type-hidden,
.gform_wrapper .gfield_visibility_hidden {
    display: none;
}

/* Widths apply once there is room for them; below this everything is stacked. */
@media (min-width: 600px) {
    .gform_wrapper .gfield--width-quarter {
        grid-column: span 3;
    }

    .gform_wrapper .gfield--width-third {
        grid-column: span 4;
    }

    .gform_wrapper .gfield--width-five-twelfths {
        grid-column: span 5;
    }

    .gform_wrapper .gfield--width-half {
        grid-column: span 6;
    }

    .gform_wrapper .gfield--width-seven-twelfths {
        grid-column: span 7;
    }

    .gform_wrapper .gfield--width-two-thirds {
        grid-column: span 8;
    }

    .gform_wrapper .gfield--width-three-quarters {
        grid-column: span 9;
    }

    .gform_wrapper .gfield--width-five-sixths {
        grid-column: span 10;
    }
}

/* "* indicates required fields" legend above the form. */
.gform_wrapper .gform_required_legend {
    margin: 0 0 16px;
    font-size: 0.75rem;
    color: var(--color-accent-dark);
}

/* Fieldsets (complex fields like Name) carry default UA chrome — strip it. */
.gform_wrapper fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Labels (field-level and the Name <legend>). */
.gform_wrapper .gfield_label {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

/* Sub-labels under complex inputs (First / Last). */
.gform_wrapper .gform-field-label--type-sub {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-accent-dark);
}

/*
 * The required marker shares the error red on purpose. What keeps "required"
 * and "invalid" apart is therefore not colour: an invalid field also gets a
 * red border and a message underneath, and the asterisk is explained by the
 * "* indicates required fields" legend above the form — so neither state
 * depends on colour alone.
 */
.gform_wrapper .gfield_required {
    margin-left: 2px;
    color: var(--color-error);
}

/*
 * Name field: First / Last side by side (GF's own grid CSS is off). auto-fit
 * rather than a fixed 1fr 1fr, because this field can now sit in a half-width
 * cell — two inputs sharing half a form would be unusably narrow. The track
 * floor drops it to one column whenever the cell cannot hold both, which
 * covers the half-width case and small screens with the same rule.
 */
.gform_wrapper .ginput_complex.ginput_container--name {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.gform_wrapper .ginput_complex.ginput_container--name > span {
    display: block;
}

/* Fields */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="date"],
.gform_wrapper textarea,
.gform_wrapper select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 3px;
    background: var(--color-white);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

.gform_wrapper textarea {
    /* Explicit height overrides GF's rows="10" attribute, which otherwise
       renders a very tall box now that GF's own CSS is disabled. */
    height: 110px;
    min-height: 80px;
    resize: vertical;
}

.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
    /* accent-dark clears 4.5:1 on the white form background (base accent does not). */
    outline: 3px solid var(--color-accent-dark);
    outline-offset: 1px;
    border-color: var(--color-accent-dark);
}

/*
 * Choice fields — "Which days suit you?", "What time of day?", new/returning
 * patient. Gravity Forms 2.5 renders each one as a <fieldset> whose <legend>
 * carries .gfield_label (styled above), wrapping <ul class="gfield_checkbox">
 * or .gfield_radio with one <li class="gchoice"> per option: the native input
 * and its own <label>.
 *
 * The native control stays visible and unstyled in shape. A "chip" built from
 * a hidden input and a styled label looks tidier, but it has to reimplement
 * the checked state, the focus ring and — for radios — arrow-key movement
 * within the group, and it loses the platform rendering that Windows
 * high-contrast and forced-colors modes rely on. accent-color tints what the
 * browser already draws instead, which costs none of that.
 */

.gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield_radio {
    display: flex;
    flex-wrap: wrap;
    /* A row on a wide cell, wrapping to as many lines as it needs on a narrow
       one. The column gap is the wide one: side by side, options need clear
       air between them or "Monday Tuesday" reads as one run of text. */
    gap: 4px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * One option. 44px is the house minimum for a target (accessibility rules §20)
 * and the native box is 22px, so the row sets the height and the label fills
 * it — clicking anywhere on the words toggles the box, which is most of what
 * makes a five-day picker usable with a thumb.
 */
.gform_wrapper .gchoice {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    min-width: 0;
}

.gform_wrapper .gchoice input[type="checkbox"],
.gform_wrapper .gchoice input[type="radio"] {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--color-accent-dark);
}

/* Not .gfield_label: that is the group's question, this is one answer, so it
   reads at body weight rather than as a second heading. */
.gform_wrapper .gchoice label {
    margin: 0;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
}

/*
 * An invalid choice group cannot show the red border the text inputs get — a
 * native checkbox does not take one — so the group carries the mark itself,
 * next to the message underneath. Colour is not doing this alone: the message
 * text is what states the problem.
 */
.gform_wrapper .gfield_error .gfield_checkbox,
.gform_wrapper .gfield_error .gfield_radio {
    padding-left: 14px;
    border-left: 3px solid var(--color-error);
}

/* Per-field help text */
.gform_wrapper .gfield_description {
    margin-top: 6px;
    font-size: 13px;
    color: var(--color-accent-dark);
}

.gform_wrapper .gform_button {
    display: inline-block;
    padding: 0.75em 1.375em;
    border: 1px solid var(--color-accent);
    border-radius: 3px;
    background: var(--color-accent);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button:focus-visible {
    background: var(--color-bg-inverse);
    border-color: var(--color-bg-inverse);
    color: var(--color-white);
}

/* Validation */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
    border-color: var(--color-error);
}

.gform_wrapper .validation_message {
    margin-top: 6px;
    font-size: 15px;
    color: var(--color-error);
    font-weight: 500;
}

.gform_wrapper .gform_validation_errors {
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: 5px;
    background: var(--color-error-bg);
    color: var(--color-text);
}

/*
 * Gravity Forms marks the summary "there was a problem…" line as an <h2> so it
 * can take focus and be announced after a failed submit. It is an alert, not a
 * section title, so it must not inherit the display size h2 carries elsewhere
 * — at clamp(28px, 4vw, 44px) it dwarfs the form it is complaining about.
 * Body font here rather than Lora, to match .validation_message below it.
 */
.gform_wrapper .gform_submission_error {
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
}

/* No list of individual errors follows when the summary is switched off. */
.gform_wrapper .gform_submission_error:last-child {
    margin-bottom: 0;
}

/* GF draws this with its own icon font, which is part of the CSS we disable —
   left alone it renders as a stray fallback glyph before the message. */
.gform_wrapper .gform_submission_error .gform-icon {
    display: none;
}

/* Confirmation message after submit. */
.gform_confirmation_message {
    padding: 16px 20px;
    border-left: 3px solid var(--color-accent);
    background: var(--color-bg-muted);
    font-weight: 700;
}

/*
 * The bold above is set on the block so that a confirmation written as bare
 * text — no markup at all, which is what the Gravity Forms field accepts by
 * default — still reads as a result and not as more body copy. A confirmation
 * that goes on to explain what happens next is several paragraphs long, and all
 * of it bold is a wall; only the opening line keeps the weight.
 */
.gform_confirmation_message p:not(:first-of-type) {
    font-weight: 400;
}

.gform_confirmation_message> :first-child {
    margin-top: 0;
}

.gform_confirmation_message> :last-child {
    margin-bottom: 0;
}

/* Links inside it sit on the muted panel, where --color-accent-dark is 5.18:1;
   the base accent would not clear AA for text. */
.gform_confirmation_message a {
    color: var(--color-accent-dark);
}

@media (prefers-reduced-motion: reduce) {
    .gform_wrapper .gform_button {
        transition: none;
    }
}