/* ==========================================================================
   VANDENBOORN AUTOMOTIVE - UI/UX-laag (laadt als allerlaatste, sitebreed).
   1. Hamburgermenu: een onderstreping, alles in beeld op elke schermhoogte,
      scrolbaar als het toch niet past, nette uitlijning op alle breedtes.
   2. Header: identiek op elke pagina, geen verspringen, tikdoelen >= 44px.
   3. Footer: identieke Carlink-footer op elke pagina (Elementor-template 4028).
   4. Leesbaarheid en knoppen op mobiel.
   ========================================================================== */

/* ---------- 1. Hamburgermenu ---------- */
.cl-menu .cl-container{
  margin-top:0 !important;
  padding-top:calc(var(--cl-header-h,140px) + 1.5rem) !important;
  padding-bottom:2rem !important;
  height:100vh !important;
  height:100dvh !important;
  max-height:100dvh;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#8E612B transparent;
}
.admin-bar .cl-menu .cl-container{ padding-top:calc(var(--cl-header-h,140px) + 32px + 1.5rem) !important; }
@media (max-width:782px){ .admin-bar .cl-menu .cl-container{ padding-top:calc(var(--cl-header-h,120px) + 46px + 1rem) !important; } }
.cl-menu .cl-row{ padding-top:.5rem !important; }
.cl-menu__nav ul{ margin:0; padding:0; list-style:none; }
.cl-menu__nav li{ margin:0; }
.cl-menu__nav a{
  font-size:clamp(1.5rem, .9rem + 3.1vh, 2.6rem) !important;
  line-height:1.15 !important;
  padding:.45rem 0 .55rem !important;
  margin:0 0 .35rem !important;
  border:0 !important;
  color:#FFFFFF !important;
  width:-moz-fit-content !important;
  width:fit-content !important;
  position:relative;
  letter-spacing:.01em;
}
.cl-menu__nav li:first-child a{ padding-top:0 !important; }
.cl-menu__nav a:hover,
.cl-menu__nav a:focus-visible{ color:#8E612B !important; }
/* Actieve pagina: precies een lijn (brons), nooit twee. */
.cl-menu__nav li.is-current > a,
.cl-menu__nav li.current-menu-item > a{ border-bottom:0 !important; padding-bottom:.55rem !important; font-weight:700; }
.cl-menu__nav li.is-current a::before,
.cl-menu__nav li.current-menu-item a::before{ display:none !important; content:none !important; }
.cl-menu__nav li.is-current > a::after,
.cl-menu__nav li.current-menu-item > a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:#8E612B; border-radius:2px;
}
/* Infokolom rechts: strakke uitlijning, nooit tegen de rand. */
.cl-menu__info .cl-row{ padding-top:0 !important; }
.cl-menu__info .cl-col-md-6{ margin-bottom:1.75rem !important; }
.cl-menu__info .cl-col-md-6:last-child{ margin-bottom:0 !important; }
.cl-menu__info h4{ font-size:clamp(1.1rem, .9rem + .8vw, 1.5rem) !important; margin-bottom:.5rem !important; }
.cl-menu__info p,.cl-menu__info a,.cl-menu__info li{ font-size:1rem !important; line-height:1.6 !important; }
.cl-menu__info p{ margin-bottom:.5rem !important; }
@media (max-width:767.98px){
  .cl-menu__nav a{ font-size:clamp(1.35rem, .9rem + 2.4vh, 1.9rem) !important; padding:.4rem 0 .5rem !important; margin-bottom:.25rem !important; }
  .cl-menu__info{ margin-top:2rem !important; text-align:left !important; }
  .cl-menu__info .cl-col-md-6{ align-self:flex-start !important; margin-bottom:1.25rem !important; }
  .cl-menu__info .cl-social{ justify-content:flex-start !important; }
}
@media (min-width:768px) and (max-height:700px){
  .cl-menu__nav a{ font-size:clamp(1.3rem, .6rem + 3vh, 2rem) !important; }
  .cl-menu__info .cl-col-md-6{ margin-bottom:1rem !important; }
}

