/* =========================================================================
   assets/css/forms/es-forms.css
   ONE FORM DESIGN, SITE-WIDE  ·  owner's revision, 17 Sep 2026

   Every lead form on the site takes the look of the token form partials
   (template-parts/forms/consultation-form.php and hiring-model-form.php):
   13px/16px field padding, 12px radius, --bg-page field ground, a
   --border-default hairline, a soft brand focus ring, labels in the heading
   ink, and the house outlined pill for the submit.

   CSS ONLY, ON PURPOSE. The legacy forms post to inc/form-handler.php by
   field name, and their JS (custom.js, job-form.js, the careers modal) reads
   their ids and classes. Nothing in the markup is renamed, so every handler,
   reCAPTCHA check and dataLayer hook keeps working. The forms are matched by
   their existing wrappers below and this file is enqueued site-wide, after
   utilities.css, so it wins over Bootstrap's .form-control and style.css.

   Also fixes the scrollbar audit (item 16): the reCAPTCHA wrappers were set
   to `overflow-x: auto`, which forces overflow-y to auto too, and the 78px
   iframe inside a 76px box drew the site's orange scrollbar beside the
   widget. Captcha boxes are `overflow: visible` now and scale down on a
   narrow phone instead of scrolling, and no form or field shows a scrollbar.

   Search forms (.es-search, .search-form) are deliberately not matched.
   ========================================================================= */

/* The forms this file owns. Extend this list when a new form ships. */
:is(
  form.es-form,
  .contact-form-wrap form,
  form.hiring-model-form,
  #job-application-form,
  #india-consultation-form,
  .wl-form-card form,
  form.lead-form,
  form.es-promo__form,
  .talk-business-form
) {
  --es-field-pad-y: 13px;
  --es-field-pad-x: var(--space-4);
  scrollbar-width: none;
}

/* ── Fields ─────────────────────────────────────────────── */
:is(form.es-form, .contact-form-wrap form, form.hiring-model-form, #job-application-form, #india-consultation-form, .wl-form-card form, form.lead-form, form.es-promo__form, .talk-business-form)
  :is(input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], :not([type])), select, textarea) {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: var(--es-field-pad-y) var(--es-field-pad-x);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--bg-page);
  box-shadow: none;
  color: var(--text-heading);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.4;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background-color var(--duration-fast);
}

:is(form.es-form, .contact-form-wrap form, form.hiring-model-form, #job-application-form, #india-consultation-form, .wl-form-card form, form.lead-form, form.es-promo__form, .talk-business-form) select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--es-field-pad-x) * 2.5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23787168' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right var(--es-field-pad-x) center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
}

/* No scrollbar on a message box: it grows by dragging instead, and a long
   message still scrolls with the wheel or keyboard. */
:is(form.es-form, .contact-form-wrap form, form.hiring-model-form, #job-application-form, #india-consultation-form, .wl-form-card form, form.lead-form, form.es-promo__form, .talk-business-form) textarea {
  min-height: 108px;
  resize: vertical;
  overflow-y: auto;
  scrollbar-width: none;
}

