/* ===========================================================================
   OPTSY — GRAVITY FORMS INTEGRATION
   Load last, after optsy-components.css and after Gravity Forms' own theme
   stylesheets, so these rules win without needing !important.

   The live site runs the Orbital theme
   (gform-theme gform-theme--foundation gform-theme--framework gform-theme--orbital).
   This file works in two passes:

     1. Override Orbital's own custom properties. This is the clean route and
        covers most of the control styling on its own.
     2. Explicit rules on GF's stable class names, as a backstop in case a
        form renders in a different theme or the token names shift between
        GF releases.

   USAGE
   Wrap the shortcode in a layout class. Nothing else is required:

     <div class="op-form op-form--inline op-form--on-dark">
       [gravityform id="2" title="false" description="false" ajax="true"]
     </div>

   LAYOUT CLASSES
     .op-form--inline   one row: field(s) + button side by side (hero)
     .op-form--stack    fields in a row, button below (demo section)
     .op-form--on-dark  add when the form sits on navy (hero, demo, cta band)
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. ORBITAL TOKEN OVERRIDES
   Scoped to .op-form so other forms on the site are untouched.
   --------------------------------------------------------------------------- */
.op-form .gform-theme,
.op-form .gform_wrapper{
  --gf-color-primary:              var(--op-navy);
  --gf-color-primary-contrast:     #ffffff;
  --gf-color-primary-darker:       var(--op-navy-deep);
  --gf-color-primary-lighter:      var(--op-navy-soft);

  --gf-color-secondary:            #ffffff;
  --gf-color-secondary-contrast:   var(--op-ink);

  --gf-color-in-ctrl:              #ffffff;
  --gf-color-in-ctrl-contrast:     var(--op-ink);
  --gf-color-in-ctrl-light:        var(--op-line);
  --gf-color-in-ctrl-primary:      var(--op-accent);
  --gf-color-in-ctrl-primary-contrast:#ffffff;

  --gf-color-out-ctrl-light:       var(--op-line);
  --gf-color-out-ctrl-dark:        var(--op-body);

  --gf-radius:                     var(--op-r-sm);
  --gf-font-size-secondary:        14px;
  --gf-font-size-tertiary:         13px;

  --gf-local-color-primary:        var(--op-navy);
}

/* on-dark: translucent controls rather than white boxes on navy */
.op-form--on-dark .gform-theme,
.op-form--on-dark .gform_wrapper{
  --gf-color-in-ctrl:          rgba(255,255,255,.07);
  --gf-color-in-ctrl-contrast: #ffffff;
  --gf-color-in-ctrl-light:    rgba(255,255,255,.24);
  --gf-color-out-ctrl-light:   rgba(255,255,255,.24);
  --gf-color-out-ctrl-dark:    var(--op-on-dark-muted);
}


/* ---------------------------------------------------------------------------
   2. WRAPPER RESET
   GF ships its own margins and max-widths that fight the section rhythm.
   --------------------------------------------------------------------------- */
.op-form{margin:0}
.op-form .gform_wrapper{margin:0;max-width:none}
.op-form .gform_wrapper form{margin:0}
.op-form .gform-body,
.op-form .gform_body{margin:0}

/* GF's "* indicates required fields" legend — noise in a two-field hero form */
.op-form--inline .gform_required_legend{display:none}
.op-form .gform_required_legend{
  font-size:.8125rem;
  color:var(--op-muted);
  margin:0 0 10px;
}
.op-form--on-dark .gform_required_legend{color:var(--op-on-dark-faint)}

/* the honeypot / validation iframe GF appends */
.op-form iframe[name^="gform_ajax_frame"]{display:none!important}


/* ---------------------------------------------------------------------------
   3. FIELDS
   .gform_fields is a CSS grid in GF 2.5+. Keep the grid, restyle the cells.
   --------------------------------------------------------------------------- */
.op-form .gform_fields{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-column-gap:12px;
  grid-row-gap:14px;
  margin:0;padding:0;list-style:none;
}
.op-form .gfield{margin:0;padding:0}

.op-form .gfield_label,
.op-form .gform-field-label{
  display:block;
  font-size:.875rem;font-weight:600;
  color:var(--op-ink);
  margin:0 0 6px;
}
.op-form--on-dark .gfield_label,
.op-form--on-dark .gform-field-label{color:var(--op-on-dark)}

