/**
 * Theme – MC4WP (Mailchimp for WordPress)
 *
 * Bringt das Newsletter-Formular (Abschnitt #newsletter, «Verpasse nichts») an
 * das Projekt-Design an. Alle Werte als CSS Custom Properties aus theme.json
 * referenziert – eine Quelle der Wahrheit. Ändern sich Tokens (oder wechselt
 * die Saison), zieht das Formular automatisch mit.
 *
 * Kontext: Das Formular steht im Abschnitt mit `is-style-hell` (primary-/
 * saisonal-heller Hintergrund). Felder sind weiss für Lesbarkeit, der Submit-
 * Button nutzt `secondary` (dunkel) mit `primary`-Schrift + Pfeil — analog zum
 * Standard-Button-Block, damit er auf dem hellen Grund Kontrast hat.
 *
 * MC4WP liefert ein weitgehend markup-neutrales Formular (`.mc4wp-form`,
 * `.mc4wp-form-fields`, `.mc4wp-response`); wir stylen ohne !important, indem
 * wir die Plugin-Klasse `.mc4wp-form` führen.
 */

/*
 * Formularbreite wie .alignwide: Der Shortcode-Block bietet in Gutenberg keine
 * Breiten-Umschaltung, darum hier auf die wide-Size zentriert. Wert kommt aus
 * theme.json (layout.wideSize) über die WP-Custom-Property – eine Quelle der
 * Wahrheit, zieht bei Änderung automatisch mit. Fallback = contentSize.
 */
.mc4wp-form {
	width: 100%;
	max-width: var( --wp--style--global--wide-size, 110rem );
	margin-inline: auto;
}

/* Felder gestapelt (eine <p>-Reihe je Zeile), gleichmässiger Abstand. */
.mc4wp-form .mc4wp-form-fields {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--mini );
}

/* Absätze (MC4WP wickelt Felder in <p>) ohne Eigenabstand – gap regelt. */
.mc4wp-form .mc4wp-form-fields p {
	margin: 0;
}

.mc4wp-form .spnkt-names {
	margin-bottom: 1em;
}

/*
 * Vorname + Nachname: Wrapper .spnkt-names umschliesst ein <p> mit zwei <label>.
 * Das <p> wird zum Flex-Container, damit die beiden Labels nebeneinander stehen
 * und sich die Zeile hälftig teilen. Umbruch auf Mobile weiter unten.
 */
.mc4wp-form .spnkt-names p {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--mini );
}

.mc4wp-form .spnkt-names label {
	flex: 1 1 calc( 50% - ( var( --wp--preset--spacing--mini ) / 2 ) );
	min-width: 0;
}

/*
 * Datenschutz-Checkbox und Submit-Button in einer Zeile: Wrapper
 * .spnkt-dsg-submit als Flex-Container. Checkbox-Zeile links (nimmt Platz),
 * Button rechts, vertikal mittig. Beide <p> ohne Eigenabstand. Umbruch auf
 * Mobile weiter unten.
 */
.mc4wp-form .spnkt-dsg-submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --wp--preset--spacing--mini );
}

.mc4wp-form .spnkt-dsg-submit > p {
	margin: 0;
}

/* Checkbox-Zeile nimmt den verfügbaren Platz. */
.mc4wp-form .spnkt-dsg-submit > p:has( input[type="checkbox"] ) {
	flex: 1 1 0;
	min-width: 0;
}

/* Button-<p> nur so breit wie nötig, damit die Checkbox-Zeile den Rest bekommt. */
.mc4wp-form .spnkt-dsg-submit > p:has( input[type="submit"] ) {
	flex: 0 0 auto;
}

/* Labels: Outfit Regular, foreground. Umschliessendes Label → als Block. */
.mc4wp-form label {
	display: block;
	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--secondary );
}

/*
 * Eingabefelder: weiss, 1px Border, Standard-Radius. min-height statt fixer
 * Höhe, damit Zoom/Reflow nicht abschneidet (WCAG 1.4.10, 1.4.4). Volle Breite.
 */
.mc4wp-form input[type="email"],
.mc4wp-form input[type="text"] {
	display: block;
	width: 100%;
	margin-top: 0.35em;
	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 );
}

.mc4wp-form input::placeholder {
	color: var( --wp--preset--color--foreground );
	opacity: 0.6;
}

/* Sichtbarer Fokus auf Feldern (WCAG 2.4.7, 2.4.11). */
.mc4wp-form input[type="email"]:focus,
.mc4wp-form input[type="text"]:focus {
	outline: 2px solid var( --wp--preset--color--secondary );
	outline-offset: -1px;
	border-color: var( --wp--preset--color--secondary );
}