:is(form.es-form, .contact-form-wrap form, form.hiring-model-form, #job-application-form, #india-consultation-form, .wl-form-card form, form.lead-form, form.es-promo__form, .talk-business-form) :is(textarea, select, div)::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

:is(form.es-form, .contact-form-wrap form, form.hiring-model-form, #job-application-form, #india-consultation-form, .wl-form-card form, form.lead-form, form.es-promo__form, .talk-business-form) :is(input, textarea)::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

:is(form.es-form, .contact-form-wrap form, form.hiring-model-form, #job-application-form, #india-consultation-form, .wl-form-card form, form.lead-form, form.es-promo__form, .talk-business-form) :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--brand-400);
  background-color: var(--bg-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 12%, transparent);
}

/* Validation states set by custom.js / job-form.js. */
:is(form.es-form, .contact-form-wrap form, form.hiring-model-form, #job-application-form, #india-consultation-form, .wl-form-card form, form.lead-form, form.es-promo__form, .talk-business-form) :is(input, select, textarea):is(.error, [aria-invalid="true"]) {
  border-color: var(--brand-600);
}

:is(form.es-form, .contact-form-wrap form, form.hiring-model-form, #job-application-form, #india-consultation-form, .wl-form-card form, form.lead-form, form.es-promo__form, .talk-business-form) :is(.error-message, label.error) {
  display: block;
  margin-top: var(--space-1);
  color: var(--brand-700);
  font-size: var(--fs-caption);
  font-weight: var(--font-medium, 500);
}

/* ── Labels and rhythm ──────────────────────────────────── */
:is(form.es-form, .contact-form-wrap form, form.hiring-model-form, #job-application-form, #india-consultation-form, .wl-form-card form, form.lead-form, form.es-promo__form, .talk-business-form) label:not(.form-check-label):not(.file-upload-label):not(.error):not(.es-sr-only) {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text-heading);
  font-size: var(--fs-caption);
  font-weight: var(--font-semibold);
  line-height: 1.35;
}

:is(.contact-form-wrap form, form.hiring-model-form, #job-application-form, #india-consultation-form, .talk-business-form) .form-group {
  margin-bottom: var(--space-3);
}

/* ── File upload ────────────────────────────────────────── */
:is(.contact-form-wrap form, #job-application-form, .talk-business-form) .file-upload-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-page);
  color: var(--text-body);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: border-color var(--duration-fast), background-color var(--duration-fast);
}

:is(.contact-form-wrap form, #job-application-form, .talk-business-form) .file-upload-label:hover {
  border-color: var(--brand-400);
  background: var(--brand-50);
}

:is(.contact-form-wrap form, #job-application-form, .talk-business-form) .dashed-line { display: none; }

/* ── Radios and checkboxes ──────────────────────────────── */
:is(form.es-form, .contact-form-wrap form, form.hiring-model-form, .wl-form-card form) input:is([type="radio"], [type="checkbox"]) {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-500);
}

/* ── Submit ─────────────────────────────────────────────────
   The house primary pill (utilities.css .es-btn--primary): transparent,
   orange border, black label, orange chevrons, from the --btn-primary-* tokens. Legacy buttons keep
   their class and their inner SVG, only the paint changes. */
:is(.contact-form-wrap form, form.hiring-model-form, #job-application-form, #india-consultation-form, .wl-form-card form, form.lead-form, .talk-business-form) :is(button[type="submit"], input[type="submit"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin-top: var(--space-2);
  padding: 12px var(--space-6);
  border: 1px solid var(--btn-primary-edge);
  border-radius: var(--radius-full);
  background: var(--btn-primary-bg);
  box-shadow: none;
  color: var(--btn-primary-ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--font-semibold);
  line-height: 20px;
  cursor: pointer;
  transition: transform var(--duration-slow) var(--ease-out), background-color var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out);
}

:is(.contact-form-wrap form, form.hiring-model-form, #job-application-form, #india-consultation-form, .wl-form-card form, form.lead-form, .talk-business-form) :is(button[type="submit"], input[type="submit"]):is(:hover, :focus-visible) {
  border-color: var(--btn-primary-edge);
  background: var(--btn-primary-bg-hover);
  color: var(--btn-primary-ink);
}

:is(.contact-form-wrap form, form.hiring-model-form, #job-application-form, #india-consultation-form, .wl-form-card form, form.lead-form, .talk-business-form) :is(button[type="submit"]) :is(svg, svg path) {
  color: var(--btn-primary-mark);
  fill: currentColor;
}

:is(.contact-form-wrap form, form.hiring-model-form, #job-application-form, #india-consultation-form, .wl-form-card form, form.lead-form, .talk-business-form) :is(button[type="submit"]):disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

/* ── reCAPTCHA: no scrollbar, anywhere ──────────────────── */
.es-form__captcha,
.recaptcha-wrap,
:is(form.es-form, .contact-form-wrap form, form.hiring-model-form, #job-application-form, #india-consultation-form, .wl-form-card form, .talk-business-form) :is(.form-group, div):has(> .g-recaptcha) {
  overflow: visible;
  scrollbar-width: none;
}

.g-recaptcha {
  min-height: 78px;
  margin-block: var(--space-2);
}

/* The widget is a fixed 304px iframe. On a very narrow card it is scaled
   rather than scrolled, so there is never a scrollbar beside it. */
@media (max-width: 380px) {
  .g-recaptcha {
    transform: scale(0.88);
    transform-origin: left top;
    min-height: 70px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.contact-form-wrap form, form.hiring-model-form, #job-application-form, #india-consultation-form, .wl-form-card form, form.lead-form, .talk-business-form) :is(button[type="submit"]):hover { transform: none; }
}

/* ── Icon fields: the wrapper is the box ────────────────────
   A field built as .es-field__control (icon + input, e.g. the blog's free
   CRO audit card) draws its border, fill and focus ring on the wrapper. The
   input inside must stay unstyled, or the skin above paints a second box
   inside the first. Same :is() prefix, so it outranks the rules above. */
:is(form.es-form, .contact-form-wrap form, form.hiring-model-form, #job-application-form, #india-consultation-form, .wl-form-card form, form.lead-form, form.es-promo__form, .talk-business-form)
  .es-field__control :is(input, input:focus, input:hover) {
  min-height: 0;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}