/* ============================================================================
   forms-gf.css: Gravity Forms lead forms (HubSpot to GF, Step 1, 2026-10).
   Printed by inc/forms-gf.php ONLY on a page that renders a GF form or its confirmation (raw <link> late in the
   head). Every rule is scoped under .fn-gf, the wrapper <div class="fn-gf" data-fn-group="..."> the theme prints
   around gravity_form(), except the last one (.fn-gf-jump, a class printed only on FranFit in GF mode), so nothing
   else on the site can change.

   Look: today's HubSpot forms (standalone.css .hsform .hs-form block): navy bold labels, white bordered Poppins
   inputs, red pill submit, red-outline Previous.

   Neutralised here, because they are UNSCOPED and would otherwise hit GF markup:
     standalone.css:290-299            .gform_body label.gfield_label, .gform_body input placeholders, .gform_body
                                       input/select (padding 15px 0 15px 15px !important), .gform_footer.top_label
                                       (+ its submit input), .gform_body.fownquiz, .focalc-form
     frannet-legacy-subset.css:151-190 input.gform_button.button, input.gform_previous_button.button,
                                       input.gform_next_button.button (location and franchise-type pages)
     style.css (full sheet, where a page still loads it): the same unscoped .gform_body / .gform_footer rules; the
                                       #gform_fields_N / #gform_N rules target old form ids 2-31 only (new ids start
                                       at 101), so they cannot match.
   Properties those rules set with !important are set here with !important under a more specific .fn-gf selector.
   GF's Orbital theme (the fresh-install default) supplies layout; the variables below tint it where it reads them.
   Built to GF 3.1.x markup (<button> elements); input[type=submit] variants are covered too. Not yet checked against
   a live GF render (UNVERIFIED until the dev install).
   ========================================================================== */

.fn-gf{
  --fn-gf-ink:#444;
  --fn-gf-label:#001F63;
  --fn-gf-line:#E6E6E6;
  --fn-gf-red:#FC2E37;
  --fn-gf-red-line:#FC2E38;
  --fn-gf-font:'Poppins','Poppins Fallback',Helvetica,Arial,Lucida,sans-serif;
  max-width:var(--prose,820px);
  margin:0 auto;
  font-family:var(--fn-gf-font);
  color:var(--fn-gf-ink);
  text-align:left;
}
/* The form owns the hero column on free consultation, resales, become a consultant, franchise inquiry, contact us. */
.sa-hero__form .fn-gf{max-width:none;margin:0}

/* Orbital reads these custom properties (names per GF's CSS API; harmless where a name is not read). */
.fn-gf .gform-theme--framework,
.fn-gf .gform_wrapper{
  --gf-color-primary:#FC2E37;
  --gf-color-primary-rgb:252,46,55;
  --gf-color-primary-contrast:#fff;
  --gf-color-primary-darker:#d21f27;
  --gf-ctrl-border-color:#E6E6E6;
  --gf-ctrl-label-color-primary:#001F63;
  --gf-ctrl-label-color-secondary:#001F63;
  --gf-ctrl-desc-color:#5b6472;
  --gf-ctrl-radius:3px;
  --gf-form-gap-y:15px;
  --gf-form-gap-x:16px;
  font-family:var(--fn-gf-font);
}

