/*
 * Contact Form 7 — Hero landing form styles
 *
 * Loaded on pages/landing-page.php and pages/contact-us.php — the only two
 * templates that host the generated CF7 form. Every rule is scoped with
 * :is(.hero__form-card, .contact-info__form-wrapper) so the stylesheet
 * works under both supported host wrappers without any global CF7 leakage:
 * .hero__form-card on the Landing page, .contact-info__form-wrapper on the
 * Contact page.
 *
 * The compiled Hero CSS (dist/assets/hero.*.css) only loads on the landing
 * template, so this stylesheet OWNS every visual rule the generated form
 * needs (title, groups/labels, controls, select arrow, textarea sizing,
 * two-column row, submit states) on both hosts. Design values mirror
 * dist/assets/hero.BpAFHY3u.css. Host wrappers themselves are never restyled
 * here: the wrapper card layout, padding, and background stay owned by the
 * compiled Hero/Contact stylesheets.
 *
 * :is() keeps the host-wrapper condition in the specificity math (one
 * class per single-class argument) instead of the zero-specificity
 * :where() scoping used before, so the CF7 structural rules below strictly
 * outrank Contact Form 7's own defaults —
 *   .wpcf7 form .wpcf7-response-output                    (0,2,1) → beaten by (0,3,0)
 *   .wpcf7 form.sent|failed|... .wpcf7-response-output   (0,3,1) → beaten by (0,4,0)
 * — regardless of stylesheet order, while never styling either host
 * wrapper element itself. No global .wpcf7 or .hero__form rule exists
 * outside wrapper scope. CF7 wrapper (wpcf7 root, form, control wraps,
 * response output, validation tips, spinner) keeps the templates/hero.php
 * card design. Status colors below intentionally mirror CF7's own semantic
 * states (sent/failed/invalid) using the design system palette; the
 * generated form states are form.hero__form[data-status=...].
 */

/* ── CF7 root + form reset ─────────────────────────────────────────────── */

:is(.hero__form-card, .contact-info__form-wrapper) .wpcf7 {
  width: 100%;
}

:is(.hero__form-card, .contact-info__form-wrapper) .wpcf7 form.hero__form {
  position: relative;
  margin: 0;
  padding: 0;
}

/* ── Form title (generated h2.hero__form-title) ────────────────────────── */

:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .hero__form-title {
  color: #0f172a;
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
}

/* ── Groups + labels ───────────────────────────────────────────────────── */

:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .hero__form-group {
  margin-bottom: 1rem;
}

:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .hero__form-group
  label {
  display: block;
  color: #334155;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
}

/* ── Controls: input / select / textarea ────────────────────────────────── */

:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .hero__form-group
  input,
:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .hero__form-group
  select,
:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .hero__form-group
  textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  color: #1e293b;
  background-color: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  font-size: 1rem;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .hero__form-group
  input::placeholder,
:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .hero__form-group
  select::placeholder,
:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .hero__form-group
  textarea::placeholder {
  color: #94a3b8;
}

:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .hero__form-group
  input:focus,
:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .hero__form-group
  select:focus,
:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .hero__form-group
  textarea:focus {
  border-color: #2563eb;
  outline: none;
  box-shadow: 0 0 0 3px #2563eb26;
}

/* Select: custom arrow, mirroring the compiled hero select. */
:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .hero__form-group
  select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  padding-right: 36px;
}

:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .hero__form-group
  textarea {
  resize: vertical;
  min-height: 100px;
}

/* ── Two-column row (phone + zip) ──────────────────────────────────────── */

:is(.hero__form-card, .contact-info__form-wrapper) .hero__form .hero__form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  :is(.hero__form-card, .contact-info__form-wrapper)
    .hero__form
    .hero__form-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Submit button ─────────────────────────────────────────────────────── */

:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .hero__form-submit {
  width: 100%;
  padding: 1rem;
  color: #fff;
  cursor: pointer;
  background-color: #2563eb;
  border: none;
  border-radius: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  transition: background-color 0.15s;
}

:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .hero__form-submit:hover {
  background-color: #1d4ed8;
}

:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .hero__form-submit:active {
  transform: translateY(1px);
}

:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .hero__form-submit:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* ── CF7 control wraps ─────────────────────────────────────────────────── */

/* CF7 wraps every control in a relative span; make it behave like the
   fallback label + block input layout. */
:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .wpcf7-form-control-wrap {
  position: relative;
  display: block;
  margin: 0;
}

/* Full-width controls inherit color, padding, border, radius, and
   typography from the .hero__form-group input/select/textarea rules above;
   only full width is restated so any control missing those rules still
   fills the row. This rule must not declare font-size: the generated
   submit also carries wpcf7-form-control, and at equal specificity a
   later font-size here would override the 1.125rem hero submit size. */
:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .wpcf7-form-control {
  width: 100%;
}

:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .wpcf7-form-control:focus {
  border-color: #2563eb;
  outline: none;
  box-shadow: 0 0 0 3px #2563eb26;
}

/* ── CF7 validation state ──────────────────────────────────────────────── */

:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .wpcf7-form-control[aria-invalid="true"] {
  border-color: #dc2626;
}

:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #dc2626;
}

/* ── CF7 submission response output ────────────────────────────────────── */

/* (CF7 hides it again in init/submitting states.) */
:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form
  .wpcf7-response-output {
  margin: 0.75rem 0 0;
  padding: 0.75rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form[data-status="sent"]
  .wpcf7-response-output {
  color: #166534;
  background-color: #f0fdf4;
  border-color: #bbf7d0;
}

:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form[data-status="failed"]
  .wpcf7-response-output,
:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form[data-status="aborted"]
  .wpcf7-response-output,
:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form[data-status="spam"]
  .wpcf7-response-output {
  color: #991b1b;
  background-color: #fef2f2;
  border-color: #fecaca;
}

/* Deliberately multiline selector: exercises multiline selector parsing in
   the harness scoping check. */
:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form[data-status="invalid"]
  .wpcf7-response-output,
:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form[data-status="unaccepted"]
  .wpcf7-response-output,
:is(.hero__form-card, .contact-info__form-wrapper)
  .hero__form[data-status="payment-required"]
  .wpcf7-response-output {
  color: #92400e;
  background-color: #fffbeb;
  border-color: #fde68a;
}

/* ── CF7 submit + spinner ──────────────────────────────────────────────── */

/* Keep the full-width hero button; overlay the spinner while submitting so
   layout never shifts. */
:is(.hero__form-card, .contact-info__form-wrapper) .hero__form .wpcf7-submit {
  width: 100%;
}

:is(.hero__form-card, .contact-info__form-wrapper) .hero__form .wpcf7-spinner {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin: 0 0 0 -12px;
}