/* ============================================
   Header — twee balken, zoals het origineel:
   .topbar vanaf 768px, .mobilebar tot en met 880px
   (tussen 768 en 880px staan ze allebei, net als op het origineel).
   Beide blijven aan de bovenkant plakken; de <header> zelf doet niet
   mee in de opmaak, zodat 'sticky' tegen de hele pagina werkt.
   ============================================ */

.site-header { display: contents; }

/* --- Balk vanaf 768px ---------------------------------------------------- */
/* open uitklapmenu van de bovenste balk ligt, zoals op het origineel, boven de mobiele balk */
.topbar:has(.menu.is-open) { z-index: 100; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  background-color: var(--color-primary);
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.1);
}

.topbar__bar {
  --dir: row;
  --wrap: wrap;
  --justify: space-between;
  --align: center;
  --gap: 2%;
  --pad: 0px;
  --minh: 10vh;
  --content: 1288px;
  --bg: var(--color-primary);
}

.topbar__left {
  --dir: row;
  --justify: space-between;
  --gap: 5.2%;
  --pad: 0px;
  --shrink: 0;
  --w: 64%;
}

.topbar__logo {
  flex: 0 0 auto;
  align-self: center;
  width: 177px;
  max-width: 177px;
  text-align: center;
  line-height: 0;
}
.topbar__logo a { display: inline-block; }
.topbar__logo img {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  height: 62px;
  object-fit: contain;
  vertical-align: middle;
}

.topbar__right {
  --dir: row;
  --justify: flex-end;
  --gap: 10%;
  --pad: 0px;
  --shrink: 0;
  --w: 34%;
}

.topbar__phone {
  flex: 0 0 auto;
  align-self: center;
  width: 48.61%;
  max-width: 48.61%;
  text-align: center;
}
.topbar__cta {
  flex: 0 1 auto;
  align-self: center;
  text-align: right;
}

@media (min-width: 2400px) {
  .topbar__bar { --content: 1140px; }
}

@media (max-width: 1366px) {
  .topbar__right { --gap: 15px; --pr: 25px; }
}

@media (max-width: 1200px) {
  .topbar__bar { --pad: 20px; }
  .topbar__left { --gap: 4px; --w: 610.047px; }
  .topbar__logo { width: 91px; max-width: 91px; }
  .topbar__right { --gap: 7px; --w: 28%; }
  .topbar__phone { width: 135.766px; max-width: 135.766px; }
  .topbar__phone .btn { padding: 13px; }
}

@media (max-width: 1024px) {
  .topbar__bar { --wrap: nowrap; --pt: 0%; --pb: 0%; --pl: 4%; --pr: 4%; }
  .topbar__left { --w: 56%; --pr: 2px; }
  .topbar__logo { width: 30.436%; max-width: 30.436%; }
  .topbar__logo img { width: 131px; }
  .topbar__right { --gap: 20px; --w: 38%; --shrink: 1; }
  .topbar__phone { width: 150.766px; max-width: 150.766px; }
}

@media (max-width: 880px) {
  .topbar__left { --w: 370px; }
  .topbar__right { --w: 84%; }
}

/* --- Balk tot en met 880px ----------------------------------------------- */
.mobilebar {
  position: sticky;
  top: 0;
  z-index: 99;
  --dir: row;
  --gap: 0px;
  --bg: var(--color-primary);
}

.mobilebar__logo,
.mobilebar__cta,
.mobilebar__menu {
  --shrink: 0;
}
.mobilebar__logo { --w: 25%; }
.mobilebar__cta { --w: 50%; }
.mobilebar__menu { --w: 25%; }

.mobilebar__logo a { display: block; text-align: center; line-height: 0; }
.mobilebar__logo img { display: inline-block; vertical-align: middle; }

.mobilebar__cta { text-align: center; }
.mobilebar__cta .btn {
  align-self: center;
  border-width: 1px;
}
@media (hover: hover) {
  .mobilebar__cta .btn:hover { color: var(--color-copper); border-color: var(--color-copper); }
}
.mobilebar__cta .btn:focus-visible { color: var(--color-copper); border-color: var(--color-copper); }

@media (max-width: 767px) {
  .mobilebar { --pad: 6px; }
  .mobilebar__logo { --w: 38%; }
  .mobilebar__cta { --w: 38%; --justify: center; }
  .mobilebar__cta .btn { padding: 13px 15px; }
  .mobilebar__menu { --w: 23%; --justify: center; }
}