/* Woon ik veilig? — BrightHouse-huisstijl, in lijn met brighthouse.consulting
   en de AI-scan: wit, diep navy, merk-roze, navy haarlijnen, scherpe hoeken,
   Archivo Black in uppercase voor koppen, Plus Jakarta Sans voor tekst. */

@font-face {
  font-family: 'Archivo Black';
  src: url('fonts/ArchivoBlack.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #ffffff;
  --ink: #08304c;          /* navy: koppen, merk, haarlijnen */
  --body: #333333;         /* lopende tekst */
  --muted: #585858;        /* gedempt */
  --pink: #f83898;
  --pink-deep: #d61f7d;
  --pink-wash: #ffe6f2;
  --band: #f2f5f9;         /* koele lichte band op de homepage, past bij het navy */
  --yellow: #ffe36e;       /* stempel-accent bij het uitgelichte onderzoek */
  --rule-color: #08304c;
  --line: #dde3ec;         /* koele paneellijn (BrightHouse) */
  --inner-line: #e8e8e8;   /* lichte lijn binnen panelen */
  --track: #efefef;
  /* Scorekleuren: dezelfde drie tiers als scoreColor() in app.js. Donker
     genoeg voor 4,5:1 contrast op wit en op --band, zodat ze ook als kleine
     tekst en als witte tekst op een gekleurd blokje leesbaar blijven. */
  --tier-green: #0a8148;
  --tier-amber: #b05700;
  --tier-red: #c93b3b;
  --error: var(--tier-red);
  --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Archivo Black', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --gradient-pink: linear-gradient(95deg, #ff5cae, #f83898 55%, #e22389);
  --rule: 1px solid var(--rule-color);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--pink); color: #fff; }

header, main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Wordmark (alleen in de footer) */
.masthead {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  text-decoration: none;
}

.masthead .mh-house {
  display: inline-block;
  margin-left: 0.2em;
  padding: 0.1em 0.16em 0.12em;
  background: var(--pink);
  color: #fff;
  box-shadow: 0.13em 0.13em 0 var(--ink);
}

.masthead .mh-dot {
  display: inline-block;
  width: 0.22em;
  height: 0.22em;
  margin-left: 0.22em;
  background: var(--ink);
}

/* Hero */
.hero { padding: 56px 0 40px; text-align: left; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pink-deep);
}

.brand-sq {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--gradient-pink);
  flex: none;
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 18px 0 0;
  max-width: 22ch;
  text-wrap: balance;
  /* Lange accentwoorden (stadsnamen, 'LEEFSCORE') mogen breken in plaats van
     buiten de paginamarge te steken; met box-decoration-break loopt het roze
     blok netjes door over twee regels. */
  overflow-wrap: break-word;
}

/* Het logo-blok uit het wordmark: wit op roze met navy slagschaduw */
h1 .accent {
  display: inline-block;
  color: #fff;
  background: var(--pink);
  padding: 0 0.12em;
  box-shadow: 0.08em 0.08em 0 var(--ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.tagline {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--body);
  max-width: 52ch;
  margin: 22px 0 0;
  text-wrap: pretty;
}

/* Zoekbalk */
.search-bar {
  display: flex;
  gap: 10px;
  max-width: 560px;
  margin: 0;
}

#postcode-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font);
  font-size: 1.1rem;
  font-weight: 500;
  padding: 15px 16px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}

#postcode-input:focus { outline: none; border-color: var(--pink); }
#postcode-input::placeholder { color: #9aa0a6; font-weight: 500; }

/* Signaalknop met harde slagschaduw, exact als btn-rainbow */
#search-button {
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 26px;
  border: none;
  background: var(--pink);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 5px 5px 0 var(--ink);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

#search-button:hover {
  background: var(--pink-deep);
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--ink);
}

#search-button:disabled { opacity: 0.6; cursor: wait; }

#search-button:focus-visible,
.chip:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}

.examples {
  text-align: center;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 22px 0 0;
}

.chip {
  border: none;
  background: none;
  padding: 4px 2px;
  margin: 0 8px;
  font: inherit;
  color: var(--pink-deep);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: pointer;
}

.chip:hover { color: var(--ink); }

/* Inhoudsopgave op de lege beginpagina */
.pillars {
  max-width: 640px;
  margin: 44px auto 0;
  padding: 14px 0;
  border-top: var(--rule);
  border-bottom: var(--rule);
  text-align: center;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--muted);
}

/* Status en fouten */
#status[hidden] { display: none; }

#status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 48px 0;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

#status:not(.error)::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid var(--track);
  border-top-color: var(--pink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(1turn); } }

#status.error { color: var(--error); }

/* Resultaat */
/* Weinig padding onder het rapport: de sectie "Onderzoek & ranglijsten"
   sluit er direct op aan (haar eigen marge geeft de tussenruimte). */
#result {
  padding-bottom: 8px;
  animation: rise 0.4s ease-out;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.location {
  padding: 30px 0 14px;
  border-bottom: 2px solid var(--ink);
}

/* Het adres als roze blok, zoals de koppen op de detailpagina's */
.location-tag {
  display: inline-block;
  padding: 0.28em 0.5em;
  background: var(--pink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  line-height: 1.15;
  text-transform: uppercase;
  box-shadow: 0.18em 0.18em 0 var(--ink);
  text-wrap: balance;
}

.location-tag:empty { display: none; }

/* Score als groot Archivo-getal, zoals de AI-scan */
.score-hero {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding: 34px 0 20px;
  border-bottom: var(--rule);
  margin-bottom: 8px;
}

.score-box {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 17vw, 9rem);
  line-height: 0.82;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.score-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 8px;
}

.score-title {
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pink-deep);
}

.score-label {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.6vw, 2.4rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.05;
}

.score-reason {
  max-width: 46ch;
  margin-top: 2px;
  font-size: 0.96rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--body);
  text-wrap: pretty;
}

.score-context {
  max-width: 46ch;
  margin-top: 8px;
  padding-left: 12px;
  border-left: 3px solid var(--pink);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}
.score-context:empty { display: none; }