.op-form .gfield_required{color:var(--op-accent);margin-left:2px}
.op-form--on-dark .gfield_required{color:var(--op-on-dark-accent)}

/* controls */
.op-form .ginput_container input[type="text"],
.op-form .ginput_container input[type="email"],
.op-form .ginput_container input[type="tel"],
.op-form .ginput_container input[type="url"],
.op-form .ginput_container input[type="number"],
.op-form .ginput_container select,
.op-form .ginput_container textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--op-line);
  border-radius:var(--op-r-sm);
  background:var(--op-white);
  color:var(--op-ink);
  font-family:var(--op-font);
  font-size:.9375rem;
  line-height:1.4;
  transition:border-color var(--op-ease),background-color var(--op-ease);
}
.op-form .ginput_container textarea{min-height:130px;resize:vertical}

.op-form .ginput_container input::placeholder,
.op-form .ginput_container textarea::placeholder{color:var(--op-muted)}

.op-form .ginput_container input:focus,
.op-form .ginput_container select:focus,
.op-form .ginput_container textarea:focus{
  outline:none;
  border-color:var(--op-accent);
}

/* on-dark controls */
.op-form--on-dark .ginput_container input[type="text"],
.op-form--on-dark .ginput_container input[type="email"],
.op-form--on-dark .ginput_container input[type="tel"],
.op-form--on-dark .ginput_container input[type="url"],
.op-form--on-dark .ginput_container input[type="number"],
.op-form--on-dark .ginput_container select,
.op-form--on-dark .ginput_container textarea{
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.07);
  color:#fff;
}
.op-form--on-dark .ginput_container input::placeholder,
.op-form--on-dark .ginput_container textarea::placeholder{color:var(--op-on-dark-faint)}
.op-form--on-dark .ginput_container input:focus,
.op-form--on-dark .ginput_container select:focus,
.op-form--on-dark .ginput_container textarea:focus{
  border-color:var(--op-on-dark-accent);
  background:rgba(255,255,255,.12);
}

/* field descriptions */
.op-form .gfield_description{
  font-size:.8125rem;
  color:var(--op-muted);
  padding:6px 0 0;
}
.op-form--on-dark .gfield_description{color:var(--op-on-dark-faint)}


/* ---------------------------------------------------------------------------
   4. SUBMIT
   Every Gravity Form on the site is a demo or enquiry form, so the submit
   button uses the .btn-cta treatment: yellow at rest, white on hover.
   GF renders either <input type="submit"> or <button> depending on settings;
   both are covered.
   --------------------------------------------------------------------------- */
.op-form .gform_footer{margin:0;padding:14px 0 0}

.op-form .gform_button,
.op-form .gform_footer input[type="submit"],
.op-form .gform_footer button{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 28px;
  border:1px solid transparent;
  border-radius:8px;
  background:var(--op-yellow);
  color:var(--op-navy-deep);
  font-family:var(--op-font);
  font-weight:600;font-size:.9375rem;line-height:1;letter-spacing:-.005em;
  cursor:pointer;
  width:auto;
  box-shadow:var(--op-shadow-cta);
  transition:background-color .18s ease,color .18s ease,box-shadow .22s ease,transform .12s ease;
}
.op-form .gform_button:hover,
.op-form .gform_footer input[type="submit"]:hover,
.op-form .gform_footer button:hover{
  background:var(--op-white);
  color:var(--op-navy-deep);
  box-shadow:var(--op-shadow-cta-h);
  transform:translateY(-1px);
}
.op-form .gform_button:active,
.op-form .gform_footer input[type="submit"]:active,
.op-form .gform_footer button:active{
  background:var(--op-yellow-dark);
  transform:translateY(0);
}

/* GF's ajax spinner */
.op-form .gform_ajax_spinner{margin-left:10px;vertical-align:middle}


/* ---------------------------------------------------------------------------
   5. VALIDATION AND CONFIRMATION
   GF's defaults are red boxes that look nothing like the rest of the page.
   --------------------------------------------------------------------------- */
