/*
 * This plugin renders on several different sites/themes (prochrist.org,
 * Hoffnungsfestival, truestory, ...). There is no reliable, universal way to
 * make plain <input>/<select>/<textarea> elements automatically inherit a
 * theme's exact look — WordPress only added optional theme.json support for
 * that in 6.9 (Nov 2025), and only if the specific theme opted in (no shared
 * CSS class involved, unlike buttons). So instead of guessing at a theme's
 * styles, this gives fields a neutral, reasonably polished default look,
 * driven by CSS custom properties a theme's own stylesheet can override in a
 * few lines if an exact match is wanted on a given site, e.g.:
 *
 *   .pcl-form { --pcl-radius: 2px; --pcl-border-color: #333; }
 *
 * The submit button is the one exception: it carries WordPress' own
 * "wp-element-button" class (see form.php), which *does* reliably pick up a
 * theme's own button color/radius/hover state on any theme with Global
 * Styles.
 *
 * Spacing/sizing choices below follow common form-UX guidance (GOV.UK Design
 * System, current form-UX research): labels sit close above their field and
 * are slightly smaller/lighter than the field text itself (label is
 * subordinate to the value); fields get generous breathing room from each
 * other; checkbox/radio touch targets are enlarged, since default browser
 * sizes are too small for reliable mobile tapping.
 */

/*
 * Conditional field visibility ("bedingt sichtbare Formularfelder").
 * frontend.js toggles the native `hidden` attribute (not a custom class) on
 * a `.pcl-field` wrapper so a hidden field is fully removed from the
 * accessibility tree, not merely invisible — `visibility: hidden` or
 * off-screen positioning would still leave an empty, focusable shell behind
 * for assistive tech. `[hidden]` is already `display: none` per the HTML
 * spec, but is re-declared here with `!important` so a theme's own global
 * styles (e.g. a blanket `.pcl-form div { display: ... }` rule) can never
 * accidentally override it and make an inapplicable field reappear.
 */
.pcl-form [hidden] {
	display: none !important;
}

