/*
 * Frontend-Styling des Kontaktformulars.
 *
 * Bewusst zurückhaltend: Farben, Typografie, Felder und Eckenradius kommen
 * aus dem aktiven Theme, Ausrichtung und Abstände über die Block-Supports.
 * Jeder Wert liest zuerst das Token des Themes (DIGISTARTER:
 * --wp--custom--color--*, --wp--custom--radius, Abstände s/m/l) und fällt
 * nur ohne dieses Token auf einen eigenen Wert zurück. So sieht das
 * Formular im DIGISTARTER-Theme aus wie dessen eigene Felder -- in jeder
 * Stilvariante, hell wie dunkel -- und bleibt mit jedem anderen Theme
 * benutzbar.
 */

/* ---------- Kasten ---------- */

/* Blockstil "Kasten" (Standard): das Formular auf einer leicht getönten
   Fläche. Die Tönung folgt der Textfarbe, passt also auf jeden Grund. */
.cntctfrm-form {
	padding: var( --wp--preset--spacing--s, 1.5em );
	background: color-mix( in srgb, currentColor 4%, transparent );
	border-radius: var( --wp--custom--radius, 8px );
}

/* Blockstil "Ohne Kasten": das Formular steht direkt im Abschnitt, wie die
   Fragenliste im FAQ-Muster des Themes. Das Muster nutzt diesen Stil. */
.is-style-plain .cntctfrm-form {
	padding: 0;
	background: none;
	border-radius: 0;
}

.cntctfrm-form__heading { margin-top: 0; margin-bottom: 1.3em; }
.cntctfrm-form p { margin: 0 0 0.9em; }
.cntctfrm-form > *:last-child,
.cntctfrm-form form > *:last-child,
.cntctfrm-form .cntctfrm-form-grid > *:last-child { margin-bottom: 0; }

.cntctfrm-form label { display: block; font-weight: 600; margin-bottom: 0.3em; }

/* ---------- Felder ---------- */

/* Breite immer -- ein Feld füllt seine Spalte. */
.cntctfrm-form input[type="text"],
.cntctfrm-form input[type="email"],
.cntctfrm-form input[type="tel"],
.cntctfrm-form select,
.cntctfrm-form textarea {
	width: 100%;
	box-sizing: border-box;
}

/* Aussehen nur als Rückfall, mit denselben Werten wie die Felder des
   DIGISTARTER-Themes: Gewinnt diese Regel (sie kommt im Quelltext oft nach
   dem Theme), sieht das Feld trotzdem genau so aus wie dort. Hover und Fokus
   bleiben ganz beim Theme. */
:where( .cntctfrm-form ) :where( input[type="text"], input[type="email"], input[type="tel"], select, textarea ) {
	padding: calc( 0.667em - 1px ) 1em;
	border: 1px solid var( --wp--custom--color--outline, color-mix( in srgb, currentColor 25%, transparent ) );
	border-radius: var( --wp--custom--radius, 4px );
	background-color: transparent;
	color: var( --wp--custom--color--text, inherit );
	font: inherit;
	line-height: 1.6;
}

.cntctfrm-form input[type="checkbox"] {
	width: 1.1em;
	height: 1.1em;
}

/* ---------- Raster ---------- */

/* Zwei Spalten für die kurzen Felder (Vor-/Nachname, E-Mail/Telefon), volle
   Breite für Nachricht, Auswahl, Einwilligung und Button. Umbruch per
   Container-Abfrage, nicht per Fensterbreite -- so stimmen Editor und
   Frontend überein, und im schmalen Spaltenplatz des Musters stapeln sich
   die Felder auch auf großen Bildschirmen richtig. */
