/*
 * contact-form.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Styles for the contact form module (contact-form.js).
 * All selectors are prefixed with .cf- to avoid collisions with page styles.
 * Loaded by index.html via <link rel="stylesheet">.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Form layout ─────────────────────────────────────────────── */
.cf-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Field wrapper ───────────────────────────────────────────── */
.cf-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Labels ──────────────────────────────────────────────────── */
.cf-form label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  font-family: Arial, sans-serif;
}
.cf-req { color: #b8972c; }

/* ── Inputs, selects, textarea ───────────────────────────────── */
.cf-form input,
.cf-form select,
.cf-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-family: Georgia, serif;
  font-size: 15px;
  transition: border-color 0.15s, background 0.15s;
}
.cf-form input:focus,
.cf-form select:focus,
.cf-form textarea:focus {
  outline: none;
  border-color: #b8972c;
  background: rgba(255, 255, 255, 0.11);
}
.cf-form input::placeholder,
.cf-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.cf-form textarea {
  resize: vertical;
  min-height: 110px;
}
.cf-form select option {
  background: #1a2e4a; /* match --navy */
}

/* ── Validation: invalid state ───────────────────────────────── */
.cf-form input.cf-invalid,
.cf-form select.cf-invalid,
.cf-form textarea.cf-invalid {
  border-color: #f87171;
}
.cf-field-error {
  color: #fca5a5;
  font-size: 12px;
  font-family: Arial, sans-serif;
  min-height: 16px; /* prevents layout shift when message appears */
}
.cf-field-error[hidden] { display: none; }

/* ── Honeypot (never visible to humans) ─────────────────────── */
.cf-honeypot {
  display: none !important;
  visibility: hidden;
}

/* ── Submit button ───────────────────────────────────────────── */
.cf-submit {
  background: #b8972c;
  color: #1a2e4a;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 0.04em;
  align-self: flex-start;
  transition: background 0.15s, opacity 0.15s;
}
.cf-submit:hover:not(:disabled) { background: #d4a733; }
.cf-submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Note below submit ───────────────────────────────────────── */
.cf-note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* ── Success / error banners ─────────────────────────────────── */
.cf-banner {
  border-radius: 6px;
  padding: 18px 22px;
  font-family: Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 12px;
}
.cf-banner[hidden] { display: none; }

.cf-banner--success {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid #22c55e;
  color: #bbf7d0;
}
.cf-banner--error {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid #f87171;
  color: #fca5a5;
}
.cf-banner--error a {
  color: #fca5a5;
  text-decoration: underline;
}