/*
 * Texas Ally — shared form style (.ta-form)
 *
 * Lifted from /careers/contact/ (page 2345978), which itself took it from the
 * /whats-my-home-worth/ form card. Previously pasted inline into every page that
 * used it; moved here 2026-08-18 so the ~70 form pages carry markup only.
 *
 * Every selector is namespaced under .ta-form — nothing here applies globally.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

/* ============================================================
   TEXAS ALLY — SHARED FORM STYLE
   Lifted verbatim from the /whats-my-home-worth/ form card so the
   site converges on ONE form treatment. Namespaced under .ta-form
   to avoid Divi/theme collisions.
   ============================================================ */

.ta-form {
  --ta-bg:         #ffffff;
  --ta-bg-alt:     #f5f7fa;
  --ta-bg-input:   #f7f9fb;
  --ta-ink:        #1a1d23;
  --ta-ink-soft:   #4a5160;
  --ta-ink-mute:   #8a909c;
  --ta-line:       #e4e7eb;
  --ta-brand:      #1b2a4a;
  --ta-brand-deep: #0e1729;
  --ta-accent:     #c9a84c;

  --ta-serif: 'Playfair Display', Georgia, serif;
  --ta-sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --ta-radius: 4px;
  --ta-shadow: 0 24px 60px -28px rgba(26, 24, 20, 0.18);

  font-family: var(--ta-sans);
  color: var(--ta-ink);
  background: var(--ta-bg);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ta-form *,
.ta-form *::before,
.ta-form *::after { box-sizing: border-box; }

.ta-form__container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- typography ---------- */

.ta-form__eyebrow {
  font-family: var(--ta-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ta-accent);
  margin: 0 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.ta-form__eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--ta-accent);
}

.ta-form h1,
.ta-form h2,
.ta-form h3 {
  font-family: var(--ta-serif);
  font-weight: 700;
  color: var(--ta-ink);
  line-height: 1.15;
  margin: 0;
}

/* The headline now sits inside the card, so it is sized as a card heading
   rather than a page hero -- this is most of the height reclaimed to keep the
   form above the fold. */
.ta-form h1 { font-size: clamp(26px, 2.5vw, 34px); letter-spacing: -0.01em; }
.ta-form h2 { font-size: clamp(24px, 3vw, 32px); }

/* ---------- section shell ----------
   Everything below is tuned so the whole section clears a 900px viewport
   (~824px of content under the 76px sticky header) without scrolling. */

.ta-form__section {
  padding: 20px 0 24px;
  position: relative;
  background:
    radial-gradient(circle at 90% 0%, rgba(201, 168, 76, 0.08), transparent 55%),
    var(--ta-bg);
}

.ta-form__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  /* Top-aligned, not centred: a long form (e.g. the 10-field home valuation) would
     otherwise strand the intro halfway down the column with a large empty gap above it. */
  align-items: start;
}

.ta-form__lead {
  font-size: 16px;
  color: var(--ta-ink-soft);
  margin: 0;
}

.ta-form__bullets {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
}
.ta-form__bullets li {
  padding: 9px 0 9px 26px;
  border-top: 1px solid var(--ta-line);
  position: relative;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ta-ink-soft);
}
.ta-form__bullets li:last-child { border-bottom: 1px solid var(--ta-line); }
.ta-form__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 19px;
  width: 14px;
  height: 1px;
  background: var(--ta-accent);
}

.ta-form__aside {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ta-ink-soft);
}
.ta-form__aside a {
  color: var(--ta-brand);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(27, 42, 74, 0.25);
}
.ta-form__aside a:hover { border-bottom-color: var(--ta-brand); }

/* ---------- the card ---------- */

.ta-form__card {
  background: #fff;
  padding: 24px 30px 18px;
  border-radius: var(--ta-radius);
  box-shadow: var(--ta-shadow);
  border: 1px solid var(--ta-line);
  /* Some host sections centre their text (e.g. the /home-value/ CTA band). Labels and
     fields must stay left-aligned regardless of what the page around the card does. */
  text-align: left;
}

