/* Gravity Forms v4 on the Form page template (page-templates/template-form.php).

   Gravity Forms' own Orbital theme stays loaded; this file only overrides it
   inside .dbs-form so the form matches the design. Most of the restyle is done
   by pointing Orbital's CSS variables at the tokens in style-v4.css. The form
   block prints its own variables inline under the form's id, so ours need
   !important to win. Buttons carry .btn / .btn--outline and gform-theme__disable
   (see functions.php), so they use the button styles in style-v4.css as they are. */

.dbs-form .gform-theme {
  /* Colour */
  --gf-color-primary: var(--brand) !important;
  --gf-color-primary-rgb: 54, 90, 194 !important;
  --gf-color-primary-darker: var(--brand-pressed) !important;
  --gf-color-primary-lighter: var(--brand-hover) !important;
  --gf-color-in-ctrl-primary: var(--brand) !important;
  --gf-color-in-ctrl-primary-rgb: 54, 90, 194 !important;

  /* Type */
  --gf-font-family-base: var(--font-body) !important;
  --gf-font-family-primary: var(--font-body) !important;
  --gf-font-family-secondary: var(--font-body) !important;
  --gf-font-family-tertiary: var(--font-body) !important;

  /* Controls: the design's .input */
  --gf-ctrl-size: 3.25rem !important;
  --gf-ctrl-padding-x: 0.875rem !important;
  --gf-ctrl-radius: var(--r-sm) !important;
  --gf-ctrl-border-color: var(--border) !important;
  --gf-ctrl-border-color-hover: #c9ced8 !important;
  --gf-ctrl-border-color-focus: var(--brand) !important;
  --gf-ctrl-shadow: none !important;
  --gf-ctrl-color: var(--ink) !important;
  --gf-ctrl-font-size: 0.9375rem !important;
  --gf-ctrl-placeholder-color: var(--ink-muted) !important;
  --gf-ctrl-outline-color-focus: rgba(54, 90, 194, 0.2) !important;
  --gf-ctrl-outline-width-focus: 3px !important;
  --gf-ctrl-outline-offset: 0 !important;
  --gf-icon-ctrl-number: none !important; /* no spinner icon on number inputs */

  /* Labels: field label = .label; sub-labels and choices = 14px regular */
  --gf-ctrl-label-color-primary: var(--ink) !important;
  --gf-ctrl-label-font-size-primary: var(--fs-body-s) !important;
  --gf-ctrl-label-font-weight-primary: 700 !important;
  --gf-ctrl-label-line-height-primary: 1.43 !important;
  --gf-ctrl-label-color-secondary: var(--ink) !important;
  --gf-ctrl-label-font-size-secondary: var(--fs-body-s) !important;
  --gf-ctrl-label-font-weight-secondary: 400 !important;
  --gf-ctrl-label-color-tertiary: var(--ink-muted) !important;
  --gf-ctrl-label-font-size-tertiary: var(--fs-hint) !important;
  --gf-ctrl-label-color-req: var(--ink-muted) !important;

  /* Descriptions: the design's .hint */
  --gf-ctrl-desc-color: var(--ink-muted) !important;
  --gf-ctrl-desc-font-size: var(--fs-hint) !important;

  /* Radios and checkboxes: the design's .radio / .checkbox */
  --gf-ctrl-choice-size: 1.25rem !important;
  --gf-ctrl-radio-check-size: 0.5rem !important;
  --gf-ctrl-checkbox-check-radius: 4px !important;

  /* Spacing */
  --gf-form-gap-y: var(--s-lg) !important;
  --gf-field-gap-x: var(--s-lg) !important;
  --gf-label-space-primary: var(--s-xs) !important;
  --gf-desc-space: var(--s-xs) !important;
  --gf-field-choice-gap: var(--s-sm) !important;
  --gf-form-footer-gap: var(--s-sm) !important;

  /* Step indicator: the design's progress */
  --gf-field-pg-steps-number-size: 3rem !important;
  --gf-field-pg-steps-number-radius: 50% !important;
  --gf-field-pg-steps-number-color: var(--ink-muted) !important;
  --gf-field-pg-steps-number-bg-color: var(--surface) !important;
  --gf-field-pg-steps-number-border-color: var(--border) !important;
  --gf-field-pg-steps-number-color-active: var(--on-brand) !important;
  --gf-field-pg-steps-number-bg-color-active: var(--brand) !important;
  --gf-field-pg-steps-number-border-color-active: var(--brand) !important;
  --gf-field-pg-steps-number-color-complete: var(--on-brand) !important;
  --gf-field-pg-steps-number-bg-color-complete: var(--brand) !important;
  --gf-field-pg-steps-number-border-color-complete: var(--brand) !important;
  --gf-field-pg-prog-color: var(--ink-muted) !important;
  --gf-field-pg-prog-font-size: clamp(0.75rem, 0.19vw + 0.704rem, 0.875rem) !important;
  --gf-field-pg-prog-font-weight: 600 !important;
}

