/**
 *  @package michael-travels-theme
 *
 *  Gravity Forms, wearing the site's clothes.
 *
 *  Named after the block, so Fuse loads it wherever a form is placed and
 *  nowhere else. A form put in by shortcode instead would want a
 *  shortcode_gravityform.css beside this one.
 *
 *  Gravity Forms 2.7's framework theme is built to be themed through its own
 *  custom properties, and that is what this does. Nothing here overrides one
 *  of its rules, so nothing here has to win a fight with the selectors it
 *  writes -- which run to two thousand characters and are not worth
 *  out-specifying. Its own values are declared on .gform-theme--framework, so
 *  one more class on the same element is enough to be heard.
 *
 *  Every value comes from a token that is already deciding the same thing
 *  elsewhere on the site. Retune a button in default.css and the form's button
 *  follows.
 */

/*  ============================================================================
    The form
    ============================================================================  */

.gform_wrapper.gform-theme--framework {

  /**
   *  The type.
   *
   *  Gravity Forms declares --gf-font-family-base as `initial`, which for a
   *  custom property is the guaranteed-invalid value: every font-family it
   *  writes then falls back to inherited, and the fields already came out in
   *  the site's face. Named here all the same, so that a future release
   *  putting a real stack in that variable cannot quietly change the form.
   *
   *  Fields, labels, descriptions and buttons each read a variable of their
   *  own, and all four chain up to this one.
   */
  --gf-font-family-base: var(--mt-font-body);

  /**
   *  The accent. Gravity Forms tints far more than the button with it --
   *  focus rings, checkboxes, links inside the form -- and all of it was
   *  arriving in its own blue.
   *
   *  These two carry !important, and they are the only two here that do.
   *  Gravity Forms prints a style block of its own for each form, from that
   *  form's style settings, at
   *  `#gform_wrapper_1[data-form-index="0"].gform-theme`. An ID cannot be
   *  outranked by any selector a theme could reasonably write, and writing
   *  one form's ID into the theme would style that form and no other.
   */
  --gf-color-primary: var(--mt-accent) !important;
  --gf-color-primary-darker: var(--mt-accent-deep) !important;

}




/*  ============================================================================
    The submit button, and only the submit button
    ============================================================================  */

/**
 *  Set on the footer rather than on the form.
 *
 *  Two reasons, and the first one drew blood. --gf-ctrl-btn-* is read by every
 *  button Gravity Forms draws, not only the one that submits: the country
 *  selector on a phone field is one, the browse button on a file field is
 *  another. Declared on the wrapper, the site's button padding reached all of
 *  them, and the country selector stood 48px tall beside a 38px field. Gravity
 *  Forms sizes those to line up with the controls they belong to, and they are
 *  better left alone.
 *
 *  Second, a declaration on an element beats a value inherited into it,
 *  whatever the two selectors weigh. Gravity Forms' per-form style block sets
 *  three of these on the wrapper; the footer is a descendant of the wrapper,
 *  so these are read there instead -- and none of them needs !important to do
 *  it.
 *
 *  gform_page_footer is the same thing on a multi-page form.
 */
.gform_wrapper.gform-theme--framework .gform_footer,
.gform_wrapper.gform-theme--framework .gform_page_footer {

  /**
   *  --gf-ctrl-btn-size is a fixed block-size, and a button with a set height
   *  and the site's padding is either clipped or padded twice. Handed back to
   *  the padding, which is what shapes a button everywhere else here.
   */
  --gf-ctrl-btn-font-family: var(--mt-font-body);
  --gf-ctrl-btn-font-size: var(--fuse-button-font-size);
  --gf-ctrl-btn-font-weight: var(--fuse-button-font-weight);
  --gf-ctrl-btn-line-height: var(--fuse-button-line-height);
  --gf-ctrl-btn-padding-x: var(--fuse-button-padding-x);
  --gf-ctrl-btn-padding-y: var(--fuse-button-padding-y);
  --gf-ctrl-btn-size: auto;
  --gf-ctrl-btn-radius: var(--fuse-button-border-radius);

  --gf-ctrl-btn-bg-color-primary: var(--fuse-button-colour-background);
  --gf-ctrl-btn-bg-color-hover-primary: var(--fuse-button-colour-background-hover);
  --gf-ctrl-btn-bg-color-focus-primary: var(--fuse-button-colour-background-hover);

  --gf-ctrl-btn-border-width-primary: 1px;
  --gf-ctrl-btn-border-color-primary: var(--fuse-button-colour-border);
  --gf-ctrl-btn-border-color-hover-primary: var(--fuse-button-colour-background-hover);
  --gf-ctrl-btn-border-color-focus-primary: var(--fuse-button-colour-background-hover);

  --gf-ctrl-btn-color-primary: var(--fuse-button-colour-text);

}