.score-sub {
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* De twee vervolgstappen onder de score. Eén paar, dus exact dezelfde maat en
   letterafstand; het verschil zit in de vulling: delen is de primaire actie,
   vergelijken de tweede. */
.share {
  position: relative;
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.share-button,
.compare-link {
  display: inline-block;
  padding: 11px 18px;
  border: 2px solid var(--ink);
  font-family: var(--font);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: background 0.12s ease-out, color 0.12s ease-out,
    transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

.share-button {
  background: var(--pink);
  color: #fff;
}

.share-button:hover { background: var(--pink-deep); }

.share-button:hover,
.compare-link:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

.share-button:focus-visible,
.compare-link:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}

.share-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 190px;
  padding: 6px;
  background: var(--paper);
  border: var(--rule);
  box-shadow: 4px 4px 0 var(--ink);
}

.share-menu[hidden] { display: none; }

.share-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--ink);
  padding: 9px 10px;
  text-decoration: none;
}

.share-option:hover { background: var(--pink-wash); color: var(--pink-deep); }

.share-option:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

/* Herkomstregel bij de data */
.data-source {
  margin: 18px 0 0;
  padding: 10px 14px;
  border: var(--rule);
  background: var(--pink-wash);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

/* Kaart */
.map-block { margin: 36px 0 44px; }

.map-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.map-heading h2 {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  font-weight: 400;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}

.map-heading p {
  margin: 0;
  max-width: 260px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-align: right;
}

.map-kicker {
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink-deep);
}

.map-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.map-metric {
  position: relative;
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease-out, background 0.12s ease-out;
}

.map-metric:hover { border-color: var(--pink); background: var(--pink-wash); }

.map-metric.active {
  border: 2px solid var(--ink);
  padding: 13px 14px;
  background: var(--pink-wash);
  box-shadow: inset 5px 0 0 var(--pink);
}

.map-metric span {
  display: block;
  margin-bottom: 7px;
  font-weight: 800;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.map-metric strong {
  display: block;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3vw, 1.55rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.map-metric small {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-metric:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

#map {
  position: relative;
  overflow: hidden;
  height: 360px;
  border: 2px solid var(--ink);
  background: #fff;
  touch-action: none;
  user-select: none;
  cursor: grab;
}

#map:active { cursor: grabbing; }

.map-canvas { position: absolute; inset: 0; }

.map-tile {
  position: absolute;
  width: 256px;
  height: 256px;
  pointer-events: none;
}

.map-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.58;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.map-marker {
  position: absolute;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  background: var(--pink);
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--ink), 0 4px 12px rgba(8, 48, 76, 0.22);
  pointer-events: none;
}

.map-zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(8, 48, 76, 0.16);
}

.map-zoom button {
  width: 34px;
  height: 34px;
  border: none;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.map-zoom button + button { border-top: var(--rule); }
.map-zoom button:hover { background: var(--pink); color: #fff; }

.map-zoom button:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: -2px;
}

.map-layer-label {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 8px 11px;
  border: 2px solid var(--ink);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 2px solid var(--ink);
  border-top: 0;
  background: #fff;
}

.map-legend-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
}

.map-legend-title {
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--muted);
  text-wrap: pretty;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--muted);
}

.map-legend[hidden] { display: none; }

.map-location-key {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}

.map-location-key i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 2px var(--ink);
  vertical-align: -1px;
}

.map-explanation {
  margin: 10px 0 0;
  padding: 12px 14px;
  border-left: 4px solid var(--pink);
  background: var(--panel);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--body);
  text-wrap: pretty;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.legend-item i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid var(--inner-line);
  margin-right: 5px;
  vertical-align: -1px;
}

/* De klasse waar de gemarkeerde postcode in valt, zodat kleur en cijfer
   elkaar bevestigen in plaats van los van elkaar te staan. */
.legend-item.current {
  border-color: var(--ink);
  background: var(--pink-wash);
  font-weight: 800;
  color: var(--ink);
}

.legend-item.current i { border-color: var(--ink); }

.legend-item.current b {
  margin-left: 6px;
  padding: 2px 5px;
  background: var(--pink);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

/* Schaalbalk linksonder op de kaart */
.map-scale {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border: 2px solid var(--ink);
  background: rgba(255, 255, 255, 0.94);
}

.map-scale span {
  display: block;
  height: 7px;
  border: 2px solid var(--ink);
  border-top: 0;
}

.map-scale small {
  font-weight: 800;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.map-block figcaption {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 0;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Affiliate */
.affiliate-list {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.affiliate-list[hidden] { display: none; }

.affiliate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  padding: 26px;
  border: 2px solid var(--ink);
  background: var(--band);
}

.affiliate-body { flex: 1; min-width: 240px; }

.affiliate h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}

.affiliate p { font-size: 0.92rem; font-weight: 500; color: var(--body); text-wrap: pretty; }

.affiliate-action { display: flex; flex-direction: column; gap: 8px; }

.affiliate-link {
  display: inline-block;
  padding: 15px 26px;
  background: var(--pink);
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  box-shadow: 5px 5px 0 var(--ink);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.affiliate-link:hover {
  background: var(--pink-deep);
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--ink);
}

.affiliate-link:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

p.affiliate-note {
  flex-basis: 100%;
  margin: 0;
  text-align: right;
  font-weight: 500;
  font-size: 0.66rem;
  line-height: 1.4;
  color: var(--muted);
  opacity: 0.5;
}

/* Rapportkaarten */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 8px;
}

.card {
  background: #fff;
  border: var(--rule);
  padding: 20px;
  transition: background 0.15s ease;
}

.card:hover { background: var(--pink-wash); }

.card h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Het onderdeel als roze blokje, gelijk aan de tags op de kaarten elders.
   Klikken erop klapt "Alle cijfers" open (zie app.js). */
/* Het roze blokje draagt alleen nog de naam van het onderdeel. Het plusje
   stond hier eerder als opener, maar die zit ook al onderaan de kaart bij
   "Alle cijfers"; twee openers voor hetzelfde en het plusje werd bij openen
   een kruisje pal naast het woord. De nummers 01 tot 05 zijn eruit: die
   suggereerden een volgorde die er niet is en aten de ruimte op die de naam
   nodig had om leesbaar te zijn. */
.card-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--ink);
  background: var(--pink);
  color: #fff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.12s ease-out;
}

.card-tag:hover { background: var(--ink); }
.card-tag:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

.subscore {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  padding: 3px 9px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.card-main {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
  min-height: 3em;
  text-wrap: pretty;
}

.card-main .quality { font-weight: 800; }

.card-explain {
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--body);
  margin-bottom: 14px;
  text-wrap: pretty;
}

/* Elk onderwerp op een eigen regel, zodat de kaart scant als een lijstje maar
   leest als tekst. Vet mag maar één keer per kaart; zet je er drie, dan valt
   er niets meer op. */
