/* ==========================================================
   Gravity Forms Customization

   Requires the Orbital form theme.
   Loaded by functions.php only when Gravity Forms is active.
   ========================================================== */

body .gform_wrapper.gform-theme--framework {

  /* ---- Accent color --------------------------------------------------
     Drives checkboxes, radios, select highlights, progress bars, and
     anything else that inherits the primary color.
     IMPORTANT: keep the -rgb value in sync with the hex (r, g, b). */
  --gf-color-primary: #16a34a;
  --gf-color-primary-rgb: 22, 163, 74;
  --gf-color-primary-contrast: #ffffff;   /* text/icons on accent */
  --gf-color-primary-darker: #15803d;     /* used for button hover */

  /* ---- Labels ---------------------------------------------------------- */
  --gf-ctrl-label-font-size-primary: 15px;
  --gf-ctrl-label-color-primary: #1d2939;
  --gf-ctrl-label-font-weight-primary: 500;
  --gf-ctrl-label-color-req: #c02b0a;     /* "(Required)" marker */

  /* ---- Descriptions ---------------------------------------------------- */
  --gf-ctrl-desc-font-size: 13px;
  --gf-ctrl-desc-color: #667085;

  /* ---- Inputs: default state ------------------------------------------ */
  --gf-ctrl-color: #1d2939;               /* typed text */
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-border-color: #d0d5dd;
  --gf-ctrl-border-width: 1px;
  --gf-ctrl-radius: 6px;
  --gf-ctrl-placeholder-color: #98a2b3;
  --gf-ctrl-shadow: none;                 /* Orbital adds a faint shadow */

  /* ---- Inputs: focus state -------------------------------------------- */
  --gf-ctrl-color-focus: #1d2939;
  --gf-ctrl-bg-color-focus: #ffffff;
  --gf-ctrl-border-color-focus: var(--gf-color-primary);
  --gf-ctrl-outline-color-focus: rgba(var(--gf-color-primary-rgb), 0.35);
  --gf-ctrl-outline-width-focus: 3px;     /* focus ring thickness */

  /* ---- Primary button: default ---------------------------------------- */
  --gf-ctrl-btn-color-primary: #ffffff;
  --gf-ctrl-btn-bg-color-primary: var(--gf-color-primary);
  --gf-ctrl-btn-radius: 6px;
  --gf-ctrl-btn-font-size: 15px;
  --gf-ctrl-btn-font-weight: 600;

  /* ---- Primary button: hover ------------------------------------------ */
  --gf-ctrl-btn-color-hover-primary: #ffffff;
  --gf-ctrl-btn-bg-color-hover-primary: var(--gf-color-primary-darker);

  /* ---- Primary button: focus ------------------------------------------ */
  --gf-ctrl-btn-color-focus-primary: #ffffff;
  --gf-ctrl-btn-bg-color-focus-primary: var(--gf-color-primary-darker);
  --gf-ctrl-btn-border-color-focus-primary: var(--gf-color-primary-darker);
}

/* ==========================================================================
   HubSpot Forms — global styles
   Uses the site's Core Framework variables (--primary, --dark, --space-*, etc.)
   and inherits the theme font, so forms follow any future design changes.

   Part 1 styles legacy / raw-HTML embeds (.hs-form markup).
   Part 2 sets HubSpot's official CSS variables for new-editor forms (.hsfc-*).
   ========================================================================== */


/* --------------------------------------------------------------------------
   PART 1 — Legacy / raw HTML forms (.hs-form)
   -------------------------------------------------------------------------- */

/* Form wrapper ------------------------------------------------------------ */
.hs-form {
  font-family: inherit;
  font-size: var(--text-m);
  line-height: 1.5;
  color: var(--text-body);
  width: 100%;
}

.hs-form *,
.hs-form *::before,
.hs-form *::after {
  box-sizing: border-box;
}

/* HubSpot caps fieldsets at 500px by default — let them fill the container */
.hs-form fieldset {
  max-width: none !important;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Multi-column rows */
.hs-form fieldset.form-columns-2,
.hs-form fieldset.form-columns-3 {
  display: flex;
  gap: var(--space-m);
}

.hs-form fieldset.form-columns-2 > .hs-form-field,
.hs-form fieldset.form-columns-3 > .hs-form-field {
  flex: 1 1 0;
  width: auto !important;
  float: none !important;
  padding: 0 !important;
}

/* HubSpot wraps every field in a generic .input div. Other site styles
   target .input too, so strip the wrapper back to a plain container and
   let the real <input>/<select>/<textarea> carry all the visual styling. */
.hs-form .hs-form-field .input {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0 !important;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}

/* Field spacing */
.hs-form .hs-form-field {
  margin-bottom: var(--space-l);
}

/* Labels ------------------------------------------------------------------ */
.hs-form .hs-form-field > label,
.hs-form legend.hs-field-desc + label,
.hs-form .hs-form-field > label:not(.hs-error-msg) {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--text-title);
}

