/* ============================================================
   ScolerAI — contact.css
   The contact page: the About page's arrangement (home.css backdrop and
   chrome, about.css hero and sheet) carrying one form and nothing else.

   Expects home.css, foot.css and about.css before it. The sheet is the
   site's solid white reading plane in every theme, so the form's colours
   are tokens on `.cf-wrap`, defined against that plane.
   ============================================================ */

.cf-wrap {
  --cf-field:        var(--grounded);
  --cf-field-edge:   #D5DBE5;
  --cf-field-focus:  var(--violet);
  --cf-danger:       #B42318;   /* 6.6:1 on white */
  --cf-danger-tint:  #FEF3F2;
  --cf-success:      #067647;   /* 5.9:1 on white */
  --cf-success-tint: #ECFDF3;

  max-width: 720px;
}

/* The hero sits a little lower than the About page's: the form, not the
   headline, is what the visitor came for. */
.contact .hero { min-height: 46vh; }
.contact .sheet { margin-bottom: clamp(48px, 8vh, 96px); }

/* ══════════════ THE FORM ══════════════ */
.cf { display: grid; gap: 22px; }

.cf__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.cf__field { display: grid; gap: 8px; min-width: 0; }

.cf__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.cf__label {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.cf__count {
  font-size: 12.5px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cf__count--near { color: var(--cf-danger); }

.cf__input {
  width: 100%;
  box-sizing: border-box;
  /* 16px: anything smaller makes iOS zoom the page on focus. */
  font: 400 16px/1.5 Inter, sans-serif;
  color: var(--ink);
  background: var(--cf-field);
  border: 1px solid var(--cf-field-edge);
  border-radius: var(--r-md);
  padding: 12px 14px;
  transition: border-color 160ms var(--ease), background 160ms var(--ease),
              box-shadow 160ms var(--ease);
}
.cf__input::placeholder { color: var(--ink-faint); }
.cf__input:hover { border-color: var(--ink-faint); }
.cf__input:focus {
  outline: none;
  background: var(--plane-solid);
  border-color: var(--cf-field-focus);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}
.cf__input[aria-invalid="true"] {
  border-color: var(--cf-danger);
  background: var(--cf-danger-tint);
}
.cf__input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.16); }

.cf__textarea { resize: vertical; min-height: 168px; }

.cf__select { position: relative; }
.cf__select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  cursor: pointer;
}
.cf__chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  pointer-events: none;
}

.cf__err {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--cf-danger);
}

/* The trap: off-screen rather than display:none (some scripts skip
   undisplayed fields), and aria-hidden + tabindex=-1 in the markup so
   neither a keyboard, a screen reader nor an AI agent reaches it. */
.cf__trap {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cf__note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-muted);
}
.cf__note a,
.cf__fallback a,
.cf__noscript a {
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cf__actions { display: flex; }

.cf__submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  border: 0;
  border-radius: var(--r-pill);
  padding: 14px 28px;
  background: var(--violet);
  color: #FFFFFF;
  font: 600 16px/1.2 Inter, sans-serif;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.32);
  transition: background 180ms var(--ease), transform 180ms var(--ease),
              opacity 180ms var(--ease);
}
.cf__submit:hover { background: #6D28D9; transform: translateY(-1px); }
.cf__submit:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; }
.cf__submit:disabled { opacity: 0.7; cursor: progress; transform: none; }

.cf__status { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.cf__status:empty { display: none; }
.cf__status--error {
  color: var(--cf-danger);
  background: var(--cf-danger-tint);
  border-radius: var(--r-md);
  padding: 12px 14px;
}

.cf__fallback,
.cf__noscript {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}
.cf__fallback { margin-top: -10px; }

/* ══════════════ SENT ══════════════ */
.cf-done {
  display: grid;
  justify-items: start;
  gap: 14px;
  padding: 8px 0;
}
.cf-done[hidden] { display: none; }
.cf-done__mark {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--cf-success-tint);
  color: var(--cf-success);
}
.cf-done__title {
  margin: 4px 0 0;
  font-family: Poppins, Inter, sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cf-done__title:focus { outline: none; }
.cf-done__body {
  margin: 0;
  max-width: 60ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  overflow-wrap: anywhere;   /* a long address must not widen the sheet */
}
.cf-done__again {
  margin-top: 6px;
  min-height: 44px;
  border: 1px solid var(--cf-field-edge);
  border-radius: var(--r-pill);
  background: var(--plane-solid);
  color: var(--ink);
  font: 600 15px/1.2 Inter, sans-serif;
  padding: 11px 22px;
  cursor: pointer;
  transition: border-color 160ms var(--ease), color 160ms var(--ease);
}
.cf-done__again:hover { border-color: var(--violet); color: var(--violet); }
.cf-done__again:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; }

.cf[hidden] { display: none; }

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width: 640px) {
  .cf__row { grid-template-columns: 1fr; }
  .cf__submit { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cf__input,
  .cf__submit,
  .cf-done__again { transition: none; }
  .cf__submit:hover { transform: none; }
}