.card-line {
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--body);
  margin: 0 0 7px;
  text-wrap: pretty;
}

.card-explain-lines { margin-bottom: 14px; }
.card-explain-lines .card-line:last-child { margin-bottom: 0; }
.card-line strong { font-weight: 800; color: var(--ink); }

/* Contextregels in de tabellen: advies, landelijk gemiddelde, meetmoment.
   Grijs, zodat ze niet als meting van deze buurt lezen. */
.card-details li.row-ref { color: var(--muted); font-style: italic; }

/* De norm achter de meting: klein, grijs en cursief, zodat hij nooit als de
   waarde zelf leest. */
/* Het streepje op de plek van de norm in het balkje. */
.meter { position: relative; }
.meter-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ink);
  /* wit randje zodat het streepje ook op een gevulde balk afsteekt */
  box-shadow: 0 0 0 1px #fff;
}

.row-norm {
  margin-left: 8px;
  color: var(--muted);
  font-weight: 500;
  font-style: italic;
  font-size: 0.82em;
}
.card-details li.row-ref .row-top span { color: var(--muted); font-weight: 500; }

.card-more summary {
  cursor: pointer;
  list-style: none;
  padding: 9px 0 2px;
  border-top: 1px solid var(--inner-line);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink-deep);
}

.card-more summary::-webkit-details-marker { display: none; }
.card-more summary::after { content: " +"; }
.card-more[open] summary::after { content: " \00d7"; }
.card-more summary:hover { color: var(--ink); }

.card-more summary:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

.card-details {
  list-style: none;
  margin-top: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.card-details li { padding: 8px 0; border-top: 1px solid var(--inner-line); }
.card-details li:first-child { border-top: none; }

.row-top { display: flex; justify-content: space-between; gap: 8px; }

.row-top span:last-child {
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.meter { height: 8px; background: var(--track); margin-top: 7px; overflow: hidden; }

.meter i {
  display: block;
  height: 100%;
  animation: grow 0.8s ease-out;
  transform-origin: left;
}

@keyframes grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Voorbehoud bij de leefscore als er een onderdeel ontbreekt. Bewust naast het
   cijfer en niet weggestopt: zonder deze regel leest een hoog cijfer met een
   gat erin als een goed cijfer. */
.score-caveat {
  margin-top: 10px;
  padding: 9px 12px;
  border-left: 3px solid var(--pink);
  background: var(--band);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--body);
  max-width: 60ch;
  text-wrap: pretty;
}

/* "Goed om te weten": feiten naast de score, bewust zonder cijfer en zonder
   meter. De kernzin kleurt sinds augustus 2026 wel mee in de tiers (via
   .tier-*-text); een getal komt er nooit bij, want dan leest dit als een
   zevende deelscore. */
/* Fundering en gezondheid zijn hetzelfde soort ding: een feit zonder cijfer.
   Dus krijgen ze ook dezelfde vorm, naast elkaar. */
.facts-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.facts-duo > .fact + .fact {
  padding-top: 12px;
  border-top: none;
  border-left: 1px solid var(--inner-line);
}

@media (max-width: 720px) {
  .facts-duo { grid-template-columns: 1fr; }
  .facts-duo > .fact + .fact { border-left: none; border-top: 1px solid var(--inner-line); }
}

.facts-block {
  margin-top: 40px;
  border: 2px solid var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  background: #fff;
}

.facts-kicker {
  margin: 0;
  padding: 20px 26px 0;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink-deep);
}

.fact { padding: 12px 26px 20px; }

.fact + .fact { padding-top: 20px; border-top: 1px solid var(--inner-line); }

.fact-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 1.25rem;
  margin: 0 0 8px;
}

.facts-note {
  margin: 0;
  padding: 14px 26px 18px;
  border-top: 1px solid var(--inner-line);
  background: var(--band);
  font-size: 0.8rem;
  color: var(--muted);
  max-width: none;
  text-wrap: pretty;
}

.fact-lead {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 6px 0;
  text-wrap: pretty;
}

.fact-body {
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--body);
  margin: 0 0 10px;
  max-width: 72ch;
  text-wrap: pretty;
}

.fact-body:last-of-type { margin-bottom: 0; }
.fact-body strong { font-weight: 800; color: var(--ink); }

.fact-source { font-size: 0.72rem; color: var(--muted); margin: 8px 0 0; }

/* Ranglijst */
#ranking { margin-top: 56px; }

#ranking h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 4px;
}

#ranking-sub {
  margin-bottom: 18px;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  text-wrap: pretty;
}

.ranking-panel { border: var(--rule); }

#ranking-table {
  width: 100%;
  border-collapse: collapse;
}

#ranking-table th {
  padding: 12px;
  border-bottom: 2px solid var(--ink);
  font-weight: 800;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  vertical-align: bottom;
}

#ranking-table th.num,
#ranking-table td.num { text-align: right; white-space: nowrap; }

#ranking-table td {
  padding: 10px 12px;
  border-top: 1px solid var(--inner-line);
  font-size: 0.82rem;
  color: var(--body);
  vertical-align: middle;
}

#ranking-table tbody tr:first-child td { border-top: none; }

#ranking-table .rank {
  width: 2.4em;
  text-align: right;
  padding-right: 4px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--pink);
}

#ranking-table td.num {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

#ranking-table td.leefscore { font-size: 1.05rem; }
#ranking-table td.extra { font-size: 0.95rem; }

.rank-name-cell { font-weight: 700; color: var(--ink); }

button.rank-name {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-bottom: 2px solid var(--pink);
}

button.rank-name:hover { color: var(--pink-deep); }
button.rank-name:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

#ranking-table tr.current td,
#ranking-table tr.current .rank-name-cell { color: var(--pink-deep); }

#ranking-table tr.gap td { border-top: 2px dashed var(--muted); }

.skeleton-bar {
  display: block;
  height: 11px;
  background: var(--track);
}

/* Bronvermelding */
.disclaimer {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 2px solid var(--ink);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--muted);
  text-wrap: pretty;
}

.disclaimer a { color: var(--pink-deep); font-weight: 700; }

.disclaimer-lead { margin: 0; }