.hs-form .hs-form-required {
  margin-left: 0.15em;
  color: var(--error);
}

/* Help text / description */
.hs-form .hs-field-desc {
  display: block;
  margin: 0 0 var(--space-2xs);
  padding: 0;
  font-size: var(--text-s);
  color: var(--dark-70);
}

/* Text inputs, selects, textareas ---------------------------------------- */
.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form input[type="number"],
.hs-form input[type="url"],
.hs-form input[type="password"],
.hs-form input[type="search"],
.hs-form input[type="date"],
.hs-form input.hs-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
.hs-form select,
.hs-form textarea {
  display: block;
  width: 100% !important;
  min-height: 3rem;
  padding: var(--space-xs) var(--space-s);
  font-family: inherit;
  font-size: var(--text-m);
  line-height: 1.4;
  color: var(--text-body);
  background-color: var(--bg-body);
  border: 1px solid var(--primary);
  border-radius: var(--radius-m);
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.hs-form textarea {
  min-height: 8rem;
  resize: vertical;
}

.hs-form input::placeholder,
.hs-form textarea::placeholder {
  color: var(--dark-50);
  opacity: 1;
}

.hs-form input:hover,
.hs-form select:hover,
.hs-form textarea:hover {
  border-color: var(--primary-d-1);
}

.hs-form input:focus,
.hs-form select:focus,
.hs-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-30);
}

.hs-form input:disabled,
.hs-form select:disabled,
.hs-form textarea:disabled {
  background-color: var(--bg-surface);
  color: var(--dark-50);
  cursor: not-allowed;
}

