/***************************************************************
# Gravity Forms → legacy form skin
#
# The enquiry and book-a-viewing forms were hand-rolled markup in
# the `pward` theme and are now Gravity Forms.
#
# The grouping is rebuilt server side by
# App\Providers\GravityFormsServiceProvider::restoreLegacyFieldsets(),
# which turns each `.gsection` back into a real
# `<fieldset><legend>` holding a `.form__grid`. That means the
# "Forms" block of theme.css — the fieldset box, the legend on its
# top border, the 12-column grid and the `form__input-span-*`
# widths — does the work unchanged, and this file only has to deal
# with the parts of Gravity Forms' own markup that theme.css has
# never seen, and undo the parts of Gravity Forms' framework CSS
# that fight it.
#
# Loaded only on the two templates that render a form — see
# `template_styles` in config/legacy.php.
#
# theme.css is the reference and is never edited. Every value below
# is copied from it; line references are into
# resources/legacy/css/theme.css.
***************************************************************/

/***************************************************************
# Containers
***************************************************************/

/* Gravity Forms makes its field list a grid, or in legacy markup a
   bulleted <ul>. The grid now lives on the `.form__grid` inside
   each fieldset, exactly as the legacy markup had it
   (theme.css:568), and the list furniture goes. */
.form ul.gform_fields,
.form .gform_fields,
.form .form__grid {
    display: block;
    list-style: none;
    /* Gravity Forms' legacy stylesheet sets 1.8 here, which cascades
       into every label and control. The reference inherits the body's
       1.5 all the way down. */
    line-height: inherit;
    /* Only the labels were ever navy on the reference. */
    color: inherit;
    margin-left: 0;
    padding-left: 0;
}

.form .form__grid {
    display: grid;
}

/* Gravity Forms' legacy stylesheet gives every list item a 16px top
   margin. The legacy form's grid rows were spaced by the grid gap
   alone (theme.css:568). */
.form ul.form__grid,
.form .form__grid,
.form .form__grid > li,
.form .gform_fields > li {
    margin-top: 0;
    margin-bottom: 0;
}

/* The <li> the provider wraps each rebuilt fieldset in. The legacy
   boxes were siblings, so their 2rem margins collapsed to one gap
   between them (theme.css:549); inside separate list items they
   cannot, so the top margin is dropped after the first. */
