/**
 * 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: 13px 22px;
	font-family: var( --wp--preset--font-family--base );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	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--primary-dark );
	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;
}

/*
 * Newsletter-Formulare im Seiteninhalt: Der Button steht in einer
 * zweispaltigen Zeile neben dem E-Mail-Feld und füllt seine Spalte, damit
 * beide bündig abschliessen. Erkannt an der Anordnung (eigener Button in einer
 * Spalte), nicht an der Formular-ID – so greift es für DE (#3) und FR (#7)
 * und in der Gemeindeschutz-Installation. Nur im Inhalt – der Footer bringt
 * eine eigene Anordnung mit (footer.css) und bleibt unberührt.
 */
.entry-content .fluentform .ff-t-cell .ff_submit_btn_wrapper_custom .ff-btn.ff-btn-submit {
	width: 100%;
}

/*
 * Checkboxen und Radios: Browser-Default ist mit 13px kaum erkennbar. Das
 * umgebende Label bleibt Klickziel – die Vergrösserung dient der Sichtbarkeit.
 */
.fluentform input[type="checkbox"],
.fluentform input[type="radio"] {
	accent-color: var( --wp--preset--color--primary );
	height: 1.25rem;
	margin-right: 0.5em;
	vertical-align: -0.3em;
	width: 1.25rem;
}

.fluentform .ff-el-form-check-label {
	line-height: 1.5;
}