/*
 * Adapter: FluentForms
 *
 * GEMESSEN am 2026-08-26 gegen FluentForms 6.2.13, WordPress 6.9,
 * System-Instanz `wp-dev-lab`, Demoformular „Contact Form Demo".
 *
 * ANKERKLASSEN (fuer bin/check-adapters.php): ff-default, ff-el-form-control, ff_btn_style
 *
 * ---------------------------------------------------------------------------
 * WAS DAS PLUGIN AUSLIEFERT
 *
 * Zwei Stylesheets im Frontend:
 *
 *   fluent-forms-public.css        44 KB · 159 Farbwerte · 1 Media Query
 *                                  Struktur und Funktion — bleibt.
 *   fluentform-public-default.css   4 KB ·  17 Farbwerte · 0 Media Queries
 *                                  Die Haut. Beginnt mit `:root{…}`.
 *
 * Die Haut haengt an sechs Variablen, die an 18 Stellen benutzt werden:
 *
 *   --fluentform-primary        #1a7efb
 *   --fluentform-secondary      #606266
 *   --fluentform-danger         #f56c6c
 *   --fluentform-border-color   #dadbdd
 *   --fluentform-border-radius  7px
 *   --fluentform-input-select-height  auto
 *
 * Alle Regeln der Haut sind auf `.ff-default` gequalifiziert — die Klasse
 * sitzt auf dem Wrapper-DIV, nicht auf dem `<form>`.
 *
 * ---------------------------------------------------------------------------
 * ZAEHMUNG: stehen lassen, ueberschreiben
 *
 * Nicht abmelden. Die Haut traegt neben Farbe auch Innenabstaende,
 * Button-Groessen und Rahmen — die muesste man sonst vollstaendig ersetzen und
 * bei jedem Plugin-Update nachziehen. Der Variablenweg erledigt den Grossteil
 * mit sechs Zeilen.
 *
 * Ladereihenfolge geprueft: Die Plugin-Stylesheets stehen VOR den unseren
 * (fluent-form-styles · fluentform-public-default · goblin-base-base ·
 * goblin-base-layout · goblin-adapter-*). Gleiche Spezifitaet genuegt deshalb;
 * `!important` ist nirgends noetig.
 *
 * ---------------------------------------------------------------------------
 * DREI STELLEN, DIE DIE VARIABLEN NICHT ERREICHEN
 *
 * Sie sind der eigentliche Grund, warum es diese Datei gibt — wer nur die
 * sechs Variablen setzt, haelt das Formular fuer angepasst und uebersieht sie.
 *
 *   1. Der Primaerbutton ignoriert `--fluentform-primary` und kodiert #007bff
 *      hart. Ebenso der Sekundaerbutton mit #606266.
 *   2. Die Eingabefelder setzen einen eigenen Systemschriftstapel und heben
 *      damit die Typografie des Themes auf.
 *   3. Der Fokusring wird ENTFERNT — `outline:0` auf `.ff_btn_style:focus`,
 *      `outline:none` auf `.ff-el-form-control:focus`. Das verstoesst gegen
 *      die Barrierefreiheitsregel des Systems („Fokus muss sichtbar sein").
 *
 * ---------------------------------------------------------------------------
 * NICHT GEMESSEN
 *
 * - Fehler- und Validierungszustaende. Sie entstehen erst beim Absenden und
 *   kommen im ausgelieferten HTML nicht vor. **Genau die trifft WP Rockets
 *   „Remove Unused CSS"** — siehe `design/plugins.md`, Pflichteintrag.
 * - FluentForms Pro (Mehrschritt, Datei-Upload, Zahlungen).
 * - Die 44 KB Struktur-CSS im Einzelnen.
 */

/*
 * Die sechs Variablen. Der Grossteil der Arbeit.
 *
 * `--wp--custom--radius--md` kommt aus dem CHILD-Theme, nicht aus diesem hier —
 * gemessen: die System-Instanz gibt es ohne Child-Theme nicht aus. Deshalb mit
 * Rueckfallwert, damit der Adapter auch dort nicht ins Leere greift.
 */
:root {
	--fluentform-primary: var( --wp--preset--color--primary );
	--fluentform-secondary: var( --wp--preset--color--contrast );
	--fluentform-danger: var( --wp--preset--color--negative );
	--fluentform-border-color: var( --wp--preset--color--muted );
	--fluentform-border-radius: var( --wp--custom--radius--md, 4px );
}

/* 1a · Primaerbutton — hartkodiertes #007bff */
.ff-default .ff-btn-primary:not( .ff_btn_no_style ),
.ff-default .ff-btn-primary:not( .ff_btn_no_style ):hover,
.ff-default .ff-btn-primary:not( .ff_btn_no_style ):focus {
	background-color: var( --wp--preset--color--primary );
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

/* 1b · Sekundaerbutton — hartkodiertes #606266 */
.ff-default .ff-btn-secondary:not( .ff_btn_no_style ),
.ff-default .ff-btn-secondary:not( .ff_btn_no_style ):hover,
.ff-default .ff-btn-secondary:not( .ff_btn_no_style ):focus {
	background-color: var( --wp--preset--color--contrast-2 );
	border-color: var( --wp--preset--color--contrast-2 );
	color: var( --wp--preset--color--base );
}

/*
 * 2 · Der Systemschriftstapel in den Eingabefeldern.
 *
 * `inherit` statt eines Token: Die Schriftfamilien stehen erst nach
 * `/design-finden` fest, und ein Feld soll ohnehin die Schrift seiner Umgebung
 * tragen. Damit ist die Regel unabhaengig davon, wie das Projekt sie benennt.
 */
.ff-default .ff-el-form-control {
	font-family: inherit;
}

/*
 * 3 · Den Fokusring zurueckholen.
 *
 * `:focus-visible`, nicht `:focus` — ein Mausklick soll keinen Ring erzeugen,
 * die Tastaturbedienung sehr wohl. Gleiche Spezifitaet wie die Plugin-Regel,
 * und wir laden spaeter.
 */
.ff-default .ff_btn_style:focus-visible,
.ff-default .ff-el-form-control:focus-visible {
	outline: var( --wp--custom--border--accent-width, 3px ) solid var( --wp--preset--color--primary );
	outline-offset: 2px;
}

/*
 * 4 · Tap-Ziele auf das Mindestmass bringen.
 *
 * GEMESSEN am 2026-09-02 an `/messformular/` bei 520 px Fensterbreite: das
 * E-Mail-Feld **42 px**, der Absendeknopf **43 px**. Beide unter dem
 * Mindestmass von 44 px, der Knopf zusaetzlich unter den 48 px, die fuer
 * Knoepfe gelten.
 *
 * Das faellt am Markup nicht auf und im Entwurf auch nicht: Das Formular kommt
 * fertig aus dem Plugin, und dessen Standardhoehen sind knapper als die
 * Vorgabe. Sichtbar wird es nur gemessen.
 *
 * `min-height`, nicht `height` — ein Textfeld mit mehreren Zeilen und ein
 * Knopf mit umbrechender Beschriftung duerfen wachsen.
 */
.ff-default .ff-el-form-control,
.ff-default select,
.ff-default input[type="checkbox"] + label,
.ff-default input[type="radio"] + label {
	min-height: 44px;
}

/* Ein Textfeld ist keine Zeile. Die 44 px waeren hier eine Verkleinerung. */
.ff-default textarea.ff-el-form-control {
	min-height: 88px;
}

.ff-default .ff_btn_style {
	min-height: 48px;
}