/* Select dropdown arrow */
.hs-form select {
  padding-right: calc(var(--space-s) * 2 + 0.75rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23222520' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-s) center;
  background-size: 0.75rem;
  cursor: pointer;
}

.hs-form select[multiple] {
  background-image: none;
  padding-right: var(--space-s);
}

/* File upload */
.hs-form input[type="file"] {
  font-family: inherit;
  font-size: var(--text-s);
  color: var(--text-body);
}

.hs-form input[type="file"]::file-selector-button {
  margin-right: var(--space-s);
  padding: var(--space-2xs) var(--space-s);
  font-family: inherit;
  font-weight: 600;
  color: var(--dark);
  background-color: var(--primary-l-4);
  border: 1px solid var(--primary);
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.hs-form input[type="file"]::file-selector-button:hover {
  background-color: var(--primary-l-3);
}

/* Checkbox & radio lists -------------------------------------------------- */
.hs-form ul.inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hs-form ul.inputs-list.multi-container {
  display: grid;
  gap: var(--space-2xs);
}

.hs-form ul.inputs-list > li {
  margin: 0;
  padding: 0;
}

.hs-form ul.inputs-list > li::before {
  content: none;
}

/* Option labels */
.hs-form .hs-form-checkbox-display,
.hs-form .hs-form-booleancheckbox-display,
.hs-form .hs-form-radio-display {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin: 0;
  font-size: var(--text-m);
  font-weight: 400;
  color: var(--text-body);
  cursor: pointer;
}

.hs-form .hs-form-checkbox-display > span,
.hs-form .hs-form-booleancheckbox-display > span,
.hs-form .hs-form-radio-display > span {
  margin: 0;
}

/* Single agreement checkboxes (privacy policy, opt-ins) */
.hs-form .hs-fieldtype-booleancheckbox ul.inputs-list,
.hs-form .hs-fieldtype-booleancheckbox ul.inputs-list > li {
  margin: 0;
  padding: 0;
  line-height: 1;
}

.hs-form .hs-form-booleancheckbox-display {
  align-items: flex-start;
  font-size: var(--text-s);
  line-height: 1;
}

.hs-form .hs-form-booleancheckbox-display > span,
.hs-form .hs-form-booleancheckbox-display > span * {
  font-size: inherit;
  line-height: 1;
}

.hs-form .hs-form-booleancheckbox-display input[type="checkbox"] {
  margin-top: -0.1em;
}

/* Shared box/circle */
.hs-form input[type="checkbox"],
.hs-form input[type="radio"] {
  flex-shrink: 0;
  width: 1.25rem !important;
  height: 1.25rem;
  margin: 0.15em 0 0;
  padding: 0;
  background-color: var(--bg-body);
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid var(--primary);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.hs-form input[type="checkbox"] {
  border-radius: var(--radius-xs);
}

.hs-form input[type="radio"] {
  border-radius: 50%;
}

.hs-form input[type="checkbox"]:hover,
.hs-form input[type="radio"]:hover {
  border-color: var(--primary);
}

.hs-form input[type="checkbox"]:focus-visible,
.hs-form input[type="radio"]:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-30);
}

/* Checked states */
.hs-form input[type="checkbox"]:checked {
  background-color: var(--primary);
  border-color: var(--primary);
  background-size: 0.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.4 3.3L11 1.5' fill='none' stroke='%23222520' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.hs-form input[type="radio"]:checked {
  border-color: var(--primary);
  background-size: 0.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23B69859'/%3E%3C/svg%3E");
}

/* Error states ------------------------------------------------------------ */
.hs-form input.error,
.hs-form input.invalid,
.hs-form select.error,
.hs-form select.invalid,
.hs-form textarea.error,
.hs-form textarea.invalid {
  border-color: var(--error);
}

.hs-form input.error:focus,
.hs-form input.invalid:focus,
.hs-form select.error:focus,
.hs-form textarea.error:focus {
  box-shadow: 0 0 0 3px var(--error-20);
}

.hs-form .hs-error-msgs {
  margin: var(--space-3xs) 0 0;
  padding: 0;
  list-style: none;
}

.hs-form .hs-error-msgs li::before {
  content: none;
}

.hs-form .hs-error-msg,
.hs-form .hs-error-msgs label {
  display: block;
  margin: 0;
  font-size: var(--text-s);
  font-weight: 500;
  color: var(--error);
}

/* "Please complete all required fields" summary above the button */
.hs-form .hs_error_rollup {
  margin-bottom: var(--space-s);
}

/* Rich text & legal consent ---------------------------------------------- */
.hs-form .hs-richtext {
  margin-bottom: var(--space-m);
  font-size: var(--text-s);
  color: var(--dark-80);
}

.hs-form .hs-richtext p {
  margin: 0 0 var(--space-xs);
}

.hs-form .hs-richtext p:last-child {
  margin-bottom: 0;
}

.hs-form .hs-richtext a,
.hs-form .legal-consent-container a {
  color: var(--primary-d-1);
  text-decoration: underline;
}

.hs-form .hs-richtext a:hover,
.hs-form .legal-consent-container a:hover {
  color: var(--primary-d-2);
}

.hs-form .legal-consent-container {
  font-size: var(--text-s);
  color: var(--dark-80);
  line-height: 1;
}

.hs-form .legal-consent-container p,
.hs-form .legal-consent-container span,
.hs-form .legal-consent-container label,
.hs-form .legal-consent-container .hs-richtext {
  line-height: 1;
}

.hs-form .legal-consent-container .hs-form-booleancheckbox-display > span,
.hs-form .legal-consent-container .hs-richtext {
  font-size: var(--text-s);
}

/* reCAPTCHA */
.hs-form .hs-recaptcha {
  margin-bottom: var(--space-m);
}

/* Submit button — mirrors .btn.btn--primary ------------------------------- */
.hs-form .hs_submit {
  margin-top: var(--space-s);
}

.hs-form .hs-button,
.hs-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: var(--space-xs) var(--space-m);
  font-family: inherit;
  font-size: var(--text-m);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  color: var(--dark);
  background-color: var(--primary);
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.hs-form .hs-button:hover,
.hs-form input[type="submit"]:hover {
  background-color: var(--primary-l-1);
}

.hs-form .hs-button:focus-visible,
.hs-form input[type="submit"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-30);
}

.hs-form .hs-button:disabled,
.hs-form input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Success message --------------------------------------------------------- */
.submitted-message {
  padding: var(--space-l);
  font-size: var(--text-m);
  color: var(--text-body);
  background-color: var(--bg-surface);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-m);
}

.submitted-message p {
  margin: 0;
}

/* Mobile: stack multi-column rows ---------------------------------------- */
@media (max-width: 767px) {
  .hs-form fieldset.form-columns-2,
  .hs-form fieldset.form-columns-3 {
    flex-direction: column;
    gap: 0;
  }
}


