/* ==========================================================================
   Wijkzoeker — Andreaskerk Putten
   Eén bron voor de statische ontwerpsite en de WordPress-plugin Andreas
   Wijkzoeker 2.0. De plugin verscheept een identieke kopie in zijn eigen
   assets/. Wijzig altijd dit bestand en pak de plugin daarna opnieuw in.

   De plugin kan op een thema draaien zonder de reset van style.css, dus
   alle tokens die hier gebruikt worden hebben een terugvalwaarde en de
   [hidden]-regel staat er ook in.
   ========================================================================== */

.wz [hidden],.wz[hidden]{display:none !important}

/* De drie blokken (zoeken, plattegrond, legenda) staan in verschillende
   secties van de pagina en dragen daarom elk zelf de tokens. */
.wz{
  --wz-paars:      var(--paars, #4E1668);
  --wz-paars-diep: var(--paars-diep, #33093F);
  --wz-oranje:     var(--oranje, #F5821F);
  --wz-rood-tekst: var(--rood-tekst, #C4241B);
  --wz-wit:        var(--wit, #FFFFFF);
  --wz-creme:      var(--creme, #FEF9F3);
  --wz-zand:       var(--zand, #F9F1E8);
  --wz-lijn:       var(--lijn, #EFE4D8);
  --wz-kop:        var(--kop, #2B1B4B);
  --wz-tekst:      var(--tekst, #5A5570);
  --wz-radius:     var(--radius, 10px);
  --wz-radius-s:   var(--radius-s, 7px);
  --wz-schaduw:    var(--schaduw, 0 10px 30px rgba(43,27,75,.07));
  --wz-schaduw-diep: var(--schaduw-diep, 0 20px 48px rgba(43,27,75,.14));
  --wz-font:       var(--font, 'Poppins', 'Segoe UI', system-ui, sans-serif);

  font-family:var(--wz-font);color:var(--wz-tekst);
}

/* Zoekveld plus resultaat onder elkaar */
.wz-blok{display:flex;flex-direction:column;gap:26px}

/* Een sectie die pas verschijnt zodra er een antwoord is. Het script haalt
   het hidden-attribuut weg; zonder script staat de sectie er gewoon. */
[data-wz-toon][hidden]{display:none !important}

/* Kaart en legenda naast elkaar, voor een minder dominante plattegrond. */
.wz-naast{display:flex;flex-direction:row;flex-wrap:wrap;gap:30px;align-items:flex-start}
.wz-naast > .wz-kaart{flex:1 1 380px;min-width:0;max-width:none;margin:0}
.wz-naast > .wz-legenda{flex:1 1 340px;min-width:0}

/* ---------- Zoekblok ---------- */
.wz-zoek{
  display:flex;flex-direction:column;gap:10px;
  background:var(--wz-wit);border-radius:var(--wz-radius);
  padding:30px 28px;box-shadow:var(--wz-schaduw);
}
.wz-zoek h2,.wz-zoek h3{margin:0 0 4px;color:var(--wz-kop);font-family:var(--wz-font)}
.wz-zoek .wz-uitleg{margin:0 0 8px;font-size:.9375rem;max-width:60ch}

.wz-veld{display:flex;flex-direction:column;gap:8px;position:relative}
.wz-veld label{font-weight:600;font-size:.9375rem;color:var(--wz-kop)}
.wz-invoer{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;align-items:flex-start}
.wz-invoer > .wz-straat{flex:1 1 300px;min-width:0;position:relative}
.wz-invoer > .wz-nummer{flex:0 0 132px}

.wz input[type="text"],.wz input[type="search"]{
  font-family:var(--wz-font);font-size:1rem;color:var(--wz-kop);
  padding:14px 44px 14px 16px;border:1px solid #DDD2C4;border-radius:var(--wz-radius-s);
  background:var(--wz-creme);width:100%;min-height:52px;
}
.wz .wz-nummer input{padding-right:16px}
.wz input::placeholder{color:#6E6780}
.wz input:focus-visible{outline:3px solid var(--wz-oranje);outline-offset:2px;border-color:var(--wz-paars)}

.wz-wis{
  position:absolute;right:8px;bottom:8px;width:36px;height:36px;
  display:none;align-items:center;justify-content:center;
  border:0;background:transparent;border-radius:50%;cursor:pointer;
  color:var(--wz-tekst);font-size:22px;line-height:1;
}
.wz-wis:hover{background:var(--wz-zand);color:var(--wz-kop)}
.wz-wis:focus-visible{outline:3px solid var(--wz-oranje);outline-offset:2px}
.wz-wis.is-zichtbaar{display:flex}

/* Suggesties */
.wz-suggesties{
  position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);
  background:var(--wz-wit);border:1px solid var(--wz-lijn);border-radius:var(--wz-radius-s);
  box-shadow:var(--wz-schaduw-diep);max-height:310px;overflow-y:auto;padding:6px;
  list-style:none;margin:0;
}
.wz-suggestie{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 13px;border-radius:var(--wz-radius-s);cursor:pointer;
  font-size:.9375rem;color:var(--wz-kop);min-height:44px;margin:0;
}
.wz-suggestie .wz-plaats{font-size:.8125rem;color:var(--wz-tekst);white-space:nowrap}
.wz-suggestie:hover,.wz-suggestie.is-actief{background:var(--wz-zand)}
.wz-suggestie mark{background:transparent;color:var(--wz-rood-tekst);font-weight:600}

.wz-hint{font-size:.875rem;margin:2px 0 0;color:var(--wz-tekst)}
.wz-hint strong{color:var(--wz-kop)}

/* Knoppen in de zoeker: een thema (Astra) geeft elke <button> eigen padding,
   een schaduw en een hoverkleur. Hier alles zelf vastgelegd, met .wz ervoor
   zodat deze regels zwaarder wegen dan button:hover van het thema. */
.wz .wz-wis,.wz .wz-buiten-knop{
  padding:0;margin:0;box-shadow:none;border:0;text-transform:none;letter-spacing:normal;
  min-height:0;line-height:1.3;
}
.wz .wz-wis{width:36px;height:36px;background:transparent;color:var(--wz-tekst)}
.wz .wz-wis:hover{background:var(--wz-zand);color:var(--wz-kop)}

/* Woon je buiten Putten? (10-10-2026) Het script zet dit blok onder het
   zoekveld: een tekstknop die een keuzelijst met woonplaatsen opent. */
.wz-buiten{margin-top:4px}
.wz .wz-buiten-knop{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  background:transparent;color:var(--wz-paars);cursor:pointer;
  font-family:var(--wz-font);font-size:.9375rem;font-weight:600;text-align:left;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
}
.wz .wz-buiten-knop::after{
  content:"";flex:0 0 8px;width:8px;height:8px;margin-top:-4px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .18s ease;
}
.wz .wz-buiten-knop[aria-expanded="true"]::after{transform:rotate(225deg);margin-top:4px}
.wz .wz-buiten-knop:hover,.wz .wz-buiten-knop:focus{background:transparent;color:var(--wz-rood-tekst)}
.wz .wz-buiten-knop:focus-visible{outline:3px solid var(--wz-oranje);outline-offset:2px;border-radius:4px}
.wz-buiten-paneel{margin-top:6px}
.wz select{
  font-family:var(--wz-font);font-size:1rem;color:var(--wz-kop);
  padding:14px 44px 14px 16px;border:1px solid #DDD2C4;border-radius:var(--wz-radius-s);
  width:100%;min-height:52px;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background:var(--wz-creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E1668' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px 18px;
}
.wz select:focus-visible{outline:3px solid var(--wz-oranje);outline-offset:2px;border-color:var(--wz-paars)}
@media (prefers-reduced-motion:reduce){.wz .wz-buiten-knop::after{transition:none}}

/* ---------- Resultaat ---------- */
.wz-resultaat{
  background:var(--wz-wit);border-radius:var(--wz-radius);box-shadow:var(--wz-schaduw);
  overflow:hidden;border-top:6px solid var(--wz-kleur, var(--wz-paars));
}
.wz-resultaat-kop{
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 16px;
  padding:24px 28px 20px;background:var(--wz-zand);
}
.wz-badge{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;font-size:1.35rem;color:var(--wz-kop);line-height:1.2;
}
.wz-stip{
  flex:0 0 20px;width:20px;height:20px;border-radius:50%;
  background:var(--wz-kleur, var(--wz-paars));box-shadow:0 0 0 3px rgba(255,255,255,.9);
}
.wz-adres{font-size:.9375rem;color:var(--wz-tekst);margin:0}
/* Een thema geeft een losse <p> vaak eigen marge en regelhoogte; dan staat het
   adres niet meer op een lijn met de wijknaam ernaast. */
.wz .wz-resultaat-kop .wz-adres{margin:0;line-height:1.4}
.wz-resultaat-body{padding:26px 28px 28px}
.wz-resultaat-body > :last-child{margin-bottom:0}

.wz-melding{
  display:flex;flex-direction:row;align-items:flex-start;gap:12px;
  background:var(--wz-creme);border-left:4px solid var(--wz-oranje);
  border-radius:var(--wz-radius-s);padding:14px 16px;margin:0 0 22px;
  font-size:.9375rem;color:var(--wz-tekst);
}
.wz-melding strong{color:var(--wz-kop)}
.wz-melding p{margin:0;max-width:none}

/* Personen in het resultaat */
.wz-personen{display:flex;flex-direction:row;flex-wrap:wrap;gap:22px;margin:0}
.wz-persoon{
  display:flex;flex-direction:row;align-items:flex-start;gap:16px;
  flex:1 1 260px;min-width:0;
  background:var(--wz-creme);border-radius:var(--wz-radius-s);padding:18px 18px;
}
.wz-persoon img,.wz-persoon .wz-initiaal{
  flex:0 0 64px;width:64px;height:64px;border-radius:50%;object-fit:cover;
}
.wz-persoon .wz-initiaal{
  display:flex;align-items:center;justify-content:center;
  background:var(--wz-paars);color:#fff;font-size:1.35rem;font-weight:700;
}
.wz-persoon-tekst{min-width:0;flex:1 1 auto}
.wz-rol{
  display:block;font-size:.8125rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--wz-rood-tekst);margin-bottom:2px;
}
.wz-naam{display:block;font-weight:600;font-size:1.02rem;color:var(--wz-kop);line-height:1.35}
/* Contact als ronde icoontjes: WhatsApp, telefoon, mail. Volledige adressen
   en nummers onder elkaar maken een wijkkaart snel vol, zeker zodra er naast
   de predikant ook ouderlingen bij komen. Het gegeven zelf staat in title en
   aria-label, dus bij hover en voor een schermlezer verdwijnt er niets. Het
   vlakje is 42px, ruim genoeg om met een duim te raken. */
.wz-contact{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;margin-top:8px}
.wz-c{
  box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 42px;width:42px;height:42px;border-radius:50%;
  background:var(--wz-zand);color:var(--wz-paars);text-decoration:none;
  border:1px solid transparent;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.wz-c:hover,.wz-c:focus-visible{
  background:var(--wz-paars);border-color:var(--wz-paars);color:var(--wz-wit);
}
.wz-c .wz-ico{flex:0 0 20px;width:20px;height:20px}
/* In het antwoord staan de kaartjes zelf op crème, daar valt zand weg. Let op:
   deze regel telt twee klassen en staat ná .wz-c:hover, die er ook twee telt
   (klasse plus pseudo-klasse). Bij gelijke specificiteit wint de laatste, dus
   zonder de tweede regel hieronder blijft het vlakje in de hover-staat wit
   terwijl het icoon wél wit wordt: wit op wit. */
.wz-persoon .wz-c{background:var(--wz-wit);border-color:var(--wz-lijn)}
.wz-persoon .wz-c:hover,.wz-persoon .wz-c:focus-visible{
  background:var(--wz-paars);border-color:var(--wz-paars);
}

/* Eén regel per persoon: de naam, en daaronder zijn eigen icoontjes. */
.wz-persoonregel{display:flex;flex-direction:column}
.wz-persoonregel + .wz-persoonregel{margin-top:14px}

.wz-geen{padding:26px 28px 28px}
.wz-geen p{margin:0 0 .9em}
.wz-geen p:last-child{margin-bottom:0}

/* Meerdere treffers: laat kiezen */
.wz-keuzes{display:flex;flex-direction:column;gap:10px;margin:0}
.wz-keuze{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:14px;
  width:100%;text-align:left;cursor:pointer;
  background:var(--wz-creme);border:1px solid var(--wz-lijn);border-radius:var(--wz-radius-s);
  padding:14px 16px;font-family:var(--wz-font);font-size:.9375rem;color:var(--wz-kop);min-height:52px;
}
.wz-keuze:hover{border-color:var(--wz-paars);background:var(--wz-wit)}
.wz-keuze:focus-visible{outline:3px solid var(--wz-oranje);outline-offset:2px}
.wz-keuze .wz-keuze-wijk{display:inline-flex;align-items:center;gap:9px;font-weight:600}

/* ---------- Plattegrond ---------- */
.wz-kaart{
  position:relative;display:block;max-width:880px;margin-left:auto;margin-right:auto;
  background:var(--wz-wit);border-radius:var(--wz-radius);
  box-shadow:var(--wz-schaduw);padding:14px;overflow:hidden;
}
.wz-kaart img{display:block;width:100%;height:auto;border-radius:var(--wz-radius-s)}
/* Iets ruimer, voor een opzet waarin de kaart de eerste ingang is. */
.wz-kaart--midden{max-width:760px}
.wz-kaart-svg{
  position:absolute;left:14px;top:14px;width:calc(100% - 28px);height:calc(100% - 28px);
  overflow:visible;
}
.wz-vlak{
  fill:transparent;stroke:transparent;stroke-width:7;
  stroke-linejoin:round;cursor:pointer;
  transition:fill .2s ease,stroke .2s ease;
}
.wz-vlak:hover{fill:rgba(43,27,75,.07)}
.wz-vlak.is-actief{fill:var(--wz-vlak-kleur);fill-opacity:.34;stroke:var(--wz-vlak-rand)}
/* Een outline tekent bij een SVG-pad de rechthoek eromheen, en dat leest bij
   een grillige wijkvorm als een losse zwarte kader. De focus volgt daarom de
   vorm zelf: dezelfde vulling als een actieve wijk, met een dikkere rand. */
.wz-vlak:focus-visible{
  outline:none;
  fill:var(--wz-vlak-kleur);fill-opacity:.34;
  stroke:var(--wz-vlak-rand);stroke-width:12;
}
@media (forced-colors:active){
  .wz-vlak:focus-visible{outline:3px solid Highlight;outline-offset:2px}
}
@media (prefers-reduced-motion:reduce){.wz-vlak{transition:none}}

/* ---------- Legenda ---------- */
.wz-legenda{display:flex;flex-direction:row;flex-wrap:wrap;gap:22px;margin:0;padding:0;list-style:none}
.wz-wijkkaart{
  display:flex;flex-direction:column;flex:1 1 250px;min-width:0;margin:0;
  background:var(--wz-wit);border-radius:var(--wz-radius);box-shadow:var(--wz-schaduw);
  padding:24px 22px;border-top:5px solid var(--wz-kleur, var(--wz-paars));
  transition:transform .18s ease,box-shadow .18s ease;
}
.wz-wijkkaart.is-actief{transform:translateY(-4px);box-shadow:var(--wz-schaduw-diep)}
.wz-wijkkaart h3{
  display:flex;align-items:center;gap:11px;margin:0 0 14px;
  font-size:1.15rem;color:var(--wz-kop);font-family:var(--wz-font);
}
.wz-wijkkaart dl{margin:0;font-size:.9375rem}
.wz-wijkkaart dt{
  font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--wz-rood-tekst);margin:0 0 2px;
}
.wz-wijkkaart dd{margin:0 0 14px;color:var(--wz-kop)}
.wz-wijkkaart dd:last-child{margin-bottom:0}
.wz-wijkkaart .wz-contact{margin-top:6px}

/* ---------- Smalle schermen ---------- */
@media (max-width:760px){
  .wz-blok{gap:20px}
  .wz-zoek{padding:24px 20px}
  .wz-invoer > .wz-straat,.wz-invoer > .wz-nummer{flex:0 0 auto;width:100%}
  .wz-resultaat-kop{padding:20px 20px 16px}
  .wz-resultaat-body,.wz-geen{padding:22px 20px 24px}
  .wz-personen{gap:14px}
  .wz-persoon{flex:0 0 auto;width:100%}
  .wz-legenda{gap:16px}
  .wz-wijkkaart{flex:0 0 auto;width:100%;padding:20px 18px}
  .wz-kaart{padding:10px}
  .wz-kaart-svg{left:10px;top:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
}