/* Stichting Fresh & Easy Growing - huisstijl
   Afgestemd op de stijl van heemskerkfresh.com (kleuren, lettertype, opmaak)
   en op het logo van de stichting.

   groen accent  #52AE32   (knoppen, accenten - gelijk aan het logogroen)
   groen kop     #46762D   (koppen)
   groen tekst   #395421   (lopende tekst, iets doorzichtig)
   creme         #EEEADA   (rustige achtergrondvlakken)
   rood          #BB0000   (spaarzaam accent)

   Wil je iets aanpassen? Verander de waarden hieronder bij :root. */

:root{
  --groen:#52AE32;
  --groen-kop:#46762D;
  --groen-diep:#395421;
  --tekst:rgba(57,84,33,.85);   /* getest op WCAG AA, ook op de cremevlakken */
  --creme:#EEEADA;
  --creme-licht:#F7F5EE;
  --lijn:#DCD8C6;
  --rood:#BB0000;
  --wit:#FFFFFF;
  --max:1120px;
  --radius:8px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  /* museo-sans = het lettertype van heemskerkfresh.com (betaald, niet meegeleverd).
     Wie het heeft ziet het meteen; alle anderen krijgen Segoe UI / de systeemletter. */
  font-family:"museo-sans","Avenir Next","Avenir","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  color:var(--tekst);
  background:var(--wit);
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}   /* height:auto is nodig omdat de afbeeldingen vaste width/height-attributen hebben */
a{color:var(--groen-kop)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

/* Sneltoets voor toetsenbord- en schermlezergebruikers:
   springt over het menu heen naar de inhoud. */
.overslaan{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--groen-diep);color:#fff;padding:12px 20px;
  text-decoration:none;border-radius:0 0 6px 0;font-weight:700;
}
.overslaan:focus{left:0}

