/*
  ETECHTICS SOFTWARE SOLUTIONS — Contact / Start a Project page
  -------------------------------------------------------------
  Page-scoped styles for /contact-us/ only (mirrors the home.css /
  services.css pattern — one stylesheet per distinct page type, never
  cross-imported). Builds entirely on the existing token system in
  tokens.css; no new colors, fonts, or spacing values are introduced.

  Depends on css/tokens.css, css/base.css. Reuses .service-hero,
  .service-item-card, .crosslink-grid/.crosslink-card, and .cta-band
  from services.css on the page itself, so services.css is also loaded.
*/

/* ---------------------------------------------------------------
   Two-column layout: form + trust/contact sidebar
--------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 899px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------
   Form card
--------------------------------------------------------------- */
.contact-form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-field--full {
  grid-column: 1 / -1;
}

@media (max-width: 599px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
}

.form-label__optional {
  font-weight: var(--font-weight-regular);
  color: var(--color-muted);
}

.form-required {
  color: var(--color-blue-600);
}

.form-hint {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

.form-input,
.form-textarea,
.form-select {
  font: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  width: 100%;
  transition: border-color var(--transition-fast);
}

.form-textarea {
  resize: vertical;
  min-height: 140px;
}

.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 1px;
  border-color: var(--color-blue-600);
}

.form-input[aria-invalid="true"],
.form-textarea[aria-invalid="true"],
.form-select[aria-invalid="true"] {
  border-color: #B42318;
}

.form-error {
  font-size: var(--font-size-xs);
  color: #B42318;
  min-height: 1em;
}

.form-consent {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

.form-consent--spaced {
  margin-top: var(--space-3);
}

.form-hint--intro {
  margin-bottom: var(--space-3);
}

.form-status {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}

.form-status[data-state="error"] {
  background: #FEF3F2;
  color: #B42318;
  border: 1px solid #B42318;
}

/* Success state — added alongside the real submission endpoint (Phase 14).
   Same pattern as the error state above (tinted background, matching
   border/text color), just green instead of red. #067647 on #ECFDF3
   measures ~5.4:1, comfortably clear of the 4.5:1 WCAG AA text minimum. */
.form-status[data-state="success"] {
  background: #ECFDF3;
  color: #067647;
  border: 1px solid #067647;
}

.form-status[hidden] {
  display: none;
}

/* Honeypot spam trap (Phase 14) — invisible to real visitors and to
   screen-reader users (aria-hidden on the wrapper, tabindex="-1" on the
   input so it's never reachable by keyboard), but present in the raw HTML
   for simple bots that fill every input they find. Off-screen positioning
   is used instead of display:none/visibility:hidden, since some bots
   specifically check for and skip those two properties when scraping a
   form's fields. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.form-actions--spaced {
  margin-top: var(--space-3);
}

/* ---------------------------------------------------------------
   Sidebar — trust / contact info
--------------------------------------------------------------- */
.contact-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-info-list li {
  font-size: var(--font-size-sm);
  color: var(--color-body-text);
}

.contact-info-list a {
  font-weight: var(--font-weight-semibold);
}