/**
 * Lemorau contact form - the select's typeface (WP-24)
 *
 * The Product and Size dropdowns came up in a different face from the rest of
 * the form, and the list that drops out of them in a different one again.
 *
 * Two separate causes, both of them upstream. Elementor's own frontend
 * stylesheet carries
 *
 *     .elementor-field-group .elementor-select-wrapper select { font-family: inherit }
 *
 * which is one class more specific than the kit's own `select` rule, so the
 * family the site sets for form fields never reaches a select: it inherits
 * whatever surrounds it instead. And nothing anywhere gives a rule to `option`,
 * so the list the browser draws from those options falls back to the interface
 * font of the operating system.
 *
 * Hence naming the family here rather than inheriting it: inheriting is exactly
 * what is broken. The trade-off is that changing the Form Input style in Site
 * Settings no longer reaches these three selectors, so this file has to be
 * changed with it. The alternative, pointing at Elementor's global custom
 * property, pins an id that belongs to one installation.
 *
 * The selector matches Elementor's own so it can win, and the stylesheet is
 * enqueued after theirs for the tie to fall our way.
 *
 * Chrome, Edge and Firefox honour a typeface on an option. Safari on macOS
 * draws the list itself and ignores it, and there is no CSS answer for that one
 * short of replacing the select with a component of our own.
 */
.elementor-field-group .elementor-select-wrapper select,
.elementor-field-group .elementor-select-wrapper select option,
.elementor-field-group .elementor-select-wrapper select optgroup {
	font-family: "Lato", sans-serif;
}

/**
 * A select follows its form's Field typography, not Site Settings'.
 *
 * Elementor puts `elementor-field` on the div wrapping a select rather than on
 * the select, and gives the select `font-size: inherit` so it takes the
 * wrapper's. Site Settings then ships a select-only selector at three classes
 * and an element, which beats that `inherit` and pinned selects to the global
 * field size while inputs kept the form's. Four classes and an element hand
 * the inheritance back, so no size is named here to fall out of step.
 */
.elementor-widget-form .elementor-field-group .elementor-select-wrapper.elementor-field select {
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-transform: inherit;
}

/**
 * The placeholder and the caret follow the field they belong to.
 *
 * Site Settings gives both a colour of their own, the near-black it also gives
 * the field's text, in one rule that ends
 *
 *     color: ...accent_6; caret-color: ...accent_6;
 *
 * A form that then sets its own text colour moves the text and leaves those two
 * behind. The newsletter field in the footer is where it shows: it reads white
 * on black, and both the placeholder and the blinking caret stay black on
 * black. The field looks like it takes no input at all, in the four languages.
 *
 * Neither has a colour of its own to defend, so both take the field's, and the
 * opacity is what separates a prompt from something already typed.
 *
 * Site Settings writes the pair twice, once plain and once for `:focus`, and
 * the two land at (0,3,2) and (0,4,2). This stylesheet is enqueued before the
 * kit's, so matching either is not enough: a tie goes to whoever loads last.
 * Hence four classes for the plain state and five for the focused one, and
 * hence the focused rule existing at all. Without it the caret turns black the
 * moment the field is clicked, which reads as the field being dead.
 *
 * On the forms that sit on white the change is from pure black to the same
 * black at 60%.
 */
.elementor-widget-form .elementor-field-group .elementor-field.elementor-field-textual,
.elementor-widget-form .elementor-field-group .elementor-field.elementor-field-textual:focus {
	caret-color: currentColor;
}

.elementor-widget-form .elementor-field-group .elementor-field.elementor-field-textual::placeholder,
.elementor-widget-form .elementor-field-group .elementor-field.elementor-field-textual:focus::placeholder {
	color: currentColor;
	opacity: 0.6;
}

/**
 * The room around the text in a field. Site Settings gives every input,
 * textarea and select `padding: 17px 15px`, which the designer read as too much
 * space around the text.
 *
 * Four classes because the kit reaches an input through
 * `input:not([type="button"]):not([type="submit"])`, and this stylesheet loads
 * before the kit's: matching its weight would lose the tie.
 *
 * The second selector exists because `elementor-field` sits on the div wrapping
 * a select and not on the select itself, so the first one never reached one.
 * A select kept the 17px and came out 8px taller than the input beside it, which
 * is what shows on the Online Customer Support form: Machine is a select and
 * Serial Number is a text field, side by side. With the same padding both land
 * on the 47px `min-height` Elementor gives a medium field.
 */
.elementor-widget-form .elementor-field-group .elementor-field.elementor-field-textual,
.elementor-widget-form .elementor-field-group .elementor-select-wrapper select.elementor-field-textual {
	padding: 12px 15px;
}