/* =========================================================
   Marketingbende - opfris 2026
   Lichte styling-verbeteringen, aanvullend op style.css +
   services-interactive.css. Laadt als laatste (overschrijft).
   Homepage-specifiek is gescoped op #diensten zodat de losse
   dienstpagina's ongemoeid blijven. Raakt de loader NIET.
   ========================================================= */

/* ---- Fijne details + toegankelijkheid (globaal) ---- */
html { scroll-behavior: smooth; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #25D366;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Dienstensectie: kaarten met rusttoestand + gelijke hoogte ---- */
#diensten .bureau__services {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
/* clearfix-pseudo's niet als flex-item laten meetellen */
#diensten .bureau__services::before,
#diensten .bureau__services::after { display: none !important; }

#diensten .bureau__services > .wpb_column {
  float: none;
  display: flex;
  margin-bottom: 30px;
}
/* bestaande kaart-styling op .wpb_column neutraliseren; kaart verhuist naar .vc_column-inner
   zodat de kolom-gutter een nette tussenruimte tussen de kaarten wordt */
#diensten .bureau__services .wpb_column {
  padding: 0 15px !important;
  border-radius: 0;
  background: transparent !important;
}
#diensten .bureau__services .wpb_column:hover {
  background: transparent !important;
  box-shadow: none;
}

#diensten .bureau__services .vc_column-inner {
  position: relative;
  width: 100%;
  background: #fbfbfd;
  border: 1px solid rgba(17, 17, 17, 0.07);
  border-radius: 14px;
  padding: 32px 24px;
  transition: box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
#diensten .bureau__services .wpb_column:hover .vc_column-inner {
  background: #ffffff;
  border-color: rgba(17, 17, 17, 0.12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
}

/* klikbare kaart (overlay-link wordt via JS toegevoegd) -> ook interne links voor SEO */
#diensten .bureau__services .mb-card-link {
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-indent: -9999px;
}

/* subheading net iets leesbaarder */
.services h1 b { opacity: 0.5; }

/* Uitgebreide dienstpagina's: scanbare FAQ's zonder extra visuele ballast */
.services .service-faq { max-width: 860px; }
.services .service-faq h3 { margin: 2em 0 0.45em; }
.services .service-faq h3:first-child { margin-top: 0; }
.services .service-faq p { margin: 0; }

/* ---- Eén visuele lijn voor CTA's, formulieren en verdiepende blokken ---- */
.mb-home-cta,
.mb-contact-form-section,
.mb-local-context {
  position: relative;
}
.mb-home-cta .wpb_wrapper,
.mb-contact-form-section .wpb_wrapper,
.mb-local-context .wpb_wrapper {
  max-width: 860px;
  margin-inline: auto;
}
.mb-home-cta h2,
.mb-contact-form-section h2,
.mb-local-context h2 {
  letter-spacing: -0.03em;
}
.mb-home-cta p,
.mb-local-context p { max-width: 690px; }
.mb-cta-alternative {
  margin-top: 22px;
  font-size: 15px;
  opacity: .82;
}
.mb-home-cta .cta-btn,
.mb-lead-form .cta-btn,
.services .cta-final .cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 7px;
  font-weight: 700;
  letter-spacing: 0;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.mb-home-cta .cta-btn:hover,
.mb-lead-form .cta-btn:hover,
.services .cta-final .cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