.disclaimer-more { margin-top: 10px; }
.disclaimer-more summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.disclaimer-more summary::-webkit-details-marker { display: none; }
.disclaimer-more summary::before {
  content: "+ ";
  color: var(--pink-deep);
  font-weight: 700;
}
.disclaimer-more[open] summary::before { content: "\2013 "; }
.disclaimer-more summary:hover { color: var(--pink-deep); }
.disclaimer-more summary:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.disclaimer-detail { margin-top: 10px; }
/* De bronvermelding stond als één alinea van 300 woorden onder het rapport en
   was daardoor onleesbaar. Nu een lijst met een regel per onderdeel; de globale
   ul-reset zet padding op 0, dus hier weer ruimte maken voor de bullet. */
ul.disclaimer-detail { padding-left: 17px; }
ul.disclaimer-detail li { margin-bottom: 7px; }
ul.disclaimer-detail li:last-child { margin-bottom: 0; }

/* Footer */
.site-footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px 48px;
  border-top: 2px solid var(--ink);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--muted);
  text-align: center;
  text-wrap: pretty;
}

.site-footer a { color: var(--pink-deep); font-weight: 700; }
.site-footer strong { color: var(--ink); }
.site-footer p { margin-bottom: 6px; }

.footer-cities {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--inner-line);
  line-height: 2;
}
.footer-cities span { color: var(--muted); font-weight: 700; margin-right: 8px; }
.footer-cities a { color: var(--muted); font-weight: 600; }
/* Zichtbaar scheidingsteken met lucht eromheen; var(--inner-line) was zo licht
   dat de links tegen elkaar leken te plakken. */
/* Spaties rond de punt geven afbreekpunten, zodat lange link-rijen (24 steden)
   op smalle schermen netjes wrappen in plaats van buiten de pagina te lopen. */
.footer-cities a:not(:last-child)::after { content: " · "; color: var(--muted); font-weight: 700; }
.footer-cities a:hover { color: var(--pink-deep); }

/* Het merk staat er vol op; bij hover gedraagt het zich als een knop:
   dezelfde verschuiving en slagschaduw als de roze knoppen elders. */
.footer-mark {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 19px;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.footer-mark:hover { transform: translate(-2px, -2px); }
.footer-mark:hover .mh-house { box-shadow: 0.24em 0.24em 0 var(--ink); }
.footer-mark:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }

/* Respecteer prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #result { animation: none; }
  .meter i { animation: none; }
  #search-button, .affiliate-link { transition: none; }
}

/* Mobiel */
@media (max-width: 680px) {
  .site-head { flex-wrap: wrap; gap: 6px; }
  .hero { padding: 40px 0 32px; }
  .search-bar { flex-direction: column; }
  #search-button { width: 100%; padding: 15px; box-shadow: 4px 4px 0 var(--ink); }
  /* Twee losse knopbreedtes onder elkaar oogt rafelig; op mobiel dus een
     nette stapel over de volle breedte. */
  .share { align-self: stretch; }
  .share-button, .compare-link { width: 100%; }
  .share-menu { right: 0; }
  .cards { grid-template-columns: 1fr; }
  .card-main { min-height: 0; }
  .map-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .map-heading p { max-width: none; text-align: left; }
  .map-metrics { grid-template-columns: 1fr; }
  .map-metric { display: grid; grid-template-columns: minmax(90px, 0.7fr) 1fr; align-items: center; column-gap: 12px; }
  .map-metric span { grid-row: 1; margin: 0; }
  .map-metric strong { grid-column: 2; grid-row: 1; font-size: 1.2rem; text-align: right; }
  .map-metric small { grid-column: 1 / -1; margin-top: 7px; white-space: normal; }
  #map { height: 280px; }
  .map-meta { flex-direction: column; }
  .map-location-key { order: -1; }
  .map-block figcaption { align-items: flex-start; flex-direction: column; }
  .pillars { max-width: none; }
  #ranking-table th.extra,
  #ranking-table td.extra { display: none; }
  #ranking-table th, #ranking-table td { padding: 8px; }
  /* Kleinere hero-kop op smalle schermen, en de 12ch-max-width los, zodat het
     roze accentwoord (lange stadsnamen, 'LEEFSCORE') de volle contentbreedte
     mag gebruiken en binnen de paginamarge blijft. */
  h1 { font-size: clamp(1.8rem, 7.5vw, 2.9rem); max-width: none; }
  h1 .accent { overflow-wrap: break-word; }
}

/* ---------- Informatiepagina's (/methode, /bronnen, /over, /pers, /dataset) ---------- */

.doc-section { margin: 40px 0; }

.doc-section h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 12px;
  text-wrap: balance;
}

.doc-section h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  margin: 24px 0 8px;
}

.doc-section p,
.doc-section li {
  max-width: 75ch; /* leesbare regellengte; tabellen en kaarten mogen wel vol */
  line-height: 1.7;
  color: var(--body);
  text-wrap: pretty;
}

.doc-section p { margin: 0 0 12px; }
.doc-section ul, .doc-section ol { margin: 0 0 12px; padding-left: 20px; }
.doc-section a { color: var(--pink-deep); font-weight: 700; }

.doc-intro {
  margin: 8px 0 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--body);
  text-wrap: pretty;
}

.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  margin: 0 0 12px;
}

.doc-table th, .doc-table td {
  text-align: left;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--inner-line);
  vertical-align: top;
  line-height: 1.5;
}

.doc-table th { color: var(--ink); font-weight: 800; font-size: 0.85rem; }
.doc-table td.num, .doc-table th.num { text-align: right; padding-right: 0; padding-left: 18px; white-space: nowrap; }
/* Een getalkolom staat rechts uitgelijnd en zonder padding rechts, zodat de
   laatste kolom netjes gelijk loopt met de rand van de tabel. Komt er daarna
   nog een gewone kolom (die links uitlijnt), dan plakken de twee tegen elkaar
   aan; die krijgt dus zelf de ruimte. Bijv. Inwoners naast Luidste buurt. */
.doc-table td.num + td:not(.num),
.doc-table th.num + th:not(.num) { padding-left: 18px; }
.doc-table td.doc-ref { color: var(--muted); font-weight: 600; font-size: 0.85rem; white-space: nowrap; padding-left: 12px; }

.doc-terms dt { font-weight: 800; color: var(--ink); }
.doc-terms dd { margin: 0 0 10px; color: var(--body); line-height: 1.7; }

.doc-note { color: var(--muted); font-size: 0.9rem; }

.doc-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.doc-link, .doc-section a.doc-link {
  display: inline-block;
  padding: 6px 12px;
  border: var(--rule);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink);
  text-decoration: none;
}
.doc-link:hover, .doc-section a.doc-link:hover { background: var(--pink-wash); color: var(--pink-deep); }