/* --------------------------------------------------------------------------
   PART 2 — New forms editor (official HubSpot CSS variables)
   Reference: developers.hubspot.com/docs/cms/start-building/features/forms/forms
   -------------------------------------------------------------------------- */
:root {
  /* Global */
  --hsf-global__font-family: inherit;
  --hsf-global__font-size: var(--text-m);
  --hsf-global__color: var(--text-body);
  --hsf-global-error__color: var(--error);

  /* Rows */
  --hsf-row__horizontal-spacing: var(--space-m);
  --hsf-row__vertical-spacing: var(--space-l);
  --hsf-module__vertical-spacing: var(--space-xs);

  /* Background (transparent so the section background shows through) */
  --hsf-background__background-color: transparent;
  --hsf-background__border-width: 0;
  --hsf-background__padding: 0;

  /* Headings & rich text */
  --hsf-heading__font-family: inherit;
  --hsf-heading__color: var(--text-title);
  --hsf-richtext__font-family: inherit;
  --hsf-richtext__font-size: var(--text-s);
  --hsf-richtext__color: var(--dark-80);

  /* Labels & descriptions */
  --hsf-field-label__font-family: inherit;
  --hsf-field-label__font-size: var(--text-s);
  --hsf-field-label__color: var(--text-title);
  --hsf-field-label-requiredindicator__color: var(--error);
  --hsf-field-description__font-family: inherit;
  --hsf-field-description__color: var(--dark-70);
  --hsf-field-footer__font-family: inherit;
  --hsf-field-footer__color: var(--dark-70);

  /* Inputs */
  --hsf-field-input__font-family: inherit;
  --hsf-field-input__color: var(--text-body);
  --hsf-field-input__background-color: var(--bg-body);
  --hsf-field-input__placeholder-color: var(--dark-50);
  --hsf-field-input__border-color: var(--primary);
  --hsf-field-input__border-width: 1px;
  --hsf-field-input__border-style: solid;
  --hsf-field-input__border-radius: var(--radius-m);
  --hsf-field-input__padding: var(--space-xs) var(--space-s);

  /* Textareas */
  --hsf-field-textarea__font-family: inherit;
  --hsf-field-textarea__color: var(--text-body);
  --hsf-field-textarea__background-color: var(--bg-body);
  --hsf-field-textarea__placeholder-color: var(--dark-50);
  --hsf-field-textarea__border-color: var(--primary);
  --hsf-field-textarea__border-width: 1px;
  --hsf-field-textarea__border-style: solid;
  --hsf-field-textarea__border-radius: var(--radius-m);
  --hsf-field-textarea__padding: var(--space-xs) var(--space-s);

  /* Checkboxes & radios */
  --hsf-field-checkbox__background-color: var(--bg-body);
  --hsf-field-checkbox__color: var(--primary);
  --hsf-field-checkbox__border-color: var(--primary);
  --hsf-field-checkbox__border-width: 1px;
  --hsf-field-checkbox__border-style: solid;
  --hsf-field-radio__background-color: var(--bg-body);
  --hsf-field-radio__color: var(--primary);
  --hsf-field-radio__border-color: var(--primary);
  --hsf-field-radio__border-width: 1px;
  --hsf-field-radio__border-style: solid;

  /* Buttons — match .btn--primary */
  --hsf-button__font-family: inherit;
  --hsf-button__font-size: var(--text-m);
  --hsf-button__color: var(--dark);
  --hsf-button__background-color: var(--primary);
  --hsf-button__border-radius: var(--radius-m);
  --hsf-button__padding: var(--space-xs) var(--space-m);
  --hsf-button__box-shadow: none;

  /* Alerts */
  --hsf-erroralert__font-family: inherit;
  --hsf-erroralert__font-size: var(--text-s);
  --hsf-erroralert__color: var(--error);
  --hsf-infoalert__font-family: inherit;
  --hsf-infoalert__font-size: var(--text-s);
  --hsf-infoalert__color: var(--dark-80);

  /* Multi-step progress bar */
  --hsf-progressbar-text__font-family: inherit;
  --hsf-progressbar-text__font-size: var(--text-s);
  --hsf-progressbar-text__color: var(--text-body);
  --hsf-progressbar-progressLine__background-color: var(--primary);
  --hsf-progressbar-trackLine__background-color: var(--primary-l-4);
}