/**
 * Hermas - the accessibility faults that live in CSS.
 *
 * Measured with axe-core 4.10 on the live home page, not guessed at. Everything
 * here is a colour or a size, so it belongs in a stylesheet rather than in the
 * script beside it.
 */

/* ---------------------------------------------------------------------------
 * Form fields
 *
 *   #7a7a7a on #ffffff is 4.29:1 and AA wants 4.5 for text this size. Three
 *   fields on the contact form. #6b6b6b is 5.4:1 and is a shade most people
 *   would not notice had moved.
 * ------------------------------------------------------------------------ */
.elementor-widget-form .elementor-field-group .elementor-field.elementor-field-textual,
.elementor-widget-form .elementor-field-group .elementor-field.elementor-field-textual::placeholder {
	color: #6b6b6b;
}

/*
 * The plain .elementor-field-textual selector was written first and lost:
 * Elementor's own inline rule is .elementor-widget-form .elementor-field-group
 * .elementor-field, which is three classes to one. The extra class above takes
 * it to four so it wins wherever the stylesheets happen to land in the cascade.
 *
 * The colour it was losing to is var(--e-global-color-text), #7a7a7a. That
 * variable is used for body text all over the site and is deliberately NOT
 * changed here - at body sizes 4.29:1 is a pass, and only these small fields
 * fall short.
 */

/* ---------------------------------------------------------------------------
 * The mega menu's dropdown toggles
 *
 *   Measured at 12x18 css pixels. WCAG 2.2 asks for 24x24, and a 12px wide
 *   target is genuinely hard to hit with a thumb. Only the hit area grows -
 *   the chevron inside keeps its size, so nothing looks different.
 * ------------------------------------------------------------------------ */
button.e-n-menu-dropdown-icon {
	min-width: 24px;
	min-height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}


/* ---------------------------------------------------------------------------
 * Buttons
 *
 *   Measured with axe on the live page:
 *
 *     #ffffff on #0099ff   2.99:1   28 buttons   "Call"
 *     #ffffff on #cea043   2.40:1   12 buttons   "Explore the Guide"
 *     #ffffff on nothing   1.03:1    5 buttons   "Explore Luxury Cars"
 *
 *   AA wants 4.5. The owner chose to keep the colours exactly as they are and
 *   darken the label instead, which is the option that leaves the brand alone:
 *
 *     #10161c on #0099ff   6.7:1
 *     #10161c on #cea043   8.4:1
 *
 *   Not pure black - a very dark blue-grey reads as deliberate rather than as
 *   a default, and buys the same margin.
 *
 *   The classes below are put on by hermas-a11y-extra.js, which reads each
 *   button's computed background. A selector cannot do it: Elementor sets these
 *   colours in its own per-widget stylesheet, not in a style attribute, so
 *   matching on [style*="#0099ff"] finds nothing - which is how the first
 *   version of this file changed nothing at all.
 * ------------------------------------------------------------------------ */
.hermas-btn-dark-label .elementor-button-text,
.hermas-btn-dark-label .elementor-button-icon,
.hermas-btn-dark-label > i,
.hermas-btn-dark-label > svg {
	color: #10161c;
	fill: #10161c;
}

/* ---------------------------------------------------------------------------
 * The five buttons with white text and no background at all
 *
 *   "Explore Luxury Cars", "Submit Now", "Read our Blogs". White on #fdfbf6,
 *   #f1f1f1 and #eeeeee - between 1.03:1 and 1.16:1, which is not a contrast
 *   shortfall so much as text nobody can read. Every other call to action on
 *   the page is filled gold, so the fill is what went missing.
 *
 *   Filled gold with the dark label, same as above.
 * ------------------------------------------------------------------------ */
.hermas-cta-restored {
	background-color: #cea043 !important;
}

.hermas-cta-restored .elementor-button-text,
.hermas-cta-restored .elementor-button-icon {
	color: #10161c !important;
}