/* =====================================================
   Wegwijzer Animal Freedom — lichte pagina
   Hoort bij de template nederlands-wegwijzer.dwt
   Plaats dit bestand in /css/ (laden NA styles_algemeen.css)
   ===================================================== */

/* ---------- 1. De pagina: groene achtergrond, licht inhoudsvak ---------- */
/* De pagina blijft groen zoals de rest van de site; alleen het vak met
   de kop en de wegwijzer (<div class="c2 lichte-kaart">) wordt licht.
   styles_algemeen.css maakt tekst en links wit; binnen het vak draaien
   we dat om. Kopbalk en footer blijven ongewijzigd. */

body.wegwijzer-pagina{background:#0B603C;margin:0}

.lichte-kaart{box-sizing:border-box;padding:0 12px 24px}
.lichte-kaart > table{background:#f7f8f4;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.lichte-kaart > table > tbody > tr > td{padding:12px 20px}

.lichte-kaart p,
.lichte-kaart td,
.lichte-kaart ul,
.lichte-kaart div{color:#2b2b2b}

.lichte-kaart h1{color:#0B603C}
.lichte-kaart h2,
.lichte-kaart h3,
.lichte-kaart h4{color:#2b2b2b}

.lichte-kaart a{color:#0B603C}
.lichte-kaart a:visited{color:#3d6b55}
.lichte-kaart a:hover{color:#168E5B}


/* ---------- 2. De wegwijzer zelf ---------- */

.af-weg{clear:both;max-width:960px;margin:0 auto;color:#2b2b2b;--o:#6b5a8e;--v:#2f6f5e;--u:#b0602b;--c:#7a6a3a}
.af-weg a{text-decoration:none}
.af-weg li{line-height:inherit}
.af-weg h2{font-size:1.6em;margin:0 0 .3em;font-weight:normal;color:#2b2b2b}
.af-weg .aw-intro{margin:0 0 1em;line-height:1.55;color:#555;max-width:44em}

/* Kaart met de drie stappen */
.af-weg .aw-kaart{display:block;max-width:620px;margin:0 auto 1.2em}
.af-weg .aw-kaart svg{width:100%;height:auto;display:block}
.af-weg .aw-kaart a:hover circle,.af-weg .aw-kaart a:focus circle{stroke-width:5}

/* Tegels */
.af-weg .aw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.af-weg .aw-tegel{display:flex;flex-direction:column;background:#fff;border-radius:10px;border-top:6px solid var(--k,#2f6f5e);padding:18px 18px 16px;box-shadow:0 1px 3px rgba(0,0,0,.08);text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.af-weg .aw-tegel:hover,.af-weg .aw-tegel:focus{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.12)}
.af-weg .aw-tegel h3{margin:0 0 .15em;font-size:1.25em;font-weight:normal;color:var(--k,#2f6f5e)}
.af-weg .aw-vraag{margin:0 0 .8em;font-style:italic;color:#666;font-size:.95em}
.af-weg .aw-tegel ul{margin:0 0 1em;padding-left:1.1em;line-height:1.45;font-size:.93em;flex:1;color:#2b2b2b}
.af-weg .aw-naar{font-size:.9em;color:var(--k,#2f6f5e);font-weight:bold}

/* Brede rij: blogs en columns */
.af-weg .aw-rij{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.af-weg .aw-breed{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;background:#fff;border-radius:10px;border-left:6px solid var(--c);padding:14px 18px;box-shadow:0 1px 3px rgba(0,0,0,.08);text-decoration:none;color:inherit}
.af-weg .aw-breed:hover,.af-weg .aw-breed:focus{box-shadow:0 6px 16px rgba(0,0,0,.12)}
.af-weg .aw-breed strong{color:var(--c);font-weight:normal;font-size:1.15em}
.af-weg .aw-breed span{color:#555;font-size:.93em;flex:1;min-width:12em}

/* Losse links onderaan */
.af-weg .aw-extra{margin-top:22px;padding-top:16px;border-top:1px solid #dfe2d6;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;font-size:.93em}
.af-weg .aw-extra span{color:#777;margin-right:4px}
.af-weg .aw-extra a,.af-weg .aw-extra a:visited{padding:5px 12px;border:1px solid #cfd4c3;border-radius:999px;text-decoration:none;color:#444;background:#fff}
.af-weg .aw-extra a:hover,.af-weg .aw-extra a:focus{background:#eef1e6;color:#444}

/* Toegankelijkheid: zichtbare focus bij toetsenbordbediening */
.af-weg a:focus-visible{outline:3px solid #2f6f5e;outline-offset:3px}

/* Geen beweging voor wie dat in het systeem heeft uitgezet */
@media (prefers-reduced-motion: reduce){
  .af-weg .aw-tegel{transition:none}
  .af-weg .aw-tegel:hover,.af-weg .aw-tegel:focus{transform:none}
}

/* ==========================================================
   Wegwijzer Animal Freedom
   Alle regels werken alleen binnen <nav class="wegwijzer">,
   zodat de rest van de site er geen last van heeft.
   ========================================================== */

.wegwijzer{
  --ww-groen:#0B603C;
  --ww-groen-licht:#E3EFE8;
  --ww-tekst:#16211B;
  --ww-grijs:#56675D;
  --ww-lijn:#D8E1DA;
  --ww-wit:#FFFFFF;
  --ww-markeer:#FFF1B8;
  display:flex;
  flex-direction:column;
  gap:28px;
  max-width:880px;
  color:var(--ww-tekst);
  line-height:1.55;
  text-align:left;
}
.wegwijzer *{box-sizing:border-box}
.wegwijzer [hidden]{display:none !important}
.wegwijzer a{color:inherit}

.ww-lede{margin:0;color:var(--ww-grijs);font-size:1.05em;max-width:62ch}

/* Zoekveld en thema-knoppen alleen tonen als JavaScript werkt */
.wegwijzer .ww-js{display:none}
.wegwijzer.ww-actief .ww-js{display:flex}

.ww-zoek{position:relative;align-items:center}
.ww-zoek svg{position:absolute;left:15px;color:var(--ww-grijs);pointer-events:none}
.ww-zoek input{
  width:100%;font:inherit;font-size:17px;
  padding:13px 16px 13px 46px;
  border:1.5px solid var(--ww-lijn);border-radius:10px;
  background:var(--ww-wit);color:var(--ww-tekst);
}
.ww-zoek input:focus{outline:none;border-color:var(--ww-groen);box-shadow:0 0 0 3px var(--ww-groen-licht)}

.ww-chips{flex-wrap:wrap;gap:8px}
.ww-chip{
  font:inherit;font-size:14px;line-height:1.2;
  padding:7px 13px;border-radius:999px;cursor:pointer;
  border:1px solid var(--ww-lijn);background:var(--ww-wit);color:var(--ww-tekst);
  display:inline-flex;gap:7px;align-items:center;
}
.ww-chip span{color:var(--ww-grijs);font-size:13px;font-variant-numeric:tabular-nums}
.ww-chip:hover{border-color:var(--ww-groen)}
.ww-chip[aria-pressed="true"]{background:var(--ww-groen);border-color:var(--ww-groen);color:var(--ww-wit)}
.ww-chip[aria-pressed="true"] span{color:inherit;opacity:.8}

.wegwijzer .ww-chip:focus-visible,
.wegwijzer .ww-item a:focus-visible,
.wegwijzer .ww-startkaarten a:focus-visible{outline:2px solid var(--ww-groen);outline-offset:2px}

.ww-sec{display:flex;flex-direction:column;gap:12px}
.ww-kop{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--ww-lijn);padding-bottom:8px;
}
.ww-kop h2{margin:0;font-size:1.35em;line-height:1.25}
.ww-kop p{margin:0;color:var(--ww-grijs);font-size:14px}

.ww-startkaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.lichte-kaart .wegwijzer .ww-startkaarten a,
.lichte-kaart .wegwijzer .ww-startkaarten a:visited{
  display:flex;flex-direction:column;gap:6px;text-decoration:none;
  background:var(--ww-wit);color:var(--ww-tekst);
  padding:18px;border-radius:12px;
  border:1px solid var(--ww-lijn);border-top:5px solid var(--ww-groen);
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.lichte-kaart .wegwijzer .ww-startkaarten a:hover{
  background:var(--ww-groen-licht);border-color:var(--ww-groen);
}
.lichte-kaart .wegwijzer .ww-startkaarten b{
  font-size:1.1em;line-height:1.3;color:var(--ww-groen);
}
.lichte-kaart .wegwijzer .ww-startkaarten small{
  font-size:14px;line-height:1.45;color:var(--ww-grijs);
}

.ww-lijst{list-style:none;margin:0;padding:0}
.ww-item{border-bottom:1px solid var(--ww-lijn);margin:0}
.ww-item a{display:grid;grid-template-columns:1fr auto;gap:3px 14px;padding:11px 4px;text-decoration:none}
.ww-item a:hover .ww-t{color:var(--ww-groen);text-decoration:underline;text-underline-offset:3px}
.ww-t{font-weight:700;font-size:1.02em;line-height:1.35}
.ww-d{grid-column:1;color:var(--ww-grijs);font-size:.93em}
.ww-tag{
  grid-column:2;grid-row:1;align-self:center;white-space:nowrap;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ww-groen);
}
.wegwijzer mark{background:var(--ww-markeer);color:inherit;border-radius:2px;padding:0}

.ww-leeg,.ww-noot{margin:0;color:var(--ww-grijs);font-size:14px}
.ww-noot{border-top:1px solid var(--ww-lijn);padding-top:14px}
.ww-leeg a,.ww-noot a{color:var(--ww-groen)}

@media (max-width:520px){
  .ww-tag{display:none}
  .ww-startkaarten{grid-template-columns:1fr}
}