/*
 * Text fields across the site (Daniel, 2026-10-19): a focused field shows a step in its own grey, never a coloured
 * ring ("the focus blue looks like trash on the field ... darker or lighter grey depending on what is around").
 * A translucent mid-grey goes over the field's own background, so the same rule lightens a dark field (#111 to about
 * #272727) and darkens a light one (#F8F8F8 to about #E0E0E0) wherever it sits. It replaces every focus ring on
 * fields (the theme's, the contact form's, the calculator's); checkboxes, radios and buttons keep their own focus.
 * The transparent outline still draws in Windows' forced colours.
 */
input:not([type]):focus,
input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="search"], [type="password"], [type="date"], [type="time"]):focus,
textarea:focus {
  outline: 2px solid transparent !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  background-image: linear-gradient(rgba(128, 128, 128, 0.18), rgba(128, 128, 128, 0.18)) !important;
}

/* a select's own background image is its arrow: the grey goes on top of it instead */
select:focus {
  outline: 2px solid transparent !important;
  outline-offset: 0 !important;
  box-shadow: inset 0 0 0 100vmax rgba(128, 128, 128, 0.18) !important;
}

input[readonly]:focus,
textarea[readonly]:focus {
  background-image: none !important;
}

/*
 * Errors on the site's forms (Daniel, 2026-10-19), as in the contact form: the field keeps its text colour, its border
 * turns the error colour and the message sits under it (15/24). Orange #ED7B28 on dark forms; on light ones a deeper
 * #B25512, which keeps 5:1 on white and #F8F8F8 (#ED7B28 is 2.8:1 there). The theme hid every message and turned the
 * field's text orange-red (red in the job form).
 */
.wpcf7 .wpcf7-not-valid-tip {
  display: block !important;
  margin-top: 8px;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: #B25512;
}

.wpcf7 input[aria-invalid="true"],
.wpcf7 textarea[aria-invalid="true"] {
  color: inherit !important;
  border-color: #B25512 !important;
}

.popup--apply .wpcf7 input[aria-invalid="true"],
.popup--apply .wpcf7 textarea[aria-invalid="true"] {
  color: #000 !important;
}

.popup__form.dark .wpcf7 .wpcf7-not-valid-tip {
  color: #ED7B28;
}

.popup__form.dark .wpcf7 input[aria-invalid="true"],
.popup__form.dark .wpcf7 textarea[aria-invalid="true"] {
  color: #fff !important;
  border-color: #ED7B28 !important;
}

/* the job form: a message sits right under its field, and the field's 20px below moves under the message */
.popup--apply .wpcf7-form-control-wrap:has(> .wpcf7-not-valid-tip) > :is(input, textarea) {
  margin-bottom: 0;
}

.popup--apply .wpcf7-form-control-wrap:has(> :is(input, textarea)) > .wpcf7-not-valid-tip {
  margin-bottom: 20px;
}

.popup--apply .wpcf7-form-control-wrap[data-name="your-email"] > .wpcf7-not-valid-tip {
  margin-bottom: 0;
}