/* ============================================================
   HARAMBEE — contact page
   Depends on harambee.css (tokens, font, header/footer) and
   members.css (.page-standard shell).
   ============================================================ */

.contact-main {
  flex: 1;
  padding: clamp(48px, 8vw, 110px) clamp(24px, 6vw, 120px) clamp(64px, 9vw, 120px);
  max-width: 1100px; margin: 0 auto; width: 100%;
}
.contact-intro { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.contact-intro h1 {
  margin: 0 0 18px; color: var(--paper);
  font-family: "Ogg Medium", Georgia, serif; font-weight: 500;
  font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1;
}
.contact-intro p {
  margin: 0; color: rgba(253, 241, 225, 0.72);
  font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.5; max-width: 60ch;
}

.contact-layout {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start;
}
@media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } }

/* ---- Form ---- */
.contact-form { display: flex; flex-direction: column; gap: 22px; }
.form-row { display: flex; flex-direction: column; gap: 8px; }
.form-row label {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: #ae8a50;
}
.form-row input, .form-row select, .form-row textarea {
  background: #121216; border: 1px solid rgba(174, 138, 80, 0.28); border-radius: 12px;
  padding: 14px 16px; color: var(--paper); font-size: 1rem; font-family: inherit;
}
.form-row input::placeholder, .form-row textarea::placeholder { color: rgba(253, 241, 225, 0.38); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: #ae8a50;
}
.form-row select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ae8a50' stroke-width='2'><path d='M5 8l5 5 5-5'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}
.form-row select option { background: #121216; color: var(--paper); }
.form-row textarea { resize: vertical; min-height: 140px; }

/* Honeypot — hidden from sighted users and keyboard tab order, but present
   in the DOM for bots that blindly fill every field. */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-submit {
  align-self: flex-start; min-height: 52px; padding: 0 32px; border: 0; border-radius: 999px;
  background: #fdf1e1; color: #111411; font-weight: 600; font-size: 1rem; font-family: inherit;
  cursor: pointer; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28); transition: transform 200ms ease;
}
.form-submit:hover { transform: translateY(-2px); }
.form-submit:disabled { opacity: 0.6; cursor: default; transform: none; }

.form-status { min-height: 1.4em; margin: 0; font-size: 0.95rem; }
.form-status.is-ok { color: #8fd1a0; }
.form-status.is-err { color: #e08a86; }

/* ---- Quick-contact aside ---- */
.contact-aside {
  background: #121216; border: 1px solid rgba(174, 138, 80, 0.24); border-radius: 20px;
  padding: 32px 28px; display: flex; flex-direction: column; gap: 10px;
}
.contact-aside-label {
  margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; color: #ae8a50;
}
.contact-aside-name { margin: 0; font-family: "Ogg Medium", Georgia, serif; font-size: 1.3rem; color: var(--paper); }
.contact-aside p { margin: 0; color: rgba(253, 241, 225, 0.86); }
.contact-aside a { color: var(--paper); text-decoration: none; border-bottom: 1px solid rgba(174, 138, 80, 0.5); }
.contact-aside-motto {
  margin-top: 14px; letter-spacing: 0.12em; font-size: 0.75rem; color: #ae8a50; text-transform: uppercase;
}