/*
 * Einwilligungs-Checkbox: Checkbox und Text nebeneinander, oben ausgerichtet.
 * Das Label umschliesst Checkbox + Text – deshalb hier flex statt block.
 */
.mc4wp-form .mc4wp-checkbox label,
.mc4wp-form label:has( input[type="checkbox"] ) {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.4;
	cursor: pointer;
}

/*
 * Checkbox: nicht schrumpfen, ausreichende Trefferfläche. Grösse in em, an die
 * Label-Schrift gekoppelt (font-size: 1em erbt die Label-Grösse) – wird die
 * Schrift grösser, wächst die Checkbox proportional mit.
 */
.mc4wp-form input[type="checkbox"] {
	flex-shrink: 0;
	font-size: 1em;
	width: 1.25em;
	height: 1.25em;
	margin: 0.1em 0 0;
	accent-color: var( --wp--preset--color--secondary );
	cursor: pointer;
}

.mc4wp-form input[type="checkbox"]:focus-visible {
	outline: 2px solid var( --wp--preset--color--secondary );
	outline-offset: 2px;
}

/* Datenschutz-Link in der Checkbox: unterstrichen, foreground. */
.mc4wp-form .mc4wp-checkbox a {
	color: var( --wp--preset--color--foreground );
	text-decoration: underline;
}

/*
 * Submit-Button: secondary (dunkel) auf hellem Abschnitt-Hintergrund, Schrift
 * + Pfeil in primary (saisonal-hell) — wie der Standard-Button-Block.
 * Selektoren führen input+button gemeinsam: das MC4WP-Formular wird von
 * <input type="submit"> auf <button type="submit"> umgestellt; nur <button>
 * kann den ::after-Pfeil tragen. Beide Selektoren bleiben, bis die Umstellung
 * im MC4WP-Editor erfolgt ist.
 */
.mc4wp-form input[type="submit"],
.mc4wp-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background-color: var( --wp--preset--color--secondary );
	color: var( --wp--preset--color--primary );
	border: 0;
	border-radius: var( --wp--custom--border-radius--regular );
	padding: 12px 28px;
	font-family: var( --wp--preset--font-family--base );
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s ease;
}

/* Hover: leichte Vergrösserung statt Opacity — wie der Button-Block. */
.mc4wp-form input[type="submit"]:hover,
.mc4wp-form button[type="submit"]:hover {
	transform: scale(1.0125);
}

/* Bewegungsreduktion respektieren (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {

	.mc4wp-form input[type="submit"],
	.mc4wp-form button[type="submit"] {
		transition: none;
	}

	.mc4wp-form input[type="submit"]:hover,
	.mc4wp-form button[type="submit"]:hover {
		transform: none;
	}
}

/*
 * Pfeil rechts: Projekt-Pfeil als Maske, currentColor → erbt die primary-
 * Schrift. Nur an <button> wirksam (input trägt kein ::after).
 */
.mc4wp-form button[type="submit"]::after {
	content: "";
	width: 1.25em;
	height: 1.25em;
	background-color: currentColor;
	mask-image: url("../../images/pfeil.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.mc4wp-form input[type="submit"]:focus-visible,
.mc4wp-form button[type="submit"]:focus-visible {
	outline: 2px solid var( --wp--preset--color--foreground );
	outline-offset: 2px;
}

/*
 * Feedback-Meldungen (Erfolg/Fehler). MC4WP setzt .mc4wp-response mit
 * .mc4wp-alert bzw. Erfolgs-/Fehlerklassen. Farben aus den Feedback-Tokens.
 */
.mc4wp-form .mc4wp-response {
	margin-top: var( --wp--preset--spacing--mini );
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.4;
}

.mc4wp-form .mc4wp-alert.mc4wp-success,
.mc4wp-form-success .mc4wp-response {
	color: var( --wp--preset--color--success );
}

.mc4wp-form .mc4wp-alert.mc4wp-error,
.mc4wp-form-error .mc4wp-response {
	color: var( --wp--preset--color--error );
}

/*
 * Mobile (max-width: 36em): Submit-Button volle Breite für grössere
 * Trefferfläche. Desktop-first – Basis oben ist Desktop.
 */
@media only screen and ( max-width: 36em ) {
	/* Vorname/Nachname untereinander statt nebeneinander. */
	.mc4wp-form .spnkt-names label {
		flex: 1 1 100%;
	}

	/* Datenschutz-Zeile und Button untereinander, Button volle Breite. */
	.mc4wp-form .spnkt-dsg-submit > p:has( input[type="checkbox"] ),
	.mc4wp-form .spnkt-dsg-submit > p:has( input[type="submit"] ) {
		flex: 1 1 100%;
	}

	.mc4wp-form input[type="submit"],
	.mc4wp-form button[type="submit"] {
		display: flex;
		justify-content: center;
		width: 100%;
	}
}