/* Kleinere hero-kop voor pagina's met lange, niet-stuurbare titels
   (datasetpagina's); de standaard h1-maat is bemeten op korte koppen. */
h1.doc-h1 { font-size: clamp(1.9rem, 5.5vw, 3.2rem); line-height: 1.05; overflow-wrap: break-word; }

/* ---------- Data-gedreven pagina's (gemeente, provincie) ---------- */

/* AI-overzicht / samenvatting bovenaan: citeerbaar, rustig kader */
.ai-overview {
  margin: 8px 0 4px;
  padding: 16px 18px;
  background: var(--pink-wash);
  border: 1px solid #f6cbe0;
}
.ai-overview p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--ink); text-wrap: pretty; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--pink-deep); }
.breadcrumb .crumb-sep { color: var(--inner-line); }

/* Terugknop vooraan het kruimelpad */
.breadcrumb .crumb-back {
  margin-right: 6px;
  padding: 8px 12px;
  background: var(--paper);
  border: 2px solid var(--ink);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

.breadcrumb .crumb-back:hover {
  background: var(--pink);
  color: #fff;
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

.breadcrumb .crumb-back:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.breadcrumb span[aria-current] { color: var(--ink); }

.faq-item {
  border-top: 1px solid var(--inner-line);
  padding: 12px 0;
}
.faq-item summary {
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "+ "; color: var(--pink-deep); font-weight: 800; }
.faq-item[open] summary::before { content: "– "; }
.faq-item p { margin: 8px 0 0; line-height: 1.7; color: var(--body); }

.doc-list { margin: 0; padding-left: 20px; line-height: 1.8; color: var(--body); }
.doc-list strong { color: var(--ink); }

.trend { margin: 12px 0; }
.trend svg { width: 100%; max-width: 360px; height: auto; }

/* Kleinere hero-kop voor de data-pagina's: "Leefbaarheid in X" bevat lange
   woorden die in de volle hero-maat lelijk mid-woord zouden breken. */
h1.hero-h1 { font-size: clamp(1.9rem, 5.5vw, 3.1rem); max-width: none; line-height: 1.0; }

/* Nadruk in lopende tekst en tabellen: groen voor gunstig, rood voor ongunstig
   (de scorekleuren uit de huisstijl). Namen en kerncijfers zijn vet via <strong>. */
.pos { color: var(--tier-green); font-weight: 800; }
.neg { color: var(--tier-red); font-weight: 800; }
.doc-table .pos, .doc-table .neg { font-weight: 800; }
/* Themawoord (misdaad, gezondheid ...): vet in de merk-navy zodat het thema
   van een zin opvalt zonder met de groen/rood-vergelijkingen te botsen. */
.theme { font-weight: 800; color: var(--ink); }

/* Brede tabellen scrollen zelf horizontaal; de pagina nooit. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .doc-table { min-width: 560px; }

/* Ranglijsttabel: smalle rangkolom met tabular-nums, cijferkolommen op adem */
.ranking-table td.rank, .ranking-table th.rank {
  width: 2.4em; text-align: right; padding-right: 14px;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.ranking-table td.num, .ranking-table th.num { font-variant-numeric: tabular-nums; }
.ranking-table a { text-decoration: none; font-weight: 700; }
.ranking-table a:hover { text-decoration: underline; }

/* ---------- Choropleth kaart ---------- */
.map-figure {
  margin: 18px 0 0;
  padding: 18px;
  border: 2px solid var(--ink);
  background: #fff;
}
.map-figure svg {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto;
  padding: 8px;
  background: var(--panel);
}
.map-figure svg a { cursor: pointer; }
.map-figure svg path { transition: fill-opacity 0.12s ease-out, stroke-width 0.12s ease-out; }
.map-figure svg a:hover path { fill-opacity: 0.72; stroke: var(--ink); stroke-width: 1.4; }
.map-figure svg a:focus-visible path { outline: 2px solid var(--ink); }
.map-legend-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin: 14px auto 0;
  padding-top: 13px;
  border-top: 1px solid var(--inner-line);
  font-size: 0.76rem;
  color: var(--muted);
}
.map-key { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.map-swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid rgba(0,0,0,0.1); }
.map-figure figcaption { margin-top: 10px; color: var(--muted); font-size: 0.85rem; text-align: center; text-wrap: pretty; }

/* ---------- Homepage: onderzoek & ranglijsten ---------- */
.home-explore { margin: 56px 0 20px; }
.home-explore h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
}
.explore-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.explore-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 16px 18px;
  border: var(--rule);
  text-decoration: none;
  background: var(--paper);
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}
.explore-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.explore-card:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.explore-eyebrow {
  align-self: flex-start;
  padding: 4px 8px;
  background: var(--pink);
  border: 1px solid var(--ink);
  font-weight: 800; font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: #fff;
}
.explore-title { font-weight: 800; font-size: 1.02rem; color: var(--ink); line-height: 1.25; text-wrap: balance; }
.explore-sub { font-size: 0.9rem; color: var(--muted); line-height: 1.5; text-wrap: pretty; }

/* Onderzoekhub: dezelfde kaart, met het kerncijfer eronder uitgelicht, in de
   vorm van de feiten bij het uitgelichte onderzoek op de homepage. Drie vaste
   kolommen, want auto-fit gaf bij zes kaarten een rij van vier en een van twee.
   Subgrid geeft elke kaart in een rij dezelfde drie hoogtes, zodat de streep en
   het cijfer over de hele rij op één lijn liggen, ook bij een kop die afbreekt. */
.study-cards { grid-template-columns: repeat(3, 1fr); }
.study-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  align-content: start;
  gap: 8px;
  padding: 18px 18px 20px;
}
/* in een grid rekt align-self niet horizontaal, dus het roze blokje apart */
.study-card .explore-eyebrow { justify-self: start; }
.study-stat {
  display: block;
  padding-top: 12px;
  border-top: 2px solid var(--ink);
}
.study-stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.study-stat i {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
/* Zichtbare ingang onderaan de kaart. Bewust tekst en geen knop: negen roze
   knoppen op één pagina vechten om aandacht, en de kaart zelf is al de link. */
.study-cta {
  align-self: end;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pink);
}
.study-card:hover .study-cta { color: var(--pink-deep); }

@media (max-width: 900px) {
  .study-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .explore-cards, .study-cards { grid-template-columns: 1fr; }
}