/* ---------- Header ---------- */
header.site{
  background:var(--wit);
  position:sticky;top:0;z-index:50;
}
.header-in{
  max-width:var(--max);margin:0 auto;padding:16px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.logo img{height:66px;width:auto}
nav.hoofd{display:flex;gap:30px;flex-wrap:wrap}
nav.hoofd a{
  text-decoration:none;color:var(--groen-kop);font-size:16px;font-weight:600;
  padding:6px 0;border-bottom:2px solid transparent;
}
nav.hoofd a:hover{color:var(--groen)}
nav.hoofd a.actief{border-bottom-color:var(--groen)}

/* ---------- Hero ---------- */
.hero{background:var(--wit);padding:26px 0 64px}
.hero .in{
  max-width:var(--max);margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
}
.hero h1{
  font-size:3rem;line-height:1.12;font-weight:700;color:var(--groen-kop);
  margin:0 0 18px;letter-spacing:-.5px;
}
.hero h1 .diep{color:var(--groen-diep)}
.hero p{font-size:1.12rem;margin:0 0 26px;max-width:460px}
.hero img{border-radius:16px}

/* ---------- Secties ---------- */
section{padding:60px 0}
section.creme{background:var(--creme)}
section.intro{padding-bottom:24px}
section.creme-licht{background:var(--creme-licht)}
h1, h2, h3{overflow-wrap:break-word;hyphens:auto}
h2, section h1{font-size:1.75rem;line-height:1.25;margin:0 0 10px;color:var(--groen-kop);font-weight:700}
h3{font-size:1.15rem;margin:26px 0 6px;color:var(--groen-kop);font-weight:700}
.lead{font-size:1.1rem}

/* Leesbreedte: een regel van meer dan ~70 tekens leest slecht.
   Geldt niet voor kaartjes, tabellen, de quote en de voettekst. */
section p, section ul, .lead{max-width:60ch}
.kaart p, .kaart ul, footer.site p, footer.site address, table.gegevens p{max-width:none}
.kop-streep{width:52px;height:4px;background:var(--groen);border:0;border-radius:2px;margin:0 0 24px}

/* ---------- Grid & kaarten ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.grid-4{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.kaart{
  background:var(--wit);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 1px 3px rgba(57,84,33,.10);
}
.kaart .inhoud{padding:20px 24px 26px}
.kaart h3{margin-top:0}
.kaart p{margin-bottom:0}
.kaart img{border-radius:0;width:100%;height:210px;object-fit:cover}

/* ---------- Tabel ---------- */
table.gegevens{border-collapse:collapse;width:100%;max-width:760px;margin:8px 0 24px;font-size:1rem}
table.gegevens th,table.gegevens td{
  text-align:left;vertical-align:top;padding:12px 16px;border-bottom:1px solid var(--lijn);
}
table.gegevens th{width:240px;font-weight:700;color:var(--groen-diep)}

/* Gegevens die nog volgen. Zoek in de html-bestanden op
   <span class="nogniet">wordt binnenkort gepubliceerd</span>
   en vervang dat hele stukje door de echte waarde. */
.nogniet{font-style:italic;opacity:.9}

.knop{
  display:inline-block;background:var(--groen-kop);color:#fff;text-decoration:none;
  padding:13px 26px;border-radius:6px;font-weight:700;font-size:1rem;margin:6px 12px 6px 0;
}
.knop:hover{background:var(--groen-diep)}
.knop.leeg{background:transparent;color:var(--groen-kop);border:2px solid var(--lijn);padding:11px 24px}
.knop.leeg:hover{border-color:var(--groen);color:var(--groen)}


ul.vink{list-style:none;padding:0;margin:14px 0}
ul.vink li{padding:6px 0 6px 28px;position:relative}
ul.vink li:before{
  content:"";position:absolute;left:2px;top:15px;width:10px;height:10px;
  background:var(--groen);border-radius:50%;
}

/* ---------- Footer ---------- */
footer.site{
  background:var(--groen-diep);color:rgba(255,255,255,.88);
  padding:56px 0 26px;font-size:.96rem;
}
footer.site a{color:#fff;text-decoration:none}
footer.site a:hover{text-decoration:underline}
footer.site .cols{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:56px;flex-wrap:wrap;
}
footer.site h2{
  color:#fff;font-size:1.1rem;margin:0 0 6px;font-weight:700;line-height:1.35;
}
footer.site .payoff{
  color:#B7D8A4;font-style:italic;margin:0 0 18px;font-size:.95rem;
}
footer.site address{font-style:normal;line-height:1.75}
footer.site .menu{text-align:right}
footer.site .menu ul{list-style:none;margin:0;padding:0;line-height:2}
footer.site .onder{
  border-top:1px solid rgba(255,255,255,.18);margin-top:36px;padding-top:18px;
  font-size:.88rem;color:rgba(255,255,255,.72);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
}

/* ---------- Rustige beweging bij het scrollen ----------
   De blokken schuiven een klein stukje omhoog en worden zichtbaar zodra
   ze in beeld komen. Werkt alleen als JavaScript aanstaat (class "js" op
   het html-element); zonder JavaScript staat alles gewoon zichtbaar. */
.js section > .wrap,
.js .hero .in{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
  will-change:opacity, transform;
}
.js section > .wrap.zichtbaar,
.js .hero .in.zichtbaar{opacity:1;transform:none;will-change:auto}

@media (prefers-reduced-motion: reduce){
  .js section > .wrap,
  .js .hero .in{opacity:1;transform:none;transition:none}
}

/* ---------- Toetsenbordbediening ---------- */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--groen);
  outline-offset:3px;
  border-radius:3px;
}

/* ---------- Afdrukken ---------- */
@media print{
  header.site, footer.site nav, .knop{display:none}
  .js section > .wrap, .js .hero .in{opacity:1 !important;transform:none !important}
  body{font-size:11pt;color:#000;background:#fff}
  section{padding:12px 0}
  section.creme, section.creme-licht{background:#fff}
  a{color:#000;text-decoration:underline}
}

/* ---------- Mobiel ---------- */
@media (max-width:860px){
  .hero .in,.grid-2,.grid-4{grid-template-columns:1fr}
  .hero{padding:16px 0 44px}
  .hero h1{font-size:2.1rem}
  .header-in{padding:14px 20px}
  .logo img{height:54px}
  nav.hoofd{gap:20px}
  nav.hoofd a{font-size:15px;padding:12px 0}   /* groter aanraakvlak op telefoon */
  footer.site .cols{gap:28px}
  footer.site .menu{text-align:left}
  footer.site .onder{flex-direction:column;gap:6px}
  .knop{display:block;text-align:center;margin:8px 0}
  .hero p{margin-bottom:20px}
  table.gegevens th{width:auto;display:block;border-bottom:0;padding-bottom:2px}
  table.gegevens td{display:block;padding-top:2px}
  section{padding:44px 0}
  .kaart img{height:180px}
}