/* ============================================================================
   contact.css — standalone /contact page
   Loaded after index.css - reuses .kicker/.btn-primary/main{max-width} from
   there, plus tokens from base.css. Also styles the htmx-swapped form
   partials (partials/contact-form.html, contact-form-submitted.html,
   error/form-error.html) that load into the same #form slot on this page.
   Supersedes the old contact-form.css treatment (rounded pill inputs, dark
   hero fold) - this page no longer uses that file's classes.
   ========================================================================== */

.ct-hero {
  padding: 56px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-bottom: 1px solid var(--color-line);
}

.ct-hero h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.04;
  letter-spacing: -.03em;
  font-weight: 800;
  color: var(--color-ink);
}

.ct-hero p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-body);
  max-width: 560px;
}

/* ---------- Body: categories + form side by side --------------------- */

.ct-body {
  padding: 40px 20px 64px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ct-info h2 {
  margin: 8px 0 0;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 800;
  color: var(--color-ink);
}

.ct-info h2 .tint {
  font-weight: 400;
  color: var(--color-text-tint);
}

.ct-categories {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.ct-categories li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--color-line-soft);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink);
}

.ct-categories li:last-child {
  border-bottom: 1px solid var(--color-line-soft);
}

.ct-categories .check {
  flex: none;
  color: var(--color-red);
  font-size: 15px;
  font-weight: 700;
}

.ct-categories-more {
  font-weight: 400;
  font-style: italic;
  color: var(--color-text-muted);
}

/* ---------- Form panel -------------------------------------------------- */

.ct-form-panel {
  background: var(--color-panel);
  border: 1px solid var(--color-line-soft);
  padding: 28px 22px;
}

/* #form (an id, not a class) is also targeted by the legacy contact-form.css
   still loaded site-wide from header.html - an id selector outranks a class
   one regardless of load order, so the old rounded-card #form{} rule was
   winning over everything below and floating a white pill inside this
   panel instead of filling it. #form.ct-form matches that id but scores
   higher (id + class beats id alone), so these actually take effect. */
#form.ct-form {
  position: relative;
  background: none;
  border-radius: 0;
  padding: 0;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#form.ct-form > h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--color-ink);
}

.ct-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#form.ct-form label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
}

.ct-field input,
.ct-field textarea {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--color-ink);
  border-radius: 0;
  background: var(--color-paper);
  color: var(--color-ink);
}

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

.ct-field input::placeholder,
.ct-field textarea::placeholder {
  color: var(--color-text-faint);
}

.ct-field input:focus,
.ct-field textarea:focus {
  outline: 2px solid var(--color-red);
  outline-offset: 1px;
}

.ct-submit.btn-primary {
  width: 100%;
  margin-top: 4px;
  font-size: 15px;
}

/* ---------- Loading spinner (shown while the htmx submit is in flight) - */

/* #spinner.ct-spinner (not just .ct-spinner) for the same reason as
   #form.ct-form above - contact-form.css's .htmx-indicator{border-radius:
   20px, ...} is loaded after this file and ties on specificity, so it would
   otherwise win the border-radius/inset tug-of-war on load order alone. */
#spinner.ct-spinner {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: color-mix(in srgb, var(--color-panel) 92%, transparent);
}

/* htmx adds .htmx-request either to the element referenced by hx-indicator
   itself, or to an ancestor - covering both keeps this working either way. */
.htmx-request #spinner.ct-spinner,
#spinner.ct-spinner.htmx-request {
  display: flex;
}

.ct-spinner img {
  width: 40px;
  height: 40px;
}

/* ---------- Thank-you / error state (swaps into the same #form slot) --- */

.ct-thankyou {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.ct-thankyou-badge {
  width: 36px;
  height: 36px;
  margin-bottom: 6px;
  border-radius: 50%;
  border: 2px solid var(--color-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-red);
}

.ct-thankyou.is-error .ct-thankyou-badge {
  border-color: var(--color-text-muted);
  color: var(--color-text-muted);
}

.ct-thankyou-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--color-ink);
}

.ct-thankyou-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-body);
}

@media screen and (min-width: 1024px) {
  .ct-hero,
  .ct-body {
    padding-left: 60px;
    padding-right: 60px;
  }

  .ct-hero {
    padding-top: 76px;
    padding-bottom: 54px;
  }

  .ct-hero h1 {
    font-size: 52px;
  }

  .ct-hero p {
    font-size: 18px;
  }

  .ct-body {
    flex-direction: row;
    align-items: flex-start;
    gap: 60px;
  }

  .ct-info {
    flex: 1;
    padding-top: 6px;
  }

  .ct-info h2 {
    font-size: 32px;
  }

  .ct-form-panel {
    flex: none;
    width: 440px;
    padding: 36px 32px;
  }
}