/* ── Invalid state ───────────────────────────────────────────────────
 * The MESSAGE keeps its red — that is the error signal and is unchanged.
 * The FIELD is what stopped being restyled: it keeps its own border,
 * #ededed on the white enquiry card and the translucent white rule in the
 * footer. Recolouring the border fought both designs — a #e53e3e box on
 * the white card, and a red line cutting across the footer's hairline.
 *
 * So there is deliberately no `border-color` here for .wac-error /
 * .wpcf7-not-valid any more. Don't add one back without checking both
 * forms; they look nothing alike.
 * ──────────────────────────────────────────────────────────────────── */

/* The footer subscribe form is styled separately from everything below: it
 * ships its own token set in src/main.css (.site-footer .wpcf7-form { --sub-*
 * }), whose selectors are 0,3,x against the 0,2,0 generic ones here, so the
 * rules below never reach it. --sub-error (#ff9b9b, the footer's own red on
 * dark green) still drives its message, tip and invalid banner and is left
 * alone — only the two rules that painted the FIELD border with it are
 * reverted, to match the white card's behaviour.
 *
 * Kept in this file rather than fixed at source in src/main.css because the
 * Tailwind build cannot be run on this machine (no package.json/node_modules
 * at the webroot), and main.css is generated — never hand-edited. Worth
 * folding back into src/main.css next time the build is available. Same
 * specificity as the src/ rules, and validation.css is enqueued after
 * main.css, so these win on order.
 *
 * The source rules also set color:#fff and border-right:0 on the invalid
 * state; those are about the joined input+button bar rather than error
 * signalling, so they are deliberately left in place. */
.site-footer .wpcf7-form input[type="email"].wpcf7-not-valid,
.site-footer .wpcf7-form .wpcf7-form-control-wrap:has(.error) input[type="email"] {
	border-color: var(--sub-field-border);
}

.site-footer .wpcf7-form input[type="email"].wpcf7-not-valid {
	border-right-color: var(--sub-field-border);
}

.wpcf7-form .wac-error-msg {
	display: block;
	color: #e53e3e;
	font-size: 0.75rem;
	margin-top: 0.25rem;
}

/* The form-validate plugin injects <span class="error">…</span> after the
   field. Neither its own cf7.css nor anything here styled it, so it rendered
   as full-size black body text that ran into the next field's label. */
.wpcf7-form .error {
	display: block;
	color: #e53e3e;
	font-size: 0.75rem;
	line-height: 1.4;
	margin-top: 0.25rem;
}

/* Enquiry form: take messages out of the layout flow, so showing or clearing
   one doesn't push the fields below it and make the form jump. The space they
   occupy is the gap already reserved between rows (see .gibi-contactform in
   src/components.css). Scoped to this form — any other CF7 form keeps the
   in-flow message above, which degrades gracefully. */
.gibi-contactform .wpcf7-form-control-wrap {
	display: block;
	position: relative;
}

.gibi-contactform .error {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 0.125rem;
	line-height: 1.3;
	pointer-events: none;
}

/* Where the CF7 body stacks two fields in one grid (mobile), its own gap-5
   is too tight for a message to hang into. This file is unlayered, so it
   outranks the Tailwind utility — a rule in src/ would lose to @layer
   utilities and silently do nothing. */
.gibi-contactform .grid {
	row-gap: 1.75rem;
}

.wpcf7-form .wpcf7-not-valid-tip {
	color: #e53e3e;
	font-size: 0.75rem;
}

.wpcf7-response-output {
	margin: 1rem 0 0 !important;
	padding: 0.75rem 1rem !important;
	border-radius: 0.375rem !important;
}

.wpcf7-form.sent .wpcf7-response-output {
	border-color: #38a169 !important;
	color: #38a169 !important;
}

.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output {
	border-color: #e53e3e !important;
	color: #e53e3e !important;
}

