/* logokiezer.css — the strip Joost picks his logo in (logokiezer.py). The pattern of Gevelrenovatie Den Haag's colour
   picker (kiezer b): sticky at the top, the header in under it. The logos themselves are the Logo row's blocks in
   style.css, behind :root[data-logo="n"]. */
:root { --kz-grond: var(--lak); --kz-rand: var(--messing); --kz-tegel: var(--kalk); --kz-font: var(--f-tekst); --kiezer-h: 58px; }
.kiezer { position: sticky; top: 0; z-index: 70; box-sizing: border-box; height: var(--kiezer-h);
  background: var(--kz-grond); color: #fff; border-bottom: 3px solid var(--kz-rand); font: 600 15px/1.2 var(--kz-font); }
.kiezer p { margin: 0; }
.kiezer-in { box-sizing: border-box; height: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; justify-content: center; gap: 20px; }
.kiezer-kop { white-space: nowrap; }
.kiezer-nu { display: none; }
.kiezer-rij { display: flex; gap: 8px; }
.kk { display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box; height: 46px; min-width: 44px;
  padding: 3px 12px 3px 3px; margin: 0; background: transparent; color: inherit; font: inherit; font-weight: 500;
  border: 1.5px solid transparent; border-radius: 5px; cursor: pointer; }
.kk:hover { border-color: rgb(255 255 255 / .35); }
.kk[aria-pressed="true"] { border-color: #fff; font-weight: 700; }
.kk:focus-visible { outline: 2.5px solid var(--kz-rand); outline-offset: 2px; }
.kk-tegel { display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 8px;
  background: var(--kz-tegel); border-radius: 3px; }
.kk-tegel img { display: block; width: auto; height: 26px; }
.kk-naam { white-space: nowrap; }
/* narrower: the names off the buttons, the one picked (short) under "Kies uw logo"; the buttons keep their size
   and place whichever is picked */
@media (max-width: 760px) {
  .kiezer-in { justify-content: space-between; gap: 10px; padding: 0 10px; }
  .kiezer-kop { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.2; }
  .kiezer-nu { display: block; font-weight: 400; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kiezer-rij, .kk { flex: none; }
  .kk { padding: 3px; }
  .kk-naam { display: none; }
}
@media (max-width: 560px) {
  .kk-tegel { height: 34px; padding: 0 6px; }
  .kk-tegel img { height: 20px; }
}
@media (max-width: 380px) {
  .kiezer-kop { font-size: 12.5px; }
  .kiezer-rij { gap: 4px; }
  .kk-tegel { padding: 0 5px; }
  .kk-tegel img { height: 18px; }
}
/* the page under the strip */
.kop { top: var(--kiezer-h); }
html { scroll-padding-top: calc(84px + var(--kiezer-h)); }
@media (max-width: 767px) {
  html { scroll-padding-top: calc(70px + var(--kiezer-h)); }
  .kop { transform: translateY(calc(-105% - var(--kiezer-h))); }
  .kop.toon { transform: none; }
}