.cntctfrm-form { container-type: inline-size; }
.cntctfrm-form-grid { display: grid; grid-template-columns: minmax( 0, 1fr ); gap: 0 1.25em; }
.cntctfrm-form-grid__full { grid-column: 1 / -1; }
@container ( min-width: 480px ) {
	.cntctfrm-form-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

/* ---------- Einwilligung, Pflichtfelder ---------- */

.cntctfrm-consent-label {
	font-weight: 400 !important;
	display: flex !important;
	gap: 0.6em;
	align-items: flex-start;
	font-size: var( --wp--preset--font-size--small, 0.875em );
	line-height: 1.6;
	/* Wie jede Zeile des Formulars: Der Abstand zur nächsten kommt vom
	   Absatz, nicht zusätzlich vom Label (sonst sind die Rechtstexte weiter
	   voneinander entfernt als die Felder). */
	margin-bottom: 0 !important;
}
/* Die Checkbox sitzt mittig zur ersten Textzeile: Zeilenhöhe 1.6em, Kasten
   1.1em, der Rest je zur Hälfte darüber und darunter. */
.cntctfrm-consent-label input {
	font-size: inherit;
	margin: 0.25em 0 0;
	flex-shrink: 0;
}
/* Label-Text steht in einem eigenen Container (siehe
   templates/parts/contact-form.php) statt mit einem berechneten Einzug
   ausgerichtet zu werden -- em-basierte Werte für Checkbox-Breite/Abstand
   landeten je nach Schriftgrößen-Kontext ein paar Pixel daneben. */
.cntctfrm-consent-label__text { display: block; }

/* Honeypot: für Menschen unsichtbar, für Bots ein ganz normales Feld.
   Bewusst kein display:none -- das übersehen viele Bots gerade nicht. */
.cntctfrm-hp-wrap { position: absolute !important; left: -9999px !important; top: -9999px; }

.cntctfrm-submit { cursor: pointer; }
/* Die Rechtstexte stehen als eigene Gruppe: mehr Luft zum letzten Feld davor
   (Auswahl bzw. Nachricht) und vor dem Button, damit sie nicht an den Feldern
   kleben. Zwischen den Rechtstexten bleibt der normale Zeilenabstand. */
.cntctfrm-form p:not( :has( > .cntctfrm-consent-label ) ) + p:has( > .cntctfrm-consent-label ),
.cntctfrm-form p:has( > .cntctfrm-submit ) { margin-top: 0.9em; }

/* ---------- Muster "Kontaktformular" ---------- */

/*
 * Kopf (Pille, Überschrift, Einleitung) und Formular, 50/50 ab 782px
 * Containerbreite, darunter gestapelt -- dieselbe Aufteilung wie das
 * FAQ-Muster des DIGISTARTER-Themes, mit dessen Abständen (m zwischen den
 * Hälften). Der umgebende Abschnitt wird dafür zum Container.
 */
:has( > .cntctfrm-split ) { container-type: inline-size; }

.wp-block-group.cntctfrm-split {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--m, 3rem );
}
/* Der Abstand kommt aus dem gap -- ein zusätzlicher Blockabstand obendrauf
   würde ihn verdoppeln (wie bei den Mustern des Themes). */
.wp-block-group.cntctfrm-split > * { margin-block-start: 0; }

@container ( min-width: 782px ) {
	.wp-block-group.cntctfrm-split {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/*
 * Muster "Kontaktformular in einer Box": Kopf und Formular in einer
 * farbigen Box. Auf Smartphones nimmt sie seitlich nur den halben
 * Innenabstand (s statt m) -- wie die Boxen und Karten des Themes, sonst
 * bliebe den Feldern neben dem Seitenrand kaum Breite.
 */
:has( > .cntctfrm-box ) { container-type: inline-size; }

@container ( max-width: 781px ) {
	.wp-block-group.cntctfrm-box {
		padding-inline: var( --wp--preset--spacing--s, 1.5rem ) !important;
	}
}

/* Pille über der Überschrift: Das Theme gestaltet .meta-pill selbst. Mit
   einem anderen Theme bleibt sie so wenigstens als kleine Auszeichnung
   erkennbar. :where() hält die Regel schwächer als jede Theme-Regel. */
:where( :is( .cntctfrm-split, .cntctfrm-box ) .meta-pill ) {
	display: inline-block;
	width: fit-content;
	padding: 0.2em 0.8em;
	font-size: 0.8em;
	font-weight: 600;
	text-transform: uppercase;
	background: color-mix( in srgb, currentColor 10%, transparent );
}
:where( :is( .cntctfrm-split, .cntctfrm-box ) .meta-pill ) > * { margin: 0; }

/* ---------- Bestätigungsseite, Rückmeldungen ---------- */

/*
 * Die Bestätigungsseite trägt nichts außer dieser einen Meldung. Ohne
 * großzügigen Abstand nach oben und unten klebte sie zwischen Kopf- und
 * Fußzeile. Abstand über padding statt margin: Die Layout-Regeln der
 * Blockthemes ("is-layout-constrained") setzen margin-block der direkten
 * Kinder des Inhaltsbereichs auf 0 und gewinnen dabei über eine einfache
 * Klasse. Am padding rühren sie nicht.
 */
.cntctfrm-confirmation {
	padding-top: var( --wp--preset--spacing--l, clamp( 3rem, 12vh, 6rem ) );
	padding-bottom: var( --wp--preset--spacing--l, clamp( 3rem, 12vh, 6rem ) );
}
.cntctfrm-confirmation > *:first-child { margin-top: 0; }
.cntctfrm-confirmation > *:last-child { margin-bottom: 0; }

.cntctfrm-notice {
	padding: 0.9em 1.1em;
	border-radius: var( --wp--custom--radius, 4px );
}
.cntctfrm-notice-success { background: color-mix( in srgb, green 12%, transparent ); }
.cntctfrm-notice-error { background: color-mix( in srgb, crimson 10%, transparent ); }