/**
 * Contact Form 7 form-field styling for nordnatur.com.
 *
 * CSS BUDGET EXCEPTION (CLAUDE.md rule 14).
 * Rule 14 caps custom CSS at <20 lines per plugin. This file ships ~45
 * lines because CF7 emits HTML outside Gutenberg's block tree, so neither
 * theme.json nor block-style variations can reach the markup. Plain CSS
 * is the only landing zone. Conditionally enqueued via has_shortcode()
 * in ncom-core.php so it only loads on pages with a CF7 form.
 *
 * All values resolve through theme.json custom properties. Design source
 * of truth: \Nordnatur.tech\styling\elements\form-field.html (atom) and
 * \Nordnatur.tech\code\ntech-core\assets\css\cf7-fields.css (deployed).
 *
 * .com adaptations:
 *   - Placeholder-only fields; labels wrapped in .screen-reader-text for
 *     a11y (TT5 ships the visually-hidden rule globally). No visible
 *     label styling, no required-marker asterisk, no helper-text rule.
 *   - Submit picks up theme.json styles.elements.button via
 *     class:wp-element-button on the CF7 [submit] form-tag — no submit
 *     button CSS in this file.
 */

/* Flex-column shrinking — when a wp-block-column contains a CF7 form,
   allow it to shrink to its flex-basis (0) rather than expanding to fit
   CF7's default size="40" / cols="40" intrinsic input widths. Without
   this, the form column takes ~60–65% of the row instead of its intended
   50% share, overlapping the adjacent column. Scoped via :has() so it
   only affects columns containing a CF7 form. */
.wp-block-column:has(.wpcf7-form) {
	min-width: 0;
}

/* Field-group rhythm — CF7 wraps each field in <p>. */
.wpcf7 p {
	margin-bottom: var(--wp--preset--spacing--50);
}
.wpcf7 p:last-child {
	margin-bottom: 0;
}

/* Input / textarea / select base. */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select {
	display: block;
	width: 100%;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-2);
	background: var(--wp--preset--color--base-3);
	border: 1px solid var(--wp--preset--color--contrast-3);
	border-radius: var(--wp--custom--radius--default);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	transition: border-color var(--wp--custom--transition--base, 200ms ease-out);
}

/* Placeholder colour — muted contrast-3. */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: var(--wp--preset--color--contrast-3);
	opacity: 1;
}

/* Focus state — border shifts to accent-2 + 2px focus ring (WCAG 2.4.11). */
.wpcf7 :where(input[type="text"],
              input[type="email"],
              input[type="tel"],
              input[type="url"],
              input[type="number"]):focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
	border-color: var(--wp--preset--color--accent-2);
	outline: 2px solid var(--wp--custom--focus--ring);
	outline-offset: 2px;
}

/* Invalid state — CF7 adds .wpcf7-not-valid to the input on failed validation. */
.wpcf7 .wpcf7-not-valid {
	border-color: var(--wp--preset--color--accent-red);
}

/* Error message — CF7-emitted span below invalid inputs. */
.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--accent-red);
	margin-top: var(--wp--preset--spacing--20);
}