.ta-form__card-eyebrow {
  font-family: var(--ta-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ta-accent);
  margin: 0 0 10px;
}

.ta-form__card h1,
.ta-form__card h2 {
  margin: 0 0 14px;
  line-height: 1.18;
}

/* === CF7 layout patch v2 (uniform-gap) ===================================
   CF7 nests fields into <p> blocks with <br> separators, then various plugins
   pile inconsistent !important margins on email/tel/select/textarea. The only
   way to get a uniform vertical rhythm without per-field overrides is to make
   the entire <form> a single flex column and let the parent gap control all
   spacing. `display:contents` collapses the <p> wrappers so every field-wrap
   becomes a direct flex child of <form>. Then we zero out per-input margins.
   ======================================================================== */
.ta-form__card form.wpcf7-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Paragraphs become layout-transparent — children promote to flex grandchildren. */
.ta-form__card form.wpcf7-form > p { display: contents; }

/* Hidden helpers shouldn't consume flex row slots. */
.ta-form__card form.wpcf7-form fieldset.hidden-fields-container,
.ta-form__card form.wpcf7-form input[type="hidden"],
.ta-form__card form.wpcf7-form br {
  display: none;
}

.ta-form__card form.wpcf7-form .wpcf7-response-output {
  flex: 1 1 100%;
  margin: 0;
}

/* Each visible field-wrap takes a full row by default. */
.ta-form__card form.wpcf7-form .wpcf7-form-control-wrap {
  display: block;
  flex: 1 1 100%;
  min-width: 0;
}

/* Kill ALL per-input margins so the flex gap is the only rhythm source. */
.ta-form__card form.wpcf7-form input,
.ta-form__card form.wpcf7-form select,
.ta-form__card form.wpcf7-form textarea {
  margin: 0 !important;
}

/* Cloudflare Turnstile widget container: full row, no extra inline margins. */
.ta-form__card form.wpcf7-form .cf7-cf-turnstile {
  flex: 1 1 100%;
  margin: 0 !important;
}

.ta-form__card form.wpcf7-form input[type="submit"] { flex: 1 1 100%; }

/* Pair First+Last into two columns on wider screens. */
@media (min-width: 480px) {
  .ta-form__card form.wpcf7-form .wpcf7-form-control-wrap[data-name="first-name"],
  .ta-form__card form.wpcf7-form .wpcf7-form-control-wrap[data-name="last-name"] {
    flex: 1 1 calc(50% - 5px);
  }
}

.ta-form__card label,
.ta-form__card .wpcf7-form label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ta-ink-mute);
  margin-bottom: 6px;
}

.ta-form__card input[type="text"],
.ta-form__card input[type="email"],
.ta-form__card input[type="tel"],
.ta-form__card select,
.ta-form__card textarea,
.ta-form__card .wpcf7-form-control:not(.wpcf7-submit) {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--ta-line);
  background: var(--ta-bg-input);
  border-radius: var(--ta-radius);
  font-family: var(--ta-sans);
  font-size: 15px;
  color: var(--ta-ink);
  transition: border-color 0.2s ease, background 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.ta-form__card input:focus,
.ta-form__card select:focus,
.ta-form__card textarea:focus {
  outline: none;
  border-color: var(--ta-brand);
  background: #fff;
}

/* Still the biggest field on the form, but trimmed so the section clears
   the fold. Users can drag it taller if they want to write more. */
.ta-form__card textarea {
  min-height: 64px;
  height: 64px;
  resize: vertical;
}