/* ---------- Homepage: gesplitste hero met voorbeeldkaart ---------- */
.section-head { margin: 0 0 20px; }

.section-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 8px 0 0;
  text-wrap: balance;
}

.section-intro {
  max-width: 75ch;
  margin: 0 0 22px;
  color: var(--muted);
  text-wrap: pretty;
}

/* Linkraster naar de gemeentepagina's. Beschrijvende ankers ("Leefbaarheid in
   Amsterdam") in plaats van kale plaatsnamen, want dat is precies de kop van
   de pagina waar ze heen gaan. */
.gemeente-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin: 0 0 24px;
}

.gemeente-links a {
  display: block;
  padding: 11px 14px;
  background: #fff;
  border: 2px solid var(--ink);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.94rem;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--ink);
}

.gemeente-links a:hover {
  background: var(--pink);
  color: #fff;
}

.gemeente-links a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.hero-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  padding: 56px 0 52px;
  text-align: left;
}

.hero-split .tagline { margin: 20px 0 0; max-width: 48ch; }
.hero-split .search-bar { margin: 28px 0 0; max-width: 560px; }
.hero-split .examples { text-align: left; margin: 16px 0 0; }
.hero-split .examples .chip:first-of-type { margin-left: 0; }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 24px 0 0;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Scorekleuren: dezelfde drie tiers als scoreColor() in app.js */
.tier-green-text { color: var(--tier-green); }
.tier-amber-text { color: var(--tier-amber); }
.tier-red-text { color: var(--tier-red); }

