/*
 * lead-gate.css — The lead form (estimator gate card + /contact)
 * ═══════════════════════════════════════════════════════════════════════
 * PATH: public/css/lead-gate.css
 * ROLE: Only the rules the trimmed lead form needs, ported from
 *       /var/www/ispecllc/css/contact.css (2026-10-05) so the subdomain form
 *       reads exactly like the ispecllc.com contact form: .contact-field,
 *       .contact-input (+ data-valid states), .contact-hint,
 *       .contact-error-text, .contact-consent, .contact-trap (honeypot),
 *       .contact-captcha (+ note), .contact-actions, .contact-btn,
 *       .contact-alert, .contact-success. ispecllc's #consent-error id rule
 *       became the .contact-consent-error class. Plus the gate-card frame
 *       (.estimate-gate*) and the form card (.lead-form-*), which are new.
 *       Visibility is the `hidden` attribute (Bootstrap's reboot makes it
 *       display:none !important); field state is data-valid, set by
 *       public/js/form.js.
 * TOKENS: --ink --ink-soft --muted --ground --paper --line --teal --teal-bright
 *       --teal-deep --teal-tint --band --display --serif --ease (css/site-shell.css)
 * USED BY: any page including app/Views/public/partials/lead_form.php
 *          (estimator shell, contact page)
 * Created: 2026-10-07
 * Last Modified: 2026-10-07
 */

/* ── gate card (estimator result step) ───────────────── */
.estimate-gate {
  margin-top: 2rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--teal);
  border-radius: 10px;
  background: var(--ground);
}
.estimate-gate-title {
  margin: 0 0 .5rem;
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--ink);
}
.estimate-gate-intro {
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ── form card ───────────────────────────────────────── */
.lead-form-card {
  min-width: 0;
}
.lead-form-title {
  margin: 0 0 1.25rem;
  padding-bottom: .65rem;
  border-bottom: 2px solid var(--teal);
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--ink);
}
.lead-form-note {
  margin-top: 1rem;
}

/* ── fields ──────────────────────────────────────────── */
.contact-field {
  display: grid;
  gap: .3rem;
  margin-bottom: 1.35rem;
}
.contact-field label {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-required {
  color: #b02a37;
}
.contact-input {
  width: 100%;
  margin: 0;
  padding: .65rem .8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: none;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.contact-input:focus {
  outline: none;
  border-color: var(--teal-deep);
  box-shadow: 0 0 0 3px var(--teal-tint);
}
.contact-input[data-valid="true"] {
  border-color: var(--teal);
}
.contact-input[data-valid="false"] {
  border-color: #b02a37;
}
.contact-hint {
  margin: 0;
  font-family: var(--serif);
  font-size: .88rem;
  line-height: 1.45;
  color: var(--muted);
}
/* error copy is hidden until the control is marked invalid (or, for the
   consent line, until form.js drops its hidden attribute) */
.contact-error-text {
  display: none;
  margin: 0;
  font-family: var(--serif);
  font-size: .88rem;
  line-height: 1.45;
  color: #b02a37;
}
.contact-input[data-valid="false"] ~ .contact-error-text {
  display: block;
}
.contact-consent-error {
  display: block;
  margin: -.35rem 0 0;
}
.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 1.5rem 0 .6rem;
  font-family: var(--serif);
  font-size: .97rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.contact-consent input {
  width: auto;
  margin: .25rem 0 0;
  flex: 0 0 auto;
}
.contact-consent label {
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  color: inherit;
}

/* honeypot — off screen rather than display:none, which bots skip */
.contact-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
}

/* ── reCAPTCHA v2 checkbox ───────────────────────────────
   The widget is a fixed 304x78 iframe Google injects; reserving its height
   stops the button jumping when it arrives. */
.contact-captcha {
  min-height: 78px;
  margin: 1.5rem 0 0;
}
.contact-captcha-note {
  margin: .75rem 0 0;
}

/* ── buttons ─────────────────────────────────────────── */
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .8rem;
  margin-top: 1.75rem;
}
.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.5rem;
  border: 1px solid var(--teal);
  border-radius: 999px;
  background: var(--teal);
  color: var(--band);
  font-family: var(--display);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.contact-btn:hover,
.contact-btn:focus-visible {
  background: var(--teal-bright);
  border-color: var(--teal-bright);
  color: var(--band);
}
.contact-btn[disabled] {
  opacity: .6;
  cursor: default;
}

/* ── success + error ─────────────────────────────────── */
.contact-success {
  text-align: center;
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
}
.contact-success-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 1.25rem;
  color: var(--teal);
}
.contact-success-title {
  margin: 0 0 .9rem;
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--ink);
}
.contact-success p {
  max-width: 34rem;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.contact-success .lead-print-action {
  margin-top: 1.25rem;
}
/* scoped past the .contact-success p rule above, which would otherwise win
   the margin with its element+class specificity */
.contact-success .contact-success-tag {
  margin-top: 1.5rem;
  font-family: var(--display);
  letter-spacing: .08em;
  color: var(--ink);
}
.contact-alert {
  margin: 1.25rem 0 0;
  padding: .9rem 1.1rem;
  border: 1px solid #f0c2c7;
  border-left: 4px solid #b02a37;
  border-radius: 8px;
  background: #fdf2f3;
  font-family: var(--serif);
  font-size: .97rem;
  line-height: 1.55;
  color: #8a222c;
}

/* ── responsive ──────────────────────────────────────── */
@media (max-width: 560px) {
  .contact-actions {
    flex-direction: column-reverse;
  }
  .contact-btn {
    width: 100%;
  }
  /* the 304px widget would overflow a 320px screen's column — scale it the
     way ispecllc's contact page does; scale() keeps the 304px layout box, the
     page frame's overflow-x: clip stops it side-scrolling */
  .contact-captcha {
    transform: scale(.85);
    transform-origin: top left;
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact-input,
  .contact-btn {
    transition: none;
  }
}