/**
 * Standalone CSS for design tweaks that don't fit cleanly into the
 * SCSS bundle yet. Two kinds of rules live here:
 *
 *   1. **SCSS-pending overrides** — rules that ALSO exist in
 *      src-assets/sass-global but haven't been picked up by a
 *      `npm run build` yet (the rebuild is MIGRATION.md §12 follow-up
 *      #7). When main.css is regenerated, these can be removed because
 *      the canonical SCSS rule takes over.
 *
 *   2. **New small additions** — styles for things that have no SCSS
 *      counterpart yet (e.g. CF7 message styling). These can either
 *      stay here long-term or get migrated into a dedicated SCSS file
 *      and folded into the bundle on next rebuild.
 *
 * Loaded site-wide after main.css via inc/scripts-and-styles.php.
 *
 * @package RULEMATCH
 */


/* ============================================================================
 * HERO-HOME H1 — bump to 45px per design feedback
 * ============================================================================
 * Source-of-truth SCSS rule lives in src-assets/sass-global/components/_hero.scss
 * inside the `.hero--home & h1` selector. The generic .hero__content h1
 * stays at 36px (defined elsewhere in main.css), so we target the
 * hero-home variant specifically with extra specificity. */
.hero.hero--home .hero__content h1 {
  font-size: 45px !important;
}


/* ============================================================================
 * CF7 RESPONSE MESSAGES — match the site's dark-section design
 * ============================================================================
 * CF7 ships with bare/unstyled messages (red text on red border, etc.).
 * These rules give them a coherent look matching the existing form chrome:
 * subtle tinted background, accent border on the left, white text.
 *
 * The .contact-form prefix keeps these scoped to the theme's contact-form
 * block — we don't accidentally restyle some other plugin's CF7 use.
 *
 * Colour values match the brand status palette already defined in
 * main.css (--bs-form-valid-color / --bs-form-invalid-color).
 */

/* ---- the global response message at the bottom of the form ------------ */
.contact-form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 16px 20px;
  border: 0;
  border-left: 4px solid transparent;
  border-radius: 0;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}

/* success */
.contact-form .wpcf7 form.sent .wpcf7-response-output {
  background: rgba(50, 213, 66, 0.15);
  border-left-color: #32D542;
}

/* validation error (some required field missing/invalid) */
.contact-form .wpcf7 form.invalid .wpcf7-response-output,
.contact-form .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-form .wpcf7 form.payment-required .wpcf7-response-output {
  background: rgba(214, 35, 35, 0.15);
  border-left-color: #D62323;
}

/* server-side failure or spam-flagged */
.contact-form .wpcf7 form.failed .wpcf7-response-output,
.contact-form .wpcf7 form.aborted .wpcf7-response-output,
.contact-form .wpcf7 form.spam .wpcf7-response-output {
  background: rgba(214, 35, 35, 0.15);
  border-left-color: #D62323;
}

/* ---- per-field validation tooltip (small red text below a field) ----- */
.contact-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 4px;
  color: #D62323;
  font-size: 12px;
  line-height: 1.4;
}

/* invalid input itself — bottom-border in error red instead of white */
.contact-form .form-wrapper .form-floating .form-control.wpcf7-not-valid {
  border-bottom-color: #D62323;
}

/* ---- in-flight "sending..." spinner — keep it subtle ----------------- */
.contact-form .wpcf7-spinner {
  background-color: rgba(255, 255, 255, 0.6);
  margin-left: 16px;
}