html {
  font-size: 16px !important;
}

body h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); }
body h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
body h3 { font-size: clamp(1.4rem, 2vw, 1.4rem); }
body h4 { font-size: clamp(1rem, 1.5vw, 1.2rem); }
body h6 { font-size: clamp(1rem, 1.5vw, 1.2rem); }

.logo-image {
  height: clamp(64px, 10vw, 120px)!important;
  width: auto;
}
#sp-logo {padding-right:0!important;}

/* Alleen in je page content (niet in menu's) */
#sp-component ul {
  margin: 0 0 1.35em 0 !important;
  padding: 0 !important;
  list-style: none !important;   /* echte bullets uit */
}

#sp-component ul li {
  position: relative;
  margin: 0 !important;
  line-height: 24px;
  padding-left: 1.2em;           /* ruimte voor bullet */
}

#sp-component ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
}

/* =====================================
   TOPBAR CONTACT – DESKTOP
===================================== */

.topbar-contact{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;                 /* ruimte tussen items */
  margin: 0;
  padding: 0.5em 0 0.2em 0;
  list-style: none;
}

.topbar-contact li{
  display: inline-flex;
  align-items: center;
  gap: 6px;                  /* vaste afstand icoon ↔ tekst */
  margin: 0;
  padding: 0;
  white-space: nowrap;
  font-size: 15px;           /* desktop corps */
  line-height: 1.3;
}

#sp-top-bar {background: rgb(29,26,22)!important;}

/* Iconen */
.topbar-contact li > span[aria-hidden="true"]{
  font-size: 16px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

/* Links precies als tekst */
.topbar-contact li a{
  font-size: inherit;
  line-height: inherit;
  padding: 0;
  margin: 0;
  display: inline;
  text-decoration: none;
}

/* Afspraak maken: klikvlak groter ZONDER extra ruimte tussen icoon en tekst */
.topbar-contact .sp-contact-booking a{
  display: inline-block;
  padding: 0 14px 0 0;       /* rechts groter, links 0 => afstand blijft gelijk */
}

#sp-top-bar {color: #fff!important;}

/* =====================================
   TOPBAR CONTACT – MOBIEL
===================================== */

@media (max-width: 1012px){

  .topbar-contact{
    flex-wrap: wrap !important;     /* 2 regels toestaan */
    justify-content: flex-start;
    gap: 10px;
  }

  .topbar-contact li{
    float: none !important;         /* Helix override */
    font-size: 13px;                /* mobiel corps */
    line-height: 1.2;
    gap: 6px;                       /* vaste afstand icoon ↔ tekst (ook mobiel) */
  }

  .topbar-contact li > span[aria-hidden="true"]{
    font-size: 13px;
  }

  .topbar-contact li a{
    font-size: inherit;
    line-height: inherit;
  }

  /* Openingstijd: altijd regel 2 + gecentreerd */
  .topbar-contact .sp-contact-opening{
    flex: 0 0 100% !important;
    width: 100% !important;
    justify-content: center !important;
    margin-top: 6px;
  }

  /* compact klikvlak mobiel, nog steeds zonder linker “lucht” */
  .topbar-contact .sp-contact-opening a{
    padding: 3px 10px 3px 0;
  }

 }



/*menu*/
@media (min-width: 992px) {
  #sp-menu ul.sp-megamenu-parent.d-lg-block {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
  }
}

@media (min-width: 992px) {
  #sp-menu { position: relative; top: 8px; }
}

/* footer */
#sp-footer {
  background: rgb(29,26,22)!important;
}

#sp-footer .container-inner {
    padding: 30px 0;
    border-top: 1px solid #d4af37;
}

#sp-footer .mod-custom.custom p > span.fas,
#sp-footer .mod-custom.custom p > span.far { margin-right: 10px; }
#sp-footer .mod-custom.custom p { align-items:baseline; }

/* contact */
  .icon { margin-right: 8px; }
  .value a { font-weight: 300; text-decoration: none; color: #fff; }
  .value:hover { text-decoration: underline; }

/* linkkleur */
/* CONTENT: SP Page Builder + algemene content (alles behalve header/menu) */
body :not(#sp-header):not(#sp-header *)
a:not(.btn):not(.sppb-btn):not(.sp-menu-item a):not(.sp-megamenu-parent a) {
  color: #d4af37 !important;
  transition: color .2s ease;
}

body :not(#sp-header):not(#sp-header *)
a:not(.btn):not(.sppb-btn):not(.sp-menu-item a):not(.sp-megamenu-parent a):hover,
body :not(#sp-header):not(#sp-header *)
a:not(.btn):not(.sppb-btn):not(.sp-menu-item a):not(.sp-megamenu-parent a):focus {
  color: #fff !important;
}

/* EXTRA: Footer (Helix footer blokken) */
#sp-footer a,
#sp-bottom a {
  color: #d4af37 !important;
  transition: color .2s ease;
}

#sp-footer a:hover,
#sp-footer a:focus,
#sp-bottom a:hover,
#sp-bottom a:focus {
  color: #fff !important;
}

/* EXTRA: SP Page Builder (addons) */
.sppb-addon a:not(.sppb-btn),
.sppb-section a:not(.sppb-btn),
.sppb-row a:not(.sppb-btn),
.sppb-col a:not(.sppb-btn),
.sppb-text-block a:not(.sppb-btn) {
  color: #d4af37 !important;
}

.sppb-addon a:not(.sppb-btn):hover,
.sppb-addon a:not(.sppb-btn):focus,
.sppb-section a:not(.sppb-btn):hover,
.sppb-section a:not(.sppb-btn):focus,
.sppb-row a:not(.sppb-btn):hover,
.sppb-row a:not(.sppb-btn):focus,
.sppb-col a:not(.sppb-btn):hover,
.sppb-col a:not(.sppb-btn):focus,
.sppb-text-block a:not(.sppb-btn):hover,
.sppb-text-block a:not(.sppb-bt

/* Helix MegaMenu: active/current kleur (extra specifiek) */
/* Force active kleur Helix megamenu */
#sp-header #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent > li.active > a,
#sp-header #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent > li.active:hover > a,
#sp-header #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent > li.current-item > a,
#sp-header #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent > li.current-item:hover > a {
  color: #d4af37 !important;
}
#sp-header #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent > li > a[aria-current="page"]{
  color: #d4af37 !important;
}