/* ============================================================================
   CMP Contact Form — native form styling.
   Ports frontend-v1 ContactForm.tsx: mono uppercase field labels, warm card
   surface, amber focus ring, 2-up name/email grid that stacks on mobile.
   All colors via design tokens; accent overridable per-instance via --cmp-accent.
   Auto-loads as cmp-w-cmp-contact-form (handle registered in inc/elementor.php).
   ========================================================================== */

.cmp-contact {
  --cmp-accent: var(--amber);
  --cmp-accent-hover: var(--amber-hover);
  --cmp-accent-text: var(--amber-text);
  --cmp-accent-tint: var(--amber-tint);
  --cmp-accent-tint-border: var(--amber-tint-border);
  position: relative;
}

.cmp-contact__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.cmp-contact__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 52ch;
}
.cmp-contact__head[style*="center"] { margin-inline: auto; }

.cmp-contact__title {
  margin: 0;
}

.cmp-contact__intro {
  margin: 0;
  font-size: 1.075rem;
  line-height: 1.6;
  color: var(--body);
}

/* ── Form card ───────────────────────────────────────────────────────────── */
.cmp-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--card);
  border: 1px solid var(--border-hair);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 2.4vw, 2.5rem);
  box-shadow: var(--shadow-rest);
}

/* name + email side by side on wider viewports */
.cmp-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.cmp-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* mono uppercase kicker label (ContactForm.tsx Field) */
.cmp-form__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.cmp-form__input,
.cmp-form__textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--border-hair);
  border-radius: var(--r-sm);
  padding: 0.7rem 0.9rem;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}

.cmp-form__input::placeholder,
.cmp-form__textarea::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

.cmp-form__textarea {
  resize: vertical;
  min-height: 7.5rem;
}

.cmp-form__input:hover,
.cmp-form__textarea:hover {
  border-color: var(--border-strong);
}

.cmp-form__input:focus,
.cmp-form__textarea:focus,
.cmp-form__input:focus-visible,
.cmp-form__textarea:focus-visible {
  border-color: var(--cmp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cmp-accent) 18%, transparent);
}

/* invalid state after the browser has validated (keeps idle fields clean) */
.cmp-form__input:user-invalid,
.cmp-form__textarea:user-invalid {
  border-color: var(--error);
}

/* ── Honeypot — visually hidden, never shown to humans / AT ──────────────── */
.cmp-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Actions + button ────────────────────────────────────────────────────── */
.cmp-form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.cmp-form__submit {
  background: var(--cmp-accent);
  color: var(--on-amber);
}
.cmp-form__submit:hover {
  background: var(--cmp-accent-hover);
  box-shadow: var(--amber-glow);
}
.cmp-form__submit:disabled {
  opacity: 0.65;
  cursor: progress;
  box-shadow: none;
}
.cmp-form__submit-icon {
  display: inline-flex;
  align-items: center;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.cmp-form__submit:hover .cmp-form__submit-icon { transform: translateX(3px); }
.cmp-form__submit-icon svg { width: 1em; height: 1em; fill: currentColor; }

/* sending feedback on the form */
.cmp-form.is-sending { cursor: progress; }

/* ── Status line ─────────────────────────────────────────────────────────── */
.cmp-form__status {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--body);
}
.cmp-form__status:empty { display: none; }
.cmp-form__status.is-sending { color: var(--muted); }
.cmp-form__status.is-success {
  color: var(--green);
  font-weight: 600;
}
.cmp-form__status.is-error {
  color: var(--error);
  font-weight: 600;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .cmp-form__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .cmp-form {
    padding: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
  }
  .cmp-form__label {
    font-size: 0.68rem;
  }
}

/* full-width button (Style > Full-width Button switch) */
.cmp-form--block-btn .cmp-form__actions { display: block; }
.cmp-form--block-btn .cmp-btn--block { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .cmp-form__input,
  .cmp-form__textarea,
  .cmp-form__submit,
  .cmp-form__submit-icon {
    transition: none;
  }
}

/* optional-field hint (contact Phone) */
.cmp-form__optional { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ── 2-column layout with "Reach us directly" sidebar (ContactForm twin) ── */
.cmp-contact__layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) { .cmp-contact__layout--split { grid-template-columns: 7fr 5fr; gap: 3rem; } }

.cmp-contact__card { border: 1px solid var(--border-hair); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-rest); padding: 1.75rem; }
.cmp-contact__aside-eyebrow { margin-bottom: 1.25rem; }
.cmp-contact__info { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.cmp-contact__info li { display: flex; gap: 0.75rem; align-items: flex-start; }
.cmp-contact__info-icon { display: grid; place-items: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 50%; background: var(--amber-tint); color: var(--amber-text); }
.cmp-contact__info-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.cmp-contact__info-label { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.cmp-contact__info-value { font-family: var(--font-display); font-size: 0.98rem; font-weight: 600; color: var(--ink); word-break: break-word; }
a.cmp-contact__info-value:hover { color: var(--amber-text); }
.cmp-contact__aside-rule { margin: 1.5rem 0; }
.cmp-contact__aside-h { margin: 0 0 0.35rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.cmp-contact__aside-p { margin: 0 0 1.25rem; font-size: 0.9rem; line-height: 1.55; color: var(--muted); }