/* ============================================================
   BELEIDSDOELEN — stijlen bij beleidsdoelen.js
   Kleuren: donkere tekst op een lichte tint, zodat het contrast altijd ruim voldoende is (WCAG AA).
   ============================================================ */
:root {
  --doel-duurzaam-bg: #E3F4E9; --doel-duurzaam-fg: #00602A;
  --doel-sociaal-bg: #F8E3EF;  --doel-sociaal-fg: #8A0067;
  --doel-lokaal-bg: #E3ECF7;   --doel-lokaal-fg: #003F8A;
  --doel-gezond-bg: #FFF1DB;   --doel-gezond-fg: #7A4100;
}
[data-doel="duurzaam"] { --doel-bg: var(--doel-duurzaam-bg); --doel-fg: var(--doel-duurzaam-fg); }
[data-doel="sociaal"]  { --doel-bg: var(--doel-sociaal-bg);  --doel-fg: var(--doel-sociaal-fg); }
[data-doel="lokaal"]   { --doel-bg: var(--doel-lokaal-bg);   --doel-fg: var(--doel-lokaal-fg); }
[data-doel="gezond"]   { --doel-bg: var(--doel-gezond-bg);   --doel-fg: var(--doel-gezond-fg); }

/* tekstlabels */
.kp-doelen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.kp-doel {
  display: inline-flex; align-items: center; gap: .3rem; padding: .18em .55em .18em .45em;
  background: var(--doel-bg); color: var(--doel-fg); border: 1px solid color-mix(in srgb, var(--doel-fg) 35%, transparent);
  border-radius: var(--r-pill, 999px); font-size: var(--s-2); font-weight: 700; line-height: 1.3; white-space: nowrap;
}
.kp-doel svg { width: 14px; height: 14px; flex: none; }
.kp-doelen--groot .kp-doel { font-size: var(--s-1); padding: .3em .75em .3em .6em; }
.kp-doelen--groot .kp-doel svg { width: 16px; height: 16px; }

/* productpagina */
.kp-pdpdoelen { display: grid; gap: .45rem; justify-items: start; }
.kp-doeluitleg { list-style: none; margin: 0; padding: 0; font-size: var(--s-1); color: var(--ink-2); display: grid; gap: .15rem; }
.kp-pdpdoelen > a { font-size: var(--s-1); font-weight: 600; color: var(--brand-text, var(--ink)); }

/* geen resultaten */
.kp-suggesties { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0; }
.kp-suggesties .pchip { display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; }
.kp-suggesties svg { width: 14px; height: 14px; }

/* productpagina: labels linksboven tegen de rand van de eerste foto, iets groter dan op de kaart */
.pdpbox .shot.kp-shot-labels { position: relative; }
.pdpbox .shot.kp-shot-labels > .lbs { position: absolute; top: 0; left: 0; padding: 0; z-index: 3; display: flex; gap: 4px; pointer-events: none; }
.pdpbox .shot.kp-shot-labels .lb2.kp-rib { width: 44px; height: 44px; padding: 5px; }
.pdpbox .shot.kp-shot-labels .lbs img { padding: 0; }

/* productgrid: labels en hartje op één lijn, even ver van de bovenkant als van de zijkant (12 px, gelijk aan de
   binnenrand van de kaart). Het hartje zit in een vak van 28 px, net als een label; het vak schuift 5 px op zodat
   het hartje zelf (18 px) precies op de lijn van de labels staat. Meerdere labels staan naast elkaar en lopen
   nooit onder het hartje door (anders naar een tweede rij). */
.card .lbs { top: 0; left: 0; gap: 4px; flex-wrap: wrap; max-width: calc(100% - 34px); }
.card .lb2.kp-rib { width: 28px; height: 28px; padding: 3px; }
.card .card__fav { top: -5px; right: -5px; width: 28px; height: 28px; padding: 0; }
.card .card__fav svg { width: 18px; height: 18px; }

/* tooltip bij de beleidsdoelen in het filter
   Zichtbaar met de muis op de i, door op de i te tikken (telefoon), of met het toetsenbord op het vakje.
   Je kunt de muis op de tooltip zelf zetten zonder dat hij verdwijnt, en Esc sluit hem (WCAG 1.4.13). */
