/**
 * Theme – Fluent Forms
 *
 * Bringt Fluent Forms an das Projekt-Design an (z.B. Kontaktformular,
 * node 538:6159). Alle Werte als CSS Custom Properties aus theme.json
 * referenziert – eine Quelle der Wahrheit. Ändern sich Tokens in theme.json,
 * zieht das Formular mit.
 *
 * Fluent Forms bringt ein eigenes Stylesheet mit. Um dessen Spezifität ohne
 * !important zu schlagen, werden die Plugin-Klassen unter `.fluentform`
 * verschachtelt geführt.
 *
 * Figma-Mapping der Variablen:
 *   rot-primaer (#bf142e) → primary
 *   weiss (#ffffff)       → background
 *   schwarz (#000000)     → foreground
 *   mittelgrau (#bfbfbf)  → medium
 *   standardradius (4px)  → --wp--custom--border-radius--standard
 */

/* Formular-Titel: Helvetica Neue Black, 30px (Figma 538:6160). */
.fluentform .ff-el-section-title {
	font-family: var( --wp--preset--font-family--base );
	font-size: var( --wp--preset--font-size--large );
	font-weight: 700;
	line-height: 1.067;
	color: var( --wp--preset--color--foreground );
}

/* Labels: Helvetica Neue Regular, 20px, schwarz (Figma 538:6161 ff.). */
.fluentform .ff-el-input--label label {
	font-family: var( --wp--preset--font-family--base );
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 400;
	line-height: 1.2;
	color: var( --wp--preset--color--foreground );
}

/*
 * Eingabefelder, Textareas und Selects: weiss, 1px mittelgrau-Border,
 * 4px Radius, 45px hoch (Figma 538:6166 ff.). min-height statt fixer Höhe,
 * damit Mehrzeiligkeit/Zoom nicht abgeschnitten wird (WCAG 1.4.10 Reflow,
 * 1.4.4 Text Resize).
 */
.fluentform .ff-el-form-control {
	background-color: var( --wp--preset--color--background );
	border: 1px solid var( --wp--preset--color--medium );
	border-radius: var( --wp--custom--border-radius--standard );
	min-height: 45px;
	padding: 10px 13px;
	font-family: var( --wp--preset--font-family--base );
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 400;
	line-height: 1.2;
	color: var( --wp--preset--color--foreground );
}

/* Textarea (Mitteilung): höher, vertikal anpassbar (Figma 168px). */
.fluentform textarea.ff-el-form-control {
	min-height: 168px;
	resize: vertical;
}

/* Placeholder/„Bitte wählen": Helvetica Neue Light, schwarz (Figma 538:6172). */
.fluentform .ff-el-form-control::placeholder {
	font-weight: 300;
	color: var( --wp--preset--color--foreground );
	opacity: 1;
}

/* Sichtbarer Fokus auf Feldern (WCAG 2.4.7). */
.fluentform .ff-el-form-control:focus {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: -1px;
	border-color: var( --wp--preset--color--primary );
}

/* Fehlerhafte Felder: roter Rahmen statt Plugin-Default. */
.fluentform .ff-el-group.ff-el-is-error .ff-el-form-control {
	border-color: var( --wp--preset--color--primary );
}

.fluentform .ff-el-is-error .text-danger,
.fluentform .error.text-danger {
	color: var( --wp--preset--color--primary );
}

/*
 * Submit-Button auf das Standard-Button-Design (Figma 538:6170/6174).
 * Plugin-Klassenkette doppelt geführt, um Plugin-CSS ohne !important zu schlagen.
 */
.fluentform .ff-btn.ff-btn-submit {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--background );
	border: 0;
	border-radius: var( --wp--custom--border-radius--standard );
	padding: 10px 25px;
	font-family: var( --wp--preset--font-family--base );
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.fluentform .ff-btn.ff-btn-submit:hover {
	background-color: var( --wp--preset--color--secondary );
	color: var( --wp--preset--color--background );
}

.fluentform .ff-btn.ff-btn-submit:focus-visible {
	outline: 2px solid var( --wp--preset--color--background );
	outline-offset: -2px;
}