/* Contact Us page-specific styles */
.contact-section {
  margin-top: var(--space-16);
  margin-bottom: var(--space-20);
}

.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}
.contact-card {
  min-width: 0;
}
.support-card {
  background: var(--color-gray-100);
}

.contact-social {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.icon {
  width: 28px;
  height: 28px;
  fill: var(--color-primary-dark);
  display: inline-block;
  vertical-align: middle;
  transition: fill var(--transition);
}
.contact-social a:focus-visible .icon,
.contact-social a:hover .icon {
  fill: var(--color-primary);
}

.feedback-card {
  margin-bottom: var(--space-12);
}

.form-row {
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
}
.form-row.checkbox-row {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}
.feedback-card label {
  font-weight: 500;
  margin-bottom: var(--space-1);
}
.feedback-card .required {
  color: var(--color-danger);
}
.form-message {
  margin-top: var(--space-4);
  color: var(--color-success);
  font-weight: 600;
}
.form-message[aria-invalid="true"] {
  color: var(--color-danger);
}

.faq-card {
  margin-bottom: var(--space-12);
}
.faq-list dt {
  font-weight: bold;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}
.faq-list dd {
  margin-left: 0;
  margin-bottom: var(--space-3);
  color: var(--color-gray-700);
}

.contact-additional-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

.partnerships-card ul {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
  list-style: disc inside;
  color: var(--color-primary-dark);
}
.privacy-accessibility-card .privacy-heading {
  margin-top: 0;
}
.privacy-accessibility-card .accessibility-heading {
  margin-top: var(--space-8);
}

@media (max-width: 900px) {
  .contact-info-grid,
  .contact-additional-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}
@media (max-width: 600px) {
  .contact-section {
    margin-top: var(--space-8);
    margin-bottom: var(--space-12);
  }
  .card {
    padding: var(--space-4);
  }
  .faq-card {
    margin-bottom: var(--space-8);
  }
  .feedback-card {
    margin-bottom: var(--space-8);
  }
}