/* Heading: form title and description = the design's intro */
.dbs-form .gform_heading {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.381vw + 0.907rem, 1.25rem);
  margin-bottom: var(--s-flow);
}

/* An H1 heading block in the page content (page title above intro text) matches the form title */
.dbs-form .gform_title,
.dbs-form > h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.3125;
  letter-spacing: -0.019em;
}

/* Page text above the form (e.g. Business), spaced like the blog post: margins instead of the panel gap */
.dbs-form {
  gap: 0;
}

.dbs-form > * + * {
  margin-top: var(--s-flow);
}

.dbs-form > :is(h1, h2, h3, p, ul, ol) + :is(h2, h3, p, ul, ol) {
  margin-top: var(--s-text);
}

.dbs-form > h1 + :is(h2, h3, p, ul, ol) {
  margin-top: var(--s-card-sm);
}

.dbs-form .gform_description {
  color: var(--ink-muted);
  font-size: var(--fs-body);
  line-height: 1.75;
}

/* Steps: numbers on one line, labels below; first left, last right */
.dbs-form .gf_page_steps {
  position: relative;
  display: flex;
  margin-bottom: var(--s-flow);
  padding-bottom: var(--s-flow);
  border-bottom: 1px solid var(--border);
}

.dbs-form .gf_page_steps::before {
  content: "";
  position: absolute;
  top: calc(1.5rem - 0.5px);
  inset-inline: 0;
  height: 1px;
  background: var(--border);
}

.dbs-form .gf_step {
  flex: 1;
  flex-direction: column;
  gap: clamp(0.5rem, 0.381vw + 0.407rem, 0.75rem);
  margin: 0;
  text-align: center;
}

.dbs-form .gf_step_first {
  align-items: flex-start;
  text-align: left;
}

.dbs-form .gf_step_last {
  align-items: flex-end;
  text-align: right;
}

/* position: relative keeps GF's completed check mark (an absolute ::after)
   on top of its own number, not at the left edge of the step */
.dbs-form .gf_step_number {
  position: relative;
  font-size: 1.125rem;
  font-weight: 700;
  box-shadow: 0 0 0 var(--s-md) var(--surface);
}

/* The check mark is sized like the whole circle, border included, so it
   starts one border-width outside the number's padding box */
.dbs-form .gf_step_completed .gf_step_number::after {
  inset-block-start: calc(var(--gf-field-pg-steps-number-border-width) * -1);
  inset-inline-start: calc(var(--gf-field-pg-steps-number-border-width) * -1);
}

/* Current step label in ink, like the design */
.dbs-form .gf_step_active .gf_step_label {
  color: var(--ink);
}

/* Yes / No choices in a row, with the design's darker choice border */
.dbs-form .gform-theme--framework .gfield--type-radio .gfield_radio {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--s-xs) var(--s-lg);
}

.dbs-form .gform-theme--framework .gfield-choice-input {
  border: 1.5px solid var(--ink-muted);
}

.dbs-form .gform-theme--framework .gfield-choice-input:checked {
  border-color: var(--brand);
}

/* Checked checkbox: brand fill with a white tick, like the design's .checkbox */
.dbs-form .gform-theme--framework input[type="checkbox"]:checked {
  background-color: var(--brand);
  --gf-ctrl-choice-check-color: var(--on-brand);
}

/* Day / month / year: one row of three at every width */
.dbs-form .gform-theme--foundation .gfield--input-type-datedropdown .ginput_complex {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-xs);
  margin-inline: 0;
}

.dbs-form .gform-theme--foundation .gfield--input-type-datedropdown .gform-grid-col {
  inline-size: auto;
  max-inline-size: none;
  padding: 0;
}

/* Footer: Back left, Continue / Submit right; stacked on mobile */
.dbs-form .gform_page_footer {
  flex-direction: column-reverse;
  padding-top: clamp(0.625rem, 2.095vw + 0.114rem, 2rem);
}