.hero-card {
  display: block;
  padding: 26px;
  border: 2px solid var(--ink);
  background: var(--band);
  box-shadow: 9px 9px 0 var(--pink);
  text-align: left;
  font-family: var(--font);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.hero-card:hover { box-shadow: 9px 9px 0 var(--pink-deep); }
.hero-card:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

/* Eigen rapport in beeld: voorbeeldkaart weg, hero-tekst op volle breedte */
.hero-split.report-open { grid-template-columns: minmax(0, 1fr); }
.hero-split.report-open .hero-card { display: none; }

.hero-card-tag {
  display: inline-block;
  padding: 4px 8px;
  background: var(--pink);
  border: 1px solid var(--ink);
  font-weight: 800;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.hero-card-place {
  display: block;
  margin-top: 14px;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.hero-card-scorerow { display: flex; align-items: center; gap: 20px; margin: 18px 0; }

.hero-card-score {
  flex: none;
  width: 92px;
  height: 92px;
  border: 9px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.hero-card-score.tier-green { border-color: var(--tier-green); }
.hero-card-score.tier-amber { border-color: var(--tier-amber); }
.hero-card-score.tier-red { border-color: var(--tier-red); }

.hero-card-label strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--ink);
}

.hero-card-label em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

.hero-card-minis {
  display: grid;
  /* Vijf minis sinds methodeversie 3 (gezondheid heeft geen cijfer meer).
     Zes smalle tracks zodat de bovenste rij drie vakken van 2 tracks krijgt
     en de onderste twee vakken van 3 tracks: geen leeg zesde vak.
     minmax(0, ...) en niet kaal 1fr: een kale fr krimpt nooit onder de
     min-contentbreedte van het langste label, en precies daardoor duwde
     deze rij op een telefoon de hele herokolom 24px het beeld uit. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 2px solid var(--ink);
}

.hero-mini { padding: 10px 12px; border-left: 2px solid var(--ink); background: #fff; grid-column: span 2; }
.hero-mini:nth-child(3n + 1) { border-left: 0; }
.hero-mini:nth-child(n + 4) { border-top: 2px solid var(--ink); grid-column: span 3; }

/* Twee kolommen in plaats van drie: in drie kolommen past
   "Verkeersveiligheid" niet meer nu de kolommen niet verder groeien dan de
   kaart (de minmax-fix hierboven). De randregels van de driekolomsbasis
   worden per positie opnieuw gelegd, en het vijfde vak pakt de hele
   onderste rij zodat er ook hier geen leeg vak overblijft. Dit blok moet
   ná die basisregels staan, anders verliest het op bestandsvolgorde. */
@media (max-width: 680px) {
  .hero-card-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-mini:nth-child(3n + 1) { border-left: 2px solid var(--ink); }
  .hero-mini:nth-child(2n + 1) { border-left: 0; }
  .hero-mini:nth-child(n + 3) { border-top: 2px solid var(--ink); }
  /* De span-resets op nth-child-specificiteit, anders wint de
     desktopregel .hero-mini:nth-child(n + 4) { grid-column: span 3 }. */
  .hero-mini { grid-column: span 1; }
  .hero-mini:nth-child(n + 4) { grid-column: span 1; }
  .hero-mini:nth-child(5) { grid-column: 1 / -1; }
}

.hero-mini b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.hero-mini i {
  /* Blok met eigen regelafstand: "Verkeers­veiligheid" breekt op smalle
     vakken af op de soft hyphen in de HTML, en als inline element kreeg elke
     regel de ruime strut van het oudervak (16px) mee, waardoor zo'n
     tweeregelig label uit elkaar viel. */
  display: block;
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-card-cta {
  display: block;
  margin-top: 16px;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pink-deep);
}

.hero-card:hover .hero-card-cta { color: var(--ink); }

/* ---------- Homepage: uitgelicht onderzoek ---------- */
.home-feature { margin: 64px 0 20px; }

.feature {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 7px 7px 0 var(--ink);
}

.feature-visual {
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: var(--pink);
  border-right: 2px solid var(--ink);
}

.feature-year {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 7vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.feature-stamp {
  align-self: flex-start;
  margin-top: 14px;
  padding: 7px 11px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

/* De onderzoeken in het roze blok. Elke kaart draagt haar eigen uitleg, want
   een kaal getal ("5,2") met de eenheid pas eronder in kleine letters las
   niemand in één keer goed. */
.feature-studies { display: grid; gap: 9px; margin-top: auto; padding-top: 26px; }

.feature-study {
  display: block;
  padding: 11px 14px;
  background: #fff;
  border: 2px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.12s ease-out;
}

.feature-study b {
  display: block;
  font-weight: 800;
  font-size: 0.88rem;
  line-height: 1.25;
}

.feature-study span {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
  text-wrap: pretty;
}

.feature-study:hover { transform: translateX(4px); }
.feature-study:hover b { color: var(--pink-deep); }
.feature-study:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.feature-all {
  margin-top: 14px;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.feature-all:hover { color: #fff; }
.feature-all:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.feature-copy { padding: 36px; }

.feature-kicker {
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink-deep);
}

.feature-copy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 10px 0 14px;
  text-wrap: balance;
}

.feature-copy > p { font-size: 0.95rem; color: var(--body); max-width: 52ch; text-wrap: pretty; }

.feature-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 24px 0 26px;
}

.feature-fact { border-top: 2px solid var(--ink); padding-top: 10px; }

.feature-fact b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.feature-fact i {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--muted);
}

.feature-cta {
  display: inline-block;
  padding: 13px 22px;
  background: var(--pink);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 5px 5px 0 var(--ink);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.feature-cta:hover {
  background: var(--pink-deep);
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--ink);
}

.feature-cta:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

/* Doorstapjes naar de andere onderzoeken, onder de hoofdknop. Bewust gewone
   tekstlinks: één knop per blok, anders vecht alles om aandacht. */
.feature-more {
  margin-top: 16px;
  max-width: 46ch;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

.feature-more a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.feature-more a:hover { color: var(--pink-deep); }

/* ---------- Homepage: crème band om de kaartsecties (Codex-concept) ---------- */
/* Full-bleed: de band loopt tot de schermranden, de inhoud blijft op de
   contentbreedte staan (de padding-inline maakt de marge-truc weer ongedaan). */
.home-band {
  margin: 64px calc(50% - 50vw) 0;
  padding: 52px calc(50vw - 50%) 56px;
  background: var(--band);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.home-band .home-explore { margin: 0; }
.home-band .home-explore + .home-explore { margin-top: 52px; }
.home-band .explore-card { background: #fff; }

/* Rechte hoeken voor de kaarten op de homepage */
.home .explore-card { border-radius: 0; }

/* ---------- Homepage: afsluitende CTA ---------- */
.home-cta { margin: 64px 0 8px; }

.home-cta-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 28px;
  padding: 30px 32px;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 7px 7px 0 var(--ink);
}

.home-cta-box h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 8px 0 6px;
}

.home-cta-box p { color: var(--muted); font-size: 0.92rem; max-width: 46ch; }

@media (max-width: 900px) {
  /* minmax(0, 1fr): zie de toelichting bij .hero-card-minis. */
  .hero-split { grid-template-columns: minmax(0, 1fr); gap: 38px; padding: 44px 0 40px; }
  .hero-split h1 { max-width: none; }
  .feature { grid-template-columns: 1fr; }
  .feature-visual { border-right: 0; border-bottom: 2px solid var(--ink); }
  .feature-studies { margin-top: 24px; }
  .feature-facts { grid-template-columns: 1fr 1fr; }
}

/* Doorstap vanuit het rapport naar de vergelijkpagina. De maatvoering staat
   bij .share-button, want die twee horen bij elkaar. */
.compare-link {
  background: var(--paper);
  color: var(--ink);
}

.compare-link:hover { background: var(--pink); color: #fff; }

/* ---------- Vergelijkpagina ---------- */
.vs-form {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  align-items: end;
  gap: 18px;
  padding: 22px;
  border: 2px solid var(--ink);
  background: var(--band);
  margin-bottom: 12px;
}

.vs-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.vs-field label,
.vs-legend {
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.vs-field input[type="text"],
.vs-field select {
  width: 100%;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 500;
  padding: 13px 14px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}

.vs-field input[type="text"]:focus,
.vs-field select:focus { outline: none; border-color: var(--pink); }
.vs-field input::placeholder { color: #9aa0a6; font-weight: 500; }
.vs-field [hidden] { display: none; }

.vs-static {
  margin: 0;
  padding: 13px 14px;
  border: 2px dashed var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--muted);
}

.vs-types { display: flex; flex-wrap: wrap; gap: 7px; }

.vs-types label { position: relative; cursor: pointer; }

.vs-types label span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  background: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.vs-types label:hover span { border-color: var(--pink); color: var(--pink-deep); }
.vs-types label:has(input:checked) span { border-color: var(--ink); background: var(--ink); color: #fff; }
.vs-types input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.vs-types input:focus-visible + span { outline: 3px solid var(--pink); outline-offset: 2px; }

#vs-button {
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 15px 26px;
  border: none;
  background: var(--pink);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 5px 5px 0 var(--ink);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

#vs-button:hover { background: var(--pink-deep); transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
#vs-button:disabled { opacity: 0.6; cursor: wait; }
#vs-button:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

#vs-status[hidden] { display: none; }

#vs-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

#vs-status:not(.error)::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid var(--track);
  border-top-color: var(--pink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

#vs-status.error { color: var(--error); }

#vs-result { animation: rise 0.4s ease-out; }
#vs-result[hidden] { display: none; }

.vs-heads {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 14px;
  margin: 28px 0 0;
}

.vs-head { padding: 22px; border: 2px solid var(--ink); background: var(--paper); }
#vs-head-b { background: var(--band); }

.vs-tag {
  display: inline-block;
  padding: 4px 8px;
  background: var(--pink);
  border: 1px solid var(--ink);
  font-weight: 800;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.vs-tag.alt { background: var(--ink); }

.vs-head h2 {
  margin: 14px 0 4px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}

.vs-head p { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--muted); text-wrap: pretty; }

.vs-score {
  width: 84px;
  height: 84px;
  margin-top: 16px;
  border: 8px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-variant-numeric: tabular-nums;
}

.vs-score[hidden] { display: none; }

.vs-score-label {
  display: block;
  margin-top: 10px;
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.vs-versus {
  align-self: center;
  padding: 8px 10px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  font-family: var(--font-display);
  font-size: 0.9rem;
  text-transform: uppercase;
  color: var(--ink);
}

.vs-verdict {
  margin: 16px 0 0;
  padding: 13px 15px;
  border-left: 4px solid var(--pink);
  background: var(--band);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--body);
  text-wrap: pretty;
}

.vs-verdict[hidden] { display: none; }

.vs-table-wrap { margin-top: 22px; overflow-x: auto; border: 2px solid var(--ink); }

.vs-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

.vs-table th,
.vs-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--inner-line); }

.vs-table thead th {
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vs-table tbody th {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.vs-table tbody th small {
  display: block;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}

.vs-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.vs-table tbody tr:last-child th,
.vs-table tbody tr:last-child td { border-bottom: 0; }

.vs-total-row th,
.vs-total-row td {
  background: var(--pink-wash);
  font-size: 1rem;
  border-bottom: 2px solid var(--ink);
}

.vs-better { color: var(--tier-green); }
.vs-worse { color: var(--tier-red); }
.vs-empty { color: var(--muted); font-weight: 600; }

.vs-note {
  margin: 14px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.vs-actions { margin: 22px 0 8px; }

@media (max-width: 780px) {
  .vs-form { grid-template-columns: 1fr; align-items: stretch; }
  #vs-button { width: 100%; box-shadow: 4px 4px 0 var(--ink); }
  .vs-heads { grid-template-columns: 1fr; }
  .vs-versus { justify-self: start; }
  .vs-types label { flex: 1 1 calc(50% - 7px); }
  .vs-types label span { justify-content: center; width: 100%; }
}

/* ---------- Subtiele inline-advertentie ---------- */
.ad-inline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 32px 0;
  padding: 13px 15px;
  border: 2px solid var(--ink);
  background: var(--band);
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
  text-wrap: pretty;
}
.ad-inline .ad-label {
  flex: none;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
}
.ad-inline a { color: var(--pink-deep); font-weight: 700; white-space: nowrap; }

/* ---------- Logo / topbalk (op elke pagina, terug naar home) ---------- */
/* Wordmark in de BrightHouse-masthead-stijl: "Woon ik" navy, "veilig?" wit op
   een roze rechthoek met navy slagschaduw, exact als de h1-accent en het merk. */
.site-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Wrap zodat het mobiele menupaneel onder de balk kan uitklappen. */
  flex-wrap: wrap;
  gap: 16px 28px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 24px 14px;
  /* Vast bovenin (augustus 2026): op de lange gebiedspagina's blijft de
     buurtcheck-knop zo altijd in beeld. De balk zelf is de 1100px-container;
     de witte achtergrond moet de volle breedte dekken zonder een extra
     wrapper in elke template. Truc: een schaduw zonder offset met enorme
     spread kleurt alles rondom wit, en de clip-path laat daarvan alleen de
     zijkanten door, plus 4px onder de balk voor de scroll-lijn hieronder. */
  position: sticky;
  top: 0;
  z-index: 200;
  background: #fff;
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax -4px -100vmax);
}

/* Harde navy lijn onder de balk, alleen zodra er gescrold is (klasse komt
   uit nav.js). Navy eerst: schaduwen schilderen in volgorde en de witte
   full-bleed zou er anders overheen vallen. Zonder javascript is er geen
   lijn, maar plakt de balk gewoon. */
.site-topbar.is-scrolled {
  box-shadow: 0 3px 0 var(--rule-color), 0 0 0 100vmax #fff;
}

/* Hoofdmenu rechts in de topbar, op elke pagina hetzelfde */
/* Mobiel menu, opgebouwd door nav.js. Boven de 720px staan de links gewoon
   in de topbar en is deze knop er niet. */
/* Terug naar het vorige rapport. Staat naast de deelknoppen en verschijnt
   pas als er binnen de site iets is om naar terug te gaan. */
.terug-knop {
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 11px 16px;
  cursor: pointer;
}

.terug-knop:hover { background: var(--ink); color: #fff; }
.terug-knop:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.terug-knop[hidden] { display: none; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 10px;
  padding: 0;
  border: 1px solid var(--ink);
  background: #fff;
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
}

.nav-toggle span { position: relative; }
.nav-toggle span::before,
.nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

.nav-toggle[aria-expanded="true"] { background: var(--pink); border-color: var(--ink); }
.nav-toggle[aria-expanded="true"] span,
.nav-toggle[aria-expanded="true"] span::before,
.nav-toggle[aria-expanded="true"] span::after { background: #fff; }
.nav-toggle:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

.nav-paneel {
  display: none;
  flex-basis: 100%;
  margin-top: 10px;
  border: 1px solid var(--ink);
  background: #fff;
  box-shadow: 5px 5px 0 var(--ink);
}

.nav-paneel[hidden] { display: none; }

.nav-paneel a {
  display: block;
  padding: 13px 16px;
  border-bottom: 1px solid var(--inner-line);
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.82rem;
}

.nav-paneel a:last-child { border-bottom: none; }
.nav-paneel a:hover { background: var(--band); color: var(--pink-deep); }
.nav-paneel a:focus-visible { outline: 2px solid var(--pink); outline-offset: -2px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-nav a { color: var(--ink); text-decoration: none; }
.site-nav a:hover { color: var(--pink-deep); }
.site-nav a:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

.site-nav .nav-cta {
  padding: 10px 15px;
  background: var(--pink);
  border: 2px solid var(--ink);
  color: #fff;
  box-shadow: 4px 4px 0 var(--ink);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.site-nav .nav-cta:hover {
  background: var(--pink-deep);
  color: #fff;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

@media (max-width: 720px) {
  .site-nav { gap: 14px; font-size: 0.64rem; }
  .site-nav a:not(.nav-cta) { display: none; }
  .site-nav .nav-cta { padding: 9px 12px; white-space: nowrap; }
  .nav-toggle { display: inline-flex; }
  .nav-paneel { display: block; }
  /* Logo en knop passen samen alleen op één regel als ze allebei compact zijn */
  .logo-img { height: 21px; }
}
.site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Wordmark als SVG-bestand (logo-woonikveilig.svg), zelfde beeld als de site */
.logo-img { display: block; height: 26px; width: auto; }
.site-logo:hover .logo-img { opacity: 0.85; }
.site-logo:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

/* ---------- Doorzoekbare buurtenlijst op de gemeentepagina ---------- */
.buurt-browser { margin-top: 24px; }
.buurt-filter {
  width: 100%;
  max-width: 420px;
  font-family: var(--font);
  font-size: 1rem;
  padding: 11px 14px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}
.buurt-filter:focus { outline: none; border-color: var(--pink); }
.buurt-filter::placeholder { color: #9aa0a6; }
.buurt-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  columns: 3;
  column-gap: 24px;
}
.buurt-list li { break-inside: avoid; padding: 3px 0; line-height: 1.4; }
.buurt-list a { color: var(--pink-deep); font-weight: 700; text-decoration: none; }
.buurt-list a:hover { text-decoration: underline; }
.buurt-nolink { color: var(--muted); }
@media (max-width: 680px) { .buurt-list { columns: 2; column-gap: 16px; font-size: 0.92rem; } }

/* Uitleg-regel als je via een dorp op de gemeentepagina komt */
.plaats-note {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--pink-wash);
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.5;
}