/*
 * Reusable contact form presentation.
 *
 * Site-specific appearance is controlled through --cf-* custom properties.
 * The component does not depend on any particular website's CSS variables.
 */

.contact-form {
  --cf-background: #ffffff;
  --cf-text: #202733;
  --cf-muted: #4d5a68;
  --cf-border: #d9e2ec;
  --cf-accent: #003366;
  --cf-accent-text: #ffffff;
  --cf-focus: #0066cc;
  --cf-error: #9a3412;
  --cf-radius: 10px;
  --cf-spacing: 18px;

  box-sizing: border-box;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  background: var(--cf-background);
  color: var(--cf-text);
}

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

.contact-form .cf-field {
  margin-bottom: var(--cf-spacing);
}

.contact-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--cf-text);
}

.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  background: #ffffff;
  color: var(--cf-text);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
}

.contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form button:focus-visible {
  outline: 3px solid var(--cf-focus);
  outline-offset: 2px;
}

.contact-form .cf-help {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--cf-muted);
}

.contact-form .cf-submit {
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--cf-radius);
  background: var(--cf-accent);
  color: var(--cf-accent-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.contact-form .cf-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.contact-form .cf-status {
  margin: 16px 0 0;
  font-size: 16px;
  color: var(--cf-text);
}

.contact-form .cf-status[data-state="error"] {
  color: var(--cf-error);
}

.contact-form .cf-honeypot {
  display: none;
}

.contact-form .cf-honeypot input {
  display: none;
}


/*
 * Component-owned text colors.
 * Increased specificity helps prevent host-page paragraph rules
 * from overriding form feedback and explanatory text.
 */
.contact-form.contact-form .cf-help {
  color: var(--cf-muted);
}

.contact-form.contact-form .cf-status {
  color: var(--cf-text);
}

.contact-form.contact-form .cf-status[data-state="error"] {
  color: var(--cf-error);
}