/* Moxie Mindset Therapy: Gravity Forms output, styled as the mockup's contact form.
   Gravity Forms' own CSS is off (inc/forms.php). The element rules in site.css
   (form, label, legend, inputs, select, textarea, focus) already apply; this file
   maps Gravity Forms' wrappers onto the mockup's .field, .two, fieldset, .radios,
   .btn, and .quiet, and adds the validation state.
   Error colour: --rose-deep #89575E, the design rose's hue at lower lightness
   (text 4.71:1 on --ground, 5.15:1 on --cream-soft; border 5.15:1 on the field). */

:root{--rose-deep:#89575E}

/* the field grid: a .two row is two half-width fields */
.gform_wrapper .gform_heading{display:none}
.gform_fields{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:22px;row-gap:0;list-style:none;margin:0;padding:0}
.gform_fields>.gfield{grid-column:1/-1;min-width:0;margin:0 0 22px;padding:0}
.gform_fields>.gfield--width-half{grid-column:span 6}
.gform_fields>fieldset.gfield{border:0;padding:0;margin:0 0 18px}

/* labels: Gravity Forms wraps the label text in a span; site.css's "label span"
   (the hint style) must not reach it, only the hint after it */
.gform_wrapper .gform-field-label__text{font-weight:inherit;color:inherit}

/* labels: required fields are not marked visually (BUILD-PLAN blocker 12); screen readers still hear it */
.gfield_required{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.gfield_description:empty{display:none}

/* Gravity Forms prints rows="10"; the mockup's textarea sits at its min-height */
.gform_wrapper textarea{height:130px}

/* a field's note under it, and the character counter: the label hint's type
   (site.css "label span": 15px, regular, --ink-soft) */
.gform_wrapper .gfield_description{font-size:15px;font-weight:400;line-height:1.5;color:var(--ink-soft);margin:6px 0 0;padding:0}
.gform_wrapper .ginput_counter{text-align:right;font-variant-numeric:tabular-nums}
.gform_wrapper .ginput_counter+.gfield_description{margin-top:2px}

/* radios: the mockup's .radios row */
.gfield_radio{display:flex;gap:22px;flex-wrap:wrap}
.gfield_radio .gchoice{display:flex;align-items:center;gap:9px}
.gfield_radio .gchoice label{font-weight:400;margin:0;cursor:pointer}
.gfield_radio input{accent-color:var(--anchor);width:17px;height:17px;margin:0}

/* the button and the line under it */
.gform_footer{margin:0;padding:0}
.gform_footer .gform_button{-webkit-appearance:none;appearance:none;display:inline-block;font-family:var(--sans);font-weight:600;font-size:16px;line-height:1;padding:17px 26px;border-radius:4px;border:1px solid var(--anchor);background:var(--anchor);color:var(--ground);cursor:pointer;transition:background .2s,color .2s}
.gform_footer .gform_button:hover{background:var(--teal-deep);border-color:var(--sand)}
.gform_footer .gform_button:focus-visible{outline:2px solid var(--anchor);outline-offset:3px}
.gform_ajax_spinner{width:18px;height:18px;margin-left:12px;vertical-align:middle}

/* the honeypot: never shown (Gravity Forms' own CSS used to hide it) */
.gform_validation_container,.gform_wrapper .gfield--type-honeypot{display:none!important;position:absolute!important;left:-9000px!important}

/* after sending: the mockup's "sent" line */
.gform_confirmation_message .sent{color:var(--anchor);font-weight:600;margin:0}

/* validation */
.gform_validation_errors{border:1px solid var(--rose-deep);border-radius:4px;background:var(--cream-soft);padding:14px 16px;margin:0 0 22px}
.gform_validation_errors:focus{outline:2px solid var(--anchor);outline-offset:3px}
.gform_validation_errors .gform_submission_error{font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.5;color:var(--ink);margin:0;letter-spacing:0}
.gform_validation_errors .gform-icon{display:none}
.gform_validation_errors ol{margin:8px 0 0;padding:0 0 0 1.2em;font-size:15px}
.gform_validation_errors a{color:var(--rose-deep)}
.gfield_error input,.gfield_error select,.gfield_error textarea{border-color:var(--rose-deep)}
.gfield_validation_message,.validation_message{color:var(--rose-deep);font-size:14px;font-weight:600;margin:6px 0 0}

@media (max-width:719px){
  .gform_fields>.gfield--width-half{grid-column:1/-1}
  /* the mockup's .two keeps its 22px gap when it stacks */
  .gform_fields>.gfield.moxie-pair-first{margin-bottom:44px}
}