/* =============================================================
   contact.css — Path of Breathing
   The contact form: a category, a few words, an optional reply.
   Linked by: contact.html only.
   The form sends nothing itself — contact.js composes a mail draft
   and hands it to the reader's mail app (category → subject line).
   ============================================================= */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 600px;
  margin-top: 0.5em;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.contact-optional {
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--muted);
}

/* ── Select — a real <select>, restyled to match the ground ──── */
.contact-select-wrap {
  position: relative;
  width: fit-content;
  min-width: 240px;
}

.contact-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 13px 44px 13px 16px;
  cursor: pointer;
  transition: border-color 0.3s;
}
.contact-select:hover { border-color: var(--accent-tint); }
.contact-select:focus {
  outline: none;
  border-color: var(--accent);
}

.contact-select-chevron {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--accent);
  opacity: 0.7;
  pointer-events: none;
}

/* ── Text inputs ─────────────────────────────────────────────── */
.contact-input {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 13px 16px;
  width: 100%;
  transition: border-color 0.3s;
}
.contact-input::placeholder { color: var(--muted); opacity: 0.6; }
.contact-input:hover { border-color: var(--accent-tint); }
.contact-input:focus {
  outline: none;
  border-color: var(--accent);
}

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

/* ── Hint — screenshot line, shown for Correction and Bug ────── */
.contact-hint {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--muted);
}
.contact-hint.is-hidden { display: none; }

/* ── Send ────────────────────────────────────────────────────── */
.contact-send {
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: 1px solid var(--accent-tint-strong);
  border-radius: 50px;
  padding: 12px 34px;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}
.contact-send:hover {
  border-color: var(--accent);
  color: var(--text);
}

.contact-note {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--muted);
  opacity: 0.75;
  white-space: nowrap;
}