/* ---- labels ------------------------------------------------------------- */
.fn-gf .gform_wrapper .gfield_label,
.fn-gf .gform_wrapper .gform-field-label,
.fn-gf .gform_wrapper legend.gfield_label{
  display:inline-block;
  font-family:var(--fn-gf-font) !important;
  font-size:16px !important;
  font-weight:700 !important;
  font-style:normal;
  line-height:22px !important;
  color:var(--fn-gf-label) !important;
  margin:0 0 8px !important;
  padding:0;
}
.fn-gf .gform_wrapper .gfield_required,
.fn-gf .gform_wrapper .gfield_required_asterisk{color:#d21f27 !important;font-weight:600}
.fn-gf .gform_wrapper .gfield_description{font-size:14px;line-height:1.5;color:#5b6472;padding-top:4px}

/* ---- inputs, selects, textareas ----------------------------------------- */
.fn-gf .gform_wrapper input[type="text"],
.fn-gf .gform_wrapper input[type="email"],
.fn-gf .gform_wrapper input[type="tel"],
.fn-gf .gform_wrapper input[type="number"],
.fn-gf .gform_wrapper input[type="url"],
.fn-gf .gform_wrapper select,
.fn-gf .gform_wrapper textarea{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:14px 15px !important;
  background:#fff !important;
  border:1px solid var(--fn-gf-line) !important;
  border-radius:3px !important;
  box-shadow:none !important;
  font-family:var(--fn-gf-font) !important;
  font-size:16px !important;
  font-style:normal;
  font-weight:400 !important;
  line-height:22px !important;
  color:var(--fn-gf-ink) !important;
  min-height:52px;
}
.fn-gf .gform_wrapper textarea{min-height:110px;height:auto;resize:vertical}
.fn-gf .gform_wrapper select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url(/wp-content/uploads/2022/04/sellectarrow.png) !important;
  background-repeat:no-repeat !important;
  background-position:right 16px center !important;
  padding-right:44px !important;
  cursor:pointer;
}
.fn-gf .gform_wrapper input::placeholder,
.fn-gf .gform_wrapper textarea::placeholder{font-size:16px !important;font-weight:400 !important;line-height:22px !important;color:#8a8f98 !important;opacity:1}
.fn-gf .gform_wrapper input:focus,
.fn-gf .gform_wrapper select:focus,
.fn-gf .gform_wrapper textarea:focus{border-color:#1a4fa3 !important;outline:2px solid rgba(26,79,163,.25);outline-offset:0}

/* GF's '"*" indicates required fields' line: today's HubSpot forms show none; every required label keeps its asterisk
   and its aria-required input, so nothing is lost for screen readers. */
.fn-gf .gform_wrapper .gform_required_legend{display:none !important}

/* ---- layout ------------------------------------------------------------- */
.fn-gf .gform_wrapper .gform_fields{row-gap:15px}
.fn-gf .gform_wrapper .gfield{margin:0;padding:0}
.fn-gf .gform_wrapper .gfield--type-html,
.fn-gf .gform_wrapper .gfield_html{font-size:14px;line-height:1.55;color:#5b6472}
.fn-gf .gform_wrapper .gfield_html a,
.fn-gf .gform_wrapper .gfield--type-html a{font-weight:600;color:#0033A0}
.fn-gf .gform_wrapper .gsection{border-bottom:0;padding:0;margin:6px 0 0}
.fn-gf .gform_wrapper .gsection_title{font-size:1.15rem;font-weight:600;color:#0e2340;margin:0}
.fn-gf .gform_wrapper .gform_page_footer,
.fn-gf .gform_wrapper .gform_footer,
.fn-gf .gform_wrapper .gform-footer,
.fn-gf .gform_wrapper .gform-page-footer{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:center !important;
  align-items:center !important;
  gap:12px;
  margin:18px 0 0 !important;
  padding:0 !important;
}

/* ---- buttons: submit and Next red, Previous red outline ----------------- */
.fn-gf .gform_wrapper .gform_button,
.fn-gf .gform_wrapper .gform_next_button,
.fn-gf .gform_wrapper button[type="submit"],
.fn-gf .gform_wrapper input[type="submit"],
.fn-gf .gform_wrapper input.gform_button.button,
.fn-gf .gform_wrapper input.gform_next_button.button{
  -webkit-appearance:none;appearance:none;
  display:inline-block !important;
  width:230px !important;
  max-width:100% !important;
  margin:0 !important;
  padding:20px 35px !important;
  background:var(--fn-gf-red) !important;
  border:0 !important;
  border-radius:5px !important;
  box-shadow:none !important;
  color:#fff !important;
  font-family:var(--fn-gf-font) !important;
  font-size:18px !important;
  font-weight:600 !important;
  line-height:22px !important;
  letter-spacing:.5px;
  text-align:center;
  text-transform:none;
  cursor:pointer;
}
.fn-gf .gform_wrapper .gform_previous_button,
.fn-gf .gform_wrapper input.gform_previous_button.button{
  -webkit-appearance:none;appearance:none;
  display:inline-block !important;
  width:230px !important;
  max-width:100% !important;
  margin:0 !important;
  padding:18px 35px !important;
  background:#fff !important;
  border:2px solid var(--fn-gf-red-line) !important;
  border-radius:5px !important;
  box-shadow:none !important;
  color:var(--fn-gf-red-line) !important;
  font-family:var(--fn-gf-font) !important;
  font-size:18px !important;
  font-weight:600 !important;
  line-height:22px !important;
  letter-spacing:.5px;
  text-align:center;
  cursor:pointer;
}
.fn-gf .gform_wrapper .gform_button:hover,
.fn-gf .gform_wrapper .gform_next_button:hover,
.fn-gf .gform_wrapper button[type="submit"]:hover,
.fn-gf .gform_wrapper input[type="submit"]:hover{filter:brightness(1.05)}
.fn-gf .gform_wrapper .gform_previous_button:hover{background:#fff5f5 !important}
.fn-gf .gform_wrapper .gform_button:focus-visible,
.fn-gf .gform_wrapper .gform_next_button:focus-visible,
.fn-gf .gform_wrapper .gform_previous_button:focus-visible{outline:3px solid #1a4fa3;outline-offset:2px}

/* ---- validation --------------------------------------------------------- */
.fn-gf .gform_wrapper .gform_validation_errors{
  margin:0 0 16px;padding:12px 16px;border:1px solid #f1b5b8;border-radius:8px;background:#fff5f5;box-shadow:none;
}
.fn-gf .gform_wrapper .gform_validation_errors .gform_submission_error{font-size:15px;line-height:1.4;font-weight:600;color:#b91b22;margin:0}
.fn-gf .gform_wrapper .gfield_validation_message,
.fn-gf .gform_wrapper .validation_message{
  font-size:13px !important;line-height:1.4;color:#d21f27 !important;background:none !important;border:0 !important;
  padding:4px 0 0 !important;margin:0 !important;
}
.fn-gf .gform_wrapper .gfield_error input,
.fn-gf .gform_wrapper .gfield_error select,
.fn-gf .gform_wrapper .gfield_error textarea{border-color:#d21f27 !important}

/* ---- multi-page (matching form): progress text, steps ------------------- */
.fn-gf .gform_wrapper .gf_progressbar_title,
.fn-gf .gform_wrapper .gf_step_label{font-size:14px;color:#5b6472;font-weight:600}
/* HubSpot's own form headings ("Match with a Consultant Today!" x2, "Contact Information") are kept in the matching
   form as HTML blocks with this class. Visitors never see them today (standalone.css .sa-formband h2.hsfc-Heading),
   the page's own h2 is the heading, so they stay hidden here on every matching, location and franchise-type page. */
.fn-gf .fn-gf-hs-heading{display:none !important}

/* ---- confirmation (POST response of a saved entry) --------------------- */
.fn-gf .fn-gf-done,
.fn-gf .fn-gf-msg{
  padding:clamp(18px,3vw,28px);
  background:#fff;
  border:1px solid #e7e7e7;
  border-radius:14px;
  text-align:center;
  color:#242424;
  font-size:1.05rem;
  line-height:1.6;
}
.sa-hero__form .fn-gf .fn-gf-done,
.sa-hero__form .fn-gf .fn-gf-msg{border:0;padding:8px 0;background:none}
.fn-gf .fn-gf-done p:last-child,
.fn-gf .fn-gf-msg p:last-child{margin-bottom:0}
.fn-gf .fn-gf-continue{margin:14px 0 0;display:flex;flex-direction:column;align-items:center;gap:10px}
.fn-gf .fn-gf-continue__hint{font-size:.95rem;color:#5b6472}
.fn-gf .fn-gf-continue a{
  display:inline-block;padding:14px 28px;border-radius:5px;background:var(--fn-gf-red);color:#fff !important;
  font-weight:600;text-decoration:none;line-height:1.2;
}

/* ---- FranFit: the lower spot becomes a button to the one form (D6) ----- */
.fn-gf-jump{text-align:center;margin:8px 0 0}