/* tc-forms.css — Contact Form 7 and HubSpot presentation, ported from the
   fearless-aiims theme (source/tailwind/tailwind.css: the "CF7" block ~line 696,
   "Hubspot form" ~line 752, and .btn ~line 273).

   WHY THIS EXISTS
   Both form engines render their own markup, which Bricks does not own and
   cannot reach through element controls. The old theme styled them with Tailwind
   utilities the Bricks site does not compile, so both rendered unstyled — CF7 as
   a 24px grey system button with no field pills, HubSpot as bare inputs (260px
   tall against production's 508px).

   Scoped to `.wpcf7` and `.hbspt-form` — each engine's own wrapper — so nothing
   here can leak into Bricks' native form element (`.brxe-form`), which the TC CTA
   component uses.

   WHERE EACH FORM IS USED
     CF7 form 1336  blog single (4394 / b00025) AND whitepaper card heading area.
                    Production's blog sidebar uses this same 3-field form, so it
                    is correct as-is and must not be changed to suit whitepapers.
     HubSpot        whitepaper single (4478 / wp0017) via [tc_whitepaper_form],
                    which echoes the per-post ACF field `hubspot_form`.

   All values verified against production, July 30 2026.
   Colours use the --tc-* design tokens rather than literals.
*/

/* ══ shared: the white field pill ═══════════════════════════════════════════
   The theme applies this as a bare `div:has(> label)`, which catches CF7 field
   wrappers and HubSpot field wrappers alike. Scoped here to the two engines'
   own wrappers so it cannot style unrelated markup that happens to contain a
   label.

   KEEP THE `div:has(> label)` SHAPE — do not "simplify" the HubSpot half to
   `.hs-form-field`. The two are not equivalent: HubSpot renders a boolean
   checkbox with its label nested inside `.input > ul.inputs-list > li`, so the
   field div has NO direct label child and production leaves it unpadded. With
   `.hs-form-field` the referral-partner-program form's terms-and-conditions
   field picked up 28px of pill padding production does not have. Mirroring the
   selector's shape, not just its effect, is the rule here (see §5y). */
.wpcf7 div:has(> label),
.hbspt-form div:has(> label) {
  position: relative;
  border-radius: 8px;
  padding: 14px 24px;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* tailwind shadow-sm */
}

/* ══ CONTACT FORM 7 ═════════════════════════════════════════════════════════
   Field pill 52px tall; the label doubles as the placeholder and hides once the
   field has a value; orange submit 18px/27 600, radius 8, padding 12px 24px. */

.wpcf7 .fld-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.wpcf7 .fld-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

/* The theme source has `md:grid-cols-2` here, but production computes a SINGLE
   276px track in the sidebar it is actually used in, and two columns inside a
   328px sidebar would give 132px fields. Media queries are viewport-based, so a
   blanket md: rule cannot tell the two contexts apart. Single column matches
   production everywhere CF7 appears on this site; revisit if a wide CF7 form is
   ever added. */

.wpcf7 .fld-group label,
.wpcf7 .fld label {
  position: absolute;
  z-index: 1;
}

