/*
 * Modern Shop Connector - Kontaktformular (Frontend).
 *
 * Struktur kommt vom Plugin, Optik vom Theme. Konkret: Raster, Abstände und Zustände (Fehler,
 * Fokus) stehen hier; Farben, Schriften und die Form der Schaltfläche werden geerbt.
 *
 * Jede Stellschraube ist eine CSS-Variable an EINER Stelle, und jede Farbe folgt der verbindlichen
 * Fallback-Kette theme-spezifisch -> generisch WordPress/WooCommerce -> neutraler Endwert
 * (docs/PLUGIN-STYLING-PRINCIPLES.md). Deshalb sieht das Formular unter «Modern Natura» aus wie
 * dessen eigene Formulare, unter Twenty Twenty-Five wie ein Blocktheme-Formular - ohne dass hier
 * eine einzige Themebedingung stünde.
 *
 * Kein `!important` und kein hartcodiertes Fremd-Blau. Die einzige Ausnahme steht ganz unten und
 * ist begründet.
 */

.msc-contact {
	--msc-ct-text: var(--mn-text, var(--wp--preset--color--contrast, #2f3437));
	--msc-ct-heading: var(--mn-text-dark, var(--wp--preset--color--contrast, #1f2426));
	--msc-ct-muted: var(--mn-muted, var(--wp--preset--color--contrast-2, #6b6b6b));
	--msc-ct-border: var(--mn-btn-border, var(--wp--preset--color--tertiary, #d5d2c8));
	--msc-ct-border-strong: var(--mn-text, var(--wp--preset--color--contrast, #595959));
	--msc-ct-surface: var(--mn-white, var(--wp--preset--color--base, #ffffff));
	--msc-ct-surface-soft: var(--mn-box, var(--wp--preset--color--base-2, #fbfbfb));
	--msc-ct-accent: var(--mn-link, var(--wc-primary, var(--wp--preset--color--primary, #4a7c59)));
	--msc-ct-error: var(--mn-sale, var(--wp--preset--color--vivid-red, #b32d2e));
	--msc-ct-radius: var(--mn-radius-s, 6px);
	--msc-ct-radius-box: var(--mn-radius-box, 15px);
	--msc-ct-gap: 18px;
	--msc-ct-field-padding: 12px 14px;

	box-sizing: border-box;
	color: var(--msc-ct-text);
}

.msc-contact *,
.msc-contact *::before,
.msc-contact *::after {
	box-sizing: inherit;
}

.msc-contact__form {
	display: grid;
	gap: var(--msc-ct-gap);
	margin: 0;
}

.msc-contact__row {
	display: grid;
	gap: 6px;
	margin: 0;
}

.msc-contact__label {
	display: block;
	margin: 0;
	font-weight: 600;
	line-height: 1.35;
	color: var(--msc-ct-heading);
}

.msc-contact__required {
	color: var(--msc-ct-error);
}

.msc-contact__hint {
	margin: 0;
	font-size: 0.875em;
	line-height: 1.45;
	color: var(--msc-ct-muted);
}

/*
 * Die Eingabefelder erben Schrift und Zeilenhöhe ausdrücklich vom umgebenden Text (`font: inherit`).
 * Ohne diese Zeile setzen Browser ihre eigene, kleinere Systemschrift ein - und das Formular fällt
 * in jedem Theme als Fremdkörper auf.
 */
.msc-contact__control {
	width: 100%;
	max-width: 100%;
	padding: var(--msc-ct-field-padding);
	border: 1px solid var(--msc-ct-border);
	border-radius: var(--msc-ct-radius);
	background: var(--msc-ct-surface);
	color: inherit;
	font: inherit;
	line-height: 1.45;
}

.msc-contact__control:focus {
	border-color: var(--msc-ct-border-strong);
	outline: none;
}

/*
 * Sichtbarer Fokus für die Tastaturbedienung - zusätzlich zur Rahmenfarbe, denn eine reine
 * Farbänderung ist für Menschen mit Farbsehschwäche kein Signal.
 */
.msc-contact__control:focus-visible {
	outline: 2px solid var(--msc-ct-accent);
	outline-offset: 2px;
}

.msc-contact__control--area {
	min-height: 160px;
	resize: vertical;
}

.msc-contact__control--short {
	max-width: 12em;
}

.msc-contact__row.is-invalid .msc-contact__control {
	border-color: var(--msc-ct-error);
}

.msc-contact__error {
	margin: 0;
	font-size: 0.875em;
	line-height: 1.45;
	color: var(--msc-ct-error);
}

/* Die Rechenaufgabe steht optisch etwas abgesetzt - sie ist keine gewöhnliche Angabe zur Person. */
.msc-contact__row--challenge {
	padding: 14px 16px;
	border: 1px solid var(--msc-ct-border);
	border-radius: var(--msc-ct-radius);
	background: var(--msc-ct-surface-soft);
}

.msc-contact__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	line-height: 1.5;
	cursor: pointer;
}

/*
 * `margin-top` statt `align-items: center`: Bei zweizeiligem Text stünde das Kästchen sonst in der
 * Mitte des Absatzes statt neben der ersten Zeile. Der Wert richtet sich an der Zeilenhöhe aus.
 */
.msc-contact__consent input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 0.25em 0 0;
	width: 1.1em;
	height: 1.1em;
}

.msc-contact__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin: 0;
}

/*
 * Struktur normal, Optik über `:where()` mit Spezifität 0: Bringt das Theme einen eigenen
 * Button-Stil mit, gewinnt dieser ohne jeden Kunstgriff. Bringt es keinen, greifen diese Werte.
 */
.msc-contact__submit {
	padding: 13px 28px;
	border-radius: var(--msc-ct-radius);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

:where(.msc-contact__submit) {
	border: 1px solid transparent;
	background: var(--msc-ct-accent);
	color: #ffffff;
}

.msc-contact__submit[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.msc-contact__required-note {
	margin: 0;
	font-size: 0.875em;
	color: var(--msc-ct-muted);
}

/* Rückmeldung nach dem Absenden. Leer ist der Bereich unsichtbar und nimmt keinen Platz ein. */
.msc-contact__status {
	margin: 0;
}

.msc-contact__status:empty {
	display: none;
}

.msc-contact__status p {
	margin: 0;
	padding: 14px 16px;
	border-left: 3px solid var(--msc-ct-border);
	border-radius: var(--msc-ct-radius);
	background: var(--msc-ct-surface-soft);
	line-height: 1.5;
}

.msc-contact__status.is-success p {
	border-left-color: var(--msc-ct-accent);
}

.msc-contact__status.is-error p {
	border-left-color: var(--msc-ct-error);
}

.msc-contact__status.is-busy p {
	opacity: 0.7;
}

.msc-contact__again {
	margin: 16px 0 0;
}

/*
 * Ab mittlerer Breite stehen Beschriftung und Feld nebeneinander - so wie im alten Shop, und so
 * wie man ein Formular auf einer breiten Seite erwartet.
 *
 * Bewusst eine CONTAINER-Abfrage und keine Viewport-Abfrage: Das Formular kann in einer schmalen
 * Spalte stehen (Seitenleiste, zweispaltige Inhaltsseite). Dort wäre die Bildschirmbreite das
 * falsche Mass - zwei Spalten in einer 320px breiten Spalte sind auf einem 1400px-Bildschirm
 * genauso unbrauchbar wie auf einem Telefon.
 *
 * Für Browser ohne Container-Abfragen bleibt es beim einspaltigen Aufbau. Das ist kein Mangel,
 * sondern die Grundform - sie funktioniert überall.
 */
.msc-contact {
	container-type: inline-size;
	container-name: msc-contact;
}

@container msc-contact (min-width: 640px) {
	.msc-contact__row {
		grid-template-columns: 13rem minmax(0, 1fr);
		align-items: start;
		gap: 6px 24px;
	}

	.msc-contact__label {
		grid-column: 1;
		grid-row: 1;
		padding-top: 12px;
	}

	.msc-contact__hint {
		grid-column: 2;
		grid-row: 2;
	}

	.msc-contact__control {
		grid-column: 2;
		grid-row: 1;
	}

	.msc-contact__error {
		grid-column: 2;
	}

	/* Zustimmung und Rechenaufgabe behalten ihren eigenen Aufbau. */
	.msc-contact__row--consent,
	.msc-contact__row--challenge {
		display: block;
	}

	.msc-contact__actions {
		padding-left: calc(13rem + 24px);
	}
}

/*
 * Die einzige Stelle mit `!important`, und sie neutralisiert eine fremde Regel statt Optik zu
 * erzwingen: Das Theme «Modern Natura» setzt in base.css `:focus-visible` mit `border-radius: 2px`
 * für JEDES Element. Auf dem runden Kontrollkästchen und der abgerundeten Schaltfläche entsteht
 * daraus ein eckiger Rahmen. Das Theme wird dafür nicht angefasst (es ist dort richtig) - das
 * Plugin wehrt sich auf seinen eigenen Elementen, eng begrenzt.
 */
.msc-contact .msc-contact__submit:focus-visible,
.msc-contact .msc-contact__consent input[type="checkbox"]:focus-visible {
	border-radius: var(--msc-ct-radius) !important;
	outline-offset: 3px;
}