/* Runward — contact form inside the contact drawer (shared across all pages).
   The drawer itself is styled per page; this file only adds the form option
   and its panel, so all 24 pages stay in sync from one place. */

button.drawer-option {
  width: 100%;
  font: inherit;
  text-align: left;
  color: inherit;
}

.drawer-option-icon.form { background: rgba(124,77,219,0.12); color: #7C4DDB; }

.drawer-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 20px;
}

.drawer-form[hidden],
.drawer-form-done[hidden],
.drawer-options[hidden] { display: none; }

.drawer-form-back {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
}

.drawer-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
}

.drawer-form input[type="text"],
.drawer-form input[type="email"] {
  font-family: 'Inter', sans-serif;
  font-size: 1rem; /* 16px avoids iOS zoom on focus */
  font-weight: 400;
  color: var(--ink);
  padding: 12px 14px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  outline: none;
  transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out);
}

.drawer-form input:focus {
  background: #FFFFFF;
  border-color: #7C4DDB;
}

/* Honeypot for bots: off-screen, never visible to people. */
.drawer-form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.drawer-form-note {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.drawer-form-note a { color: inherit; }

.drawer-form-submit {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #FFFFFF;
  background: #7C4DDB;
  border: none;
  border-radius: 12px;
  padding: 14px 20px;
  cursor: pointer;
  transition: opacity 140ms var(--ease-out), transform 120ms var(--ease-out);
}

.drawer-form-submit:active { transform: scale(0.98); }
.drawer-form-submit:disabled { opacity: 0.6; cursor: default; }

.drawer-form-status {
  font-size: 0.8rem;
  color: #C0392B;
  margin: 0;
  min-height: 1em;
}

.drawer-form-done {
  padding: 8px 24px 4px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.6;
}