.op-form .gform_validation_errors{
  padding:14px 16px;
  margin:0 0 16px;
  border:1px solid #e5b4b4;
  border-left:3px solid #c0392b;
  border-radius:var(--op-r-sm);
  background:#fdf4f3;
  box-shadow:none;
}
.op-form .gform_validation_errors > h2,
.op-form .gform_validation_errors .gform_submission_error{
  font-size:.9375rem;
  font-weight:600;
  color:#8f2c20;
  margin:0;
}
.op-form--on-dark .gform_validation_errors{
  background:rgba(192,57,43,.14);
  border-color:rgba(255,255,255,.2);
  border-left-color:#ff8b7b;
}
.op-form--on-dark .gform_validation_errors > h2,
.op-form--on-dark .gform_validation_errors .gform_submission_error{color:#ffc9c0}

.op-form .gfield_validation_message,
.op-form .validation_message{
  padding:6px 0 0;
  margin:0;
  border:0;background:none;
  font-size:.8125rem;
  color:#c0392b;
}
.op-form--on-dark .gfield_validation_message,
.op-form--on-dark .validation_message{color:#ffb3a7}

.op-form .gfield_error .ginput_container input,
.op-form .gfield_error .ginput_container select,
.op-form .gfield_error .ginput_container textarea{border-color:#c0392b}
.op-form .gfield_error{background:none;border:0;padding:0}

.op-form .gform_confirmation_message{
  padding:18px 20px;
  border:1px solid var(--op-line);
  border-left:3px solid var(--op-accent);
  border-radius:var(--op-r-sm);
  background:var(--op-tint);
  color:var(--op-ink);
  font-size:.9375rem;
}
.op-form--on-dark .gform_confirmation_message{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.2);
  border-left-color:var(--op-on-dark-accent);
  color:#fff;
}


/* ---------------------------------------------------------------------------
   6. LAYOUT — INLINE (hero)
   One visible field plus the button, on a single row. The label is hidden
   visually but stays in the DOM for screen readers, so set the field to
   "Placeholder" in the GF editor as well.
   --------------------------------------------------------------------------- */
.op-form--inline{max-width:480px}

.op-form--inline .gform_wrapper form{
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
}
.op-form--inline .gform-body,
.op-form--inline .gform_body{flex:1 1 240px;min-width:0}

.op-form--inline .gform_fields{grid-row-gap:10px}
.op-form--inline .gfield{grid-column:1 / -1}

.op-form--inline .gfield_label,
.op-form--inline .gform-field-label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.op-form--inline .gform_footer{padding:0;flex:0 0 auto}

@media (max-width:680px){
  .op-form--inline{max-width:none}
  .op-form--inline .gform_wrapper form{flex-direction:column;align-items:stretch}
  .op-form--inline .gform_footer{width:100%}
  .op-form--inline .gform_button,
  .op-form--inline .gform_footer input[type="submit"],
  .op-form--inline .gform_footer button{width:100%}
}


/* ---------------------------------------------------------------------------
   7. LAYOUT — STACK (demo section)
   Three fields across, button centred underneath. Field widths follow GF's
   own .gfield--width-* classes where they're set in the editor; the default
   here puts three fields on one row.
   --------------------------------------------------------------------------- */
.op-form--stack{max-width:820px;margin:0 auto;text-align:left}

.op-form--stack .gform_fields{grid-row-gap:16px}
.op-form--stack .gfield{grid-column:span 4}
.op-form--stack .gfield--width-half{grid-column:span 6}
.op-form--stack .gfield--width-full,
.op-form--stack .gfield--type-textarea{grid-column:1 / -1}

.op-form--stack .gform_footer{
  display:flex;justify-content:center;
  padding:22px 0 0;
}

@media (max-width:860px){
  .op-form--stack .gfield{grid-column:span 6}
}
@media (max-width:680px){
  .op-form--stack .gfield,
  .op-form--stack .gfield--width-half{grid-column:1 / -1}
  .op-form--stack .gform_footer{padding-top:16px}
  .op-form--stack .gform_button,
  .op-form--stack .gform_footer input[type="submit"],
  .op-form--stack .gform_footer button{width:100%}
}


/* ---------------------------------------------------------------------------
   8. LAYOUT — INSIDE THE SLIDE-IN DRAWER
   Narrow column, so every field runs full width regardless of GF width class.
   --------------------------------------------------------------------------- */
.op-drawer .op-form--stack{max-width:none;margin:0}
.op-drawer .op-form--stack .gfield,
.op-drawer .op-form--stack .gfield--width-half{grid-column:1 / -1}
.op-drawer .op-form--stack .gform_footer{justify-content:stretch;padding-top:18px}
.op-drawer .op-form .gform_button,
.op-drawer .op-form .gform_footer input[type="submit"],
.op-drawer .op-form .gform_footer button{width:100%}