/* Gravity Forms 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.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.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(--ink-muted) !important; /* dark grey edge, 5.8:1 on white */
  --gf-ctrl-border-color-hover: var(--ink) !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.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;
  }
}