/* Site chrome shared by every page: de kopbalk en de footer. */

/* ===== Kopbalk =====
   Altijd zichtbaar, niet pas na scrollen: de knop "Kaarten" is tot 12 november
   het enige wat deze pagina moet doen, en die hoort niet weg te zijn op de plek
   waar iemand binnenkomt. Sticky en niet fixed, zodat hij geen ruimte afpakt
   van de hero. Geen JavaScript. */
.bar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: rgba(var(--grond-rgb), 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lijn);
}
.bar__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.bar__merk {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--creme);
  text-decoration: none;
  margin-right: auto;
}
.bar__nav { display: flex; gap: 20px; flex-wrap: wrap; }
/* Fraunces, net als het woordmerk ernaast. Hij heeft een optische-grootte-as,
   dus op deze maat kiest de browser vanzelf de kleine-tekstsnit: ruimer gezet
   en steviger van streek dan de display-snit. Nagemeten op 14px — 269,5px
   tegen 214,3px voor dezelfde regel op opsz 144. */
.bar__link {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--creme-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.bar__link:hover { color: var(--creme); border-bottom-color: var(--goud); }

@media (max-width: 620px) {
  .bar__inner { gap: 12px 16px; }
  .bar__nav { order: 3; flex: 0 0 100%; gap: 16px; }
  /* Op een telefoon is dit de knop waar het om draait, en die wordt met een
     duim aangetikt. Met de krappere maat van de balk komt hij op 33px uit en
     dat is te klein; hier dus wat meer lucht, tot ruim 44px. */
  .bar .knop { padding: 11px 16px; }
}

/* De balk staat over de pagina heen, dus een menuklik zou onder de balk
   landen. Ruim genomen: op smal breekt het menu naar een tweede regel. */
[id] { scroll-margin-top: 92px; }
@media (max-width: 620px) { [id] { scroll-margin-top: 116px; } }

/* ===== Footer ===== */
.voet {
  border-top: 1px solid var(--lijn);
  padding-block: 38px 46px;
  font-size: 15px;
  color: var(--creme-3);
}
.voet__inner { display: flex; gap: 14px 30px; flex-wrap: wrap; align-items: baseline; }
.voet__merk {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--creme);
  margin-right: auto;
}
.voet a {
  color: var(--creme-2);
  text-decoration: none;
  border-bottom: 1px solid var(--lijn);
}
.voet a:hover { color: var(--creme); border-bottom-color: var(--goud); }
.voet__colofon {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--lijn);
  font-size: 13.5px;
  color: var(--creme-3);
  max-width: 68ch;
}
.voet__colofon strong { color: var(--creme-2); font-weight: 600; }
.voet__punt { padding-inline: 4px; }