/* Intochtkaart op /intocht/ (blok .ik). Hoort bij assets/js/intocht-kaart.js. */
.ik{margin-top:4px}
.ik h2{margin:0 0 6px}
.ik-intro{margin:0 0 18px;max-width:none;color:#57645d}

/* Uitleg onder de kaart (citeerbaar, ook voor zoekmachines) */
.ik-uitleg{margin:18px 0 0;font-size:14.5px;color:#57645d}

/* Filterknopjes */
.ik-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.ik-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px 8px 14px;border:1.5px solid rgba(39,52,47,.22);border-radius:999px;background:#fff8e9;color:var(--ink);font-size:14.5px;font-weight:700;line-height:1;transition:transform .15s cubic-bezier(.2,.8,.2,1)}
.ik-chip small{font-size:12px;font-weight:800;padding:3px 7px;border-radius:999px;background:rgba(39,52,47,.09);color:#4c5a52}
.ik-chip:hover{transform:translateY(-2px)}
.ik-chip[aria-pressed="true"]{background:var(--red);border-color:var(--red-dark);color:#fff;box-shadow:0 3px 0 var(--red-dark)}
.ik-chip[aria-pressed="true"] small{background:rgba(255,255,255,.22);color:#fff}
.ik-chip:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* Kaart + lijst naast elkaar */
.ik-body{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);gap:22px;align-items:stretch}
.ik-body>div:last-child{display:flex;flex-direction:column;min-height:0}
.ik-kaartwrap{position:relative;border-radius:22px;background:#e6ecee;border:1px solid rgba(39,52,47,.14);padding:18px 12px 8px;overflow:visible}
.ik-kaart{width:100%;height:auto;overflow:visible}
.ik-land path{fill:#f6e9c9;stroke:#27342f;stroke-width:1.5;stroke-linejoin:round;transition:fill .2s}

/* Punaises */
.ik-pin{cursor:pointer;transition:opacity .2s}
.ik-pin .ik-naald{stroke:#27342f;stroke-width:2.6;stroke-linecap:round}
.ik-pin .ik-kop{fill:var(--red);stroke:#27342f;stroke-width:2}
.ik-pin .ik-glans{fill:#fff;opacity:.55;pointer-events:none}
.ik-pin--onbekend .ik-kop{fill:#fff8e9}
.ik-pin--onbekend .ik-glans{opacity:0}
.ik-pin--landelijk .ik-kop{fill:var(--gold)}
.ik-pin--landelijk .ik-naald{stroke-width:3.2}
.ik-pin:hover .ik-kop,.ik-pin:focus-visible .ik-kop{stroke-width:3.2}
.ik-pin .ik-kop,.ik-pin .ik-naald,.ik-pin .ik-glans{transition:transform .22s cubic-bezier(.2,.9,.3,1.2)}
.ik-pin.is-open .ik-kop,.ik-pin.is-open .ik-glans{transform:scale(1.7);transform-origin:5.5px -13px}
.ik-pin.is-open .ik-naald{transform:scaleY(1.35);transform-origin:0 0}
.ik-pin.is-open .ik-kop{fill:var(--green);stroke-width:2.4}
.ik-pin.is-open .ik-glans{opacity:.5}
.ik-pin:focus{outline:none}
.ik-pin:focus-visible .ik-kop{stroke:var(--red-dark)}
.ik-pin.is-gedimd{opacity:.18;pointer-events:none}

/* Legenda */
.ik-legenda{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 4px 2px;font-size:13px;color:#57645d}
.ik-legenda span{display:inline-flex;align-items:center;gap:7px}
.ik-legenda i{display:inline-block;width:13px;height:13px;border-radius:50%;border:2px solid #27342f;background:var(--red)}
.ik-legenda .lg-onbekend i{background:#fff8e9}
.ik-legenda .lg-landelijk i{background:var(--gold);width:16px;height:16px}
.ik-legenda .lg-gekozen i{background:var(--green);width:16px;height:16px}

/* Popup bij een punaise */
.ik-popup{position:absolute;z-index:5;min-width:210px;max-width:280px;padding:14px 38px 14px 16px;border-radius:14px;background:#fffaf0;border:1px solid rgba(39,52,47,.2);box-shadow:var(--shadow-soft);font-size:14.5px;line-height:1.4}
.ik-popup b{display:block;font:700 22px/1.1 "Alegreya",Georgia,serif;margin-bottom:4px}
.ik-popup-label{display:inline-block;margin:0 0 6px;padding:2px 8px;border-radius:999px;background:var(--gold);color:#3d2c0a;font-size:12px;font-weight:800}
.ik-popup-datum{display:block;font-weight:800;color:var(--red)}
.ik-popup-plek{display:block;margin-top:3px;color:#57645d}
.ik-popup a{display:inline-block;margin-top:8px;font-weight:800;color:var(--red)}
.ik-popup-sluit{position:absolute;top:6px;right:6px;width:28px;height:28px;border:0;border-radius:8px;background:none;font-size:22px;line-height:1;color:#57645d}
.ik-popup-sluit:hover{background:var(--paper);color:var(--ink)}

/* Zoekvelden (plaats en postcode) + lijst */
.ik-zoekrij{display:grid;grid-template-columns:3fr 2fr;gap:10px}
.ik-pin.is-dichtbij .ik-kop,.ik-pin.is-dichtbij .ik-glans{transform:scale(1.5);transform-origin:5.5px -13px}
.ik-pin.is-dichtbij .ik-kop{fill:var(--green);stroke-width:2.4}
.ik-dichtbij{margin:0 0 12px;padding:14px 16px;border-radius:14px;background:#f9ecd0;border:1px solid rgba(39,52,47,.16)}
.ik-dichtbij strong{display:block;font:700 18px/1.2 "Alegreya",Georgia,serif;margin-bottom:6px}
.ik-dichtbij ol{margin:0;padding-left:22px}
.ik-dichtbij li{margin:4px 0;font-size:14.5px}
.ik-dichtbij li b{font-weight:800}
.ik-dichtbij li span{display:block;color:#57645d;font-size:13.5px}
.ik-dichtbij li a{font-weight:800;color:var(--red);font-size:13.5px}
.ik-dichtbij-melding{margin:8px 0 0;font-size:13px;color:#57645d}
.ik-zoek,.ik-postcode{display:block;margin:0 0 10px}
.ik-zoek span,.ik-postcode span{display:block;font-size:13px;font-weight:800;color:#57645d;margin-bottom:5px}
.ik-zoek input,.ik-postcode input{width:100%;padding:11px 14px;border:1.5px solid rgba(39,52,47,.24);border-radius:12px;background:#fff;font-size:16px}
.ik-zoek input:focus,.ik-postcode input:focus{outline:3px solid rgba(165,45,41,.35);border-color:var(--red)}
.ik-telling{min-height:20px;margin:0 0 6px;font-size:13.5px;color:#57645d}
.ik-lijstvak{position:relative;flex:1;min-height:320px;display:flex;flex-direction:column;border:1px solid rgba(39,52,47,.16);border-radius:16px;background:#fffaf0;overflow:hidden}
.ik-lijstvak:after{content:"";position:absolute;left:0;right:0;bottom:0;height:38px;border-radius:0 0 16px 16px;background:linear-gradient(rgba(255,250,240,0),#fffaf0 80%);pointer-events:none}
/* De lijst zelf staat absoluut in het vak, zodat zijn lengte niet meetelt voor de hoogte van de rij: het vak wordt dan precies zo hoog als de kaartkolom. */
.ik-lijst{list-style:none;margin:0;padding:2px 14px 34px;position:absolute;inset:0;overflow:auto}
.ik-lijst li[hidden]{display:none}
.ik-lijst li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:10px 2px;border-bottom:1px solid rgba(39,52,47,.1)}
.ik-lijst li:last-child{border-bottom:0}
.ik-lijst li b{font:700 18px/1.15 "Alegreya",Georgia,serif}
.ik-lijst li b small{font:600 13px/1 "Source Sans 3",system-ui,sans-serif;color:#7a857f;margin-left:6px}
.ik-lijst .ik-datum{grid-column:1;font-size:14px;color:#57645d}
.ik-lijst .ik-datum.is-bekend{color:var(--ink);font-weight:700}
.ik-lijst .ik-lijst-acties{grid-row:1/3;grid-column:2;display:flex;flex-direction:column;gap:4px;align-items:flex-end;font-size:13.5px;font-weight:800}
.ik-lijst .ik-lijst-acties a{color:var(--red);white-space:nowrap}
.ik-lijst .ik-lijst-acties a.ik-lijst-kaart{color:#6b766f;font-weight:700;text-decoration:underline;text-decoration-color:#9aa39e;text-underline-offset:3px}
.ik-lijst .ik-lijst-acties a.ik-lijst-kaart:hover{color:var(--ink);text-decoration-color:var(--ink)}
.ik-lijst li[data-soort="landelijk"] b:before{content:"";display:inline-block;width:11px;height:11px;margin-right:7px;border-radius:50%;background:var(--gold);border:2px solid #27342f;vertical-align:1px}

@media(max-width:760px){
  .ik-body{grid-template-columns:1fr}
  .ik-kaartwrap{padding:12px 8px 4px}
  .ik-popup{position:static;max-width:none;margin:10px 0 4px}
  .ik-lijstvak{flex:none;min-height:0;height:440px}
  .ik-zoekrij{grid-template-columns:1fr}
  .ik-lijst .ik-lijst-kaart{display:none} /* op een telefoon is de lijst al de handigste ingang */
}