/*
 * Einpassung des ALTCHA-Widgets ins Theme.
 *
 * Das Custom Element wird ohne Shadow DOM registriert — seine Klassen liegen
 * also im normalen Dokument und sind sowohl von Theme-Styles erreichbar als
 * auch von hier aus korrigierbar. Gesteuert wird über die Variablen, die die
 * Bibliothek selbst vorsieht; nur wo es die nicht gibt, greifen eigene Regeln.
 *
 * Farben und Abstände kommen aus den Theme-Presets. Der Fallback hinter dem
 * Komma hält das Widget auch dann benutzbar, wenn das Plugin ohne dieses Theme
 * läuft — deshalb dort currentColor statt eines festen Wertes.
 */

.ec-altcha {
	/* Auf 30 klebt der Absendeknopf am Widget — die übrigen Felder des Formulars
	   stehen weiter auseinander. */
	margin-block-end: var(--wp--preset--spacing--40, 1.5rem);
	/* Der Hook sitzt in .wp-block-button, das die Ausrichtung des Absende-
	   knopfes erbt. Das Widget ist ein Bedienelement und bleibt linksbündig. */
	text-align: start;
}

.ec-altcha altcha-widget {
	display: block;

	--altcha-border-radius: var(--wp--custom--radius--field, 0.25rem);
	--altcha-color-base: var(--wp--preset--color--base, transparent);
	--altcha-color-border: var(--wp--custom--color--border, currentColor);
	--altcha-color-border-focus: var(--wp--preset--color--accent, currentColor);
	--altcha-color-text: var(--wp--custom--color--text, currentColor);
	--altcha-color-error-text: var(--wp--custom--color--error, currentColor);
	--altcha-color-active: var(--wp--preset--color--accent, currentColor);
	--altcha-max-width: 20rem;
}

/* Die Bibliothek setzt die Schriftgröße nicht — ohne das erbt das Widget die
   des Formulars, die für ein Bedienelement dieser Größe zu groß sein kann. */
.ec-altcha .altcha-main {
	font-size: var(--wp--preset--font-size--sm, inherit);
}

.ec-altcha .altcha-label {
	line-height: 1.3;
}

/*
 * Die Bibliothek nutzt eine native Checkbox. Ohne das füllt der Browser sie im
 * bestätigten Zustand in seinem eigenen Blau — im Formular daneben sind
 * angehakte Kästchen türkis (--srfm-color-input-selected im Theme).
 * `accent-color` färbt das native Element, ohne es nachbauen zu müssen.
 */
.ec-altcha .altcha-checkbox input {
	accent-color: var(--wp--preset--color--accent, currentColor);
}

/*
 * Schild rechts in der Zeile.
 *
 * Das Markup erzeugt die Bibliothek, dort lässt sich nichts einhängen — also
 * ein Pseudo-Element. `.altcha-main` ist ein Flexbox-Container und die
 * Beschriftung darin hat `flex-grow: 1`; das `::after` wird damit von selbst
 * ans rechte Ende gedrückt, ohne Positionierung.
 *
 * Als `mask-image` und nicht als eingefärbtes Hintergrundbild, damit die Farbe
 * aus einem Preset kommen kann. Ein SVG mit fest eingebautem `fill` hätte einen
 * Hex-Wert im CSS, und Farbwerte kommen im Projekt ausschließlich aus Presets.
 * So steht im Bild nur die Form, die Farbe steht daneben und ist austauschbar.
 *
 * Das Schild ersetzt zugleich das ausgeblendete ALTCHA-Logo, das sonst an
 * dieser Stelle säße (hidelogo/hidefooter am Element).
 */
.ec-altcha .altcha-main::after {
	content: "";
	flex: none;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	background-color: var(--wp--preset--color--accent, currentColor);
	-webkit-mask-image: var(--ec-altcha-icon);
	mask-image: var(--ec-altcha-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.ec-altcha {
	/*
	 * Schild mit ausgespartem Haken. Einfache Anführungszeichen im SVG, weil die
	 * url() doppelte trägt; spitze Klammern kodiert, sonst bricht der data-URI.
	 */
	--ec-altcha-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5 3.5 4.8v6.4c0 5.2 3.6 9.9 8.5 11.3 4.9-1.4 8.5-6.1 8.5-11.3V4.8L12 1.5Zm4.4 7.3-1.5-1.4-4 4.4-1.8-1.7-1.4 1.5 3.3 3.1 5.4-5.9Z'/%3E%3C/svg%3E");
}