/* ============================================
   Contact — waarden uit Elementor-pagina 34 van het origineel
   Onderbalk en credit hergebruiken .footer-bar / .footer-credit (components/footer.css);
   hier staan alleen de afwijkingen van deze kopie.
   ============================================ */

/* --- Formulier + contactgegevens ---------------------------------------- */
.contact-main {
  --dir: row;
  --gap: 0px;
  --pt: 60px; --pr: 0px; --pb: 120px; --pl: 0px;
  --bg: var(--color-mist);
}
.contact-main__card {
  --align: center;
  --shrink: 0;
  --bg: var(--color-white);
}
.contact-main__title {
  max-width: 100%;
  color: var(--color-text);
  font-size: var(--fs-title);
  font-weight: var(--fw-title);
  text-align: center;
}
.contact-main__form {
  flex: 0 0 auto;
  width: 86.558%;
  max-width: 100%;
}
.contact-main__info { --justify: flex-start; }

@media (min-width: 768px) {
  .contact-main__formcol { --w: 59%; }
  .contact-main__card { --w: 100%; }
  .contact-main__info { --w: 50%; }
}
@media (max-width: 767px) {
  .contact-main__formcol { --pt: 10px; --pr: 10px; --pb: 25px; --pl: 10px; }
  .contact-main__card { --pt: 10px; --pr: 10px; --pb: 20px; --pl: 10px; }
  .contact-main__title { margin: 18px 1px; }
  .contact-main__info { --pt: 0px; --pr: 15px; --pb: 0px; --pl: 15px; }
}

/* --- Onderbalk ----------------------------------------------------------- */
.contact-bar__social { margin-left: 0; }
.contact-bar__phone {
  flex: 0 0 auto;
  width: 91.479%;
  max-width: 100%;
  color: var(--color-footer-meta);
  font-size: var(--fs-text);
  font-weight: var(--fw-text);
  text-align: end;
}
@media (min-width: 768px) {
  .contact-bar__main { --w: 78%; }
  .contact-bar__social { --w: 17%; }
}
@media (max-width: 1366px) and (min-width: 768px) {
  .contact-bar__main { --w: 78%; }
}
@media (max-width: 1024px) and (min-width: 768px) {
  .contact-bar__main { --w: 669.078px; }
}
@media (max-width: 880px) and (min-width: 768px) {
  .contact-bar__main { --w: 500px; }
}
@media (max-width: 767px) {
  .contact-bar__main { --w: 30%; }
  .contact-bar__social { --w: 70%; --pt: 0px; --pb: 0px; }
  .contact-bar__phone { width: 148px; }
}

/* Hoofdmenu in de onderbalk (nav.njk, variant "bar"): horizontaal als het footermenu,
   op mobiel een uitklappaneel over de volle breedte */
.menu--bar {
  flex: 0 0 auto;
  width: 83.755%;
  max-width: 100%;
}
.menu--bar .menu__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 auto 0 0;
}
.menu--bar .menu__item { display: flex; }
.menu--bar .menu__link {
  flex-grow: 1;
  padding: 13px 0;
  color: var(--color-text);
  font-size: var(--fs-text);
  font-weight: var(--fw-text);
  letter-spacing: var(--ls-primary);
  text-transform: none;
  white-space: nowrap;
  transition: 0.4s;
}
.menu--bar .menu__item:not(:first-child) > .menu__link { margin-inline-start: 15.5px; }
.menu--bar .menu__item:not(:last-child) > .menu__link { margin-inline-end: 15.5px; }
.menu--bar .menu__link:hover,
.menu--bar .menu__link:focus,
.menu--bar .menu__link.is-active,
.menu--bar .menu__item--sub.is-open > .menu__link { color: var(--color-accent); }

.menu--bar .menu__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 15.5px;
  z-index: 3;
  min-width: 10em;
  background-color: #eaeaea;
}
.menu--bar .menu__item--sub.is-open > .menu__sub { display: block; }
.menu--bar .menu__sublink {
  padding: 13px 20px;
  border-inline-start: 8px solid transparent;
  color: var(--color-text);
  font-size: 15px;
  white-space: nowrap;
  transition: 0.4s;
}
.menu--bar .menu__sublink:hover,
.menu--bar .menu__sublink:focus,
.menu--bar .menu__sublink.is-active { color: var(--color-copper); background-color: #ededed; }

.menu--bar .menu__toggle {
  margin-right: auto;
  padding: 0.25em;
  border-radius: 0;
  color: var(--color-text);
  font-size: 30px;
}
.menu--bar .menu__toggle:hover,
.menu--bar .menu__toggle:focus { color: var(--color-accent); }

@media (max-width: 767px) {
  .menu--bar .menu__toggle { display: flex; }
  .menu--bar .menu__list {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9997;
    display: block;
    width: 100%;
    margin-top: 40px;
    max-height: 0;
    overflow: hidden;
    transform: scaleY(0);
    transform-origin: top;
    transition: max-height 0.3s, transform 0.3s;
    background-color: #eaeaea;
  }
  .menu--bar.is-open .menu__list { max-height: 100vh; transform: scaleY(1); }
  .menu--bar .menu__item { display: block; }
  .menu--bar .menu__link,
  .menu--bar .menu__sublink {
    justify-content: center;
    margin: 0 !important;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: var(--fw-accent);
    text-transform: uppercase;
  }
  .menu--bar .menu__link:hover, .menu--bar .menu__link:focus,
  .menu--bar .menu__link.is-active { color: var(--color-copper); background-color: #ededed; }
  .menu--bar .menu__sub { position: static; }
}

/* --- Credit -------------------------------------------------------------- */
.contact-credit__text {
  color: var(--color-text);
  font-size: var(--fs-accent);
  font-weight: var(--fw-accent);
  text-align: center;
  text-transform: uppercase;
}
.contact-credit__text span,
.contact-credit__text a { color: var(--color-white); }