.fopt.kp-tipjes { position: relative; }
.kp-tip__i {
  display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: .3rem; border-radius: 50%;
  border: 1.5px solid currentColor; font: 700 10px/1 var(--font-ui, sans-serif); color: var(--ink-3); vertical-align: 1px;
  cursor: help; position: relative;
}
.kp-tip__i::after { content: ""; position: absolute; inset: -8px; }   /* groter raakvlak (24 px) */
.kp-tip {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 20;
  padding: .55rem .7rem; background: var(--ink, #181818); color: #fff; font-size: var(--s-2); line-height: 1.4; font-weight: 500;
  border-radius: 4px; box-shadow: 0 6px 18px #0003; cursor: default;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .35s;
}
.kp-tip::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 8px; }   /* brug tussen vak en tooltip */
.fopt.kp-tipjes:has(.kp-tip__i:hover) .kp-tip, .kp-tip:hover, .fopt.kp-tipjes.is-tip .kp-tip,
.fopt.kp-tipjes:has(input:focus-visible):not(.is-tip-weg) .kp-tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.fopt.kp-tipjes.is-tip-weg .kp-tip { opacity: 0 !important; visibility: hidden !important; }
@media (prefers-reduced-motion: reduce) { .kp-tip { transition: none; } }

/* grote uitgelichte tegel (2×2) in de productgrid: labels en hartje zoals op een gewone kaart */
.kp-feat .lbs { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; gap: 4px; flex-wrap: wrap; max-width: calc(100% - 60px); }
.kp-feat .card__fav { position: absolute; top: 7px; right: 7px; z-index: 3; width: 28px; height: 28px; padding: 0; }
.kp-feat .card__fav svg { width: 18px; height: 18px; }
.kp-feat .card__link { color: inherit; text-decoration: none; }
.kp-feat .card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.kp-feat:hover .card__link { text-decoration: underline; text-underline-offset: 3px; }
.kp-feat:has(.card__link:focus-visible) { outline: 3px solid var(--focus, #181818); outline-offset: 3px; }
.kp-feat .card__link:focus-visible { outline: none !important; }
.kp-feat .card__add { position: relative; z-index: 2; }

/* startpagina, "Deze mag je niet missen": labels iets groter; het hartje blijft op dezelfde lijn */
.carou .card .lb2.kp-rib { width: 34px; height: 34px; padding: 4px; }
.carou .card .lbs { max-width: calc(100% - 40px); }
.carou .card .card__fav { top: -2px; }

/* ---------- productpagina: blok "Draagt bij aan de beleidsdoelen" (boven de productbeschrijving) ----------
   Rustig: per doel het logo met de naam, en daaronder (als die er is) een of twee zinnen over dit product. */
.pdpbox .kp-bd h2 { font-size: var(--s1); margin-bottom: .8rem; }
.kp-bd__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.kp-bd__doel { display: block; }
.kp-bd__doel .lb2.kp-rib { position: static; width: 36px; height: 36px; padding: 4px; margin: 0; display: grid; place-items: center; }
.kp-bd__doel .lb2.kp-rib img, .kp-bd__doel .lb2.kp-rib svg { width: 100%; height: 100%; }
.kp-bd__ico { background: var(--action, #004699); color: #fff; border-radius: 0; }
.kp-bd__ico svg { width: 20px !important; height: 20px !important; }
.kp-bd__tekst { display: grid; gap: .2rem; min-width: 0; }
.kp-bd__tekst h3 { margin: 0; font-size: var(--s0); line-height: 1.3; }
.kp-bd__waarom { margin: 0; font-size: var(--s-1); line-height: 1.55; color: var(--ink-2); max-width: 70ch; }
.kp-bd__waarom > * { margin: 0; }
.kp-bd__waarom > * + * { margin-top: .4rem; }
.kp-bd__waarom ul, .kp-bd__waarom ol { padding-left: 1.1rem; }
@media (max-width: 560px) { .kp-bd__doel { grid-template-columns: 30px minmax(0, 1fr); gap: .7rem; } .kp-bd__doel .lb2.kp-rib { width: 30px; height: 30px; padding: 3px; } .kp-bd__tekst { min-height: 30px; } }