/**
 * Chemesis Core — Contact page styles.
 * Port of the approved Vercel Contact page body. Prefix: .chc-*.
 */

.chc-section {
  background: var(--ch-paper);
  padding-block: 3rem;
}

@media (min-width: 768px) {
  .chc-section {
    padding-block: 4rem;
  }
}

.chc-grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .chc-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.chc-form-col {
  min-width: 0;
}

@media (min-width: 1024px) {
  .chc-form-col {
    grid-column: span 7;
  }
}

.chc-aside-col {
  min-width: 0;
}

@media (min-width: 1024px) {
  .chc-aside-col {
    grid-column: span 5;
  }
}

.chc-sticky {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .chc-sticky {
    position: sticky;
    top: 7rem;
  }
}

/* ------------------------------------------------------------------
   Form
   ------------------------------------------------------------------ */
.chc-form {
  border-radius: var(--ch-radius-md);
  border: 1px solid var(--ch-line);
  background: #fff;
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .chc-form {
    padding: 2rem;
  }
}

.chc-fields {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .chc-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.chc-field {
  min-width: 0;
}

@media (min-width: 640px) {
  .chc-field-wide {
    grid-column: span 2;
  }
}

.chc-field .ch-label {
  display: block;
  margin-bottom: 0.5rem;
}

.chc-field .ch-input {
  width: 100%;
}

/* Elementor kit form styles win over plain class rules — re-assert the
   approved field metrics with element-qualified, body-scoped selectors. */
body .chc-section .chc-field .ch-label {
  font-weight: 400;
  line-height: 1.5;
}

body .chc-section .chc-field input.ch-input,
body .chc-section .chc-field select.ch-input,
body .chc-section .chc-field textarea.ch-input {
  font-size: var(--ch-input-font);
}

body .chc-section .chc-field input.ch-input {
  padding: 0 0.9rem;
}

body .chc-section .chc-field select.ch-input {
  padding: 0 2.4rem 0 0.9rem;
}

body .chc-section .chc-field textarea.ch-input {
  padding: 0.8rem 0.9rem;
  min-height: 8rem;
}

/* Kit styles also pin the base border colour, so interactive states need the
   same scoped re-assert (order: hover, focus, invalid). */
body .chc-section .chc-field input.ch-input:hover,
body .chc-section .chc-field select.ch-input:hover,
body .chc-section .chc-field textarea.ch-input:hover {
  border-color: rgba(11, 18, 32, 0.28);
}

body .chc-section .chc-field input.ch-input:focus,
body .chc-section .chc-field select.ch-input:focus,
body .chc-section .chc-field textarea.ch-input:focus {
  outline: none;
  border-color: var(--ch-blue);
  box-shadow: 0 0 0 3px rgba(0, 84, 252, 0.12);
}

body .chc-section .chc-field input.ch-input[aria-invalid="true"],
body .chc-section .chc-field select.ch-input[aria-invalid="true"],
body .chc-section .chc-field textarea.ch-input[aria-invalid="true"] {
  border-color: var(--ch-danger);
}

body .chc-section .ch-btn {
  font-size: var(--ch-btn-font);
}

.chc-field .ch-error {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  color: #b32626;
}

.chc-submit {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 639px) {
  .chc-submit .ch-btn {
    width: 100%;
  }
}

.chc-note {
  font-size: var(--ch-type-label);
  color: var(--ch-faint);
}

/* Success card */
.chc-success {
  border-radius: var(--ch-radius-md);
  border: 1px solid var(--ch-line);
  background: #fff;
  padding: 2rem;
}

@media (min-width: 768px) {
  .chc-success {
    padding: 2.5rem;
  }
}

.chc-success-icon {
  display: flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--ch-blue-100);
  color: var(--ch-blue-600);
}

.chc-success h3 {
  margin-top: 1.5rem;
  font-family: var(--ch-font-display);
  font-size: var(--ch-type-h3);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ch-ink-900);
}

.chc-success p {
  margin-top: 0.75rem;
  max-width: 32rem;
  font-size: var(--ch-type-body);
  line-height: 1.65;
  color: var(--ch-muted);
}

.chc-success-ref {
  font-family: var(--ch-font-mono);
  color: var(--ch-inktext, #1c2438);
}

.chc-success-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ------------------------------------------------------------------
   Routing / support panel
   ------------------------------------------------------------------ */
.chc-route {
  display: flex;
  gap: 1rem;
  border-radius: var(--ch-radius-md);
  border: 1px solid var(--ch-line);
  background: #fff;
  padding: 1.5rem;
}

.chc-route-icon {
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--ch-blue-100);
  color: var(--ch-blue-600);
}

.chc-route-title {
  font-size: var(--ch-type-body);
  line-height: 1.4rem;
  font-weight: 600;
  color: var(--ch-ink-900);
}

.chc-route-text {
  margin-top: 0.375rem;
  font-size: var(--ch-type-body-sm);
  line-height: 1.5rem;
  color: var(--ch-muted);
}

.chc-domain {
  border-radius: var(--ch-radius-md);
  background: var(--ch-ink-900);
  padding: 1.5rem;
  color: #fff;
}

.chc-domain-eyebrow {
  font-family: var(--ch-font-mono);
  font-size: var(--ch-type-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ch-blue-300);
}

.chc-domain-value {
  margin-top: 0.5rem;
  font-family: var(--ch-font-display);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.chc-domain-text {
  margin-top: 0.5rem;
  font-size: var(--ch-type-body-sm);
  line-height: 1.5rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ------------------------------------------------------------------
   Elementor kit/theme button shield for Contact blocks
   ------------------------------------------------------------------ */
body .chc-section button,
body .chc-section button:hover,
body .chc-section button:focus,
body .chc-section button:focus-visible {
  background: transparent;
  color: inherit;
  padding: 0;
}

body .chc-section .ch-btn-primary,
body .chc-section .ch-btn-primary:hover {
  background: var(--ch-blue);
  color: #fff;
  padding-inline: var(--ch-btn-padding);
}

body .chc-section .ch-btn-primary:hover {
  background: var(--ch-blue-600);
}

body .chc-section .ch-btn-ink {
  background: var(--ch-ink-900);
  color: #fff;
  padding-inline: var(--ch-btn-padding);
}

body .chc-section .ch-btn-outline {
  background: transparent;
  color: var(--ch-ink-900);
  padding-inline: var(--ch-btn-padding);
}

body .chc-section .ch-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Kit input styles can inflate visually-hidden fields inside the form
   (honeypot) — force them truly hidden. */
.chc-form .screen-reader-text {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}