/* Gravity Forms, styled by RTG Core.

   This lives in the plugin rather than the theme on purpose. The plugin is
   what switches Gravity Forms' own stylesheet off, so the plugin has to be
   what puts something back. When the switch was in the plugin and the
   replacement was in the theme, updating one without the other left every
   form on the site completely unstyled, which is exactly what happened.
   Whoever turns the lights off provides the torch.

   Every token carries a fallback for the same reason: a form has to look
   right even against a theme that has not caught up yet.
*/

.gform_wrapper{--gf-gap:1rem}
.gform_wrapper form{margin:0}

/* Things Gravity Forms hides with the stylesheet we switched off.
   This block is not cosmetic. Without it the honeypot renders as a real
   field on the page, complete with the words "This field is for validation
   purposes and should be left unchanged", which both looks broken and tells
   a bot exactly which field to leave alone. */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gform_honeypot,
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper .gfield_visibility_hidden,
.gform_wrapper .gform_hidden,
.gform_wrapper input[type="hidden"],
.gform_wrapper .gf_invisible{
  display:none!important;
  position:absolute!important;
  left:-9999px!important;
}

/* Labels that exist only for a screen reader. */
.gform_wrapper .screen-reader-text,
.gform_wrapper .gform-field-label--visually-hidden{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* The field grid. Gravity Forms marks a field half width or full width; this
   is what makes that mean something once its own stylesheet is gone. */
.gform_fields{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gf-gap);
  row-gap:var(--gf-gap);
  margin:0;padding:0;list-style:none;
}
.gfield{grid-column:1/-1;display:grid;gap:.4rem;align-content:start;min-width:0}
@media (min-width:560px){
  .gfield--width-half{grid-column:span 6}
  .gfield--width-third{grid-column:span 4}
  .gfield--width-quarter{grid-column:span 3}
}

/* Labels. The old output inherited a near-black from Gravity Forms and
   vanished on the dark panel, which is the fault Ian caught. */
.gfield_label{
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:.8125rem;font-weight:600;letter-spacing:.02em;
  color:var(--text, #191327);margin:0;display:block;
}
.gfield_label .gfield_required{margin-left:.35rem;white-space:nowrap}
/* Required was shouting in red. It is a hint, not an error. */
.gfield_required_text{
  font-weight:400;font-size:.75rem;color:var(--text-muted, #5C5474);
  text-transform:lowercase;letter-spacing:0;
}

/* Controls. */
.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 select,
.gform_wrapper textarea{
  width:100%;max-width:100%;box-sizing:border-box;
  font:inherit;font-size:1rem;line-height:1.5;
  color:var(--text, #191327);background:var(--surface, #FFFFFF);
  border:1px solid var(--field-border, #8A7EA8);border-radius:10px;
  padding:.6rem .75rem;
  transition:border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance:none;appearance:none;
}
/* Gravity Forms sets rows="10", which renders a textarea about twice the
   height the design wants. An explicit height overrides the attribute; the
   min-height keeps it usable if somebody drags it smaller. */
.gform_wrapper textarea{height:9.5rem;min-height:6rem;resize:vertical}
.gform_wrapper ::placeholder{color:var(--text-muted, #5C5474);opacity:1}

.gform_wrapper input:focus-visible,
.gform_wrapper select:focus-visible,
.gform_wrapper textarea:focus-visible{
  outline:2px solid var(--accent, #8D3092);outline-offset:2px;
  border-color:var(--brand, #523092);
}

/* The checkbox on the careers form. */
.gfield_checkbox{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.gchoice{display:flex;gap:.6rem;align-items:flex-start}
.gchoice input[type="checkbox"]{
  flex:0 0 auto;width:1.1rem;height:1.1rem;margin:.2rem 0 0;
  accent-color:var(--brand, #523092);
}
.gform-field-label--type-inline{
  font-size:.9375rem;font-weight:400;color:var(--text, #191327);line-height:1.5;
}

/* The button. It was Gravity Forms' default blue. */
.gform_footer{margin-top:1.25rem;padding:0}
.gform_wrapper .gform_button{
  font:inherit;font-size:.9375rem;font-weight:600;
  background:var(--brand, #523092);color:var(--brand-ink, #FFFFFF);
  border:1px solid var(--brand, #523092);border-radius:999px;
  padding:.7rem 1.5rem;cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.gform_wrapper .gform_button:hover{background:var(--brand-hover, #3E2372);border-color:var(--brand-hover, #3E2372)}
.gform_wrapper .gform_button:active{transform:translateY(1px)}
.gform_wrapper .gform_button:focus-visible{outline:2px solid var(--accent, #8D3092);outline-offset:2px}

/* Validation and confirmation, which also come unstyled once Gravity Forms'
   stylesheet is off. A form that fails silently is worse than no form. */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select{border-color:#C0392B}
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message{
  font-size:.8125rem;color:#C0392B;margin-top:.15rem;
}
.gform_wrapper .gform_validation_errors{
  border:1px solid #C0392B;border-radius:10px;
  padding:.85rem 1rem;margin:0 0 1.25rem;background:var(--surface, #FFFFFF);
}
.gform_wrapper .gform_validation_errors h2{font-size:.9375rem;margin:0;color:var(--text, #191327)}
.gform_confirmation_message{
  border:1px solid var(--border-strong, #CFC6E4);border-left:4px solid var(--brand, #523092);
  border-radius:10px;padding:1rem 1.15rem;background:var(--surface, #FFFFFF);color:var(--text, #191327);
}
.gform_wrapper .gform_ajax_spinner{display:inline-block;margin-left:.6rem;vertical-align:middle}

/* Only ever shown to a person who can fix it. */
.rtg-form-missing{
  padding:.75rem 1rem;border:1px dashed var(--border-strong, #CFC6E4);border-radius:10px;
  font-size:.875rem;color:var(--text-muted, #5C5474);background:var(--bg-2);
}

/* The purple CTA band. It is a light card whatever the page theme, so the
   fields inside it have to follow the card rather than the page. Getting
   this wrong is how the labels disappeared in the first place. */
.band-form .gfield_label{color:var(--band-card-text, #191327)}
.band-form .gfield_required_text{color:#5C5474}
.band-form .gform_wrapper input[type="text"],
.band-form .gform_wrapper input[type="email"],
.band-form .gform_wrapper input[type="tel"],
.band-form .gform_wrapper textarea{
  background:#FFFFFF;color:#191327;border-color:#8A7EA8;
}
.band-form .gform_wrapper ::placeholder{color:#5C5474}
.band-form .gform_wrapper .gform_button{
  background:#523092;border-color:#523092;color:#fff;width:100%;
}
.band-form .gform_wrapper .gform_button:hover{background:#3E2372;border-color:#3E2372}

