/**
 * 20-components.css — shared components (Part 2, Global): buttons (Task 11), form controls incl. WPForms (Task 12),
 * tap-target helpers. Page-specific fixes go in 40-pages.css (Section 2), not here.
 */

/* Tap-target helper: an element with this class gets at least a 44×44 hit area. */
.ric-tap {
	min-width: var(--ric-tap-min);
	min-height: var(--ric-tap-min);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ==== Buttons (G-05, G-06, G-07) ====
 * Elementor prints each document's *default* button colours as `.elementor-widget-button .elementor-button`
 * (accent #FFB400 with white text: 1.78:1). This file loads after those documents' CSS, so the same selectors give
 * default buttons the site's primary style; buttons with their own colours (`.elementor-<doc> .elementor-element-<id> …`,
 * more specific) keep them. */
.elementor-widget-button .elementor-button,
.elementor-widget-form .elementor-button[type="submit"] {
	background-color: var(--ric-color-secondary);
	color: var(--ric-color-on-primary);
	border-radius: var(--ric-radius-sm);
	text-transform: none;
}
.elementor-widget-button .elementor-button:is(:hover, :focus-visible),
.elementor-widget-form .elementor-button[type="submit"]:is(:hover, :focus-visible) {
	background-color: var(--ric-color-primary);
	color: var(--ric-color-on-primary);
}

/* A hover cue every button gets, whatever its own colours (G-07). The Call to Action button shows it on keyboard focus
   too (G-36), with a selector that outranks the typography Elementor prints for each such widget
   (`.elementor-<doc> .elementor-element.elementor-element-<id> .elementor-cta__button`, (0,4,0): the kit's
   text-decoration, none), which had also hidden the hover cue. */
.elementor-button:hover .elementor-button-text,
.elementor .elementor-widget-call-to-action.elementor-element .elementor-cta__button:is(:hover, :focus-visible) {
	text-decoration-line: underline;
	text-underline-offset: 3px;
}

/* WPForms submit (G-06): the site's primary button, through WPForms' own variables (its hover darkens it 20%). */
.wpforms-container.wpforms-render-modern {
	--wpforms-button-background-color: var(--ric-color-secondary);
	--wpforms-button-border-color: var(--ric-color-secondary);
	--wpforms-button-text-color: var(--ric-color-on-primary);
	--wpforms-button-border-radius: var(--ric-radius-sm);
	--wpforms-button-size-font-size: 16px;
}

/* ==== Form controls (G-18) ====
 * WPForms (modern markup) is styled through its own variables, set on the form container so they beat the :root
 * defaults WPForms prints in the footer. Fonts come from the body (Figtree, 10-base.css). */
.wpforms-container.wpforms-render-modern {
	--wpforms-field-border-color: var(--ric-color-border);
	--wpforms-field-border-color-spare: var(--ric-color-border);
	--wpforms-field-border-radius: var(--ric-radius-sm);
	--wpforms-field-text-color: var(--ric-color-text);
	--wpforms-field-size-font-size: 16px;
	--wpforms-field-size-input-height: 44px;
	--wpforms-label-color: var(--ric-color-text);
	--wpforms-label-size-font-size: 16px;
	--wpforms-button-size-height: 44px;
}
/* Elementor form widget (Join page): text fields at least one tap target tall. */
.elementor-form .elementor-field-group .elementor-field-textual:not(textarea) {
	min-height: var(--ric-tap-min);
}

/* Unified form look (D-1-3 = A): full-width fields, 48px controls, medium-weight labels. */
.wpforms-container.wpforms-render-modern {
	--wpforms-field-size-input-height: 48px;
	--wpforms-button-size-height: 48px;
}
.wpforms-container .wpforms-field .wpforms-field-medium {
	max-width: 100%;
}
/* (0,3,0): WPForms' own `.wpforms-container .wpforms-field-label` (700) has (0,2,0) and loads after this file. */
.wpforms-container .wpforms-field .wpforms-field-label {
	font-weight: 500;
}

/* Invalid fields after a failed submit (G-38). WPForms' `div.wpforms-container-full .wpforms-form .wpforms-field
   input.wpforms-error:focus` (0,5,2) and its `outline: none` load after this file and left a focused invalid field
   looking like an unfocused one (a 1px red shadow). Give it the site ring (10-base.css, G-03: #1B3B1A, 12.45:1 on the
   white page) outside its red error border, which stays; `body` lifts the selector to (0,5,3). */
body div.wpforms-container-full .wpforms-form .wpforms-field :is(input, textarea, select):is(.wpforms-error, .user-invalid):focus-visible {
	outline: var(--ric-focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--ric-color-bg), 0 0 0 5px var(--ric-color-focus);
}