/* De balk boven élke pagina van de drie zones. Eén bestand, want de website, het
   klantenportaal en het beheer horen er als familie uit te zien.

   De kleur van de zone komt uit een variabele die het sjabloon zet, zodat hier
   maar één regel per onderdeel nodig is. */
.zonelint { height: 5px; background: var(--zone, #B98A46); }

.topbalk {
  position: relative; z-index: 50; margin-bottom: 0;
  background: rgba(250, 246, 236, .95); backdrop-filter: blur(8px);
  border-bottom: 2.5px solid var(--ink, #2A2622);
}
/* Meeschuiven doet de balk enkel mét JavaScript. Zónder blijft het ☰-menu
   openstaan, en dan is de balk op een gsm hoger dan het halve scherm: alles wat
   eronder staat zou permanent bedekt zijn en niet meer aan te klikken. Dat
   gebeurde ook echt, bij het twaalfde item in het beheermenu. */
.topbalk.met-js { position: sticky; top: 0; }
.topbalk .tb-in {
  max-width: 1100px; margin: 0 auto; padding: .45rem 1rem;
  display: flex; align-items: center; gap: .6rem;
}
.topbalk .tb-logo { flex: none; display: block; line-height: 0; }
.topbalk .tb-logo img {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover;
  border: 2.5px solid var(--ink, #2A2622); box-shadow: 2px 2px 0 rgba(42, 38, 34, .18);
  mix-blend-mode: multiply; background: var(--card, #FFFDF7);
}

/* ------------------------------------------ de zone en de titel eronder ---*/
.topbalk .tb-wie { flex: 1; min-width: 0; position: relative; }
.topbalk .tb-titel {
  font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 1.02rem;
  line-height: 1.25; margin: .1rem 0 0; letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* De zone is meteen de schakelaar: klikken toont de andere onderdelen. */
.zonekiezer { position: relative; display: inline-block; overflow: visible;
              background: none; border: none; margin: 0; border-radius: 0; }
.zonekiezer > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: .25rem; font-family: 'Baloo 2', cursive; font-weight: 800; font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
  color: var(--zone, #B98A46); border: 1.5px solid var(--zone, #B98A46);
  background: var(--zone-zacht, #F1E4CB); border-radius: 999px; padding: .05rem .45rem;
}
.zonekiezer > summary::-webkit-details-marker { display: none; }
.zonekiezer > summary::after { content: none; }
.zonekiezer > summary:focus-visible { outline: 3px solid var(--honey, #B98A46); outline-offset: 2px; }
.zonekiezer .pijl { font-size: .6rem; }
.zonekiezer[open] .pijl { transform: rotate(180deg); }
.zonekiezer ul {
  position: absolute; z-index: 20; top: calc(100% + .35rem); left: 0; width: 15rem;
  list-style: none; background: var(--card, #FFFDF7); border: 2.5px solid var(--ink, #2A2622);
  border-radius: 14px; padding: .3rem; box-shadow: 3px 4px 0 rgba(42, 38, 34, .18);
}
.zonekiezer ul a {
  display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem;
  border-radius: 10px; font-weight: 700; font-size: .9rem;
  color: var(--ink, #2A2622); text-decoration: none;
}
@media (hover: hover) { .zonekiezer ul a:hover { background: var(--wash, #EFDFC0); } }
.zonekiezer ul a.hier { background: var(--ink, #2A2622); color: var(--paper, #FAF6EC); }
.zonekiezer .bol {
  width: .7rem; height: .7rem; border-radius: 50%; flex: none;
  border: 1.5px solid var(--ink, #2A2622);
}
.zonekiezer ul a.hier .bol { border-color: var(--paper, #FAF6EC); }

/* ------------------------------------------------ wie je bent, en het menu ---*/
.topbalk .tb-chip {
  flex: none; max-width: 11rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-decoration: none; font-weight: 700; font-size: .82rem;
  color: var(--graphite, #6E6558); background: var(--card, #FFFDF7);
  border: 2px solid var(--wash, #EFDFC0); border-radius: 999px; padding: .25rem .7rem;
}
@media (hover: hover) { .topbalk .tb-chip:hover { border-color: var(--ink, #2A2622); } }
.tb-stip {
  display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--honey, #B98A46); border: 1.5px solid var(--ink, #2A2622);
  margin-left: .25rem;
}
.topbalk .tb-menuknop {
  flex: none; cursor: pointer; font: inherit; font-family: 'Baloo 2', cursive;
  font-weight: 800; font-size: 1.15rem; line-height: 1; color: var(--ink, #2A2622);
  background: var(--card, #FFFDF7); border: 2px solid var(--ink, #2A2622);
  border-radius: 999px; padding: .35rem .65rem;
}
@media (hover: hover) { .topbalk .tb-menuknop:hover { background: var(--wash, #EFDFC0); } }

/* Het menu hangt onder de balk. Zonder JavaScript blijft het gewoon openstaan;
   met JavaScript klapt het open en dicht. */
.topbalk .tb-menu {
  list-style: none; margin: 0; padding: .3rem 0 .6rem;
  border-top: 2px solid var(--wash, #EFDFC0);
}
.topbalk.met-js .tb-menu {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--paper, #FAF6EC); border-top: none;
  border-bottom: 2px solid var(--ink, #2A2622);
  box-shadow: 0 10px 18px rgba(42, 38, 34, .14);
}
.topbalk.met-js.open .tb-menu { display: block; }
.topbalk .tb-menu li { width: 100%; text-align: center; }
.topbalk .tb-menu a {
  display: block; padding: .6rem 1rem; text-decoration: none; font-weight: 700;
  color: var(--ink, #2A2622);
}
@media (hover: hover) { .topbalk .tb-menu a:hover { background: var(--wash, #EFDFC0); } }
.topbalk .tb-menu a.actief { color: var(--zone, #B98A46); }
.topbalk .tb-menu .tb-cta {
  display: inline-block; background: var(--ink, #2A2622); color: var(--paper, #FAF6EC);
  border-radius: 999px; padding: .45rem 1.3rem; margin: .4rem auto 0;
}
.topbalk .tb-scheiding {
  border-top: 1px dashed var(--line, #CBBB9C); margin: .35rem 0;
}
.topbalk .sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Op een breed scherm past het menu naast de titel; dan hoeft het niet uit te
   klappen. Op een gsm blijft het achter de ☰-knop. */
@media (min-width: 900px) {
  .topbalk.met-js .tb-menu {
    display: flex; position: static; background: none; border: none; box-shadow: none;
    gap: .2rem; padding: 0; flex-wrap: wrap; justify-content: flex-end;
    max-width: 62%;
  }
  .topbalk .tb-menu li { width: auto; }
  .topbalk .tb-menu a { padding: .3rem .5rem; font-size: .88rem; }
  .topbalk .tb-menu .tb-scheiding { display: none; }
  .topbalk .tb-menu .tb-cta { margin: 0; padding: .3rem .9rem; }
  .topbalk .tb-menuknop { display: none; }
}