/* Contact: links reserveren, adres, e-mail, telefoon en openingstijden; rechts het formulier (assets/js/contact-form.js).
   Geen ingesloten kaart: "Route plannen" opent Google Maps. */
.contactpagina { background-color: var(--secondary); padding: var(--space-2xl) var(--space-m); }
.contactpagina__binnen {
  width: var(--max-screen-width);
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-xl);
  align-items: start;
}
.contactpagina__info { display: grid; gap: var(--space-s); }
.contactblok { background: #fff; border-radius: var(--radius-m); padding: var(--space-m); }
.contactblok p { margin: 0; color: var(--text-body); }
.contactblok--reserveren { background: var(--dark); }
.contactblok--reserveren p { color: var(--light-80, #eeeee4cc); margin-bottom: var(--space-s); }
.contactblok__kop { margin: 0 0 .4rem; font-family: "Bearmen"; font-size: var(--text-l); color: var(--secondary); }
.contactblok__label { margin: 0 0 .3rem; font-size: var(--text-s); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--primary-tekst); }
.contactblok__link, .contactblok__mail { color: var(--dark); font-weight: 600; }
.contactblok__link { display: inline-block; margin-top: .4rem; color: var(--primary-tekst); text-decoration: none; }
.contactblok__link:hover { text-decoration: underline; }
.contactblok__tijden { margin: 0; }
.contactblok__tijden .voet__rij { display: flex; justify-content: space-between; gap: var(--space-s); padding: .25rem 0; border-bottom: 1px solid var(--dark-10); }
.contactpagina .contactblok__tijden dt, .contactpagina .contactblok__tijden dd { margin: 0; color: var(--text-body); }
.contactpagina .contactblok__tijden dd { font-weight: 600; color: var(--dark); white-space: nowrap; }
.contactblok__noot { margin-top: .5rem !important; font-size: var(--text-s); color: var(--dark-60) !important; }

.contactpagina__form { background: #fff; border-radius: var(--radius-m); padding: var(--space-l); }
.contactpagina__tagline { margin: 0 0 .6rem; font-weight: 600; color: var(--primary-tekst); }
.contactpagina__kop { font-family: "Bearmen"; font-size: var(--text-2xl); color: var(--dark); margin: 0 0 var(--space-xs); }
.contactpagina__lead { margin: 0 0 var(--space-m); color: var(--text-body); }
.contactformulier { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s) var(--space-m); }
.contactformulier .form-group { display: flex; flex-direction: column; gap: .35rem; margin: 0; padding: 0; width: auto; height: auto !important; }
.contactformulier .form-group:nth-of-type(5),
.contactformulier .submit-button-wrapper { grid-column: 1 / -1; }
.contactformulier label { font-weight: 600; font-size: var(--text-s); color: var(--dark); }
.contactformulier input, .contactformulier select, .contactformulier textarea {
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid var(--dark-20);
  border-radius: var(--radius-xs);
  background: #fff;
  font: inherit;
  color: var(--dark);
}
.contactformulier textarea { min-height: 10rem; resize: vertical; }
.contactformulier input:focus, .contactformulier select:focus, .contactformulier textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.contactformulier button[type=submit].bricks-button { width: 100%; justify-content: center; background: var(--primary); color: var(--tertiary); border-radius: var(--radius-xs); }
.contactformulier .form-melding { grid-column: 1 / -1; }

@media (max-width: 991px) {
  .contactpagina__binnen { grid-template-columns: 1fr; }
  .contactpagina__form { order: -1; }
}
@media (max-width: 767px) {
  .contactformulier { grid-template-columns: 1fr; }
  .contactpagina__form { padding: var(--space-m); }
}