/**
 * Form fields.
 *
 * Custom CSS because form fields have neither element nor block styles in theme.json.
 * Applies to core search, WPForms, Contact Form 7 (legacy content) etc.
 *
 * States: default · focus (3px signal outline outside) · filled (grey fill) · error · disabled.
 * Focus in signal instead of grey: grey on white does not reach the 3:1 contrast
 * that WCAG 1.4.11 requires for focus indicators.
 */

:is(
	input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="file"], [type="range"], [type="color"], [type="image"], [type="hidden"]),
	textarea,
	select
) {
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--12);
	border: 0;
	border-radius: 2px;
	box-shadow: none;
	background-color: var(--wp--preset--color--grey-light);
	color: var(--wp--preset--color--black);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-1);
	line-height: 1.45;

	&:not(select) {
		appearance: none;
	}

	/* No clear button; WebKit also reserves its space in empty fields. */
	&::-webkit-search-cancel-button {
		appearance: none;
	}

	&::placeholder {
		color: var(--wp--preset--color--grey-dark);
		opacity: 1;
	}

	/* Filled */
	&:not(select, :placeholder-shown) {
		background-color: var(--wp--preset--color--grey);
	}

	&:focus {
		outline: 3px solid var(--wp--preset--color--signal);
		outline-offset: 0;
		background-color: var(--wp--preset--color--grey-light);
	}

	&[aria-invalid="true"] {
		outline: 3px solid var(--wp--preset--color--error);
		color: var(--wp--preset--color--error);
	}

	&:disabled {
		background-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--grey);
	}
}

/**
 * Checkbox: 14px, 1.4px grey-dark border,
 * hover grey-light fill, focus 3.7px signal (grey is too faint), error border, checked
 * signal fill + white check mark.
 */
input[type="checkbox"] {
	appearance: none;
	display: inline-grid;
	place-content: center;
	flex: none;
	width: 14px;
	height: 14px;
	margin: 3px;
	border: 1.4px solid var(--wp--preset--color--grey-dark);
	border-radius: 0;
	background-color: var(--wp--preset--color--white);
	vertical-align: -2px;
	cursor: pointer;

	/* Check mark (7.5 × 5px) */
	&::before {
		content: "";
		width: 7.5px;
		height: 4px;
		margin-block-start: -2px;
		border-block-end: 1.4px solid var(--wp--preset--color--white);
		border-inline-start: 1.4px solid var(--wp--preset--color--white);
		transform: rotate(-45deg) scale(0);
	}

	&:hover {
		background-color: var(--wp--preset--color--grey-light);
	}

	&:focus-visible {
		outline: 3.7px solid var(--wp--preset--color--signal);
		outline-offset: 0;
	}

	&:checked {
		border-color: var(--wp--preset--color--signal);
		background-color: var(--wp--preset--color--signal);

		&::before {
			transform: rotate(-45deg) scale(1);
		}
	}

	&[aria-invalid="true"] {
		border-color: var(--wp--preset--color--error);
	}
}

/**
 * Radio buttons: native shape, in the signal colour.
 */
input[type="radio"] {
	accent-color: var(--wp--preset--color--signal);
}

/**
 * WPForms with the setting "Base styles only" (WPForms → Settings → General): layout of the sign-up
 * form (Membership, "Deine Schritte zur Membership"). The fields take the rules above.
 * Sections: heading, 12px, fields 8px apart in rows of two; 32px between sections.
 */
.wpforms-container .wpforms-form {

	& .wpforms-field-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--8);
	}

	& .wpforms-field {
		grid-column: 1 / -1;
		padding: 0;
	}

	& .wpforms-field.wpforms-one-half {
		grid-column: auto;
		width: auto;
		margin: 0;
	}

	& input:not([type="checkbox"], [type="radio"]) {
		width: 100%;
		max-width: none;
	}

	/*
	 * Fields with several inputs (name as first + last): side by side, 8px apart like the rows.
	 * WPForms makes the row a wrapping flexbox with clearfix pseudo-elements, which become flex
	 * items and push the inputs onto separate lines; the doubled class beats its selectors.
	 */
	& .wpforms-field .wpforms-field-row.wpforms-field-row {
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--8);
		margin: 0;

		&::before,
		&::after {
			content: none;
		}

		& > .wpforms-field-row-block {
			flex: 1 1 0;
			width: auto;
			margin: 0;
			padding: 0;
		}
	}

	& .wpforms-field-divider {
		margin-block: var(--wp--preset--spacing--24) var(--wp--preset--spacing--4);

		&:first-child {
			margin-block-start: 0;
		}

		& h3 {
			margin: 0;
			font-size: var(--wp--preset--font-size--headline-3);
			line-height: 1.33;
		}
	}

	& .wpforms-field-description {
		margin-block-start: var(--wp--preset--spacing--8);
		color: var(--wp--preset--color--grey-dark);
		font-size: var(--wp--preset--font-size--body-2);
	}

	/* Choices: 20px rows 8px apart, box and text 4px apart. */
	& ul {
		display: grid;
		gap: var(--wp--preset--spacing--8);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	& li {
		display: flex;
		gap: var(--wp--preset--spacing--4);
		align-items: flex-start;
		margin: 0;
	}

	& li input {
		margin: 3px;
	}

	& .wpforms-field-radio + .wpforms-field-checkbox {
		margin-block-start: var(--wp--preset--spacing--24);
	}

	/* Error: the theme's outline instead of WPForms' border, which also hides the checkbox frame. */
	& input.wpforms-error:not([type="checkbox"], [type="radio"]) {
		border: 0;
		outline: 3px solid var(--wp--preset--color--error);
	}

	& input[type="checkbox"].wpforms-error {
		border: 1.4px solid var(--wp--preset--color--error);
	}

	& label.wpforms-error {
		margin-block-start: var(--wp--preset--spacing--8);
		color: var(--wp--preset--color--error);
		font-size: var(--wp--preset--font-size--body-2);
	}

	& .wpforms-submit-container {
		margin-block-start: var(--wp--preset--spacing--32);
		padding: 0;
	}
}

@media (width < 600px) {

	.wpforms-container .wpforms-form .wpforms-field.wpforms-one-half {
		grid-column: 1 / -1;
	}
}

/**
 * Newsletter sign-up (WPForms forms with the CSS class `cr-form-newsletter`):
 * consent line in body-2 semibold. On a coloured background (the banner) everything is centred
 * and the button "Abonnieren" takes the style "Hell"; in running text (e.g. Young Creative Club)
 * the form stays left-aligned with the default button, which white would make invisible.
 */
.wpforms-container.cr-form-newsletter .wpforms-form .wpforms-field-checkbox li {
	font-size: var(--wp--preset--font-size--body-2);
	font-weight: 600;
	line-height: 1.35;
}

.has-background .wpforms-container.cr-form-newsletter {

	& :is(.wpforms-field-checkbox, .wpforms-submit-container, .wpforms-confirmation-container-full) {
		text-align: center;
	}

	& .wpforms-field-checkbox li {
		justify-content: center;
	}

	& .wpforms-submit {
		background-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--signal);

		&:hover {
			background-color: var(--wp--preset--color--grey-light);
		}

		&:active {
			background-color: var(--wp--preset--color--signal);
			color: var(--wp--preset--color--white);
		}
	}
}