.ta-form__card input[type="submit"],
.ta-form__card .wpcf7-submit {
  width: 100%;
  padding: 14px;
  background: var(--ta-brand);
  color: #fff;
  border: none;
  border-radius: var(--ta-radius);
  font-family: var(--ta-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.25s ease;
  margin-top: 4px;
}
.ta-form__card input[type="submit"]:hover,
.ta-form__card .wpcf7-submit:hover { background: var(--ta-brand-deep); }

.ta-form__micro {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ta-ink-mute);
  line-height: 1.5;
  text-align: center;
}

/* ---------- thank-you variant ---------- */

.ta-form__done {
  padding: 110px 0 120px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(201, 168, 76, 0.10), transparent 60%),
    var(--ta-bg);
}
.ta-form__done-inner { max-width: 660px; margin: 0 auto; }
/* The thank-you headline is a page hero, not a card heading, so it opts back
   out of the compressed h1 size the contact card needs. */
.ta-form__done h1 { font-size: clamp(32px, 4vw, 46px); }
.ta-form__done .ta-form__eyebrow { justify-content: center; }
.ta-form__done h1 { margin-bottom: 20px; }
.ta-form__done p {
  font-size: 17px;
  color: var(--ta-ink-soft);
  margin: 0 0 18px;
}
.ta-form__next {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--ta-line);
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.ta-form__btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: var(--ta-radius);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.ta-form__btn--solid { background: var(--ta-brand); color: #fff; }
.ta-form__btn--solid:hover { background: var(--ta-brand-deep); color: #fff; }
.ta-form__btn--ghost {
  background: transparent;
  color: var(--ta-brand);
  border: 1px solid rgba(27, 42, 74, 0.30);
}
.ta-form__btn--ghost:hover { border-color: var(--ta-brand); background: #f7f9fb; color: var(--ta-brand); }

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .ta-form__grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 640px) {
  .ta-form__container { padding: 0 20px; }
  .ta-form__section { padding: 64px 0 72px; }
  .ta-form__done { padding: 72px 0 80px; }
  .ta-form__card { padding: 28px 22px; }
  .ta-form__next { flex-direction: column; }
}
/* === Labelled fields (phase 2, 2026-08-18) ================================
   Every field gets a real <label for> so screen readers, browser autofill and
   AI agents can name it. Placeholders stay, but only as secondary instruction.

   LAYOUT NOTE — why fields are wrapped in .ta-field:
   The form above is a flex container and CF7's <p> wrappers are display:contents,
   so every control-wrap is a direct flex child. Dropping a bare <label> beside a
   field would make the label its OWN flex item — it would claim a row and break
   the first/last-name pairing. Wrapping label+control in .ta-field keeps exactly
   one flex item per field, which is what the gap-based rhythm assumes.

   The older .wpcf7-form-control-wrap rules are left intact so forms that have not
   been migrated yet keep working unchanged.
   ======================================================================== */

.ta-form__card form.wpcf7-form .ta-field {
  display: block;
  flex: 1 1 100%;
  min-width: 0;
}

/* A wrapped field must not double up the row: the inner control-wrap goes inert. */
.ta-form__card form.wpcf7-form .ta-field .wpcf7-form-control-wrap {
  display: block;
  flex: none;
  width: 100%;
}

/* Pair First + Last into two columns, same breakpoint as the legacy rule. */
@media (min-width: 480px) {
  .ta-form__card form.wpcf7-form .ta-field--first-name,
  .ta-form__card form.wpcf7-form .ta-field--last-name {
    flex: 1 1 calc(50% - 5px);
  }
}

/* Labels inherit the existing .ta-form__card label treatment (uppercase micro-caps);
   only the required marker needs adding. */
.ta-form__card .ta-field label .ta-req {
  color: var(--ta-accent, #b8860b);
  margin-left: 2px;
}

/* Placeholder is secondary to the label — lighten it so the label reads as primary. */
.ta-form__card form.wpcf7-form ::placeholder {
  color: var(--ta-ink-mute);
  opacity: 0.62;
}

/* === Navy band variant ====================================================
   Add `ta-form--navy` alongside `ta-form` when the form section needs to read as
   a distinct band. /home-value/ sits directly below a white FAQ section, so the
   default white band merged into it and the CTA stopped registering as its own
   section. Gradient is the one that section originally used.

   Scope note: ONLY the band and the intro column recolour. The card keeps its
   white background and dark heading, so the form itself stays byte-for-byte the
   site standard — this is a section treatment, not a second form style.
   ======================================================================== */

.ta-form--navy .ta-form__section {
  background: linear-gradient(135deg, #1b2a4a 0%, #1e3a5f 55%, #2c6a9e 130%);
}

/* Intro column only — everything inside .ta-form__card is deliberately untouched. */
.ta-form--navy .ta-form__intro .ta-form__lead,
.ta-form--navy .ta-form__intro .ta-form__bullets li,
.ta-form--navy .ta-form__intro .ta-form__aside {
  color: rgba(255, 255, 255, 0.84);
}

.ta-form--navy .ta-form__intro .ta-form__bullets li { border-top-color: rgba(255, 255, 255, 0.18); }
.ta-form--navy .ta-form__intro .ta-form__bullets li:last-child { border-bottom-color: rgba(255, 255, 255, 0.18); }

.ta-form--navy .ta-form__intro .ta-form__aside a {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.45);
}
.ta-form--navy .ta-form__intro .ta-form__aside a:hover { border-bottom-color: #ffffff; }

/* The gold eyebrow already has enough contrast on navy; lift it slightly so the
   rule and label read at the same weight as they do on the light band. */
.ta-form--navy .ta-form__intro .ta-form__eyebrow { color: #d8bd6b; }
.ta-form--navy .ta-form__intro .ta-form__eyebrow::before { background: #d8bd6b; }

/* === Single-column variant (2026-08-19) ===================================
   For pages that are nothing but the form — there is no aside column for the
   card to sit beside, so .ta-form__grid's two-column split does not apply.
   Narrows the container to the card's natural reading width and stacks the
   intro above it.

   Added when /agents/profile-information-form/ was converted off its own
   page-local CSS (a full second form theme in Poppins, with its own Google
   Fonts link). Keeping the width rule here rather than inline on the page is
   the point of the shared file: the pages carry markup only.
   ======================================================================== */

.ta-form--single .ta-form__container { max-width: 720px; }

.ta-form--single .ta-form__intro { margin-bottom: 30px; }

.ta-form--single .ta-form__intro h1,
.ta-form--single .ta-form__intro h2 { margin: 0 0 12px; }

/* === Radio / checkbox groups (2026-08-19) =================================
   First needed by /unsubscribe/ — no .ta-form form had used a choice group
   before, so two rules written for text inputs were catching them:

     * `.ta-form__card .wpcf7-form-control:not(.wpcf7-submit)` gave the GROUP
       wrapper an input's background, border and 11px/14px padding — a tinted
       box drawn around the options for no reason.
     * `.ta-form__card label` is the field-label treatment (12px uppercase
       micro-caps, muted). It also hit the per-option <label>, rendering the
       choices as unreadable grey capitals. An option is body copy, not a label.

   Kept at single-class specificity so a page that already styles its own
   choice group (e.g. the /home-value/ HOA acknowledgement) still wins.
   ======================================================================== */

.ta-form__card .wpcf7-form-control.wpcf7-radio,
.ta-form__card .wpcf7-form-control.wpcf7-checkbox,
.ta-form__card .wpcf7-form-control.wpcf7-acceptance {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
}

.ta-form__card .wpcf7-list-item {
  display: block;
  margin: 0;
}

/* The option's own label: body copy, and the whole row is the click target. */
.ta-form__card .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ta-ink);
  cursor: pointer;
}

.ta-form__card .wpcf7-list-item input[type="radio"],
.ta-form__card .wpcf7-list-item input[type="checkbox"] {
  flex: none;
  width: auto;
  margin: 3px 0 0;
  accent-color: var(--ta-brand);
}