.mb-lead-form-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 34px;
  border: 1px solid rgba(17, 17, 17, .10);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(17, 17, 17, .08);
}
.mb-lead-form-wrap h2 { margin-top: 0; }
.mb-lead-form-intro { max-width: 620px; margin-bottom: 26px; }
.mb-lead-form p { margin: 0 0 18px; }
.mb-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}
.mb-lead-form label {
  display: inline-block;
  margin-bottom: 7px;
  color: #1f1f1f;
  font-size: 14px;
  font-weight: 700;
}
.mb-lead-form input,
.mb-lead-form select,
.mb-lead-form textarea {
  display: block;
  width: 100%;
  border: 1px solid rgba(17, 17, 17, .18);
  border-radius: 7px;
  background: #fff;
  color: #1f1f1f;
  font: inherit;
  line-height: 1.4;
  padding: 12px 13px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mb-lead-form textarea { min-height: 144px; resize: vertical; }
.mb-lead-form input:focus,
.mb-lead-form select:focus,
.mb-lead-form textarea:focus {
  border-color: #25D366;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, .16);
  outline: 0;
}
.mb-form-honeypot { position: absolute; left: -9999px; }
.mb-form-privacy {
  margin: 15px 0 0 !important;
  color: #606060;
  font-size: 13px;
  line-height: 1.55;
}
.mb-form-notice {
  margin: 0 0 22px !important;
  border-radius: 7px;
  padding: 12px 14px;
  font-weight: 600;
}
.mb-form-notice-success { background: #eaf8ef; color: #165b2c; }
.mb-form-notice-error { background: #fff1f0; color: #9a2820; }
.mb-local-context { border-top: 1px solid rgba(17, 17, 17, .08); }

/* ---- Footer: nette hover op nav-links ---- */
.footer .middle-footer-column li a,
.footer .right-footer-column li a {
  transition: color .2s ease;
}
.footer .middle-footer-column li a:hover,
.footer .right-footer-column li a:hover {
  color: #ffffff;
}

/* ---- Logo als niet-heading (1 H1 per pagina); uiterlijk gelijk aan oude h1.site-title ---- */
p.site-title {
  font-weight: bold;
  font-size: 50px;
  letter-spacing: -3px;
  margin: 0.67em 0;
  line-height: 1.1;
}
.white p.site-title a { color: #fff; }

/* ---- Kale tekstpagina (privacybeleid): bovenruimte onder header + leesbreedte ---- */
body.page-id-3 main.container {
  max-width: 880px;
  padding-top: 150px;
  padding-bottom: 90px;
}
body.page-id-3 main.container h1 { margin-top: 0; }
body.page-id-3 main.container h2 { margin-top: 1.6em; }
body.page-id-3 main.container p,
body.page-id-3 main.container li { line-height: 1.7; }

/* ---- Footer-onderbalk met privacylink ---- */
.footer .footer-bottom {
  margin-top: 45px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 13px;
  color: #8a8a8a;
}
.footer .footer-bottom a {
  color: #b1b1b1;
  transition: color .2s ease;
}
.footer .footer-bottom a:hover { color: #fff; }

/* ---- Cookie-consent banner (linksonder, laat WhatsApp-knop rechtsonder vrij) ---- */
.mb-cookie-banner {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 9998;
  width: 400px;
  max-width: calc(100vw - 40px);
  background: #1f1f1f;
  color: #e8e8e8;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  font-size: 13.5px;
  line-height: 1.6;
}
.mb-cookie-banner[hidden] { display: none; }
.mb-cookie-title {
  margin: 0 0 8px;
  color: #fff;
  font-size: 18px;
  line-height: 1.3;
}
.mb-cookie-text { margin: 0 0 14px; }
.mb-cookie-banner a { color: #7ee0a2; text-decoration: underline; }
.mb-cookie-status {
  margin: -4px 0 14px;
  color: #bfc7c2;
  font-size: 12.5px;
}
.mb-cookie-actions { display: flex; gap: 10px; }
.mb-cookie-btn {
  flex: 1 1 0;
  cursor: pointer;
  border: 1px solid rgba(126, 224, 162, 0.72);
  border-radius: 8px;
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  transition: background .2s ease, color .2s ease;
}
.mb-cookie-accept,
.mb-cookie-reject { background: transparent; color: #fff; }
.mb-cookie-accept:hover,
.mb-cookie-reject:hover { background: rgba(126, 224, 162, 0.14); color: #fff; }
.mb-cookie-btn:focus,
.mb-cookie-btn:focus-visible,
.mb-cookie-settings:focus,
.mb-cookie-settings:focus-visible {
  border: 1px solid rgba(126, 224, 162, 0.72);
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.mb-cookie-settings {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 9997;
  cursor: pointer;
  border: 1px solid rgba(126, 224, 162, 0.72);
  border-radius: 999px;
  padding: 8px 14px;
  background: #1f1f1f;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
}
.mb-cookie-settings[hidden] { display: none; }
.mb-cookie-settings:hover { background: #303030; }

/* ---- Mobiel ---- */
@media (max-width: 767px) {
  #diensten .vc_custom_heading,
  #diensten .vc_custom_heading b { text-align: center !important; }

  #diensten .bureau__services > .wpb_column { width: 100%; margin-bottom: 20px; }
  #diensten .bureau__services .vc_column-inner { text-align: center; padding: 28px 22px; }

  p.site-title { font-size: 34px; letter-spacing: -2px; }
  .footer .footer-bottom { justify-content: center; text-align: center; }

  .mb-cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 88px;
    width: auto;
    max-width: none;
    padding: 16px;
    font-size: 13px;
    line-height: 1.5;
  }
  .mb-cookie-title { font-size: 17px; }
  .mb-cookie-text { margin-bottom: 12px; }
  .mb-cookie-actions { gap: 8px; }
  .mb-cookie-btn { padding: 9px 8px; }
  .mb-cookie-settings { left: 12px; bottom: 12px; }

  .mb-lead-form-wrap { padding: 24px 18px; }
  .mb-form-grid { grid-template-columns: 1fr; gap: 0; }
  .mb-home-cta .cta-btn,
  .mb-lead-form .cta-btn { width: 100%; }
}