/* =============================================================
   PEOPLECAP — contact.css
   Styles for the contact page
   ============================================================= */


/* =====================
   TWO-COLUMN LAYOUT
   ===================== */

.contact-section {
  padding: 48px 0;
}

@media (min-width: 769px) {
  .contact-section { padding: 64px 0; }
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 769px) {
  .contact-layout {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-3xl);
    align-items: start;
  }
}


/* =====================
   FORM AREA
   ===================== */

.contact-form-heading {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.form-label-optional {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: 4px;
}

.contact-submit {
  width: 100%;
  margin-top: var(--space-xs);
}

.contact-privacy-note {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-top: var(--space-sm);
}

.contact-privacy-note a {
  color: var(--color-primary);
  text-decoration: none;
}

.contact-privacy-note a:hover { text-decoration: underline; }

/* Success state: .form-status shown outside form after form.hidden = true */
.contact-form-wrap .form-status.success {
  font-size: 15px;
  padding: var(--space-xl) var(--space-lg);
  line-height: 1.6;
}


/* =====================
   INFO SIDEBAR
   ===================== */

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-info-card {
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
}

.contact-info-card-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.contact-info-card-body {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.65;
}

.contact-info-card-body a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.contact-info-card-body a:hover { text-decoration: underline; }

/* Office address — inherits .contact-info-card-body styles via address element */
.contact-info-card address {
  font-style: normal;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.65;
}