.form .legacy-fieldset {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

.form .legacy-fieldset + .legacy-fieldset > fieldset {
    margin-top: 0;
}

.form .gform_fields > li,
.form .form__grid > li {
    list-style: none;
    background: none;
}

/* The honeypot is a real, visible field without this. */
.form .gform_validation_container {
    display: none !important;
}

/* Gravity Forms renders choice fields as <fieldset>, which would
   otherwise pick up the group box from theme.css:549. Only the
   fieldsets this theme builds are boxes.

   Every rule in Gravity Forms' own stylesheets is namespaced under
   `.gform_legacy_markup_wrapper` or `.gform-theme`, so the
   selectors below carry one extra class to out-weigh them in
   either markup mode. The legacy field wrapper was a bare
   `<div class="form__input form__input-span-N">` with no box of
   its own. */
.form .gfield,
.form .gform_fields .form__grid > .gfield {
    display: block;
    list-style: none;
    line-height: inherit;
    /* Gravity Forms colours the whole field; the legacy wrapper was a
       plain div, so only its label was ever navy. */
    color: inherit;
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
    width: auto;
    background: none;
}

.form .ginput_container,
.form .gform_fields .form__grid .gfield > .ginput_container {
    margin: 0;
    padding: 0;
}

/***************************************************************
# Labels — theme.css:562.
#
# `.form label` already matches Gravity Forms' <label>. Its
# <legend class="gfield_label"> is a group label, the legacy
# `span.form__group-label`, and has to be rescued from the box
# legend styling at theme.css:555.
***************************************************************/

.form .gform_fields .gfield > label.gfield_label,
.form .gform_fields .gfield > legend.gfield_label,
.form .gform_fields .form__grid .gfield > .gfield_label {
    /* The legacy label was a plain inline <label>; the group label a
       plain inline <span class="form__group-label">. */
    display: inline;
    clear: none;
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: bold;
    /* A ratio, not the inherited pixel value: the legacy label's
       inline box was one 24px line. */
    line-height: 1.5;
    color: #0f3162;
}

/* The legacy `span.form__group-label` was a block, so the `<br>`
   after it fell on its own line. Ordinary field labels stayed
   inline. */
.form .gform_fields .form__grid .gfield.form__checkbox-grid > .gfield_label,
.form .gform_fields .gfield.form__checkbox-grid > label.gfield_label,
.form .gform_fields .gfield.form__checkbox-grid > legend.gfield_label {
    display: block;
}

/* The legacy required marker was a `::after` on the label itself
   (theme.css:612): a red asterisk at label size, no baseline
   shift. The provider rewrites Gravity Forms' "(Required)" to a
   bare `*`; this puts it where the legacy one sat. */
.form .gfield_required,
.form .gfield_required_asterisk {
    display: inline;
    margin: 0 0 0 0.2em;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    vertical-align: baseline;
    color: #cc0000;
}

/***************************************************************
# Descriptions
#
# Two different legacy elements land on the same Gravity Forms
# class. The contact-preferences copy was a `<sub>` — small, and
# the only choice group the legacy marked `--required` that also
# carries copy. The enquiry-source line was plain body text.
***************************************************************/

/* The enquiry-source line was plain body copy in the legacy markup. */
.form .gform_fields .gfield > .gfield_description {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

/* Both group descriptions were inline in the legacy markup — a
   `<sub>` for contact preferences, bare text for enquiry source —
   so the `<br>` that follows joins their last line instead of
   creating an empty one. Gravity Forms makes them a <div>. */
.form .gform_fields .gfield.form__checkbox-grid > .gfield_description {
    display: inline;
}

/* The contact-preferences copy was a `<sub>`, which normalize.css
   renders at 75% with `line-height: 0`; against the 16px/24px
   parent that lands each line 21px apart. */
.form .gform_fields .form__checkbox-grid--required > .gfield_description {
    font-size: 75%;
    line-height: 21px;
    color: #404040;
}

/* The provider moves the description above the choices and puts
   the legacy line breaks back, so the group needs no layout of
   its own: the choice grid below sits in normal flow after it. */

/***************************************************************
# Choice tiles — checkboxes and radios.
#
# A deliberate departure from the legacy reference, which used
# the browser's native 13px controls: each choice is now a
# full-width tile on the same grey as the text inputs, with the
# control drawn in CSS so it matches the flat, square-cornered
# form. The whole tile is the label, so the hit target is the
# tile rather than a 13px box.
#
# The legacy `.form__checkbox-grid` was the grid itself. Gravity
# Forms puts the class on the field wrapper and the choices two
# levels down, so the grid lives on `.gfield_checkbox` /
# `.gfield_radio`. Column counts follow the legacy breakpoints.
#
# Gravity Forms' `browsers.css` nudges the native box down by a
# browser-dependent 4-6px; the control below is positioned
# explicitly, so that nudge is overridden rather than worked
# around.
***************************************************************/

.form .gform_fields .form__checkbox-grid .gfield_checkbox,
.form .gform_fields .form__checkbox-grid .gfield_radio,
.form .form__checkbox-grid .gfield_checkbox,
.form .form__checkbox-grid .gfield_radio {
    display: grid;
    width: 100%;
    max-width: none;
    gap: 0.75rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin-top: 1rem;
    margin-bottom: 0;
    padding: 0;
}

.form .gform_fields .form__checkbox-grid .gchoice,
.form .gform_fields .gchoice {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* The label is the tile. Padding on the left leaves room for the
   absolutely-positioned control. The `label.gform-field-label`
   form out-weighs Gravity Forms' own `:checked + label` rule,
   which would otherwise embolden the chosen label. */
.form .gform_fields .gchoice label.gform-field-label,
.form .gform_fields .form__checkbox-grid .gchoice label.gform-field-label {
    display: flex;
    align-items: center;
    min-height: 3rem;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0.625rem 1rem 0.625rem 2.875rem;
    background: #f5f5f5;
    border: 1px solid #f5f5f5;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1.5;
    color: #404040;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.form .gform_fields .gchoice label.gform-field-label:hover {
    border-color: rgba(15, 49, 98, 0.4);
}

.form .gform_fields .gchoice input[type="checkbox"]:checked + label.gform-field-label,
.form .gform_fields .gchoice input[type="radio"]:checked + label.gform-field-label {
    background: #ffffff;
    border-color: #0f3162;
    color: #0f3162;
    font-weight: normal;
}

/* The tile carries the focus ring; the control's own is dropped so
   keyboard users don't see two. */
.form .gform_fields .gchoice input[type="checkbox"]:focus-visible + label.gform-field-label,
.form .gform_fields .gchoice input[type="radio"]:focus-visible + label.gform-field-label {
    outline: 2px solid #0f3162;
    outline-offset: 2px;
}

.form .gform_fields .form__checkbox-grid .gchoice input[type="checkbox"]:focus-visible,
.form .gform_fields .form__checkbox-grid .gchoice input[type="radio"]:focus-visible,
.form .gform_fields .gchoice input[type="checkbox"]:focus-visible,
.form .gform_fields .gchoice input[type="radio"]:focus-visible {
    outline: none;
}

.form .gform_fields .gchoice input[type="checkbox"]:disabled + label.gform-field-label,
.form .gform_fields .gchoice input[type="radio"]:disabled + label.gform-field-label {
    cursor: not-allowed;
    opacity: 0.5;
}

/* The control, drawn in CSS. Legacy-markup radios carry no
   `gfield-choice-input` class, so everything keys off `type`.
   Gravity Forms' legacy stylesheets size the native box with
   `!important`, hence the matching `!important` on the
   dimensions. */
.form .gform_fields .form__checkbox-grid .gchoice input[type="checkbox"],
.form .gform_fields .form__checkbox-grid .gchoice input[type="radio"],
.form .gform_fields .gchoice input[type="checkbox"],
.form .gform_fields .gchoice input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    display: block;
    width: 1.25rem !important;
    height: 1.25rem !important;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 2px solid #0f3162;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
    vertical-align: baseline;
    flex: none;
    cursor: pointer;
    transition: background-color 150ms ease, box-shadow 150ms ease;
}

.form .gform_fields .form__checkbox-grid .gchoice input[type="radio"],
.form .gform_fields .gchoice input[type="radio"] {
    border-radius: 50%;
}

.form .gform_fields .gchoice input[type="checkbox"]:checked,
.form .gform_fields .gchoice input[type="radio"]:checked {
    background: #0f3162;
}

/* Radio: a white ring inside the navy fill. */
.form .gform_fields .gchoice input[type="radio"]:checked {
    box-shadow: inset 0 0 0 3px #ffffff;
}

.form .gform_fields .gchoice input[type="checkbox"]::before,
.form .gform_fields .gchoice input[type="radio"]::before,
.form .gform_fields .gchoice input[type="radio"]::after {
    content: none;
}

/* Checkbox: a white tick, an L rotated 45 degrees. */
.form .gform_fields .gchoice input[type="checkbox"]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 5px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    /* Nudged up: a tick's visual weight sits below its box centre. */
    transform: translateY(-1px) rotate(45deg) scale(0);
    transition: transform 120ms ease;
}

.form .gform_fields .gchoice input[type="checkbox"]:checked::after {
    transform: translateY(-1px) rotate(45deg) scale(1);
}

/* Error state: the group label already turns red; the tiles
   follow so the invalid group is obvious at a glance. */
.form .gform_fields .gfield_error .gchoice label.gform-field-label {
    border-color: rgba(204, 0, 0, 0.5);
}

.form .gform_fields .gfield_error .gchoice input[type="checkbox"],
.form .gform_fields .gfield_error .gchoice input[type="radio"] {
    border-color: #cc0000;
}

@media (min-width: 576px) {
    .form .gform_fields .form__checkbox-grid--2 .gfield_checkbox,
    .form .gform_fields .form__checkbox-grid--2 .gfield_radio {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .form .gform_fields .form__checkbox-grid .gfield_checkbox,
    .form .gform_fields .form__checkbox-grid .gfield_radio {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .form .gform_fields .form__checkbox-grid .gfield_checkbox,
    .form .gform_fields .form__checkbox-grid .gfield_radio {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .form .gform_fields .form__checkbox-grid--2 .gfield_checkbox,
    .form .gform_fields .form__checkbox-grid--2 .gfield_radio {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/***************************************************************
# Controls — theme.css:506.
#
# `.form input[type="text"]` and friends already match; these are
# the properties Gravity Forms' framework CSS sets that theme.css
# never had to.
***************************************************************/

.form .gform_fields .gfield input[type="text"],
.form .gform_fields .gfield input[type="email"],
.form .gform_fields .gfield input[type="tel"],
.form .gform_fields .gfield input[type="number"],
.form .gform_fields .gfield input[type="date"],
.form .gform_fields .gfield select,
.form .gform_fields .gfield textarea {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: whitesmoke;
    background-image: none;
    box-shadow: none;
    height: auto;
    font-size: inherit;
    font-family: inherit;
    /* Not inherited: the legacy controls kept the browser's normal
       weight against a 300-weight body. */
    font-weight: 400;

    /* Gravity Forms' legacy stylesheet sets padding, line-height and
       min-height on
       `input:not([type=radio]):not([type=checkbox])…` — six
       attribute selectors deep, which no practical selector here can
       out-specify. These three are the only declarations that need
       the hammer; theme.css:523 is the source of the values. */
    padding: 0.5rem 1rem !important;
    line-height: inherit !important;
    min-height: 0 !important;
}

/* Focus: the browser's default ring hugs the borderless box and
   crowds the text. A 2px ring stood off by 2px instead, the same
   ring the choice tiles use. */
.form .gform_fields .gfield input[type="text"]:focus-visible,
.form .gform_fields .gfield input[type="email"]:focus-visible,
.form .gform_fields .gfield input[type="tel"]:focus-visible,
.form .gform_fields .gfield input[type="number"]:focus-visible,
.form .gform_fields .gfield input[type="date"]:focus-visible,
.form .gform_fields .gfield select:focus-visible,
.form .gform_fields .gfield textarea:focus-visible {
    outline: 2px solid #0f3162;
    outline-offset: 2px;
}

/* legacy-style.css gives text controls #666; <select> keeps the
   browser's own colour, as it did on the reference. */
.form .gform_fields .gfield input[type="text"],
.form .gform_fields .gfield input[type="email"],
.form .gform_fields .gfield input[type="tel"],
.form .gform_fields .gfield input[type="number"],
.form .gform_fields .gfield input[type="date"],
.form .gform_fields .gfield textarea {
    color: #666;
}

/* The legacy Title control was a plain `<select>`, so it kept the
   browser's chevron. Gravity Forms' framework CSS removes it and
   paints its own from a custom property. */
.form .gform_fields .gfield select {
    -webkit-appearance: auto;
    appearance: auto;
}

/* Gravity Forms sizes text fields with a small/medium/large
   class; every legacy field was full width. */
.form .gform_fields .gfield input.small,
.form .gform_fields .gfield input.medium,
.form .gform_fields .gfield input.large,
.form .gform_fields .gfield select.small,
.form .gform_fields .gfield select.medium,
.form .gform_fields .gfield select.large,
.form .gform_fields .gfield textarea.small,
.form .gform_fields .gfield textarea.medium,
.form .gform_fields .gfield textarea.large {
    width: 100%;
}

/* The legacy control was `<textarea cols="30" rows="10">`, which
   renders 256px tall at the theme's 16px/1.5. */
.form .gform_fields .gfield textarea {
    height: 256px;
}

/***************************************************************
# Timeslots — book-a-viewing only
#
# The legacy template built three `.form__input-span-4` columns,
# each holding a date input with its time <select> underneath and
# a screen-reader-only label (`book-a-viewing.php:231-246`).
# Gravity Forms makes each of the six a field of its own, so left
# alone the grid lays them out date/time/date, time/date/time.
#
# Ordering the three dates ahead of the three times puts each pair
# back in its own column, because three span-4 fields fill a row
# exactly. Nothing on the enquiry form has a date field, so none
# of this applies there.
***************************************************************/

/* Only once the grid has its 12 columns. Below that the legacy
   stacked them in source order: date, time, date, time, date, time. */
@media (min-width: 768px) {
    .form .form__grid > .gfield--type-date {
        order: 1;
    }

    .form .form__grid > .gfield--type-date + .gfield--type-select {
        order: 2;
    }
}

/* Gravity Forms' date field is a text input with a separate toggle
   button, which lands on its own line. The legacy control was a
   native `<input type="date">` with the picker inside it on the
   right, so the button is put back there. */
.form .gform_fields .gfield .ginput_container_date {
    position: relative;
}

.form .gform_fields .gfield .ginput_container_date input[type="text"] {
    padding-right: 2.5rem !important;
}

.form .gform_fields .gfield .gform-datepicker-toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
}

.form .gform_fields .gfield .gform-datepicker-toggle .gform-calendar-icon {
    display: inline-block;
}

/* The calendar the toggle opens. Gravity Forms builds it as a
   <table>, so it picks up theme.css's navy cell borders and 1em
   padding (theme.css:108, :114), and its selects pick up the text
   control skin above. Its own legacy stylesheet then sizes each day
   at 50px. This scales it down to a compact popover in the site's
   type and colours. */
.form .gform-datepicker-calendar {
    width: 18rem;
    max-width: calc(100vw - 2rem);
    padding: 0.75rem;
    border: 1px solid #e3e6eb;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1.5rem rgba(15, 49, 98, 0.12);
    color: var(--primary);
    font-family: aktiv-grotesk, sans-serif;
}

.form .gform-datepicker-calendar table.calendar {
    width: 100%;
    margin: 0;
    table-layout: fixed;
}

.form .gform-datepicker-calendar table.calendar td,
.form .gform-datepicker-calendar table.calendar th {
    height: auto;
    padding: 0.0625rem;
    border: 0;
    background: none;
    text-align: center;
    vertical-align: middle;
}

/* Month and year rows: arrow, select, arrow. */
.form .gform-datepicker-calendar table.calendar .nav.prev,
.form .gform-datepicker-calendar table.calendar .nav.next {
    width: 2rem;
    color: var(--primary);
}

.form .gform-datepicker-calendar table.calendar .nav.prev span,
.form .gform-datepicker-calendar table.calendar .nav.next span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0 auto;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    font-size: 0.875rem;
}

.form .gform-datepicker-calendar table.calendar .nav.prev:hover span,
.form .gform-datepicker-calendar table.calendar .nav.next:hover span {
    background: #eef2f7;
}

.form .gform-datepicker-calendar table.calendar .nav.disabled span {
    background: none;
    opacity: 0.3;
    cursor: default;
}

.form .gform_fields .gfield .gform-datepicker-calendar select {
    width: auto;
    max-width: 100%;
    height: 2rem;
    padding: 0 0.5rem !important;
    background: none;
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 700;
    text-align: center;
    text-align-last: center;
    cursor: pointer;
}

.form .gform_fields .gfield .gform-datepicker-calendar select:hover {
    background: #eef2f7;
}

/* Weekday initials. */
.form .gform-datepicker-calendar table.calendar th span {
    width: auto;
    height: 1.75rem;
    color: #8a94a6;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Days. */
.form .gform-datepicker-calendar table.calendar td span {
    width: 2.125rem;
    height: 2.125rem;
    margin: 0 auto;
    border: 1px solid transparent;
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 400;
    transition: background-color 150ms ease, color 150ms ease;
}

.form .gform-datepicker-calendar table.calendar td.day:not(.disabled, .selected):hover span,
.form .gform-datepicker-calendar table.calendar td.day:not(.disabled, .selected):focus span {
    border-color: transparent;
    background: #eef2f7;
}

.form .gform-datepicker-calendar table.calendar td.day:focus-visible {
    outline: none;
}

.form .gform-datepicker-calendar table.calendar td.day:focus-visible span {
    box-shadow: 0 0 0 2px var(--secondary);
}

.form .gform-datepicker-calendar table.calendar .dayToday span,
.form .gform-datepicker-calendar table.calendar .dayToday:hover span,
.form .gform-datepicker-calendar table.calendar .dayToday:focus span {
    border-color: var(--primary);
    background: none;
    box-shadow: none;
    color: var(--primary);
    font-weight: 700;
}

.form .gform-datepicker-calendar table.calendar td.selected span,
.form .gform-datepicker-calendar table.calendar td.selected:hover span,
.form .gform-datepicker-calendar table.calendar td.selected:focus span {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

/* Past dates (the minimum-date floor above): faded, not filled. */
.form .gform-datepicker-calendar table.calendar .disabled span {
    border-color: transparent;
    background: none;
    box-shadow: none;
    color: #c3c9d3;
    cursor: default;
}

.form .gform-datepicker-calendar table.calendar .empty span {
    color: transparent;
}

/* "Press F1 for help". */
.form .gform-datepicker-calendar p {
    margin: 0.5rem 0 0;
    color: #8a94a6;
    font-size: 0.75rem;
    font-weight: 400;
    text-align: center;
}

/* The time select's label was `.screen-reader-text`
   (theme.css:7286). */
.form .form__grid > .gfield--type-date + .gfield--type-select > .gfield_label {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/***************************************************************
# Submit — theme.css:305 (`.button`) and theme.css:6089
# (`#form-submit`), which the legacy submit carried both of.
***************************************************************/

.form .gform_footer {
    display: block;
    margin: 1em 0;
    padding: 0;
}

.form .gform_button {
    display: block;
    width: auto;
    padding: 0.75em 4em;
    border: 0;
    border-radius: 0;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background: #46cca3;
    color: #fff;
    font-family: aktiv-grotesk, sans-serif;
    font-weight: 500;
    font-size: inherit;
    line-height: inherit;
}

/***************************************************************
# Confirmation and validation
#
# `#form-status` and its `--good` / `--bad` modifiers
# (theme.css:592) are replaced by Gravity Forms' own confirmation
# and validation output, given the same colours.
***************************************************************/

.gform_confirmation_message,
.gform_confirmation_message * {
    color: white;
}

.gform_confirmation_message {
    display: block;
    background: #648e46;
    padding: 1em 2em;
    font-size: 1rem;
    font-weight: bold;
}

/* The framework stylesheet colours the summary from its own
   custom properties, so they are reset on the container as well
   as being out-specified below. */
.gform_wrapper .gform_validation_errors {
    --gf-form-validation-summary-color: #ffffff;
    --gf-form-validation-heading-color: #ffffff;
    --gf-form-validation-bg-color: #8e4646;
    --gf-form-validation-border-color: #8e4646;

    background: #8e4646;
    color: white;
    padding: 1em 2em;
    margin: 0 0 1em;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 1rem;
    font-weight: bold;
}

.gform_wrapper .gform_validation_errors,
.gform_wrapper .gform_validation_errors ol,
.gform_wrapper .gform_validation_errors ol li {
    text-align: left;
    list-style: none;
}

.gform_wrapper .gform_validation_errors > h2,
.gform_wrapper .gform_validation_errors h2,
.gform_wrapper .gform_validation_errors .gform_submission_error,
.gform_wrapper .gform_validation_errors .gform-icon {
    color: white;
    font-size: 1rem;
    font-weight: bold;
    margin: 0 0 0.5rem;
    text-align: left;
    align-items: flex-start;
}

.gform_wrapper .gform_validation_errors ol,
.gform_wrapper .gform_validation_errors ol li,
.gform_wrapper .gform_validation_errors ol a,
.gform_wrapper .gform_validation_errors ol a:hover,
.gform_wrapper .gform_validation_errors ol a:focus {
    color: white;
    font-size: 0.875rem;
    font-weight: normal;
}

/* Per-field message, in place of the red block that
   `.form__checkbox-grid--error` (theme.css:618) drew. */
.form .gform_fields .gfield .gfield_validation_message,
.form .gform_fields .gfield .validation_message,
.form .gfield_validation_message,
.form .validation_message {
    display: block;
    background: #cc0000;
    color: white;
    padding: 0.5em 1em;
    margin: 0.5em 0 0;
    border: 0;
    border-radius: 0;
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1.2;
    text-align: left;
}

.form .gfield_error .gfield_label,
.form .gfield_error legend.gfield_label {
    color: #cc0000;
}

/* Same `:not()` chain as above, this time drawing a red border the
   legacy form never had. */
.form .gform_fields .gfield_error input,
.form .gform_fields .gfield_error textarea,
.form .gform_fields .gfield_error select {
    border: 0 !important;
}

.form .gfield_error {
    background: none;
    border: 0;
    padding: 0;
}