/* Contact pagina specifieke stijlen */

.hero {
  padding-block: var(--space-14) var(--space-10);
}
.hero p {
  max-width: 60ch;
}
.hero-actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }

/* Contact overzicht */
.contact-overview { margin-top: var(--space-4); }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-4);
}
.address { margin-top: var(--space-6); }

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

/* Formulier */
.contact-form-section { margin-top: var(--space-12); }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--space-5);
}
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-full { grid-column: 1 / -1; }
.checkbox { display: inline-flex; align-items: flex-start; gap: var(--space-2); }
.checkbox input { margin-top: 3px; }
.help { color: var(--gray-600); font-size: var(--fs-200); }
.form-actions { margin-top: var(--space-5); display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.form-status { min-height: 1.25rem; color: var(--color-primary); font-weight: 600; }

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

/* Testimonials */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-4);
}
.testimonials blockquote p { margin: 0 0 var(--space-3) 0; }
.testimonials blockquote footer { color: var(--gray-700); font-size: var(--fs-200); }

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

/* FAQ */
.faq { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.faq details { border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); background: var(--color-surface); }
.faq summary { cursor: pointer; font-weight: 700; }
.faq p { margin-top: var(--space-2); }

/* Social */
.social-list { list-style: none; padding: 0; margin: var(--space-3) 0 0 0; display: flex; flex-wrap: wrap; gap: var(--space-4); }
.social-list a { text-decoration: none; font-weight: 600; color: var(--color-primary); border-bottom: 2px solid transparent; padding-bottom: 2px; }
.social-list a:hover { border-color: var(--color-primary); }