/* ============================================================
   FG Forms — unified Contact Form 7 validation + footer newsletter
   ------------------------------------------------------------
   "Field Report" form system. One validation language for every
   CF7 form on the site (consultation, contact, newsletter):
   a tinted warm-brick correction mark for errors, a teal seal for
   success — each carries an icon so meaning never rests on colour
   alone. RTL-first, AA contrast, reduced-motion safe.

   Loads after fg-home.css, so it owns the canonical form-state
   visuals; fg-home.css keeps only layout.
   ============================================================ */

:root {
	/* Warm brick — tinted toward the brand, AA on white (~6:1). */
	--fg-color-danger: oklch(49% 0.155 30);
	--fg-color-danger-strong: oklch(43% 0.16 30);
	--fg-color-danger-tint: oklch(49% 0.155 30 / 0.09);
	--fg-color-danger-ring: oklch(49% 0.155 30 / 0.16);
	/* Success borrows Structural Teal so it reads as the firm's seal. */
	--fg-color-success: var(--fg-color-accent);
	--fg-color-success-tint: rgba(11, 85, 101, 0.08);
	/* On the dark teal footer, error/success need light tints to stay AA. */
	--fg-color-danger-onfoot: oklch(80% 0.10 40);
	--fg-color-success-onfoot: oklch(85% 0.08 190);
}

/* ------------------------------------------------------------
   1. Field-level invalid state — every CF7 form
   ------------------------------------------------------------ */
.wpcf7-form .wpcf7-not-valid {
	border-color: var(--fg-color-danger) !important;
	box-shadow: 0 0 0 3px var(--fg-color-danger-ring) !important;
}

/* The inline correction mark under a field: icon + message. */
.wpcf7-form .wpcf7-not-valid-tip {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	margin-block-start: 0.45rem;
	color: var(--fg-color-danger);
	font-family: var(--fg-font-body);
	font-size: 0.82rem;
	line-height: 1.45;
	font-weight: 500;
}
.wpcf7-form .wpcf7-not-valid-tip::before {
	content: "";
	flex: none;
	inline-size: 1.05em;
	block-size: 1.05em;
	margin-block-start: 0.08em;
	background-color: currentColor;
	-webkit-mask: var(--fg-icon-alert) center / contain no-repeat;
	mask: var(--fg-icon-alert) center / contain no-repeat;
}

/* Shared icon glyphs (mask takes the element's colour). */
:root {
	--fg-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2zm0 5.6a1 1 0 0 1 1 1V14a1 1 0 0 1-2 0V8.6a1 1 0 0 1 1-1zM12 16.4a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'/%3E%3C/svg%3E");
	--fg-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 13.4-3.5-3.5 1.4-1.4 2.1 2.1 4.9-4.9 1.4 1.4-6.3 6.3z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   2. Form-level response banner — full border, leading icon
   (overrides CF7's default 2px side-stripe, which is banned)
   ------------------------------------------------------------ */
.wpcf7-form .wpcf7-response-output {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 1.1rem 0 0;
	padding: 0.85rem 1rem;
	border: 1px solid var(--fg-color-border);
	border-radius: var(--fg-radius-sm);
	background: var(--fg-color-surface-alt, #f4f7f8);
	color: var(--fg-color-text);
	font-family: var(--fg-font-body);
	font-size: 0.9rem;
	line-height: 1.5;
}
.wpcf7-form .wpcf7-response-output::before {
	content: "";
	flex: none;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin-block-start: 0.05rem;
	background-color: currentColor;
	-webkit-mask: var(--fg-icon-alert) center / contain no-repeat;
	mask: var(--fg-icon-alert) center / contain no-repeat;
}
/* Error states (client validation + mail failure + spam). */
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
	border-color: var(--fg-color-danger);
	background: var(--fg-color-danger-tint);
	color: var(--fg-color-danger-strong);
}
/* Success: teal seal + check glyph. */
.wpcf7-form.sent .wpcf7-response-output {
	border-color: rgba(11, 85, 101, 0.45);
	background: var(--fg-color-success-tint);
	color: var(--fg-color-success);
}
.wpcf7-form.sent .wpcf7-response-output::before {
	-webkit-mask: var(--fg-icon-check) center / contain no-repeat;
	mask: var(--fg-icon-check) center / contain no-repeat;
}

/* Spinner — quiet, currentColor, sits beside the submit. */
.wpcf7-form .wpcf7-spinner {
	margin-inline-start: 0.55rem;
	background-color: rgba(11, 85, 101, 0.18);
}

/* Subtle, compositor-only entrance — gated by reduced-motion below. */
.wpcf7-form .wpcf7-not-valid-tip,
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.sent .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
	animation: fg-form-feedback 0.4s var(--fg-ease) both;
}
@keyframes fg-form-feedback {
	from { opacity: 0; transform: translateY(-0.3rem); }
	to   { opacity: 1; transform: translateY(0); }
}

/* While submitting, dim the form so the spinner reads as "working". */
.wpcf7-form.submitting { opacity: 0.7; transition: opacity var(--fg-dur-fast) var(--fg-ease); }

/* ------------------------------------------------------------
   3. Footer newsletter — refined control on the dark basement
   ------------------------------------------------------------ */
.fg-foot__cta-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.6rem;
	font-family: var(--fg-font-heading);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	color: var(--fg-color-primary);
}
.fg-foot__cta-eyebrow::before {
	content: "";
	inline-size: 1.75rem;
	block-size: 2px;
	background: var(--fg-color-primary);
	border-radius: 2px;
}

