/* Earth Portals — lidmaatschapskaart, aanmelden en besloten community.
   Bouwt voort op style.css; zelfde tokens, zelfde fonts. */

.ep-cols{display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:center;padding:10px 0 70px}
@media(max-width:900px){.ep-cols{grid-template-columns:1fr;gap:38px}}
.ep-cols h2{margin:18px 0 0}
.ep-cols p{color:var(--muted);margin-top:20px;max-width:34em}

/* ---- lidmaatschapskaart ---- */
.ep-card{position:relative;background:#fff;border-radius:26px;padding:42px;box-shadow:0 30px 80px #1d3d2814}
.ep-card::before{content:'';position:absolute;inset:-1px;border-radius:27px;padding:1.5px;pointer-events:none;
  background:linear-gradient(120deg,#f0a9b1,#f2c98f,#f4ec9e,#aee3a6,#9ad6f0,#bba6dd,#eeaad5);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
@media(max-width:700px){.ep-card{padding:28px}}
.ep-price{display:flex;align-items:baseline;gap:10px;font-family:'Manrope',Arial,sans-serif;letter-spacing:-.05em}
.ep-price b{font-size:clamp(56px,7vw,76px);font-weight:500;line-height:1}
.ep-price span{font-size:19px;color:var(--muted);letter-spacing:0}
.ep-gift{display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:8px 16px;border-radius:40px;font-size:14px;color:#5b4a33;
  background:linear-gradient(120deg,#fbe2e4,#faeed4,#e6f3dd,#dff0f7,#e9e1f5)}
.ep-perks{list-style:none;margin:26px 0 30px;padding:0}
.ep-perks li{display:grid;grid-template-columns:22px 1fr;gap:15px;align-items:start;padding:14px 0;border-top:1px solid var(--line);font-size:15px}
.ep-perks li:last-child{border-bottom:1px solid var(--line)}
.ep-perks svg{margin-top:4px}
.ep-cta{width:100%;justify-content:center;gap:12px;background:#fff;color:var(--ink);border:2px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(100deg,#f0a9b1,#f2c98f,#aee3a6,#9ad6f0,#bba6dd) border-box;
  box-shadow:0 10px 30px -12px #9ad6f0cc}
.ep-cta:hover{transform:translateY(-2px)}
.ep-fine{font-size:13.5px;color:var(--muted);margin:16px 0 0}

/* ---- formulieren ---- */
.ep-form{max-width:640px}
.ep-field{display:grid;gap:7px;margin-top:16px}
.ep-field label{font-size:14px;color:var(--muted)}
.ep-field input{padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:#fff;font:inherit;color:var(--ink)}
.ep-field input:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
.ep-consent{display:flex;gap:12px;align-items:flex-start;margin-top:18px;font-size:14px;color:var(--muted)}
.ep-consent input{accent-color:var(--ink);width:18px;height:18px;margin-top:3px;flex:none}
.ep-err{color:#9d4337;font-size:14px;min-height:1.3em;margin-top:10px}
.ep-cats{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.ep-cat{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:40px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:14px;cursor:pointer}
.ep-cat i{width:9px;height:9px;border-radius:50%;flex:none}
.ep-cat[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.ep-note{margin-top:26px;padding:16px 20px;border-radius:16px;font-size:14.5px;color:#4d5a53;
  background:linear-gradient(120deg,#fbe2e433,#faeed444,#e6f3dd55,#dff0f766,#e9e1f555);border:1px solid var(--line)}

/* ---- The Journey ---- */
.ep-journey{display:grid;grid-template-columns:auto 1fr auto;gap:34px;align-items:center;padding:34px 38px;border-radius:24px;
  background:linear-gradient(120deg,#f3ece0,#f9f4ed 55%,#eff1e9);margin-bottom:60px}
@media(max-width:860px){.ep-journey{grid-template-columns:1fr;gap:22px;padding:28px}}
.ep-date{text-align:center;background:#fff;border-radius:20px;padding:18px 26px;min-width:124px}
.ep-date b{display:block;font-family:'Manrope',Arial,sans-serif;font-size:46px;line-height:1;font-weight:500;letter-spacing:-.05em}
.ep-date span{font-size:11px;letter-spacing:.18em;font-weight:600;color:#5d6b64}
.ep-date em{display:block;font-style:normal;font-size:14px;margin-top:6px;color:var(--muted)}
.ep-journey h3{font-size:30px;margin:10px 0 0}
.ep-journey p{color:var(--muted);margin:10px 0 0;max-width:40em}

/* ---- wereldkaart ---- */
.ep-map{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#f4f7f3}
.ep-map img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover}
.ep-pins{position:absolute;inset:0}
.ep-pin{position:absolute;transform:translate(-50%,-50%) scale(calc(1 / var(--z, 1)));width:16px;height:16px;border-radius:50%;border:2px solid #fff;padding:0;cursor:pointer;box-shadow:0 2px 9px #183a3345}
.ep-pin.wacht{opacity:.75;border-style:dashed}
.ep-pin.mine{width:21px;height:21px;box-shadow:0 0 0 6px #ffffff8c,0 2px 9px #183a3345}
.ep-pin:hover,.ep-pin:focus-visible{transform:translate(-50%,-50%) scale(1.25)}
.ep-tip{position:absolute;transform:translate(-50%,-150%);background:var(--ink);color:#fff;font-size:12.5px;padding:6px 11px;border-radius:9px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s}
.ep-tip.on{opacity:1}
.ep-maprow{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;margin-top:14px;font-size:14px;color:var(--muted)}
.ep-legend{display:flex;flex-wrap:wrap;gap:14px}
.ep-legend span{display:inline-flex;align-items:center;gap:7px}
.ep-legend i{width:10px;height:10px;border-radius:50%}

/* ---- chat ---- */
.ep-chat{display:grid;grid-template-columns:238px 1fr;height:min(70vh,660px);min-height:470px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;margin-top:26px}
.ep-side{background:var(--ink);color:#d7e3dd;padding:18px 12px;display:flex;flex-direction:column;gap:5px;overflow-y:auto}
.ep-side h4{font-size:11px;letter-spacing:.18em;font-weight:600;color:#8fb7a5;margin:6px 10px 12px}
.ep-chan{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;color:inherit;padding:10px 12px;border-radius:12px;cursor:pointer;font:inherit;font-size:15px}
.ep-chan:hover{background:#ffffff14}
.ep-chan[aria-current=true]{background:#ffffff26;color:#fff}
.ep-chan i{width:9px;height:9px;border-radius:50%;flex:none}
.ep-chan small{margin-left:auto;font-size:12px;color:#8fb7a5}
.ep-me{margin-top:auto;border-top:1px solid #ffffff1f;padding:14px 10px 0;font-size:13px;color:#a9bdb5}
.ep-me input{width:100%;margin-top:7px;padding:9px 11px;border-radius:10px;border:1px solid #ffffff26;background:#ffffff0f;color:#fff;font:inherit}
.ep-main{display:flex;flex-direction:column;min-width:0}
.ep-chead{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ep-chead b{font-family:'Manrope',Arial,sans-serif;font-size:22px;font-weight:500;letter-spacing:-.04em}
.ep-chead span{font-size:14px;color:var(--muted)}
.ep-msgs{flex:1;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:16px;background:linear-gradient(180deg,#fcfdfb,#f5f8f4)}
.ep-msg{display:grid;grid-template-columns:36px 1fr;gap:12px;max-width:720px}
.ep-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:500}
.ep-who{font-weight:600;font-size:14.5px}
.ep-when{font-size:12px;color:var(--muted);margin-left:9px;font-weight:400}
.ep-msg p{margin:3px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px}
.ep-empty{margin:auto;text-align:center;color:var(--muted);max-width:26em;font-size:15px}
.ep-empty b{display:block;font-family:'Manrope',Arial,sans-serif;font-size:21px;font-weight:500;color:var(--ink);letter-spacing:-.04em;margin-bottom:6px}
.ep-compose{display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--line);background:#fff}
.ep-compose textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-height:48px;max-height:140px;background:var(--wash);font:inherit;color:var(--ink)}
.ep-compose textarea:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
.ep-compose .button{padding:14px 22px;gap:0}
.ep-status{font-size:13px;color:var(--muted);padding:0 22px 10px;background:#fff}
.ep-nickm{display:none;padding:12px 16px 0;font-size:13px;color:var(--muted)}
.ep-nickm input{margin-left:8px;padding:7px 11px;border-radius:10px;border:1px solid var(--line);font:inherit}
@media(max-width:800px){
  .ep-chat{grid-template-columns:1fr;height:auto}
  .ep-side{flex-direction:row;overflow-x:auto;padding:10px;gap:4px}
  .ep-side h4,.ep-me{display:none}
  .ep-chan{width:auto;white-space:nowrap}
  .ep-chan small{display:none}
  .ep-msgs{height:54vh}
  .ep-nickm{display:block}
}
.ep-hidden{display:none}

/* ---- lidmaatschapsbalk in de community ---- */
.ep-lidbalk{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin:26px 0 0;padding:18px 22px;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(120deg,#fbe2e433,#faeed444,#e6f3dd55,#dff0f766,#e9e1f555)}
.ep-lidbalk p{margin:0;font-size:15px}
.ep-lidbalk b{font-weight:600}
.ep-lidbalk .ep-acties{display:flex;gap:10px;flex-wrap:wrap}
.ep-lidbalk a.klein{align-self:center;font-size:13px;color:var(--muted)}
.ep-lidbalk.verlopen{background:#fdf3ec;border-color:#edd9c9}

/* ---- Earth Profile ---- */
.ep-vraag{border:0;padding:0 0 26px;margin:0}
.ep-vraag legend{font-size:20px;margin-bottom:12px;font-family:'Manrope',Arial,sans-serif;letter-spacing:-.03em}
.ep-optie{display:flex;gap:13px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;cursor:pointer;transition:background .2s,border-color .2s}
.ep-optie:hover{border-color:#9aab8d}
.ep-optie input{accent-color:var(--ink);width:18px;height:18px;flex:none;margin:0}
.ep-optie:has(input:checked){background:#eef5ea;border-color:#759470}
.ep-uitkomst{margin:10px 0 0;padding:26px 28px;border-radius:20px;background:linear-gradient(120deg,#f3ece0,#f9f4ed 55%,#eff1e9)}
.ep-uitkomst h2{font-size:30px;margin:0}
.ep-uitkomst p{margin-top:12px;color:#4d5a53}

.ep-uitlog{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:30px;
  padding:9px 16px;font:inherit;font-size:13.5px;cursor:pointer}
.ep-uitlog:hover{color:var(--ink);border-color:#9aab8d}

/* ---- kaart: zoomen, slepen, hartjes ---- */
.ep-map{touch-action:none;cursor:crosshair;
  /* Zonder dit selecteert de browser bij het slepen het kaartplaatje en de
     teksten eromheen, en kleurt alles blauw. */
  -webkit-user-select:none;-moz-user-select:none;user-select:none;
  -webkit-touch-callout:none}
.ep-map img{-webkit-user-drag:none;user-select:none;pointer-events:none}
.ep-map::selection,.ep-map *::selection{background:transparent}
.ep-map.ep-ingezoomd{cursor:grab}
.ep-map.ep-sleept{cursor:grabbing}
.ep-zoomlaag{position:relative;transform-origin:50% 50%;transition:transform .12s ease-out}
.ep-zoomlaag img,.ep-zoomlaag .ep-wereld{display:block;width:100%;aspect-ratio:2/1;object-fit:cover}
/* geen will-change: die laat de browser de kaart één keer tekenen en daarna
   uitvergroten, waardoor de kustlijnen wazig worden bij het inzoomen */
.ep-zoomknoppen{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:6px;z-index:3}
.ep-zoomknop{width:36px;height:36px;border-radius:12px;border:1px solid var(--line);background:#fffefa;
  color:var(--ink);font:500 18px/1 Helvetica,Arial,sans-serif;cursor:pointer;box-shadow:0 2px 8px #183a3320}
.ep-zoomknop:hover{background:#fff;border-color:#9aab8d}
.ep-pin.project{background:transparent!important;border:0;width:22px;height:22px;font-size:19px;line-height:1;
  text-shadow:0 1px 3px rgba(255,255,255,.95),0 0 2px rgba(24,58,51,.4);box-shadow:none}
.ep-pin.project:hover,.ep-pin.project:focus-visible{transform:translate(-50%,-50%) scale(calc(1.3 / var(--z, 1)))}
.ep-legend .ep-hartje{width:auto;height:auto;border-radius:0;color:#cf7f87;font-style:normal;font-size:14px;line-height:1}
.ep-tip{z-index:4}

/* ---- aanmelden vanaf de kaart ---- */
.ep-kaartcats{display:grid;gap:8px;margin-top:20px}
.ep-kaartcat{justify-content:flex-start;gap:12px;background:#fff;color:var(--ink);text-align:left}
.ep-kaartcat i{width:10px;height:10px;border-radius:50%;flex:none}
.ep-suggesties{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;margin-top:4px}
.ep-suggesties button{text-align:left;background:#fff;color:var(--ink);border:0;border-bottom:1px solid var(--line);
  padding:11px 14px;font:inherit;font-size:14px;cursor:pointer}
.ep-suggesties button:last-child{border-bottom:0}
.ep-suggesties button:hover{background:#f1f6f1}

/* ---- taalknop en ster ---- */
.ep-taal{display:flex;gap:2px;background:#f3f6f1;border-radius:30px;padding:3px;margin-left:auto}
.ep-taal button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;
  letter-spacing:.06em;padding:7px 12px;border-radius:30px;cursor:pointer}
.ep-taal button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 4px #183a3318}
.brand-star{display:inline-flex;align-items:center}
.ep-ster{width:17px;height:17px;display:block}
@media(max-width:700px){.ep-taal{margin-left:8px;padding:2px}.ep-taal button{padding:6px 9px;font-size:11.5px}}

/* ---- lagen op de kaart: leden en projecten ---- */
.ep-lagen{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.ep-laag{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:40px;border:1px solid var(--line);
  background:#fff;color:var(--muted);font:inherit;font-size:14px;cursor:pointer}
.ep-laag[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.ep-laag .ep-bol{width:11px;height:11px;border-radius:50%;background:currentColor;flex:none}
.ep-laag .ep-hart{width:13px;height:12px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21C12 21 1.7 14.6 1.7 7.9 1.7 4.4 4.4 2 7.5 2c2 0 3.6 1 4.5 2.4C12.9 3 14.5 2 16.5 2 19.6 2 22.3 4.4 22.3 7.9 22.3 14.6 12 21 12 21Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21C12 21 1.7 14.6 1.7 7.9 1.7 4.4 4.4 2 7.5 2c2 0 3.6 1 4.5 2.4C12.9 3 14.5 2 16.5 2 19.6 2 22.3 4.4 22.3 7.9 22.3 14.6 12 21 12 21Z'/%3E%3C/svg%3E") center/contain no-repeat}
.ep-pin.project{background:transparent!important;border:0;width:26px;height:24px;box-shadow:none;padding:0}
.ep-pin.project svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 4px rgba(24,58,51,.3))}

/* een element met [hidden] moet ook echt weg zijn, ook als het een grid of flex is */
[hidden]{display:none !important}

/* ------------------------------------------------------------------ */
/* De krachtplekken van de Aarde (de chakra-laag op de wereldkaart)    */
/* ------------------------------------------------------------------ */
.ep-krachtlaag{position:absolute;inset:0;pointer-events:none}
.ep-kracht{position:absolute;transform:translate(-50%,-50%) scale(calc(1 / var(--z, 1)));width:26px;height:26px;padding:0;
  border:0;background:none;cursor:pointer;pointer-events:auto;line-height:0;color:var(--kleur,#5d6b64)}
.ep-kracht svg{width:100%;height:100%;fill:currentColor;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)) drop-shadow(0 0 5px rgba(255,255,255,.9))}
.ep-kracht:hover svg,.ep-kracht:focus-visible svg{transform:scale(1.22)}
.ep-kracht svg{transition:transform .16s ease}
.ep-kracht:focus-visible{outline:3px solid #173d32;outline-offset:3px;border-radius:50%}
.ep-laag .ep-sterretje{display:inline-block;width:12px;height:12px;margin-right:7px;vertical-align:-1px;
  background:conic-gradient(from 0deg,#cf3d48,#ef8835,#e9bd29,#45a56c,#3a9bd3,#5550a4,#a267c5,#cf3d48);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}

/* ------------------------------------------------------------------ */
/* Het paneel onder de kaart: wie of wat je hebt aangeklikt            */
/* ------------------------------------------------------------------ */
.ep-paneel{position:relative;margin-top:18px;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:24px 26px;max-width:620px;box-shadow:0 8px 30px rgba(23,61,50,.07)}
.ep-paneel:focus{outline:none}
.ep-paneel h3{font-size:22px;margin:4px 0 2px;font-weight:500}
.ep-paneel p{font-size:15.5px;line-height:1.7;margin:10px 0;color:#2c4039}
.ep-paneel-onder{color:#5d6b64;font-size:14.5px;margin:0 0 6px}
.ep-paneel-klein{font-size:13.5px;color:#5d6b64}
.ep-paneel-goed{font-size:15.5px;color:#2c5f45;background:#eef6ef;border-radius:12px;padding:14px 16px}
.ep-paneel-stip{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;vertical-align:1px}
.ep-paneel-dicht{position:absolute;top:12px;right:14px;border:0;background:none;font-size:26px;
  line-height:1;color:#5d6b64;cursor:pointer;padding:4px 8px;border-radius:8px}
.ep-paneel-dicht:hover{color:#173d32;background:#f3f6f1}
.ep-paneel-form{display:grid;gap:8px;margin-top:14px}
.ep-paneel-form label{font-size:14px;color:#2c4039}
.ep-paneel-form textarea{width:100%;font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;background:#fcfdfc;color:#173d32;resize:vertical}
.ep-paneel-form textarea:focus{outline:2px solid #173d32;outline-offset:1px}
.ep-paneel .button{margin-top:12px}

/* ------------------------------------------------------------------ */
/* Mijn gegevens                                                       */
/* ------------------------------------------------------------------ */
.ep-mijblok{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 26px;margin-top:20px}
.ep-mijblok h2{font-size:21px;margin:0 0 4px;font-weight:500}
.ep-mijblok > p:first-of-type{margin-top:6px}
.ep-keuze{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid #eef2ee}
.ep-keuze:first-of-type{border-top:0}
.ep-keuze input{margin-top:4px;width:20px;height:20px;flex:0 0 auto}
.ep-keuze span{font-size:15.5px;line-height:1.6;color:#2c4039}
.ep-keuze small{display:block;font-size:13.5px;color:#5d6b64;margin-top:2px}
.ep-mijrij{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.ep-mijgoed{font-size:14.5px;color:#2c5f45}

/* ------------------------------------------------------------------ */
/* Toegankelijkheid: leesbaarder grijs, en altijd een zichtbare focus  */
/* ------------------------------------------------------------------ */
.small,.klein,.ep-fine,.photo-credit,.location-source small{color:#5d6b64}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #173d32;outline-offset:2px;border-radius:6px}
.ep-pin:focus-visible{outline:3px solid #173d32;outline-offset:3px}

/* Op een telefoon: de kaartknoppen groot genoeg om te raken */
@media (max-width:640px){
  .ep-zoomknop{width:46px;height:46px;font-size:22px}
  .ep-laag{padding:10px 14px}
  .ep-paneel{padding:20px 18px}
  .ep-kracht{width:30px;height:30px}
}
.ep-krachtuitleg{margin:6px 0 0;color:#5d6b64}

/* ------------------------------------------------------------------ */
/* Bolletjes, hartjes en sterretjes houden hun grootte bij het zoomen. */
/* De kaart zelf wordt groter (scale), maar ep.js geeft die factor door */
/* als --z en hierboven worden de markers er precies evenveel door      */
/* gedeeld. Zo blijven ze net zo groot als op een echte kaart, en       */
/* blijft er ruimte over om naast een marker op de kaart te klikken.    */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* De wereldkaart zelf: lijnen die niet mee opblazen bij het inzoomen. */
/* ep.js zet de zoomfactor in --z; de lijndikte wordt er door gedeeld, */
/* zodat kustlijnen en landsgrenzen altijd even dun blijven.           */
/* ------------------------------------------------------------------ */
.ep-wereld .ep-land{stroke-width:calc(.6 / var(--z, 1))}
.ep-wereld .ep-grens{stroke-width:calc(.45 / var(--z, 1))}
.ep-wereld .ep-graad{stroke-width:calc(.8 / var(--z, 1))}

/* ------------------------------------------------------------------ */
/* Bovenin: één duidelijke knop "Word lid", met "Inloggen" ernaast.    */
/* ------------------------------------------------------------------ */
.nav-acties{display:flex;align-items:center;gap:6px}
.nav-inlog{display:inline-block;padding:11px 16px;border-radius:40px;text-decoration:none;
  font-size:14.5px;color:#173d32;white-space:nowrap}
.nav-inlog:hover{background:#eef3ee}
@media (max-width:860px){
  .nav-inlog{padding:10px 12px;font-size:14px}
}
@media (max-width:520px){
  .nav-acties{gap:2px}
  .nav-inlog{padding:9px 8px}
}

/* Een retreatlocatie die wij zelf in beeld brengen krijgt een klein gouden
   randje, zodat je hem kunt onderscheiden van een plek die een lid aanmeldt. */
.ep-pin.project.vast svg{filter:drop-shadow(0 0 0 #d7bb75) drop-shadow(0 2px 4px rgba(24,58,51,.3))}
.ep-pin.project.vast svg path{stroke:#f3e4c0}

/* De ring "Find my people" op de homepage is een link naar de wereldkaart. */
a.ring-center{text-decoration:none;color:inherit;cursor:pointer}
a.ring-center:hover,a.ring-center:focus-visible{text-decoration:none}

/* ------------------------------------------------------------------ */
/* De vlinder vliegt met je mee als je naar beneden scrolt.            */
/* ep.js zet de klasse erop; zonder javascript blijft hij gewoon staan */
/* waar hij stond. De eigen draaiing uit style.css wordt hier door het */
/* script overgenomen, daarom staat transform hier niet vast.          */
/* ------------------------------------------------------------------ */
.page-butterfly.ep-vliegt{position:fixed;top:143px;will-change:transform}
@media(min-width:1500px){.page-butterfly.ep-vliegt{top:150px}}
@media(max-width:950px){.page-butterfly.ep-vliegt{top:125px}}
@media(max-width:700px){.page-butterfly.ep-vliegt{top:162px}}
@media(prefers-reduced-motion:reduce){.page-butterfly.ep-vliegt{position:absolute;transform:rotate(17deg)!important}}

/* ------------------------------------------------------------------ */
/* De getekende vlinder: de magie van ontmoeten.                       */
/* ------------------------------------------------------------------ */
.ep-vlinderblok{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,56px);align-items:center;margin:clamp(48px,7vw,96px) 0}
.ep-vlinderblok figure{margin:0;position:relative}
.ep-vlinderblok img{display:block;width:100%;height:auto;border-radius:22px;
  /* het papier van de tekening loopt zacht over in de achtergrond van de site */
  mix-blend-mode:multiply}
.ep-vlinderblok h2{font-size:clamp(28px,3.4vw,44px);margin:14px 0 14px}
.ep-vlinderblok p{font-size:16.5px;line-height:1.75;color:#2c4039;max-width:40em}
@media(max-width:820px){
  .ep-vlinderblok{grid-template-columns:1fr;gap:18px}
  .ep-vlinderblok figure{max-width:420px;margin:0 auto}
}
@media(prefers-reduced-motion:no-preference){
  .ep-vlinderblok img{transition:transform .9s cubic-bezier(.2,.7,.3,1)}
  .ep-vlinderblok figure:hover img{transform:translateY(-6px) rotate(-1deg)}
}

/* ------------------------------------------------------------------ */
/* De meevliegende vlinder is nu de getekende vlinder zelf.            */
/* Hij bestaat uit twee helften van dezelfde tekening; die bewegen om  */
/* hun binnenrand, zodat het lijkt alsof hij met zijn vleugels slaat.  */
/* De plaats op het scherm en het meevliegen bij het scrollen komen    */
/* uit style.css en ep.js; hier staat alleen hoe hij eruitziet.        */
/* ------------------------------------------------------------------ */
.page-butterfly{display:flex;aspect-ratio:1 / 1;height:auto}
.page-butterfly .vl-vleugel{display:block;width:50%;height:auto;align-self:stretch;
  background-image:url("assets/vlinder-regenboog.png");
  background-size:200% 100%;background-repeat:no-repeat;
  /* de vleugels krijgen een eigen laag bij de browser; dat houdt de
     beweging vloeiend in plaats van schokkerig */
  will-change:transform;transform:translateZ(0);backface-visibility:hidden}
.vl-links{background-position:left center;transform-origin:right center}
.vl-rechts{background-position:right center;transform-origin:left center}

/* Eén rustige heen-en-weer beweging, zonder hoeken erin: de vleugels gaan
   dicht en weer open als een ademhaling. Twee keerpunten, verder niets —
   daardoor loopt hij vloeiend door in plaats van met schokjes. */
.vl-vleugel{animation:vl-slag 5.2s cubic-bezier(.45,.05,.55,.95) infinite}
.vl-rechts{animation-delay:-.08s}
@keyframes vl-slag{
  0%   {transform:translateZ(0) scaleX(1)}
  50%  {transform:translateZ(0) scaleX(.7)}
  100% {transform:translateZ(0) scaleX(1)}
}

/* de pauzeknop naast het logo zet ook deze vleugels stil */
body:has(.brand-portal-wrap.is-paused) .vl-vleugel{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.vl-vleugel{animation:none}}

/* Het paneel onder de kaart komt zacht tevoorschijn, zodat je ziet dat er
   iets veranderd is als je op een ander bolletje klikt. */
.ep-paneel-aan{animation:ep-paneel-op .34s cubic-bezier(.2,.7,.3,1)}
@keyframes ep-paneel-op{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){.ep-paneel-aan{animation:none}}

/* Het paneel onder de kaart krijgt bij het openen de toetsenbordfocus, zodat
   een schermlezer meteen voorleest wat je hebt aangeklikt. Maar het is geen
   knop, dus er hoort geen dikke rand omheen te verschijnen. */
.ep-paneel:focus,.ep-paneel:focus-visible{outline:none}

/* De menuregel op een telefoon: netjes op een eigen rij, en als er geen plek
   is schuift hij opzij in plaats van over de pagina heen te vallen. */
@media(max-width:700px){
  .header nav{order:3;width:100%;justify-content:flex-start;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .header nav::-webkit-scrollbar{display:none}
  .header nav > a,.header .nav-group{flex:0 0 auto;white-space:nowrap}
}

/* Op een telefoon is de kop anders drie regels hoog en dat is veel, want hij
   blijft bovenaan staan. De taalknop schuift daarom mee naar de menuregel. */
@media(max-width:700px){
  .header{gap:8px 10px}
  /* Rij 1: het logo, de taalknop en de twee knoppen. Rij 2: het menu, dat
     opzij schuift als het niet past. Zo blijft de kop twee regels hoog. */
  .header nav{order:3;width:100%;flex:0 0 100%}
  .ep-taal{order:2;flex:0 0 auto;margin-left:auto}
  .nav-acties{order:2;flex:0 0 auto}
  .brand-motion-toggle{display:none}
}
@media(max-width:430px){
  .brand-portal{font-size:19px;padding-left:14px;padding-right:16px}
  .ep-taal button{padding:7px 10px;font-size:12.5px}
  .nav-inlog{padding:9px 7px;font-size:13.5px}
  .nav-cta{padding:10px 14px;font-size:13.5px}
}

/* Zodra je op een telefoon begint te scrollen, klapt de menuregel weg; de kop
   wordt dan één regel met het logo en de twee knoppen. Bovenaan de pagina
   staat alles er gewoon weer. */
@media(max-width:700px){
  body.ep-kop-klein .header nav,
  body.ep-kop-klein .ep-taal{display:none}
  body.ep-kop-klein .header{min-height:0}
}

/* Op de smalste telefoons (onder 380 px) past het logo met beide knoppen pas
   op één regel als alles een maatje kleiner is. */
@media(max-width:380px){
  .brand-portal{font-size:17.5px;padding-left:11px;padding-right:13px}
  .nav-inlog{padding:9px 5px;font-size:13px}
  .nav-cta{padding:9px 12px;font-size:13px}
  .nav-cta span{display:none}
  .header{padding:10px 12px}
}

/* ------------------------------------------------------------------ */
/* Je eigen postvak in de community                                    */
/* ------------------------------------------------------------------ */
.ep-postvak{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;margin-top:20px}
.ep-postvak.leeg{display:block;padding:24px 26px}
.ep-postvak.leeg p{margin:0;color:#2c4039}
.ep-glijst{border-right:1px solid var(--line);background:#fbfcfb;max-height:420px;overflow-y:auto}
.ep-gesprek{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid #eef2ee;
  background:none;padding:14px 16px;cursor:pointer;font:inherit}
.ep-gesprek:hover{background:#f3f6f1}
.ep-gesprek.aan{background:#eef4ee}
.ep-gnaam{display:block;font-size:15px;color:#173d32;font-weight:500}
.ep-glaatste{display:block;font-size:13px;color:#5d6b64;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-gesprek.nieuw .ep-gnaam{font-weight:600}
.ep-hartje{color:#d6455c;font-size:12px;vertical-align:1px}
.ep-gvenster{display:flex;flex-direction:column;min-height:260px;max-height:420px}
.ep-gkop{padding:14px 18px;border-bottom:1px solid var(--line);font-size:15px}
.ep-gregels{flex:1;overflow-y:auto;padding:14px 18px;display:grid;gap:12px;align-content:start}
.ep-gregel{max-width:85%;background:#f3f6f1;border-radius:14px;padding:10px 14px}
.ep-gregel.ikzelf{margin-left:auto;background:#e9f1ea}
.ep-gregel p{margin:0;font-size:15px;line-height:1.6;color:#2c4039}
.ep-gtijd{display:block;font-size:12px;color:#5d6b64;margin-top:4px}
.ep-gleeg{padding:24px 18px}
.ep-gform{display:grid;gap:8px;padding:12px 18px 16px;border-top:1px solid var(--line)}
.ep-gform textarea{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);
  border-radius:12px;background:#fcfdfc;color:#173d32;resize:vertical}
.ep-gform button{justify-self:start}
.ep-verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:760px){
  .ep-postvak{grid-template-columns:1fr}
  .ep-glijst{border-right:0;border-bottom:1px solid var(--line);max-height:220px}
}

/* Het rode hartje bovenin: er ligt post voor je. */
.ep-kophartje{display:inline-block;margin-left:6px;color:#d6455c;font-size:12px;vertical-align:2px;
  animation:ep-hartklop 2.4s ease-in-out infinite}
@keyframes ep-hartklop{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
@media(prefers-reduced-motion:reduce){.ep-kophartje{animation:none}}

/* Een afgewezen chatbericht valt op, zodat je ziet waarom het niet doorging. */
.ep-status-let{color:#9b302d}

/* Aanmeldroute uit de update, met bestaande kaartvelden. */
.join-progress{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}.join-progress span{font-size:12px;padding:9px 12px;border-radius:30px;background:#f1f3ee;color:#66736b}.join-progress .join-progress-active{background:#264f40;color:white}.join-step[hidden]{display:none!important}.join-step .ep-field{margin:18px 0}.join-step select{display:block;width:100%;padding:15px;border:1px solid #cbd5cd;border-radius:8px;background:white;font:inherit}.join-back{background:none;border:0;text-decoration:underline;cursor:pointer;margin:18px 18px 18px 0;font:inherit}.join-step .ep-cta{margin-top:15px}.join-step .ep-fine{margin-top:24px;max-width:58ch}

.join-progress .join-progress-active{background:var(--ink);color:white}.join-step select{color:var(--ink)}