/* ==========================================================================
   VANDENBOORN AUTOMOTIVE - correcties op cl-home.css voor site-breed gebruik.
   Laadt na cl-home.css.

   In cl-home.css zijn de reset en een deel van de knopstijlen gescoped op
   .cl-home. Buiten de homepage viel daardoor box-sizing, de linkreset en de
   Aanbod-knop weg, waardoor de uitlijning versprong. Hieronder staat dat
   alles opnieuw, gescoped op de headercomponenten zelf.

   Verplichte afwijkingen van de bron: Poppins in plaats van Montserrat,
   brons #6B4720 in plaats van groen.
   ========================================================================== */

/* ---------- Typografie ---------- */
html body,
.cl-header, .cl-header *,
.cl-menu, .cl-menu *,
.cl-contact-panel, .cl-contact-panel *,
.cl-contact-mobile,
.cl-footer, .cl-footer *{
  font-family:'Poppins',sans-serif !important;
}

/* ==========================================================================
   1. RESET VOOR DE HEADERCOMPONENTEN BUITEN DE HOMEPAGE
   cl-home.css doet dit alleen binnen .cl-home.
   ========================================================================== */
.cl-header, .cl-header *, .cl-header *::before, .cl-header *::after,
.cl-menu, .cl-menu *, .cl-menu *::before, .cl-menu *::after,
.cl-contact-panel, .cl-contact-panel *, .cl-contact-panel *::before, .cl-contact-panel *::after,
.cl-contact-mobile, .cl-contact-mobile *{
  box-sizing:border-box;
}

.cl-header a,
.cl-menu a,
.cl-contact-panel a,
a.cl-contact-mobile{
  text-decoration:none;
  color:inherit;
  transition:color .3s ease;
}

.cl-header ul, .cl-menu ul, .cl-contact-panel ul{
  margin:0; padding:0; list-style:none;
}

.cl-header img, .cl-menu img{ vertical-align:middle; }
.cl-header p, .cl-menu p{ margin:0 0 1rem; }

.cl-header button, .cl-menu button, .cl-contact-panel button{
  font-family:inherit; font-size:100%; margin:0;
}

/* ==========================================================================
   2. KNOPPEN DIE IN DE BRON OP .cl-home GESCOPED STAAN
   Zonder deze regels is de Aanbod-knop buiten de homepage onzichtbaar.
   ========================================================================== */
.cl-btn-tertiary{
  background:var(--cl-tertiary);
  color:var(--cl-black);
  border-color:var(--cl-tertiary);
}
.cl-btn-tertiary:hover,
.cl-btn-tertiary:focus-visible{
  background:var(--cl-primary);
  color:var(--cl-white);
  border-color:var(--cl-primary);
}

.cl-btn-primary:hover,
.cl-btn-primary:focus-visible,
.cl-btn-primary:active{
  background:var(--cl-secondary);
  color:var(--cl-black);
  border-color:var(--cl-secondary);
}

.cl-btn-outline:hover,
.cl-btn-outline:focus-visible{
  background:var(--cl-white);
  color:var(--cl-black);
  border-color:var(--cl-white);
}

/* Zichtbare, merkeigen focusring op alles in de header. */
.cl-header a:focus-visible,
.cl-header button:focus-visible,
.cl-menu a:focus-visible,
.cl-contact-mobile:focus-visible{
  outline:2px solid var(--cl-primary);
  outline-offset:3px;
}

/* ---------- Belknop ---------- */
.cl-btn-green,
.cl-header .cl-btn-green,
.cl-footer .cl-btn-green{
  background-color:#6B4720 !important;
  border-color:#6B4720 !important;
  color:#FFFFFF !important;
}
.cl-btn-green:hover,
.cl-btn-green:focus-visible,
.cl-header .cl-btn-green:hover,
.cl-footer .cl-btn-green:hover{
  background-color:#8E612B !important;
  border-color:#8E612B !important;
  color:#FFFFFF !important;
}

/* ---------- Actieve pagina in het uitklapmenu ---------- */
.cl-menu__nav a:hover,
.cl-menu__nav a:focus-visible,
.cl-menu__info a:hover,
.cl-user:hover{
  color:#8E612B !important;
}
.cl-menu__nav li.is-current > a,
.cl-menu__nav li.current-menu-item > a{
  border-bottom:4px solid #6B4720 !important;
  padding-bottom:8px;
  color:#FFFFFF !important;
}

/* ==========================================================================
   3. UITLIJNING
   .cl-col gebruikt flex:1 0 0%. De standaard min-width:auto laat kolommen met
   nowrap-knoppen toch groeien, waardoor de drie kolommen ongelijk worden en
   het logo uit het midden schuift. min-width:0 zet dat recht.
   ========================================================================== */
.cl-sub-header .cl-row,
.cl-main-header .cl-row{ align-items:center; }

.cl-main-header .cl-col{ min-width:0; flex:1 1 0%; }
.cl-main-header .cl-col--logo{ flex:0 1 auto; justify-content:center; }

.cl-sub-header__tag,
.cl-sub-header__actions{ min-width:0; }

/* Het logo mag nooit vervormen of wegvallen. */
.cl-logo a{ display:block; line-height:0; }
.cl-logo img{
  height:1.7rem; width:auto; max-width:none; display:block; object-fit:contain;
}

/* Login + hamburger strak op een lijn. */
.cl-main-header .cl-col--right{ display:flex; align-items:center; }
.cl-user{ line-height:1.5; }
.cl-hamburger{
  display:flex; align-items:center; justify-content:flex-end;
  margin:0; height:1.75rem; line-height:0;
  border:0 !important; box-shadow:none !important;
}
.cl-hamburger:focus{ outline:none; }

/* ==========================================================================
   4. BUITEN DE HOMEPAGE
   De header is position:fixed. Alleen het homepage-template had daar een
   opvulling voor. Zonder die opvulling valt de header over de inhoud.
   ========================================================================== */
body:not(.cl-home){
  padding-top:var(--cl-header-h, 118px);
}
@media (max-width:767px){
  body:not(.cl-home){ padding-top:var(--cl-header-h, 72px); }
}

body:not(.cl-home) .cl-header{ background-color:#000000 !important; }
body:not(.cl-home) .cl-menu{ z-index:9999; }
body:not(.cl-home) .cl-contact-mobile{ z-index:9998; }

/* Geen horizontale sprong wanneer het menu de scrollbalk verbergt. */
body.cl-menu-open,
body.cl-no-scroll{ overflow:hidden; }

/* ==========================================================================
   5. DE THEMAHEADER VAN HELLO ELEMENTOR
   Die rendert niet meer, maar blijft hier geblokkeerd voor gecachete pagina's.
   ========================================================================== */
#site-header.site-header{ display:none !important; }