/* ============================================
   Footer — CTA "Advies of offerte nodig?", contactblok,
   onderbalk met menu en bedrijfsgegevens, credit.
   Waarden uit het origineel (Elementor-footer 26).
   ============================================ */

/* --- Ankerpunt ----------------------------------------------------------- */
.footer-anchor { --bg: transparent; }

/* --- CTA-band ------------------------------------------------------------ */
.cta-band {
  --dir: row;
  --pad: 0px;
  --minh: 260px;
  --bg: var(--color-primary);
  max-width: min(100%, var(--w));
  margin-inline: auto;
  border-radius: 15px;
}

.cta-band__text { --justify: center; --pt: 20px; --pr: 42px; --pb: 20px; --pl: 28px; --shrink: 0; }
.cta-band__title {
  color: var(--color-white);
  font-size: var(--fs-secondary);
  font-weight: var(--fw-secondary);
  letter-spacing: var(--ls-primary);
}
.cta-band__lead { color: var(--color-white); }

.cta-band__photo { --justify: flex-end; --gap: 0px; --pad: 0px; --minh: 22px; --shrink: 0; }
.cta-band__img { padding-top: 13px; text-align: center; }
.cta-band__img img { display: inline-block; vertical-align: middle; }

.cta-band__buttons { --justify: center; --pt: 46px; --pr: 55px; --pb: 46px; --pl: 0px; }
.cta-band__btn { align-self: center; max-width: 100%; text-align: center; }
.cta-band__offerte { border-width: 1px; }
@media (hover: hover) {
  .cta-band__offerte:hover { background-color: var(--color-accent); color: var(--color-text); }
}
.cta-band__offerte:focus-visible { background-color: var(--color-accent); color: var(--color-text); }

@media (min-width: 768px) {
  .cta-band { --w: 1120px; }
  .cta-band__text { --w: 40%; }
  .cta-band__photo { --w: 28%; }
  .cta-band__buttons { --w: 33%; }
}

@media (max-width: 767px) {
  .cta-band { --w: 325px; --gap: 25px; --pt: 30px; --pb: 30px; --pl: 10px; --pr: 10px; }
  .cta-band__text { order: 1; }
  .cta-band__title { margin: 10px 0 5px; text-align: center; }
  .cta-band__lead { text-align: center; }
  .cta-band__buttons { order: 2; --w: 500px; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; align-self: center; }
  .cta-band__photo { order: 3; }
  .cta-band__img img { width: 82%; height: 217px; }
  .cta-band__offerte { padding: 10px 15px; }
  .cta-band__contact { padding: 10px 25px; }
}

/* --- Contactblok --------------------------------------------------------- */
.contact-band {
  --dir: row;
  --gap: 0px;
  --pt: 40px; --pb: 40px; --pl: 0px; --pr: 0px;
  --bg: var(--color-mist);
}

.contact-band__card { --align: center; --shrink: 0; }
.contact-band__title {
  color: var(--color-text);
  font-size: var(--fs-secondary);
  font-weight: var(--fw-secondary);
  letter-spacing: var(--ls-primary);
  text-align: center;
}
.contact-band__media { --justify: center; }
.contact-band__img { text-align: center; }
.contact-band__img img { display: inline-block; vertical-align: middle; }

.rule {
  box-sizing: content-box;
  width: 100%;
  height: 0;
  margin: 2px 0;
  border: 0;
  border-top: 1px solid var(--color-primary);
}

/* Icoonlijst: icoon, tekst, dunne lijn tussen de regels */
.iconlist {
  --icon-size: 30px;
  --icon-gap: 35px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.iconlist li {
  position: relative;
  display: flex;
  align-items: center;
}
.iconlist li:not(:last-child) { padding-bottom: calc(var(--icon-gap) / 2); }
.iconlist li:not(:first-child) { margin-top: calc(var(--icon-gap) / 2); }
.iconlist li:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid var(--color-rule);
}
.iconlist a,
.iconlist__row {
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 400;
}
.iconlist__icon { display: flex; position: relative; }
.iconlist__icon .icon {
  width: var(--icon-size);
  height: var(--icon-size);
  margin-inline-end: calc(var(--icon-size) * 0.25);
  fill: var(--color-text);
  transition: fill 0.3s;
}
.iconlist__text {
  align-self: center;
  padding-inline-start: 5px;
  color: var(--color-text);
  transition: color 0.3s;
}

.contact-band__list { width: 83.45%; max-width: 83.45%; flex: 0 0 auto; }

@media (min-width: 768px) {
  .contact-band__col { --w: 59%; }
  .contact-band__card { --w: 100%; }
  .contact-band__media { --w: 50%; }
}

@media (max-width: 767px) {
  .contact-band { --pt: 50px; --pr: 10px; --pb: 30px; --pl: 10px; }
  .contact-band__col { --pad: 0px; }
  .contact-band__card { --gap: 25px; --pt: 4%; --pb: 9%; --pl: 0%; --pr: 0%; }
  .contact-band__media { --pad: 3%; }
}