/* ---------- 2. Header: op elke pagina identiek ---------- */
.cl-header .cl-container,
.cl-footer .cl-container,
.cl-footer .e-con.cl-elementor-container{ padding-left:12px; padding-right:12px; } /* = carlink.nl: Bootstrap-gutter 1.5rem, 12px per zijde */
.e-con.cl-elementor-container{ padding-left:12px !important; padding-right:12px !important; }
.cl-sub-header{ padding:.9rem 0 .45rem !important; }
.cl-sub-header__tag{ font-size:clamp(.72rem, .6rem + .35vw, .9rem) !important; letter-spacing:.02em; }
.cl-sub-header__actions .cl-btn,
.cl-main-header .cl-btn-tertiary{ min-height:44px; display:inline-flex !important; align-items:center; justify-content:center; line-height:1.2; }
.cl-sub-header__actions .cl-btn{ font-size:clamp(.72rem, .6rem + .35vw, .8rem) !important; padding:.65rem clamp(.9rem, 1.6vw, 1.5rem) !important; white-space:nowrap; }
.cl-main-header{ padding:.85rem 0 !important; }
.cl-main-header .cl-row{ min-height:52px; }
.cl-main-header .cl-col{ gap:1rem; }
.cl-main-header .cl-col--right{ gap:1.25rem; }
.cl-logo img{ height:clamp(1.25rem, 1rem + 1vw, 1.7rem) !important; }
.cl-user{ min-height:44px; display:inline-flex !important; align-items:center; }
.cl-hamburger{ min-width:44px; min-height:44px; padding:0 !important; justify-content:center !important; }
@media (max-width:575.98px){
  .cl-main-header .cl-col--logo{ justify-content:flex-start !important; }
  .cl-main-header .cl-col--right{ gap:.75rem; }
}
/* Mobiele contactknop: niet over inhoud/footer heen laten vallen, altijd tikbaar. */
.cl-contact-mobile{ min-height:44px; display:inline-flex; align-items:center; padding:.7rem 1.1rem !important; font-size:.8rem !important; box-shadow:0 8px 24px rgba(0,0,0,.35); border-color:#FFFFFF !important; }
@media (min-width:992px){ .cl-contact-mobile{ display:none !important; } }
/* Contactpaneel: binnen het scherm op kleine breedtes. */
.cl-contact-panel{ max-width:calc(100vw - 2rem); }

/* ---------- 3. Footer: Carlink-footer op elke pagina ---------- */
.e-con.cl-footer{ background-color:#000000; }
.cl-footer .elementor-widget-text-editor p:last-child{ margin-bottom:0; }
.cl-footer .cl-with-bullets{ padding-left:0; margin:0; }
.cl-footer .cl-with-bullets li{ list-style:inside !important; color:#FFFFFF; font-size:1rem; line-height:1.6; }
.cl-footer ul li a{ padding:.15rem 0 !important; line-height:1.6; display:inline-block; min-height:28px; }
.cl-footer .cl-social a{ min-width:44px; min-height:44px; align-items:center; justify-content:center; }
.cl-footer .cl-social a:first-child{ margin-left:-12px !important; }
.cl-footer h4,.cl-footer .elementor-heading-title{ font-size:clamp(1.05rem, .9rem + .5vw, 1.5rem) !important; line-height:1.2; }
.cl-footer p,.cl-footer a,.cl-footer li,.cl-footer .elementor-widget-text-editor{ font-size:1rem !important; line-height:1.6; color:#FFFFFF; }
.cl-footer a:hover,.cl-footer a:focus-visible{ color:#8E612B !important; }
.cl-sub-footer .cl-container::before{ top:-16px; }
.cl-sub-footer .elementor-widget-text-editor,
.cl-sub-footer .elementor-widget-text-editor p,
.cl-sub-footer .elementor-widget-text-editor a{ font-size:.9rem !important; font-weight:300; line-height:1.4; }
@media (max-width:767.98px){
  .cl-sub-footer .elementor-widget.cl-copy,
  .cl-sub-footer .elementor-widget.cl-legal{ width:100% !important; }
  .cl-sub-footer .elementor-widget.cl-copy .elementor-widget-container,
  .cl-sub-footer .elementor-widget.cl-legal .elementor-widget-container{ text-align:center !important; }
  .cl-sub-footer .elementor-widget.cl-copy{ order:2; margin-top:.35rem; }
  .cl-sub-footer .elementor-widget.cl-legal{ order:1; }
  .cl-sub-footer .elementor-widget.cl-legal a{ display:inline-block; padding:.25rem .15rem; }
}

/* ---------- 4. Leesbaarheid en knoppen op mobiel ---------- */
.cl-btn{ min-height:44px; display:inline-flex !important; align-items:center; justify-content:center; }
@media (max-width:575.98px){
  .cl-btn{ white-space:normal; text-align:center; }
  .elementor-widget-button .elementor-button{ min-height:44px; }
  .cl-home-search .cl-sf-submit{ width:100%; max-width:360px; }
}
/* Nooit horizontaal scrollen door uitstekende elementen. */
html,body{ max-width:100vw; overflow-x:hidden; }

/* ---------- 5. Minimale lettergrootte: niets kleiner dan 12px ---------- */
.vdb-vcard__status,
.vdb-vcard__status .jet-listing-dynamic-field__content,
.vdb-vcard__ref .jet-listing-dynamic-field__content,
.vdb-card__badge,.vdb-card__status,.vdb-card__cta,.vdb-card__placeholder,
.vdb-car-card__badge.vdb-status--verkocht,
.vdb-drawer .jet-filter-label,.vdb-drawer .jet-filter__label,
.vdb-field label,
.vdb-hdr__bar,.vdb-hdr__bar p,.vdb-hdr__bar .elementor-heading-title,
body.page-id-3956 .vdb-bar select option[value=""]{ font-size:12px !important; }
.vdb-map .leaflet-control-attribution{ font-size:11px !important; }

/* ---------- 6. Header altijd boven het menupaneel, menu compact in beeld ---------- */
/* Het menu kreeg buiten de home z-index 9999 (boven Elementor-inhoud) en bedekte zo de header
   met het sluitkruisje. Header en contactpaneel staan nu altijd boven het menu. */
.cl-header{ z-index:10010 !important; }
body:not(.cl-home) .cl-menu,.cl-menu{ z-index:10000 !important; }
.cl-contact-panel{ z-index:10020 !important; }
.cl-contact-mobile{ z-index:10005 !important; }
.cl-contact-panel--mobile{ z-index:10021 !important; }
/* Menupaneel: minder loze ruimte boven, infokolom compact zodat alles zonder scrollen past (>= 760px hoog). */
.cl-menu .cl-container{ padding-top:calc(var(--cl-header-h,140px) + 1rem) !important; }
.cl-menu .cl-row{ padding-top:0 !important; align-items:flex-start; }
.cl-menu__nav a{ padding:.35rem 0 .5rem !important; margin:0 0 .25rem !important; }
.cl-menu__info .cl-row{ flex-direction:column; }
.cl-menu__info .cl-col-md-6{ width:auto !important; max-width:100%; margin-bottom:1.25rem !important; }
.cl-menu__info h4{ font-size:clamp(1rem, .85rem + .6vw, 1.3rem) !important; margin:0 0 .35rem !important; line-height:1.25; white-space:nowrap; }
.cl-menu__info p,.cl-menu__info a,.cl-menu__info li{ font-size:clamp(.9rem, .8rem + .25vw, 1rem) !important; line-height:1.5 !important; }
.cl-menu__info p{ margin-bottom:.35rem !important; }
.cl-menu__info .cl-social{ margin-top:.25rem; }
.cl-menu__info .cl-social a{ min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; }
@media (min-width:768px) and (max-height:820px){
  .cl-menu__nav a{ font-size:clamp(1.25rem, .5rem + 2.8vh, 2rem) !important; }
  .cl-menu__info .cl-col-md-6{ margin-bottom:.75rem !important; }
  .cl-menu__info p,.cl-menu__info a,.cl-menu__info li{ font-size:.9rem !important; line-height:1.4 !important; }
}

/* ---------- 7. Menupaneel op het raster van de header ---------- */
/* De scrollbalk van het paneel verschoof de inhoud een halve scrollbalkbreedte naar links t.o.v. de header.
   De scrollbalk krijgt nu aan beide zijden gereserveerde ruimte, dus de centrering is identiek aan de header. */
.cl-menu .cl-container{
  scrollbar-gutter:stable both-edges;
  padding-left:clamp(16px, 4vw, 24px) !important;
  padding-right:clamp(16px, 4vw, 24px) !important;
  box-sizing:border-box;
}
/* Twee kolommen op een vast raster: links de navigatie, rechts de info; bovenkanten gelijk. */
.cl-menu .cl-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:3rem;
  row-gap:2rem;
  margin:0 !important;
  align-items:start;
}
.cl-menu .cl-row > *{ padding:0 !important; width:auto !important; max-width:none !important; }
.cl-menu__nav ul{ display:flex; flex-direction:column; align-items:flex-start; }
.cl-menu__nav li:first-child a{ padding-top:0 !important; margin-top:0 !important; }
.cl-menu__nav li:last-child a{ margin-bottom:0 !important; }
/* Rechterkolom: alles tegen de rechterkant, eerste kop op dezelfde hoogte als HOME. */
.cl-menu__info{ text-align:right !important; margin-top:0 !important; }
.cl-menu__info .cl-row{
  display:grid !important;
  grid-template-columns:1fr;
  justify-items:end;
  row-gap:1.25rem;
  column-gap:2.5rem;
  padding:0 !important;
  margin:0 !important;
}
.cl-menu__info .cl-col-md-6{ margin:0 !important; width:auto !important; text-align:right; }
.cl-menu__info .cl-col-md-6:first-child h4{ margin-top:0 !important; padding-top:0 !important; }
.cl-menu__info h4{ line-height:1.15 !important; }
.cl-menu__info .cl-social{ justify-content:flex-end !important; margin:0 !important; }
.cl-menu__info .cl-social a{ padding:0 !important; margin:0 0 0 .5rem !important; }
/* Eerste menuregel en eerste kop rechts op exact dezelfde beginhoogte. */
.cl-menu__nav a{ line-height:1.1 !important; }
.cl-menu__info .cl-col-md-6:first-child h4{ line-height:1.1 !important; font-size:clamp(1.1rem, .9rem + .6vw, 1.35rem) !important; }
/* Breed scherm: adresblokken naast elkaar, 'Volg ons' eronder rechts; zo is de rechterkolom even hoog als het menu. */
@media (min-width:1200px){
  .cl-menu__info .cl-row{ grid-template-columns:auto auto; }
  .cl-menu__info .cl-col-md-6:nth-child(3){ grid-column:1 / -1; }
}
/* Smal scherm: alles onder elkaar, links uitgelijnd op dezelfde kantlijn als de header. */
@media (max-width:767.98px){
  .cl-menu .cl-row{ grid-template-columns:1fr; row-gap:1.75rem; }
  .cl-menu__info,.cl-menu__info .cl-col-md-6{ text-align:left !important; }
  .cl-menu__info .cl-row{ grid-template-columns:1fr; justify-items:start; }
  .cl-menu__info .cl-social{ justify-content:flex-start !important; }
  .cl-menu__info .cl-social a{ margin:0 .5rem 0 0 !important; }
}

/* ---------- 8. Nieuw logo (VB, goud/chroom, verhouding 2,53:1) ---------- */
/* Het oude woordmerk was 5,5:1 en stond op 1,7rem hoog; het nieuwe beeldmerk heeft hoogte nodig om leesbaar te blijven. */
.cl-logo img{ height:clamp(72px, 6vw, 104px) !important; width:auto !important; max-width:min(56vw, 300px) !important; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.cl-main-header{ padding:.5rem 0 !important; }
.cl-main-header .cl-row{ min-height:104px; align-items:center; }
.cl-main-header .cl-col--logo{ margin-top:-.35rem; }
@media (max-width:991.98px){ .cl-logo img{ height:72px !important; } .cl-main-header .cl-row{ min-height:80px; } }
@media (max-width:575.98px){ .cl-logo img{ height:60px !important; max-width:60vw !important; } .cl-main-header .cl-row{ min-height:68px; } }
.cl-header.is-scrolled .cl-logo img,.cl-header--solid .cl-logo img{ filter:none; }