/* ===== Lettertypes (zelf gehost, OFL-licentie, zie fonts/) ===== */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ===== Kleuren: een polder in de ochtendmist ===== */
:root {
  --achtergrond: #edf0e8;   /* veenmist */
  --vlak: #f8f9f4;
  --inkt: #1f2d22;          /* veengroen, bijna zwart */
  --inkt-zacht: #4a5a4d;
  --water: #3f7f89;
  --water-licht: #8db8bc;
  --gras: #6d8c52;
  --gras-ver: #a9bb8c;
  --riet: #b88a35;          /* rietgoud */
  --lucht-boven: #dfe9e6;
  --lucht-onder: #f3e5c8;
  --riet-1: #5c7a43;
  --riet-2: #7d8f4a;
  --riet-3: #a08a4e;
  --pluim: #c9a46a;
  --lisdodde: #6b4529;
  --lijn: #d3dacb;

  --kop: "Fraunces", Georgia, serif;
  --tekst: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --max: 1120px;
}

* { box-sizing: border-box; }

/* Zwemmende otter als cursor (puntje van de neus is het klikpunt); blij tijdens het klikken */
html, html *, dialog::backdrop {
  cursor: url("cursors/otter.svg") 2 18, url("cursors/otter.png") 2 18, auto !important;
}
html.otter-blij, html.otter-blij *, html.otter-blij dialog::backdrop {
  cursor: url("cursors/otter-blij.svg") 2 18, url("cursors/otter-blij.png") 2 18, auto !important;
}

body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--inkt);
  font-family: var(--tekst);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--kop);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
}

:focus-visible { outline: 3px solid var(--water); outline-offset: 3px; border-radius: 4px; }

/* ===== Bouwbalk ===== */
.bouwbalk {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.5rem 1rem;
  background: #f2c94c;
  color: #2b2410;
  font-size: 0.95rem;
  border-bottom: 2px solid #2b2410;
}
.bouwbalk p { margin: 0; }
.hek { width: 28px; height: 21px; flex: none; color: #2b2410; }

/* ===== Hero: het landschap ===== */
.hero {
  position: relative;
  min-height: calc(100svh - 42px);
  overflow: hidden;
  display: flex;
}
.landschap { position: absolute; inset: 0; width: 100%; height: 100%; }
.bomen { fill: #8aa07c; opacity: 0.55; }

.riet {
  position: absolute; bottom: 0;
  height: min(46vh, 380px); width: auto; max-width: 42vw;
  overflow: visible;
}
.riet-links { left: -1vw; }
.riet-rechts { right: -1vw; transform: scaleX(-1); }

.hero-tekst {
  position: relative;
  width: 100%; max-width: var(--max);
  margin: 0 auto;
  padding: clamp(4rem, 14vh, 9rem) 1.5rem 0;
}
.hero h1 {
  font-size: clamp(2.6rem, 7.2vw, 6.2rem);
  font-weight: 560;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  letter-spacing: -0.02em;
  max-width: 11ch;
  text-wrap: balance;
}

/* Rustige beweging: riet wiegt, water glinstert. Alleen als beweging gewenst is. */
@media (prefers-reduced-motion: no-preference) {
  .wieg { transform-box: fill-box; transform-origin: 50% 100%; animation: wieg 7s ease-in-out infinite alternate; }
  .wieg-1 { animation-duration: 8.5s; animation-delay: -3s; }
  .wieg-2 { animation-duration: 6s; animation-delay: -1.5s; }
  @keyframes wieg { from { transform: rotate(-1.6deg); } to { transform: rotate(1.8deg); } }

  .glinster path { animation: glinster 14s linear infinite; }
  @keyframes glinster { to { stroke-dashoffset: -256; } }
}

/* ===== Natuurdoeltypen ===== */
.doeltypen {
  max-width: var(--max);
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}
.doeltypen-kop { max-width: 40rem; margin-bottom: 2.5rem; }
.doeltypen-kop h2 { font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -0.01em; }
.doeltypen-kop p { margin: 0.6rem 0 0; color: var(--inkt-zacht); font-size: 1.15rem; }

/* kleur per landschap */
.type { --accent: var(--gras); }
.type[data-landschap="water"]   { --accent: #336b74; }
.type[data-landschap="moeras"]  { --accent: #3d7466; }
.type[data-landschap="grasland"]{ --accent: #55733d; }
.type[data-landschap="weide"]   { --accent: #7a5c17; }
.type[data-landschap="ruigte"]  { --accent: #7b5a80; }
.type[data-landschap="bos"]     { --accent: #2f4a32; }

.types { border-top: 2px solid var(--inkt); }
.type {
  display: grid;
  grid-template-columns: minmax(230px, 0.9fr) 1fr 1fr;
  gap: 1.25rem 2.5rem;
  padding: 1.9rem 0 2rem;
  border-bottom: 1px solid var(--lijn);
}
.type-kop { display: flex; gap: 1rem; align-items: flex-start; }
.type-icoon {
  flex: none;
  width: 56px; height: 56px; padding: 9px;
  border-radius: 50%;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, var(--vlak));
}
.type-icoon svg { width: 100%; height: 100%; display: block; }
.type h3 { font-size: 1.45rem; padding-top: 0.15rem; }
.type .code {
  margin: 0.35rem 0 0;
  font-size: 0.9rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.type h4 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem; font-weight: 700;
  color: var(--accent);
}
.type-tekst p { margin: 0; color: var(--inkt-zacht); max-width: 60ch; }

@media (max-width: 900px) {
  .type { grid-template-columns: 1fr 1fr; }
  .type-kop { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .type { grid-template-columns: 1fr; gap: 1rem; }
  .bouwbalk { font-size: 0.85rem; text-align: left; }
  .riet { height: 30vh; }
  .hero { min-height: 74svh; }
}

/* ===== Voet ===== */
.voet {
  border-top: 1px solid var(--lijn);
  padding: 1.5rem;
  text-align: center;
  color: var(--inkt-zacht);
  font-size: 0.95rem;
}
.voet p { margin: 0; }

/* ===== Popup ===== */
.popup {
  border: 2px solid var(--inkt); padding: 0; border-radius: 14px;
  max-width: 430px; width: calc(100% - 2rem);
  background: var(--vlak); color: var(--inkt);
  box-shadow: 8px 8px 0 var(--inkt);
  overflow: hidden;
}
.popup::backdrop { background: rgba(31, 45, 34, 0.5); backdrop-filter: blur(3px); }
.popup-streep { height: 14px; background: repeating-linear-gradient(-45deg, #f2c94c 0 14px, #2b2410 14px 28px); border-bottom: 2px solid var(--inkt); }
.popup-body { padding: 1.6rem 1.75rem 1.9rem; text-align: center; }
.hek-groot { width: 64px; height: 48px; }
.popup-body h2 { margin: 0.5rem 0 0.5rem; font-size: 1.9rem; }
.popup-body p { color: var(--inkt-zacht); margin: 0 0 1.4rem; }
.knop {
  font: inherit; font-weight: 700;
  border: 2px solid var(--inkt); border-radius: 999px;
  background: var(--inkt); color: var(--vlak);
  padding: 0.7rem 1.6rem;
}
.knop:hover { background: var(--water); border-color: var(--water); }
.popup[open] { animation: pop-in 0.25s ease-out; }
@keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .popup[open] { animation: none; } }