/* ============================================================
   Gravity Forms shim.

   inc/gravity.php puts the DESIGN's class names onto the markup Gravity
   Forms renders, so assets/css/ds/*.css -- verbatim copies of the export --
   style these forms with no values repeated here.

   What is left is only what GF's own STRUCTURE makes impossible to express
   that way. Keep this file small: if a rule here duplicates a value that
   already exists in a ds/ file, it is in the wrong place.
   ============================================================ */

/* GF nests the fields four levels deep -- wrapper > form > body > fields --
   and the design's form element is the flex container that spaces them. Make
   every one of those levels transparent to layout, and the design's own gap
   applies straight to the fields, with no spacing value repeated here.

   display:contents is presentational only: the <form> still submits, and the
   ginput_container still groups the inputs a complex field renders.

   Scoped to .fa-gform -- the class this theme puts on its own form wrappers
   -- for two reasons: it leaves every inherited vencreative form alone, and
   it is specific enough to beat `.gform_wrapper{display:block !important}`,
   which this site injects globally through its custom-CSS plugin. That rule
   predates this theme and other pages may depend on it, so it is overridden
   here rather than deleted there. */
.fa-gform .gform_wrapper,
.fa-gform .gform_wrapper > form,
.fa-gform .gform-body,
.fa-gform .gform_fields,
.fa-gform .ginput_container,
.fa-gform .gfield_checkbox,
.fa-gform .gform-footer {
  display: contents !important;
}

/* A multi-page form keeps every page in the DOM and hides the ones you are
   not on with an inline style. Deliberately WITHOUT !important, so that
   inline display:none still wins -- otherwise all three steps show at once. */
.fa-gform .gform_page {
  display: contents;
}

.fa-gform .gform_fields {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fa-gform fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* A field set to "hidden label" still renders its label; GF hides it with
   its own stylesheet, which is switched off on this install. */
.fa-gform .hidden_label > .gfield_label,
.fa-gform .gfield_label.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* "(Required)" sits inline after the label text in GF; the design shows no
   marker at all, and every field in these two forms that is required says so
   in its own wording. */
.fa-gform .gfield_required {
  display: none;
}

/* Validation. The design never drew an error state, so this is the theme's
   own -- deliberately minimal, and keyed off the design's own accent so it
   does not introduce a new colour. */
.fa-gform .gfield_error .gfield_label {
  color: #5939F5;
}

.fa-gform .validation_message {
  margin-top: 8px;
  font-family: "Epilogue", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: #5939F5;
}

.fa-gform .gform_validation_errors {
  margin: 0 0 24px;
  padding: 16px;
  background: #F6F6F6;
  font-family: "Epilogue", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #050E1E;
}

.fa-gform .gform_validation_errors h2 {
  margin: 0;
  font-size: inherit;
  font-weight: 600;
}

.fa-gform .gform_validation_errors ol {
  margin: 8px 0 0;
  padding-left: 18px;
}

.fa-gform .gform_ajax_spinner {
  display: inline-block;
  margin-left: 12px;
  vertical-align: middle;
}

/* ---- Consent tick ----------------------------------------------------
   The design's .csp__check draws the box as a <span> next to a hidden
   <input>. GF renders <input> + <label> with no span between them, so the
   design's rule cannot reach it. This restyles GF's own checkbox to the same
   thing -- the one place a value is repeated, and only because there is no
   element to hang the design's class on. */
.csp__form .gfield--type-consent .ginput_container,
.csp__form .gfield--type-checkbox .ginput_container {
  display: flex;
}

.csp__form .gfield--type-consent .gfield_consent_label,
.csp__form .gfield--type-checkbox .gchoice {
  display: flex;
  align-items: center;
  gap: 12px;
}

.csp__form .gfield--type-consent input[type="checkbox"],
.csp__form .gfield--type-checkbox input[type="checkbox"] {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0;
  border-radius: 6px;
  border: 2px solid #50DDA4;
  background: #FFFFFF;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.csp__form .gfield--type-consent input[type="checkbox"]:checked,
.csp__form .gfield--type-checkbox input[type="checkbox"]:checked {
  /* The design's tick, inlined: a 14x10 white check on the mint fill. */
  background: #50DDA4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10' fill='none'%3E%3Cpath d='M1.5 5L5.5 8.5L12.5 1.5' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center no-repeat;
}

.csp__form .gfield--type-consent input[type="checkbox"]:focus-visible,
.csp__form .gfield--type-checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid #5939F5;
  outline-offset: 2px;
}

.csp__form .gfield--type-consent label,
.csp__form .gfield--type-checkbox .gchoice label {
  font-family: "Epilogue", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: #050E1E;
  cursor: pointer;
}

/* The consent field's own heading is redundant next to the tick's wording. */
/* handled by the hidden_label rule above */

/* ---- Option buttons (Book a call) ------------------------------------
   The design's .bc-opt is the whole box and the radio itself is not drawn.
   The class is added to GF's .gchoice, so all that is needed here is to take
   the native control out of the flow and let the label fill the box. */
.fa-gform .bc-opt input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.fa-gform .bc-opt label {
  flex: 1 1 auto;
  cursor: pointer;
  color: inherit;
}

/* GF puts the choices in a wrapper between the container and each box. */
.fa-gform .gfield_radio {
  display: contents;
}

/* ---- Confirmation ----------------------------------------------------
   GF swaps the form for this after an AJAX submit. The design's own "Thank
   you" state is .csp__intro, so borrow it rather than inventing a second. */
.gform_confirmation_message {
  font-family: "Epilogue", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.16px;
  color: #050E1E;
}