/* --- Onderbalk ----------------------------------------------------------- */
.footer-bar {
  --align: stretch;
  --gap: 50px;
  --pt: 30px; --pb: 30px; --pl: 0px; --pr: 0px;
  --bg: var(--color-footer-bg);
}
.footer-bar__row {
  --dir: row;
  --align: stretch;
  --gap: 0px;
  --pt: 0px; --pr: 0px; --pb: 30px; --pl: 0px;
  border-bottom: 1px dotted #9b9b9b;
}
.footer-bar__main {
  --dir: row;
  --justify: flex-start;
  --align: center;
  --pad: 0px;
  --shrink: 0;
}
.footer-bar__company {
  flex: 0 0 auto;
  width: 25%;
  max-width: 100%;
  color: var(--color-footer-meta);
  font-size: var(--fs-text);
  font-weight: var(--fw-text);
  letter-spacing: var(--ls-primary);
  text-align: end;
}
.footer-bar__social {
  --dir: row-reverse;
  --wrap-m: wrap-reverse;
  --justify: flex-start;
  --align: center;
  --pad: 0px;
  margin-left: 220px;
}

.social {
  --social-size: 40px;
  font-size: 0;
  line-height: 0;
  text-align: right;
}
.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--social-size);
  height: var(--social-size);
  border-radius: 10%;
  font-size: var(--social-size);
  line-height: var(--social-size);
}
.social__link .icon { width: 1em; height: 1em; fill: rgba(84, 89, 95, 0.73); transition: fill 0.3s; }
.social__link:hover .icon,
.social__link:focus-visible .icon { fill: var(--color-accent); }

@media (min-width: 768px) {
  .footer-bar__main { --w: 82%; }
  .footer-bar__social { --w: 4%; }
}
@media (max-width: 1366px) {
  .footer-bar { --gap: 20px; }
  .footer-bar__company { width: 211px; }
}
@media (max-width: 1366px) and (min-width: 768px) {
  .footer-bar__main { --w: 870px; }
}
@media (max-width: 1200px) and (min-width: 768px) {
  .footer-bar { --content: 850px; }
  .footer-bar__row { --content: 900px; }
}
@media (max-width: 1024px) {
  .footer-bar { --pt: 30px; --pb: 30px; --pl: 20px; --pr: 20px; }
  .social { --social-size: 13px; }
}
@media (max-width: 1024px) and (min-width: 768px) {
  .footer-bar__main { --w: 669.078px; }
}
@media (max-width: 880px) and (min-width: 768px) {
  .footer-bar__main { --w: 500px; }
}
@media (max-width: 767px) {
  .footer-bar { --gap: 40px; --pt: 25px; --pb: 25px; --pl: 20px; --pr: 20px; }
  .footer-bar__company { width: 422px; }
  .footer-bar__social { --pt: 10px; --pb: 10px; --pl: 0px; --pr: 0px; margin: 0; }
  .social { --social-size: 30px; text-align: center; }
}

/* Footermenu: horizontaal, op mobiel een uitklapmenu */
.fmenu {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 95%;
  max-width: 95%;
}
.fmenu__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 auto 0 0;
  padding: 0;
  list-style: none;
  line-height: normal;
}
.fmenu__list li { display: flex; position: relative; }
.fmenu__link {
  display: flex;
  align-items: center;
  flex-grow: 1;
  padding: 13px 0;
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: var(--fs-text);
  font-weight: var(--fw-text);
  line-height: 20px;
  letter-spacing: var(--ls-primary);
  white-space: nowrap;
  transition: 0.4s;
}
.fmenu__list li:not(:first-child) > .fmenu__link { margin-inline-start: 15.5px; }
.fmenu__list li:not(:last-child) > .fmenu__link { margin-inline-end: 15.5px; }
.fmenu__link:hover,
.fmenu__link:focus,
.fmenu__link.is-active { color: var(--color-accent); }

.fmenu__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  margin-right: auto;
  padding: 0.25em;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--color-text);
  font-size: 30px;
  line-height: 1.5;
}
.fmenu__toggle .icon { width: 1em; height: 1em; fill: currentColor; }
.fmenu__toggle:hover, .fmenu__toggle:focus { color: var(--color-accent); }
.fmenu__icon-close, .fmenu.is-open .fmenu__icon-open { display: none; }
.fmenu.is-open .fmenu__icon-close { display: block; }

@media (max-width: 767px) {
  .fmenu__toggle { display: flex; }
  .fmenu__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;
    font-size: 13px;
  }
  .fmenu.is-open .fmenu__list { max-height: 100vh; transform: scaleY(1); }
  .fmenu__link {
    justify-content: center;
    margin: 0 !important;
    padding: 10px 20px;
    text-transform: uppercase;
  }
  .fmenu__link:hover, .fmenu__link:focus { color: var(--color-copper); background-color: #ededed; }
}

/* --- Credit -------------------------------------------------------------- */
.footer-credit {
  --justify: center;
  --align: stretch;
  --gap: 0px;
  --pt: 1%; --pb: 0%; --pl: 8%; --pr: 8%;
  --bg: var(--color-primary);
}
.footer-credit__text {
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.footer-credit__text p { margin-bottom: 0.9rem; }
.footer-credit__text span,
.footer-credit__text a { color: #999999; }

@media (max-width: 1024px) {
  .footer-credit { --pt: 0%; --pl: 5%; --pr: 5%; }
}
@media (max-width: 767px) {
  .footer-credit { --pt: 4%; }
}