.pcl-hp-wrap {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pcl-form,
.pcl-form input,
.pcl-form select,
.pcl-form textarea,
.pcl-form button {
	font-family: inherit;
	font-size: 1em;
	line-height: 1.4;
}

/*
 * Per-field width ("Breite", pcl_fields.field_width, see Forms\FieldWidth /
 * public/views/form.php) — lets two fields sit side by side (e.g. Vorname/
 * Nachname) purely via a flexbox row on the form itself, with no PHP-side
 * pairing of fields into rows: every direct child of .pcl-form becomes a
 * flex item, and each .pcl-field/.pcl-submit gets an explicit
 * `flex: 0 0 100%` baseline (full row) so an unmodified form — every field
 * still on "Volle Zeile", the default for every field that existed before
 * this feature — lays out exactly as it did as a plain block/stacked form.
 * Only a field explicitly set to "Halbe Zeile" (.pcl-field-width-half
 * below) gets a half-row flex-basis instead; two consecutive half fields
 * then land on the same flex line automatically, with no row/group markup
 * anywhere.
 *
 * This also means conditional visibility (frontend.js toggling the native
 * `hidden` attribute — see the comment on `.pcl-form [hidden]` above) "just
 * works" with no special handling: a hidden field has `display: none` and
 * is removed from the flex layout entirely, so if one of two side-by-side
 * half fields disappears, the remaining one simply keeps its own half-row
 * size (no auto-stretch to full width — see .pcl-field-width-half below)
 * and the next field in source order slides up to take the freed slot.
 * Elements that must always start their own row regardless of any
 * left-over space in the previous row — the consent block (.pcl-consent,
 * which carries the .pcl-field class like any other field and therefore
 * already gets the same `flex: 0 0 100%` baseline) and the submit button
 * (.pcl-submit, singled out explicitly below since it has no .pcl-field
 * class) — get that same full-row basis, which a flex item never fits
 * next to a preceding item's leftover space, so it always wraps onto a new
 * line of its own. The hidden `<input type="hidden">` fields (form_id,
 * nonce, pcl_ts, and the honeypot's own text input) are unaffected either
 * way: `input[type="hidden"]` is `display: none` by the browser's own
 * default stylesheet, and .pcl-hp-wrap is `position: absolute` (see below)
 * — both are excluded from the flex layout algorithm entirely, exactly as
 * they were excluded from normal block flow before this change.
 */
.pcl-form {
	display: flex;
	flex-wrap: wrap;
	/*
	 * column-gap only, not the `gap` shorthand: `gap` would also set
	 * row-gap, adding a *second* vertical gap on top of the existing
	 * `.pcl-field { margin-bottom: 1.75em; }` below and doubling the space
	 * between rows on every existing form. column-gap only ever applies
	 * between two items that actually share a flex line (i.e. two "Halbe
	 * Zeile" fields next to each other) — a lone full-row field never has
	 * a same-line neighbour, so column-gap has no effect on it and no
	 * existing (all-"Volle Zeile") form changes spacing at all.
	 */
	column-gap: 1.75em;
}

.pcl-form > .pcl-field,
.pcl-form > .pcl-submit {
	flex: 0 0 100%;
}

/*
 * Half-row width: 50% minus half the column-gap, so two side-by-side half
 * fields plus the gap between them add up to exactly 100% (2 * (50% -
 * 0.875em) + 1.75em = 100%) instead of wrapping early or leaving a sliver
 * of empty space. `flex-grow: 0` (inherited from the `flex: 0 0 100%`
 * baseline above, only flex-basis is overridden here) is deliberate: a
 * "halbes" field set up alone on a row (odd field count, or its neighbour
 * currently hidden) stays at half width rather than auto-stretching to
 * fill the row — the person editing the form chose "Halbe Zeile", so half
 * width is what she gets, full stop.
 */
.pcl-form > .pcl-field.pcl-field-width-half {
	flex-basis: calc( 50% - 0.875em );
}

/*
 * Below ~600px (typical phone portrait width, well under any tablet), two
 * half-width fields next to each other would each be under 300px minus
 * padding — too narrow to comfortably type a name into, and half of a
 * mobile-optimised theme's already-narrow content column besides. Revert
 * every "Halbe Zeile" field to a full row on small screens; "Volle Zeile"
 * fields are already full-row at every width and need no media query.
 */
@media ( max-width: 600px ) {
	.pcl-form > .pcl-field.pcl-field-width-half {
		flex-basis: 100%;
	}
}

.pcl-form .pcl-field {
	margin-bottom: 1.75em;
}

.pcl-form label {
	display: block;
	font-weight: 600;
	font-size: 0.9em;
	margin-bottom: 0.4em;
}

/*
 * Per-field label size ("Schriftgröße der Beschriftung",
 * pcl_fields.label_size, see Forms\LabelSize / public/views/form.php). The
 * admin-chosen level adds one of these modifier classes to the field's
 * `.pcl-field` wrapper; the size rules target `.pcl-field-label` specifically
 * (the FIELD's own label, marked with that class in form.php) rather than
 * plain `label`, so a bigger field label never also enlarges the individual
 * answer options of a radio/multiselect field (`.pcl-radio-option`/
 * `.pcl-checkbox-option`, styled separately further down) or the consent
 * checkbox label. Higher specificity than `.pcl-form .pcl-field-type-checkbox
 * label`/`.pcl-form .pcl-consent label` below is intentional: choosing a
 * larger size for a single-checkbox field's own label still has an effect,
 * while a field with the default (no modifier class) is completely
 * unaffected by these rules, leaving that existing override in charge.
 */
.pcl-form .pcl-field.pcl-label-size-l .pcl-field-label,
.pcl-form .pcl-field.pcl-label-size-l .pcl-consent-heading {
	font-size: 1.15em;
}

.pcl-form .pcl-field.pcl-label-size-xl .pcl-field-label,
.pcl-form .pcl-field.pcl-label-size-xl .pcl-consent-heading {
	font-size: 1.35em;
}

.pcl-form .pcl-field.pcl-label-size-xxl .pcl-field-label,
.pcl-form .pcl-field.pcl-label-size-xxl .pcl-consent-heading {
	font-size: 1.6em;
}

.pcl-consent-heading {
	font-size: 1.05em;
	font-weight: 600;
	margin: 0 0 0.5em;
}

.pcl-form .pcl-field-type-checkbox label,
.pcl-form .pcl-consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	font-weight: normal;
	font-size: 1em;
	cursor: pointer;
}

.pcl-form input[type="text"],
.pcl-form input[type="email"],
.pcl-form select,
.pcl-form textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0.65em 0.85em;
	border: 1px solid var( --pcl-border-color, #8c8f94 );
	border-radius: var( --pcl-radius, 4px );
	color: inherit;
	background: var( --pcl-field-background, #fff );
}

.pcl-form input[type="text"]:focus,
.pcl-form input[type="email"]:focus,
.pcl-form select:focus,
.pcl-form textarea:focus {
	outline: 2px solid var( --pcl-accent-color, #2563eb );
	outline-offset: 1px;
	border-color: var( --pcl-accent-color, #2563eb );
}

.pcl-form input[type="checkbox"],
.pcl-form input[type="radio"] {
	accent-color: var( --pcl-accent-color, #2563eb );
	width: 1.2em;
	height: 1.2em;
	margin: 0.1em 0 0;
	flex-shrink: 0;
}

.pcl-form input[type="checkbox"] {
	border-radius: var( --pcl-radius, 4px );
}

.pcl-required {
	color: var( --pcl-error-color, #d63638 );
}

.pcl-field.has-error input,
.pcl-field.has-error select,
.pcl-field.has-error textarea {
	border-color: var( --pcl-error-color, #d63638 );
}

.pcl-field-error {
	color: var( --pcl-error-color, #d63638 );
	font-size: 0.85em;
	margin: 0.35em 0 0;
}

.pcl-form-success,
.pcl-form-error {
	padding: 0.75em 1em;
	border-left: 4px solid;
	margin-bottom: 1.75em;
}

.pcl-form-success {
	border-color: var( --pcl-success-color, #46b450 );
}

.pcl-form-error {
	border-color: var( --pcl-error-color, #d63638 );
}

.pcl-radio-option,
.pcl-checkbox-option {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	font-weight: normal;
	font-size: 1em;
	margin-bottom: 0.5em;
	min-height: 1.75em;
	cursor: pointer;
}

.pcl-submit {
	cursor: pointer;
}