.fg-foot__newsletter .wpcf7-form {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.6rem;
	position: relative;
}
.fg-foot__newsletter .form-group { flex: 1 1 240px; margin: 0; min-inline-size: 0; }
.fg-foot__newsletter .wpcf7-form-control-wrap { display: block; }

.fg-foot__newsletter input[type="email"],
.fg-foot__newsletter .form-control {
	inline-size: 100%;
	min-block-size: 54px;
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--fg-radius-sm);
	color: #fff;
	padding: 0.9rem 1.1rem;
	font-family: var(--fg-font-body);
	font-size: 0.97rem;
	transition: background-color var(--fg-dur-fast) var(--fg-ease),
		border-color var(--fg-dur-fast) var(--fg-ease),
		box-shadow var(--fg-dur-fast) var(--fg-ease);
}
.fg-foot__newsletter input::placeholder { color: rgba(255, 255, 255, 0.5); opacity: 1; }
.fg-foot__newsletter input[type="email"]:focus,
.fg-foot__newsletter .form-control:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.09);
	border-color: var(--fg-color-primary);
	box-shadow: 0 0 0 3px rgba(217, 160, 67, 0.22);
}

/* Send button: teal (set AA-safe in main.css §29a), gold on hover.
   Here we own shape, size, icon spacing and the hover lift. */
.fg-foot__newsletter .wpcf7-submit.th-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-block-size: 54px;
	padding-inline: 1.5rem;
	border-radius: var(--fg-radius-sm);
	font-family: var(--fg-font-heading);
	font-weight: 700;
	white-space: nowrap;
	transition: background-color var(--fg-dur-fast) var(--fg-ease),
		border-color var(--fg-dur-fast) var(--fg-ease),
		color var(--fg-dur-fast) var(--fg-ease),
		transform var(--fg-dur-fast) var(--fg-ease);
}
.fg-foot__newsletter .wpcf7-submit.th-btn:hover { transform: translateY(-2px); }
.fg-foot__newsletter .wpcf7-submit.th-btn i { font-size: 0.95em; }

/* Validation on the dark basement: full-width below the control,
   light warm/mint tints so they clear AA on #062A33. */
.fg-foot__newsletter .wpcf7-not-valid-tip {
	flex-basis: 100%;
	margin-block-start: 0.55rem;
	color: var(--fg-color-danger-onfoot);
}
.fg-foot__newsletter input.wpcf7-not-valid,
.fg-foot__newsletter .wpcf7-not-valid {
	border-color: var(--fg-color-danger-onfoot) !important;
	box-shadow: 0 0 0 3px oklch(80% 0.10 40 / 0.18) !important;
}
.fg-foot__newsletter .wpcf7-response-output {
	flex-basis: 100%;
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.18);
	color: var(--fg-color-footer-text);
}
.fg-foot__newsletter .wpcf7-form.invalid .wpcf7-response-output,
.fg-foot__newsletter .wpcf7-form.failed .wpcf7-response-output {
	border-color: var(--fg-color-danger-onfoot);
	background: oklch(80% 0.10 40 / 0.12);
	color: var(--fg-color-danger-onfoot);
}
.fg-foot__newsletter .wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--fg-color-success-onfoot);
	background: rgba(133, 226, 211, 0.12);
	color: var(--fg-color-success-onfoot);
}
.fg-foot__newsletter .wpcf7-spinner { background-color: rgba(255, 255, 255, 0.35); }

/* ------------------------------------------------------------
   4. Reduced motion — no entrance, no lift
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.wpcf7-form .wpcf7-not-valid-tip,
	.wpcf7-form .wpcf7-response-output,
	.fg-foot__newsletter .wpcf7-submit.th-btn:hover {
		animation: none;
		transform: none;
	}
}