.dbs-form .gform_page_footer .btn {
  padding: 0.9375rem 1.5rem;
  line-height: 1.286;
}

.dbs-form .gform_page_footer .btn--outline {
  padding: 0.8125rem 1.6875rem;
  line-height: 1.43;
}

/* Arrow after Continue / Submit, before Back (style-v4.css draws them as SVGs) */
.dbs-form :is(.gform_page_footer, .gform_footer) .btn::after,
.dbs-form .gform_page_footer .btn--outline::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: var(--dbs-arrow) center / contain no-repeat;
  mask: var(--dbs-arrow) center / contain no-repeat;
  --dbs-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
}

.dbs-form .gform_page_footer .btn--outline::after {
  content: none;
}

.dbs-form .gform_page_footer .btn--outline::before {
  transform: scaleX(-1);
}

@media (min-width: 64em) {
  .dbs-form .gform-theme {
    --gf-ctrl-size: 3.375rem !important;
    --gf-ctrl-padding-x: 1rem !important;
  }

  .dbs-form .gform_page_footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .dbs-form .gform_page_footer :is(.gform_next_button, .gform_button) {
    margin-inline-start: auto;
  }

  .dbs-form .gform_page_footer .btn {
    padding: 1rem 2rem;
    line-height: 1.43;
  }

  .dbs-form .gform_page_footer .btn--outline {
    padding: 0.8125rem 1.6875rem;
  }
}

/* Blog sidebar form ("Check information" box, template-parts/blog-sidebar.php):
   compact heading and spacing; the design shows no required markers. */
.lead-form .gform-theme {
  --gf-form-gap-y: var(--s-sm) !important;
  --gf-field-choice-gap: var(--s-xs) !important;
  --gf-form-footer-margin-y-start: var(--s-sm) !important;
}

.lead-form .gform_heading {
  gap: var(--s-sm);
  margin-bottom: var(--s-md);
}

.lead-form .gform_title {
  font-size: var(--fs-h4);
  line-height: 1.4;
  letter-spacing: normal;
}

.lead-form .gform_description {
  font-size: var(--fs-caption);
  line-height: 1.54;
}

.lead-form .gfield_required,
.lead-form .gform_required_legend {
  display: none;
}

/* Desktop: the sidebar's smaller labels, controls and checkboxes */
@media (min-width: 64em) {
  .lead-form .gform-theme {
    --gf-ctrl-size: 2.625rem !important;
    --gf-ctrl-padding-x: 0.75rem !important;
    --gf-ctrl-label-font-size-primary: var(--fs-hint) !important;
    --gf-ctrl-label-line-height-primary: 1.5 !important;
    --gf-ctrl-label-font-size-secondary: var(--fs-hint) !important;
    --gf-ctrl-choice-size: 1rem !important;
    --gf-ctrl-checkbox-check-radius: 3px !important;
  }
}

/* Contact page form (page-contact.php): 20px between fields, the email pair
   labelled like the other fields, no required markers, design heights. */
.contact-form .gform-theme {
  --gf-form-gap-y: 1.25rem !important;
  --gf-field-gap-x: var(--s-sm) !important;
  --gf-ctrl-label-color-tertiary: var(--ink) !important;
  --gf-ctrl-label-font-size-tertiary: var(--fs-body-s) !important;
  --gf-ctrl-label-font-weight-tertiary: 700 !important;
  --gf-ctrl-label-line-height-tertiary: 1.43 !important;
  --gf-ctrl-textarea-height: 7.875rem !important;
  --gf-form-footer-margin-y-start: 1.25rem !important;
}

.contact-form .gfield_required,
.contact-form .gform_required_legend {
  display: none;
}

/* GF's field sizes give textareas a min-height (medium = 12rem); the design's
   query box is shorter, set by --gf-ctrl-textarea-height above. The size
   classes are repeated so this beats GF's rule, which can load after ours. */
.contact-form .gform-theme--foundation .gfield textarea:is(.small, .medium, .large) {
  min-block-size: 0;
}

.contact-form .gform_footer .btn {
  width: 100%;
}

@media (min-width: 64em) {
  .contact-form .gform-theme {
    --gf-ctrl-size: 3rem !important;
    --gf-ctrl-textarea-height: 8.25rem !important;
  }

  .contact-form .gform_footer .btn {
    width: auto;
  }
}