/* ── Submit: loading state ───────────────────────────────────────────
 * src/sections.css styles .gibi-contactform .wpcf7-spinner as an absolutely
 * positioned ring overlaid on the button, but it only lands there if the
 * submit's own wrapper establishes a containing block. It doesn't: CF7 emits
 * the spinner as a plain sibling of the <input>, and on the contact form both
 * sit directly inside <div class="gibi-contactform">, which wraps the entire
 * form body and is position:static. The spinner therefore resolved against
 * <body> and rendered hundreds of pixels away, off-screen — the button looked
 * completely inert for the whole request.
 *
 * validation.js wraps each submit + its spinner in .wac-submit-wrap, which
 * hugs the button and gives the spinner something correct to resolve against.
 * Positioning is fully restated here (higher specificity than the sections.css
 * rule) so it is right on every form, not just .gibi-contactform.
 *
 * These rules live here, not in src/, because this file is hand-written and
 * enqueued directly (functions.php) — src/ requires the Tailwind build.
 * ──────────────────────────────────────────────────────────────────── */
.wac-submit-wrap {
	position: relative;
	display: block;
}

/* CF7's own spinner is replaced by the wave loader below. */
.wpcf7-form .wac-submit-wrap .wpcf7-spinner {
	display: none;
}

/* ── Wave loader ─────────────────────────────────────────────────────
 * While submitting, the button's label is hidden and five bars wave in
 * its place. An <input type="submit"> can hold no children and renders
 * no pseudo-elements, so the bars cannot live inside the button — they
 * are a sibling overlay stretched across the wrapper, and the label is
 * hidden with `color: transparent` rather than by touching `value`
 * (which CF7 would post and which would collapse the button's width).
 * ──────────────────────────────────────────────────────────────────── */
.wac-submit-loader {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	pointer-events: none;
	/* Fallback only — validation.js copies the button's own text colour onto
	   this element, so the bars match whatever button they sit on (dark fill
	   with white text, or a light footer button with dark text). */
	color: #fff;
}

.wpcf7-form.submitting .wac-submit-loader {
	display: flex;
}

/* Routed through .wac-submit-wrap purely for specificity (0,4,0). The footer
   rule `.site-footer .wpcf7-form input[type="submit"]` in main.css is (0,3,1)
   and would otherwise keep the label painted straight through the loader. */
.wpcf7-form.submitting .wac-submit-wrap .wpcf7-submit {
	color: transparent;
	/* .btn transitions `color` over .2s, so the label would otherwise fade out
	   while the bars are already running. Swap it instantly instead. */
	transition: none;
}

.wac-submit-loader i {
	display: block;
	width: 0.1875rem;
	height: 1.125rem;
	border-radius: 0.125rem;
	background: currentColor;
	transform-origin: center;
	animation: wac-wave 1s ease-in-out infinite;
}

.wac-submit-loader i:nth-child(1) { animation-delay: -0.5s; }
.wac-submit-loader i:nth-child(2) { animation-delay: -0.4s; }
.wac-submit-loader i:nth-child(3) { animation-delay: -0.3s; }
.wac-submit-loader i:nth-child(4) { animation-delay: -0.2s; }
.wac-submit-loader i:nth-child(5) { animation-delay: -0.1s; }

@keyframes wac-wave {
	0%, 60%, 100% {
		transform: scaleY(0.35);
		opacity: 0.55;
	}
	30% {
		transform: scaleY(1);
		opacity: 1;
	}
}

/* Motion-sensitive users get a steady pulse of the whole row instead of
   five independently animating bars. */
@media (prefers-reduced-motion: reduce) {
	.wac-submit-loader i {
		animation: none;
		transform: scaleY(0.7);
	}
	.wac-submit-loader {
		animation: wac-wave-fade 1.4s ease-in-out infinite;
	}
	@keyframes wac-wave-fade {
		0%, 100% { opacity: 0.5; }
		50%      { opacity: 1; }
	}
}

/* Submitting: dim the button and make it visibly un-clickable. The `disabled`
   attribute is set from validation.js; `form.submitting` is CF7's own class,
   kept as a belt-and-braces visual in case the JS handler never fires. */
.wpcf7-form.submitting .wpcf7-submit,
.wpcf7-form .wpcf7-submit:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	pointer-events: none;
}

/* .btn-primary paints its hover fill with a ::before wipe; suppress it so a
   disabled button cannot appear interactive on touch devices. */
.wpcf7-form.submitting .wpcf7-submit::before,
.wpcf7-form .wpcf7-submit:disabled::before {
	display: none;
}