/* The two draft forms: /contact-us/ and /jobapp/ (live: WPForms "modern" markup).
   Sizes follow the live WPForms settings (labels 16px, inputs 43px tall, sublabels
   14px, button 17px) but are written as max(px, em) so the large text toggle grows them.
   Colours that failed contrast on live are darkened: field borders (live 25% black)
   use the site input border token. Loaded by both form pages only; their checking
   and the draft notice come from site.js (any form with data-notice). */

.wpf {
  --wpf-label: rgba(0, 0, 0, .85);
  --wpf-text: #333;
  --wpf-sub: #595959;        /* live rgba(0,0,0,.55), darkened a little */
  --wpf-border: var(--c-input-border);
  --wpf-error: #d63637;      /* live error and required colour, 4.7:1 on white */
  --wpf-button: #066aab;     /* live button colour */
  --wpf-button-hover: #05578c;
  font-size: max(16px, .8em);
  line-height: 1.2;
}

.wpf__fields { margin: 0; }
.wpf-field {
  margin: 0;
  padding: 15px 0;
  border: 0;
  min-width: 0;
}
/* fieldsets: no browser border, legend behaves like a label. The legend sits
   above the fieldset padding, so the top space is a margin here. */
fieldset.wpf-field { margin-top: 15px; padding: 0 0 15px; }
.wpf-label {
  display: block;
  float: none;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  color: var(--wpf-label);
  font-size: 1em;
  font-weight: 700;
  line-height: 1.2;
}
.wpf-req {
  margin-left: 4px;
  color: var(--wpf-error);
  font-weight: 400;
}

/* Text inputs and text areas */
.wpf .wpf-input {
  display: block;
  width: 100%;
  min-height: max(44px, 2.6875em); /* never under the 44px tap floor */
  margin: 0;
  padding: .5em .875em;           /* live: 14px sides */
  border: 1px solid var(--wpf-border);
  border-radius: 3px;
  background: #fff;
  color: var(--wpf-text);
  font-family: inherit;
  font-size: 1em;
  line-height: 1.2;
  box-shadow: none;
}
.wpf .wpf-input:focus {
  border-color: var(--wpf-button);
  background: #fff;
  color: var(--wpf-text);
  box-shadow: 0 0 0 1px var(--wpf-button);
}
.wpf textarea.wpf-input {
  height: 7.5em;                  /* live medium text area: 120px */
  min-height: 4.5em;
  resize: vertical;
}
/* live field sizes: small 25%, medium 60%, large 100% */
.wpf .wpf-small { max-width: 25%; }
.wpf .wpf-medium { max-width: 60%; }
.wpf textarea.wpf-medium { max-width: 100%; }

/* First and last name side by side */
.wpf-row {
  display: flex;
  gap: 20px;
}
.wpf-row--medium { max-width: 60%; }
.wpf-half { flex: 1 1 0; min-width: 0; }
.wpf-sublabel {
  display: block;
  margin: 5px 0 0;
  color: var(--wpf-sub);
  font-size: .875em;              /* 14px */
  font-weight: 400;
  line-height: 1.2;
}

/* Help text under a field */
.wpf-desc {
  margin: 5px 0 0;
  color: var(--wpf-sub);
  font-size: .875em;
  line-height: 1.25;
}

/* Yes / No choices in a row (live "inline" list) */
.wpf-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wpf-choices li {
  display: flex;
  align-items: center;
  margin: 0;
}
.wpf-choices input {
  flex: none;
  font-size: inherit;             /* inputs do not inherit the font size on their own */
  width: 1.125em;                 /* live: 18px circles and boxes */
  height: 1.125em;
  margin: 0 10px 0 0;
  accent-color: var(--wpf-button);
  cursor: pointer;
}
.wpf-choices label {
  display: inline-block;
  margin: 0;
  padding: 2px 0;
  color: var(--wpf-text);
  font-size: 1em;
  font-weight: 400;
  line-height: 1.2;
  cursor: pointer;
}

/* Errors (shown by the draft form code in site.js on submit; the words are the live WPForms ones) */
.wpf .wpf-input[aria-invalid="true"] { border-color: var(--wpf-error); }
.wpf .wpf-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px var(--wpf-error); }
.wpf-error {
  margin: 5px 0 0;
  color: var(--wpf-error);
  font-size: .875em;
  font-weight: 400;
  line-height: 1.25;
}

/* Submit */
.wpf-submit { padding: 10px 0 0; }
.wpf .wpf-button {
  display: inline-block;
  min-height: max(44px, 2.4em);   /* never under the 44px tap floor */
  margin: 0;
  padding: .4em .9em;
  border: 0;
  border-radius: 3px;
  background: var(--wpf-button);
  color: #fff;
  font-family: inherit;
  font-size: 1.0625em;            /* 17px */
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}
.wpf .wpf-button:hover { background: var(--wpf-button-hover); }

/* Draft notice (BRIEF rule 5) */
.wpf-notice {
  margin: 20px 0 0;
  padding: 14px 18px;
  border-left: 4px solid var(--wpf-button);
  background: #eef5fa;
  color: var(--c-text);
  font-size: 1em;
  line-height: 1.45;
}
.wpf-notice[hidden] { display: none; }
/* The email link inside the notice: an invisible area round it taps as at least 44px tall
   (America's floor), as the footer links do. Nothing moves, the focus ring hugs the words,
   and it is the notice's only link. */
.wpf-notice a { position: relative; display: inline-block; }
.wpf-notice a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
.wpf-notice:focus { outline: 3px solid var(--c-focus); outline-offset: 2px; }

@media (max-width: 767px) {
  .wpf .wpf-small,
  .wpf .wpf-medium,
  .wpf-row--medium { max-width: 100%; }
}
@media (max-width: 479px) {
  .wpf-row { gap: 12px; }
}

/* High contrast mode: keep the error and required marks visible as text */
html.a11y-contrast .wpf-error,
html.a11y-contrast .wpf-req { color: #ff0 !important; }
html.a11y-contrast .wpf-notice { border: 2px solid #fff !important; }
html.a11y-contrast .wpf .wpf-button { border: 2px solid #fff !important; }

/* Launch: until the forms send for real, each page offers email and a tap to call */
.contact-direct { margin: 0 0 1em; font-size: 1.15em; }