.wpcf7 label,
.wpcf7 input,
.wpcf7 select,
.wpcf7 textarea {
  position: relative;
  z-index: 10;
  background: transparent;
  color: var(--tc-gray-700, #495057);
}

.wpcf7 input,
.wpcf7 select,
.wpcf7 textarea {
  /* `display: block` removes the inline baseline gap that made each pill 57px
     instead of 52px — the same trap as the HubSpot inputs below. */
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  font-size: 16px;
  line-height: 24px;
}

.wpcf7 input:focus-visible,
.wpcf7 select:focus-visible,
.wpcf7 textarea:focus-visible {
  outline: none;
}

/* `has-value` is toggled by tc-forms.js, mirroring the old theme's main.js. */
.wpcf7 .has-value label {
  display: none;
}

.wpcf7 .fld-group .wpcf7-not-valid-tip {
  position: absolute;
  bottom: -20px;
  z-index: 20;
  font-size: 70%;
}

.wpcf7 div:has(> .wpcf7-submit) {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 24px;
}

/* `.btn-pri` is included alongside `.btn-primary` because CF7 form 1336's
   definition uses that class where production's markup uses `.btn-primary` —
   a difference in the form definition, not in the CSS. */
.wpcf7 .wpcf7-submit,
.wpcf7 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 473px;
  border: 0;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.wpcf7 .btn-primary,
.wpcf7 .btn-pri {
  background: var(--tc-brand, #F3740D);
  color: var(--tc-brand-on, #F8F9FA);
}

.wpcf7 .btn-primary:hover,
.wpcf7 .btn-pri:hover {
  background: var(--tc-brand-hover, #F99621);
  color: var(--tc-brand-on, #F8F9FA);
}

.wpcf7 .wpcf7-submit:focus-visible,
.wpcf7 .btn:focus-visible {
  outline: 2px solid var(--tc-brand, #F3740D);
  outline-offset: 2px;
}

.wpcf7 .wpcf7-spinner {
  position: absolute;
  top: 50%;
  z-index: 20;
  transform: translateY(-50%);
}

/* ══ HUBSPOT ════════════════════════════════════════════════════════════════
   HubSpot hides its labels and uses placeholders, so the visible control is the
   input itself: white, 0.8px grey border, radius 10, inside the shared pill. */

.hbspt-form .hs-form-field + .hs-form-field {
  margin-top: 12px;
}

/* NOT `display: none` here. Production does NOT hide HubSpot labels wholesale —
   tc-hubspot-forms.css (a verbatim copy of production's hubspot-forms.css) sets
   `.hs-form-field > label { display: block }` and hides it only when the span
   inside is empty:

     .hs-form-field > label:has(> span:empty:only-child) { display: none }

   Nearly every field on the CTA and sidebar forms has that empty label and
   relies on the placeholder, which is why a blanket `display: none` looked
   correct for months. The referral-partner-program form has fields with REAL
   labels — its Message field's label is 21px tall plus a 6px margin on
   production, and the blanket rule swallowed all 27px of it.

   Leaving this to tc-hubspot-forms.css keeps one source of truth, the same call
   made for the `.form-columns-2` gaps further down this file. */

/* HubSpot's own stylesheet pads AND borders this wrapper; production has neither.
   The padding made the input sit inset (254px instead of 280px); the 0.8px border
   cost 1.6px of width and 1.6px of height on every field — 8px over the form. */
.hbspt-form .input {
  padding: 0;
  border: 0;
}

/* The `.hs-form-field` qualifier lifts specificity above HubSpot's own width
   rule, and `display: block` removes the inline baseline gap that made each
   field wrapper 49.6px instead of 48px — 2px per field, 10px over the form. */
.hbspt-form .hs-form-field input[type="text"],
.hbspt-form .hs-form-field input[type="email"],
.hbspt-form .hs-form-field input[type="tel"],
.hbspt-form .hs-form-field input[type="number"],
.hbspt-form .hs-form-field select,
.hbspt-form .hs-form-field textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  background: #fff;
  color: var(--tc-ink, #212529);
  font-size: 16px;
  line-height: 24px;
  border: 0.8px solid var(--tc-gray-300, #CED4DA);
  border-radius: 10px;
  padding: 10px 16px;
  min-height: 48px; /* production renders 48; padding + line-height alone gives 46 */
}

.hbspt-form input::placeholder,
.hbspt-form textarea::placeholder {
  color: var(--tc-gray-500, #6C757D);
}

.hbspt-form input:focus-visible,
.hbspt-form select:focus-visible,
.hbspt-form textarea:focus-visible {
  outline: 2px solid var(--tc-primary, #0457A5);
  outline-offset: 1px;
}

.hbspt-form .actions {
  margin-top: 24px;
}

.hbspt-form .hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 14px 40px;
  min-height: 52px; /* production renders 52; padding + line-height alone gives 47 */
  background: var(--tc-brand, #F3740D);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 19.2px;
  letter-spacing: 0.32px;
  text-transform: capitalize;
  text-align: center;
  cursor: pointer;
  transition: background-color 150ms;
}

.hbspt-form .hs-button:hover {
  background: var(--tc-brand-hover, #F99621);
}

.hbspt-form .hs-error-msgs {
  text-align: left;
}

.hbspt-form .hs-error-msgs label {
  display: block;
  font-size: 10px;
  color: #dc2626;
}

.hbspt-form .hs_error_rollup {
  margin-top: 16px;
  padding: 12px;
}

.hbspt-form .hs_error_rollup label {
  display: block;
  width: 100%;
  text-align: center;
}

/* ── the wide CTA form ──────────────────────────────────────────────────────
   The theme scopes these to `.hbspt-form:has(.form-columns-2)` so they apply to
   the multi-column CTA form and not the single-column sidebar one.

   NOTE the row layout is deliberately NOT set here: the theme's Tailwind block
   makes `.form-columns-2` a flex row, but tc-hubspot-forms.css (loaded after,
   exactly as production loads hubspot-forms.css after main.min.css) makes it a
   12px-gap grid, and grid is what production actually computes. Leaving it to
   that file keeps one source of truth. */
.hbspt-form:has(.form-columns-2) {
  width: 100%;
  max-width: 969px;
  margin-left: auto;
  margin-right: auto;
}

.hbspt-form:has(.form-columns-2) .hs-submit {
  display: flex;
  justify-content: center;
  width: 100%;
}

.hbspt-form:has(.form-columns-2) .actions {
  width: 100%;
  max-width: 473px;
}

/* Row layout. tc-hubspot-forms.css sets `display: grid !important` and the
   column count, and wins those; but its `gap: 18px 24px` is only (0,1,1), so the
   theme's gap-3 (0,3,0) beats it — which is exactly what production computes.
   Reproducing that ranking here rather than delegating: dropping these rules
   gave 18px/24px gaps, 473px fields instead of 479, and a 24px short form. */
.hbspt-form:has(.form-columns-2) .form-columns-2 {
  gap: 12px;
}

.hbspt-form:has(.form-columns-2) .form-columns-2 + .form-columns-2 {
  margin-top: 12px;
}

.hbspt-form:has(.form-columns-2) .form-columns-2 .hs-form-field {
  margin-top: 0;
}