/* Simple, responsive CSS for the template */
:root{--green:#a7d37c;--green-dark:#14532d;--muted:#666}
*{box-sizing:border-box}
body {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  margin: 0;
  color: #222;
  background: #14532d;
}

/* Ensure hidden elements never render space */
[hidden] { display: none !important; }
/* Unified button typography */
button,
.btn,
.gf-btn,
.whatsapp-button,
.email-button,
.contactform-button,
.reply-toolbar button,
.pdf-popover .btn-open,
.lightbox-nav-btn,
.lightbox-close {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: .01em;
}
.container{max-width:1100px;margin:0 auto;padding:1rem}
/* Make objectives page container wider on large screens */
.objectives-page .site-main-bg .container{max-width:1320px}
/* Allow hero text to use wider width on objectives page */
.objectives-page .hero-text{max-width:1280px}
.site-header {
  background-color: #14532d; /* fallback */
  background-image: linear-gradient(90deg, #14532d 0%, #79a53a 100%);
  color: #fff;
  /* vervang rechte onderrand door golf */
  border-bottom: none;
  position: relative;
  z-index: 10; /* header boven content eronder */
}

/* Golvende scheiding onder de header op alle pagina's */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px; /* klein overlapje om naden te voorkomen */
  height: 80px; /* hoogte van de golf */
  pointer-events: none;
  z-index: 1; /* golf boven de main, maar onder de header-content */
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.18)); /* subtiele schaduw onder de golf */
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 100%;
  /* Inline SVG golf met dezelfde gradient als de header */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' stop-color='%2314532d'/><stop offset='100%' stop-color='%2379a53a'/></linearGradient></defs><path d='M0,24 C240,72 480,0 720,24 C960,48 1200,96 1440,72 L1440,120 L0,120 Z' fill='url(%23g)'/></svg>");
}

@media (max-width: 700px) {
  .site-header::after { height: 56px; }
}

/* Mobile dropdown layout */
@media (max-width: 760px) {
  .site-nav { flex-direction: column; gap: .4rem; }
  .site-nav .has-submenu .submenu { position: static; border-radius: 8px; margin: .2rem 0 .6rem; display: none; }
  .site-nav .has-submenu.open .submenu { display: block; }
}
/* Verwijderde .header-separator CSS (revert) */
.site-header a,
.site-header span {
  color: #fff;
}
.site-header .container{
  position: relative; /* zorg dat content boven de golf ligt */
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  padding-left: 0;
  justify-content: flex-start;
}
.header-flex {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  width: 100%;
}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit}
.brand {
  justify-content: flex-start;
  width: auto;
  margin-right: 2rem;
  margin-left: 0; /* voorkom afsnijden op mobiel */
}
.brand picture, .brand img { display:block; }
.brand img {
  margin: 0;
  width: 255px; /* 75% van eerdere 340px */
  height: auto;
  aspect-ratio: 685 / 181;
  max-width: 100%;
  opacity: 0.95;
  transition: opacity .25s ease, filter .25s ease;
}
.brand img:hover {
  opacity: 0.95; /* iets minder transparant bij hover */
  filter: brightness(1.05);
}
.site-nav{
  margin-left: 0;
  display:flex;
  gap:2rem;
  justify-content:flex-start;
  width:auto
}
.site-nav { position: relative; }
.site-nav .nav-item { position: relative; }
.site-nav .submenu-toggle { background: transparent; border: 0; color: #fff; font: inherit; padding: 0; margin: 0; cursor: pointer; font-size: 1.3rem; font-weight: bold; line-height: 1.3; display: inline-block; vertical-align: middle; }
.site-nav .submenu-toggle:hover { text-decoration: underline; }
.site-nav .has-submenu .submenu { position: absolute; top: 100%; left: 0; min-width: 220px; display: none; flex-direction: column; background: rgba(15,62,32,.5); border: 1px solid rgba(255,255,255,.15); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.25); overflow: hidden; z-index: 50; }
.site-nav .has-submenu .submenu a { color: #fff; padding: .7rem .9rem; display: block; text-decoration: none; }
.site-nav .has-submenu .submenu a + a { border-top: 1px solid rgba(255,255,255,.18); }
.site-nav .has-submenu .submenu a:hover { background: rgba(255,255,255,.08); }
.site-nav .has-submenu.open .submenu { display: flex; }
/* Hover open on desktop */
.site-nav .has-submenu:hover .submenu { display: flex; opacity: 1; transform: translateY(0); }
.site-nav .has-submenu .submenu { opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; }
.site-nav .has-submenu.open .submenu { opacity: 1; transform: translateY(0); }
.site-nav a {
  font-size: 1.3rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}
.site-nav a:hover {
  text-decoration: underline;
}
.site-nav a.active {
  position: relative;
  text-decoration: none;
}
.site-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg,#e8fbe0,#79a53a,#e8fbe0);
}
.nav-toggle{display:none}
.hero {
  position: relative;
  background-color: #f3fbe9;
  background-image: linear-gradient(180deg,rgba(80,104,26,.08),rgba(80,104,26,.02));
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding:4rem 0;
}
.hero.hero-compact { padding: 1.25rem 0; }
.hero h1{margin:0 0 .5rem}
.btn{
  background: var(--green);
  color: var(--green-dark);
  padding: .6rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid #94c56a;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  opacity: 0.8;
}
.btn:hover{ background:#b6dd90; opacity: 0.9; }
.whatsapp-button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #25D366; /* WhatsApp green */
  color: #fff;
  text-decoration: none;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.whatsapp-button:hover { background: #1DB954; }
.wa-icon { font-size: 1.1rem; }
.email-button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #14532d;
  color: #fff;
  text-decoration: none;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.email-button:hover { background: #79a53a; }
.contactform-button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #50681a;
  color: #fff;
  text-decoration: none;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.contactform-button:hover { background: #6a8b25; }

/* Contact form modal */
.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 3000;
}
.modal-card {
  background: #fff;
  color: #222;
  width: 100%;
  max-width: 560px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  overflow: hidden;
}
.modal-header { display:flex; align-items:center; justify-content:space-between; padding: 1rem 1.25rem; background:#f3fbe9; }
.modal-header h3 { margin: 0; color:#14532d; }
.modal-close { border:none; background:transparent; font-size:1.6rem; cursor:pointer; }
.modal-body { padding: 1rem 1.25rem 1.25rem; }
.form-row { margin-bottom: .9rem; }
.form-row label { display:block; font-weight:600; margin-bottom:.35rem; color:#14532d; }
.form-row input[type="text"],
.form-row input[type="email"],
.form-row textarea { width:100%; padding:.65rem .7rem; border:1px solid #cddac1; border-radius:6px; font:inherit; background:#f3fbe9; }
.form-row textarea { min-height: 140px; resize: vertical; }
.form-actions { display:flex; gap:.6rem; justify-content:flex-end; margin-top: .5rem; }
.btn-secondary { background:#eee; color:#222; border:1px solid #ddd; padding:.6rem 1rem; border-radius:6px; cursor:pointer; }
.btn-primary { background:#14532d; color:#fff; border:none; padding:.6rem 1rem; border-radius:6px; cursor:pointer; }
.btn-primary:hover { background:#79a53a; }
.error-text { color:#b00020; font-size:.9rem; margin:.25rem 0 0; }
.section{padding:2rem 0}
.cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card-title-with-action{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.card-title-with-action .btn{ margin-left:auto; }
.card{border:1px solid #e6e6e6;padding:1rem;border-radius:6px}
.site-footer{
  background-color:#14532d; /* fallback */
  background-image: linear-gradient(90deg, #14532d 0%, #79a53a 100%);
  color:#fff;
  padding:1rem 0;
  margin-top:2rem;
  text-align:center;
  position: relative;
  z-index: 10; /* stacking context voor golf erboven */
}
.site-footer p{color:#fff}
.site-main-bg {
  background: #e8fbe0;
  padding: 0;
  color: #14532d;
  position: relative; /* voor gradient-overlay onder de golf */
}
.hero-inner h1, .hero-inner h2, .hero-inner h3, .hero-inner p {
  color: #111 !important;
}
/* Golvende scheiding boven de footer */
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px; /* klein overlapje om naden te voorkomen */
  height: 80px;
  pointer-events: none;
  z-index: -1; /* achter footer-inhoud, maar door z-index van footer wel boven main */
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
  transform: scaleY(-1); /* spiegel de golf zodat hij naar boven wijst */
  /* Zelfde gradient als de header */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' stop-color='%2314532d'/><stop offset='100%' stop-color='%2379a53a'/></linearGradient></defs><path d='M0,24 C240,72 480,0 720,24 C960,48 1200,96 1440,72 L1440,120 L0,120 Z' fill='url(%23g)'/></svg>");
}
.hero-inner {
  text-align: center;
}
.hero-text {
  position: relative;
  z-index: 1;
  padding-bottom: 2rem;
  min-height: 320px;
}
/* Gallery: minder hoge hero zodat thumbnails hoger staan */
#gallery-hero .hero-text { min-height: 140px; padding-bottom: 1rem; }

/* Zachte overgang direct boven de hero, duidelijk zichtbaar onder de golf */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -36px; /* overlapt licht met de golf */
  height: 220px; /* lengte van fade */
  pointer-events: none;
  z-index: 0;
  /* Kleurverloop identiek aan header: links donker, rechts licht */
  background: linear-gradient(90deg, #14532d 0%, #79a53a 100%);
  /* Verticale uitfading via mask, zodat de kleur horizontaal meeloopt */
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0,0,0,0.98) 0%,
    rgba(0,0,0,0.88) 18%,
    rgba(0,0,0,0.60) 42%,
    rgba(0,0,0,0.28) 68%,
    rgba(0,0,0,0.10) 85%,
    rgba(0,0,0,0.00) 100%
  );
  mask-image: linear-gradient(
    180deg,
    rgba(0,0,0,0.98) 0%,
    rgba(0,0,0,0.88) 18%,
    rgba(0,0,0,0.60) 42%,
    rgba(0,0,0,0.28) 68%,
    rgba(0,0,0,0.10) 85%,
    rgba(0,0,0,0.00) 100%
  );
}

/* Zorg dat hero-inhoud boven de fade ligt */
.hero { position: relative; z-index: 1; }
.hero-text > * {
  position: relative;
  z-index: 1;
}
/* Boom als overlay boven de tekstbox, heel licht groen */
.hero::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -150px; /* iets hoger geplaatst */
  width: clamp(650px, 55vw, 1200px);
  height: clamp(650px, 55vw, 1200px);
  pointer-events: none;
  z-index: 2; /* boven tekst en quote */
  opacity: .10; /* heel licht zichtbaar */
  /* Gebruik het transparante PNG als masker met horizontale gradient links->rechts */
  background: linear-gradient(90deg, rgba(121,165,58,0.75) 0%, rgba(80,104,26,0.9) 100%);
  -webkit-mask-image: url('../images/index/lichtgroene_boom.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('../images/index/lichtgroene_boom.png');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
@media (max-width: 900px) {
  .hero::before { right: -60px; top: -100px; opacity: .08; width: 460px; height: 460px; }
}
@media (max-width: 600px) {
  .hero::before { right: -40px; top: -70px; width: 380px; height: 380px; opacity: .07; }
}
.hero-inner h1 {
  color: #14532d;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  letter-spacing: 0.02em;
}
.hero-inner h2 {
  color: #50681a;
  font-size: 1.7rem;
  font-weight: 600;
  margin: 1.5rem 0 1rem 0;
  letter-spacing: 0.01em;
}
.hero-inner h3 {
  color: #14532d;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 1.2rem 0 0.7rem 0;
}
.hero-inner p {
  color: #14532d;
  font-size: 1rem;
  margin: 0.7rem 0;
  line-height: 1.6;
}
/* Typografische verfijningen voor homepage content */
.hero-text { max-width: 960px; margin: 0 auto; }
.hero-text h1 { font-size: clamp(2.4rem,5vw,3.1rem); line-height: 1.15; }
.hero-text h2 { font-size: clamp(1.4rem,3.2vw,2rem); line-height: 1.3; }
.hero-text h3 { font-size: clamp(1.05rem,2.4vw,1.25rem); font-weight: 600; }
.hero-text p { font-size: clamp(0.95rem,1.4vw,1.05rem); }
.hero-text .lead { font-size: clamp(1.05rem,1.8vw,1.25rem); font-weight: 500; line-height: 1.55; }
.hero-text .quote { 
  font-size: clamp(1.05rem,1.9vw,1.3rem);
  line-height: 1.55;
  font-style: italic;
  position: relative;
  padding: 1.2rem 1.5rem 1.2rem 2.8rem;
  background: #f3fbe9;
  border-left: 6px solid #79a53a;
  margin: 1.4rem 0 1.6rem;
  border-radius: 4px;
}
.hero-text .quote::before {
  content: "“";
  position: absolute;
  left: 12px;
  top: 4px;
  font-size: 3rem;
  line-height: 1;
  color: #79a53a;
  font-family: Georgia, serif;
}
.hero-text .quote cite {
  display: block;
  margin-top: .8rem;
  font-size: .85em;
  font-style: normal;
  color: #50681a;
}
.hero-text .spacer { height: 1rem; }
/* Sponsor feature block */
.sponsor-feature {
  position: relative;
  z-index: 3; /* render above hero overlay tree */
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: #f3fbe9;
  border: 1px solid #d3e6c7;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  max-width: 720px;
}
.sponsor-logo {
  display: block;
  margin: 0; /* left align */
  width: 120px;
  max-width: 40vw;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.12));
}
.site-main-bg #sponsors-hero .sponsor-logo,
#sponsors-hero .sponsor-logo {
  margin: 0 0 1.1rem 0; /* add gentle vertical spacing between logos */
}
.sponsor-logo.lg { width: 188px; }
.sponsor-name {
  margin: 0;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 800;
  letter-spacing: .02em;
  color: #14532d;
}
@media (max-width: 560px) {
  .sponsor-feature { gap: .9rem; padding: .8rem 1rem; }
  .sponsor-logo { width: 110px; }
  .sponsor-logo.lg { width: 172px; }
  #sponsors-hero .sponsor-logo { margin-bottom: .95rem; }
}
/* Objectives grid layout */
.objectives-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 2.4rem;
  margin: 2.8rem auto 1.8rem;
  width: fit-content; /* clusterbreedte = kaartbreedtes + gaps */
  max-width: 100%;
  padding: 0; /* geen extra offset links/rechts */
}
.objective-card {
  flex: 0 1 380px; /* bredere kaarten */
  max-width: 400px;
}
@media (max-width: 1100px) {
  .objective-card { flex: 0 1 360px; }
}
@media (max-width: 980px) {
  .objective-card { flex: 0 1 340px; }
  .objectives-grid { gap: 2.2rem; }
}
@media (max-width: 860px) {
  .objective-card { flex: 0 1 320px; }
  .objectives-grid { gap: 2rem; }
}
@media (max-width: 640px) {
  .objective-card { flex: 0 1 300px; }
  .objectives-grid { max-width: 620px; }
}
@media (max-width: 520px) {
  .objective-card { flex: 0 1 100%; }
  .objectives-grid { gap: 1.4rem; }
}
/* Zorg dat hero-text op objectives pagina ruim genoeg is */
.objectives-page .hero-text { max-width: 1400px; }
.objective-card {
  background: #f3fbe9;
  border: 1px solid #d3e6c7;
  border-radius: 10px;
  padding: 1rem 1rem 1.1rem;
  box-shadow: 0 3px 12px rgba(0,0,0,0.12);
  position: relative;
  /* Allow popover to extend beyond card */
  overflow: visible;
  transition: box-shadow .25s, transform .25s;
  /* Ensure text is left-aligned inside cards (overrides hero center alignment) */
  text-align: left;
}
.objective-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(121,165,58,0.25), rgba(121,165,58,0.05) 60%);
  pointer-events: none;
  opacity: .35;
}
.objective-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  transform: translateY(-4px);
}
.objective-card h3 {
  margin: 0 0 .75rem;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  position: relative;
  z-index: 1;
}
.objective-card .obj-icon {
  font-size: 1.4rem;
  line-height: 1;
}
.objective-card .objective-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  position: relative;
  z-index: 1;
}
.objective-card .objective-list.summary { min-height: 3.2rem; }
.objective-card .objective-list li {
  font-size: .92rem;
  line-height: 1.4;
  padding-left: 1.2rem;
  position: relative;
}
.objective-card .objective-list li.more-indicator { color: #50681a; font-style: italic; }
.objective-card .objective-list li::before {
  content: "";
  width: .55rem;
  height: .55rem;
  background: linear-gradient(90deg,#14532d,#79a53a);
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: .5rem;
  box-shadow: 0 0 0 2px #f3fbe9;
}
/* Popover with full details */
.objective-card .objective-popover {
  /* Make details part of the card content */
  position: static;
  margin-top: .5rem;
  width: auto;
  background: transparent;
  color: inherit;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  /* collapsed by default */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .3s ease, opacity .2s ease;
}
.objective-card:hover .objective-popover,
.objective-card:focus-within .objective-popover,
.objective-card.obj-open .objective-popover {
  max-height: 1000px; /* enough room for list */
  opacity: 1;
}
/* When expanded, hide the short summary list */
.objective-card:hover .objective-list.summary,
.objective-card:focus-within .objective-list.summary,
.objective-card.obj-open .objective-list.summary {
  display: none;
}
@media (max-width: 600px) {
  .objective-card { padding: .95rem .9rem 1rem; }
  .objective-card h3 { font-size: 1rem; }
  .objective-card .objective-list li { font-size: .85rem; }
}
/* Ensure 4 columns on wide screens to fit side-by-side */
@media (min-width: 1200px) {
  .objectives-page .objectives-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media(max-width:700px){.site-nav{display:none}.nav-toggle{display:block;margin-left:auto}}
/* Gallery grid */
.gallery-grid {
  display: grid;
  /* Maximaal 5 kolommen, thumbnails 160px breed, grid centreren */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-top: 1rem; /* dichter onder de kop */
  max-width: calc(160px * 5 + 1rem * 4); /* 5 kolommen + tussenruimtes */
  margin-left: auto;
  margin-right: auto;
}
.gallery-filters {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.gf-btn {
  background: #14532d;
  color: #fff;
  border: 1px solid #79a53a;
  padding: .45rem .9rem;
  border-radius: 22px;
  font: inherit;
  cursor: pointer;
  font-size: .85rem;
  letter-spacing: .02em;
  transition: background .2s, box-shadow .2s;
}
.gf-btn:hover { background:#1b6d39; }
.gf-btn.active {
  background: #79a53a;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
}
.gf-btn:focus { outline: 2px solid #e8fbe0; outline-offset: 2px; }
.gallery-grid figure.hidden { display: none !important; }
.gallery-grid figure {
  margin: 0;
  position: relative;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
  background: #f3fbe9;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform .2s, box-shadow .2s;
}
.gallery-grid figure:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.gallery-grid figure.video-thumb::after {
  content: "▶";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.8rem;
  line-height: 1;
  color: #fff;
  text-shadow: 0 3px 10px rgba(0,0,0,0.5);
  pointer-events: none;
}
.gallery-grid figure.video-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
}
.gallery-grid img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  transition: filter .35s ease, transform .35s ease;
}
.gallery-grid img.lqip { filter: blur(12px); transform: scale(1.03); }
.gallery-grid figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
  color: #fff;
  font-size: .75rem;
  padding: .35rem .5rem .4rem;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
/* Lightbox overlay */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  z-index: 2000;
}
.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  background: #fff;
  touch-action: none;
}
.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(20,83,45,0.85);
  color: #fff;
  border: none;
  width: 54px;
  height: 54px;
  font-size: 2.2rem;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: background .2s, transform .2s;
  z-index: 3;
}
.lightbox-nav-btn:hover { background: rgba(121,165,58,0.9); transform: translateY(-50%) scale(1.06); }
.lightbox-nav-btn.prev { left: 1.2rem; }
.lightbox-nav-btn.next { right: 1.2rem; }
.lightbox-nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: #14532d;
  color: #fff;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.lightbox-close:hover { background: #79a53a; }
@media (max-width: 900px) {
  .site-header .container {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    justify-content: flex-start;
  }
  .brand {
    margin-right: 1.2rem;
    margin-bottom: 0;
  }
  .site-nav {
    margin-left: 0;
    gap: 1.2rem;
    width: auto;
    justify-content: flex-start;
  }
  /* Verklein het logo niet meer op kleinere schermen */
  .brand img { width: 225px; }
}
@media (max-width: 600px) {
  .site-header .container {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  .brand img { width: 120px; }
  .site-nav {
    flex-wrap: wrap;
    gap: 0.8rem;
    font-size: 1rem;
    justify-content: center;
  }
}
@media (max-width: 700px) {
  .site-header .container {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-start;
    position: relative;
    padding-left: 1rem; /* houd ruimte links zodat logo niet tegen de rand valt */
  }
  .brand {
    margin-bottom: 0;
  }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #14532d;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 2rem;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  }
  .site-nav.open {
    display: flex;
  }
  .nav-toggle {
    display: block;
    margin-left: auto;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    z-index: 110;
  }
  .site-header.menu-open .brand {
    display: none !important;
  }
}
/* Toon logo niet als menu open is op mobiel */
@media (max-width: 700px) {
  .site-header.menu-open .brand {
    display: none;
  }
}

/* SDG goals block on homepage */
.sdg-goals{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin:1rem 0 0.5rem}
.sdg-goal{display:flex;flex-direction:column;align-items:center;text-decoration:none;background:#f3fbe9;border:1px solid #d3e6c7;border-radius:8px;padding:.75rem .9rem;width:140px;box-shadow:0 2px 8px rgba(0,0,0,.08);transition:box-shadow .25s,transform .25s}
.sdg-goal:hover{box-shadow:0 6px 18px rgba(0,0,0,.18);transform:translateY(-4px)}
.sdg-goal img{display:block;width:96px;height:auto}
.sdg-goal span{font-size:.75rem;font-weight:600;color:#14532d;text-align:center;margin-top:.5rem;line-height:1.2}

/* PDF hover popover (desktop) */
.pdf-popover{position:absolute;z-index:40;background:#fff;color:#222;border:1px solid #d3e6c7;border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.25);width:380px;max-width:92vw;height:480px;display:none;overflow:hidden;pointer-events:auto}
.pdf-popover embed{width:100%;height:420px;border:0}
.pdf-popover .actions{display:flex;justify-content:space-between;align-items:center;padding:.5rem .6rem;background:#f7fbf2;border-top:1px solid #e0edd4}
.pdf-popover .btn-open{background:#14532d;color:#fff;border:none;border-radius:6px;padding:.45rem .75rem;font-weight:600;cursor:pointer}
.pdf-popover .btn-open:hover{background:#79a53a}
.sdg-goal{position:relative}
.sdg-goal:focus-within .pdf-popover{display:block}
.sdg-goal:hover .pdf-popover{display:block}

/* Mobile modal for PDF */
.pdf-modal[hidden]{display:none}
.pdf-modal{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:4000;display:flex;align-items:center;justify-content:center;padding:1rem}
.pdf-modal .card{background:#fff;color:#222;width:95vw;max-width:720px;height:80vh;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.4);position:relative;overflow:hidden}
.pdf-modal .close{position:absolute;top:.6rem;right:.6rem;background:#14532d;color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:1.4rem;cursor:pointer}
.pdf-modal iframe,.pdf-modal embed{width:100%;height:100%;border:0}


/* Zorg dat op de kleinste schermen de breedte wordt afgedwongen */
@media (max-width: 600px) {
  .brand { margin-left: 0 !important; }
}

/* Forum tweaks */
#authbox{ margin: 0 0 8px 0; }
#authbox .auth-user{ color:#111 }
#thread-view{ max-height: 520px; overflow: auto; }
#thread-posts{ max-width: 760px; margin: 0 auto; }
.thread-layout{ display:flex; flex-direction:column; gap:.6rem; }
.thread-header{ position: sticky; top: 0; background: #f3fbe9; padding-bottom:.25rem; z-index: 2; }
.thread-reply{ position: sticky; top: 54px; background:#f3fbe9; z-index: 2; padding-bottom:.35rem; }
.reply-form-inline{ margin:0; }
.reply-input-row{ display:flex; align-items:flex-start; gap:.5rem; }
.reply-input-row textarea{ flex:1; min-height: 80px; }
.reply-send-btn{ align-self:flex-start; }
.thread-posts-wrap{ flex:1 1 auto; min-height: 220px; }
.thread-posts-wrap #thread-posts{ max-height: 100%; overflow: auto; padding-top:.25rem; }
.sr-only{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
#thread-posts .post{ padding:.75rem 0; border-top:1px solid #dfead3; display:grid; grid-template-columns:160px 1fr; gap:.9rem; align-items:start; }
#thread-posts .post:first-child{ border-top:none; }
#thread-posts .post .meta{ color:#50681a; font-size:.85rem; font-weight:600; display:flex; flex-direction:column; gap:.25rem; padding-top:.2rem; }
#thread-posts .post .meta .author{ font-weight:700; }
#thread-posts .post .meta .date{ opacity:.8; font-style:italic; }
#thread-posts .post .body{ line-height: 1.6; font-size: 1rem; }
.thread-body-html p{ margin:.5rem 0; }
.thread-body-html code{ background:#f7fbf2; padding:.05rem .3rem; border-radius:4px; }
.thread-body-html pre{ background:#f7fbf2; padding:.6rem .8rem; border-radius:6px; overflow:auto; }
.thread-body-html a{ color:#14532d; }
.thread-body-html blockquote{ border-left:4px solid #79a53a; background:#f3fbe9; padding:.4rem .6rem; margin:.6rem 0; }
#new-thread{ margin-top: 12px; }
#thread-form textarea{ min-height: 160px; }
#reply-body{ background:#f3fbe9; }
textarea:disabled, input[type="text"]:disabled{ background:#ecf6e6 !important; color:#666; }
.reply-toolbar{ display:flex; gap:.4rem; align-items:center; margin:.4rem 0; }
.reply-toolbar button{ background:#eee; color:#222; border:1px solid #ddd; padding:.3rem .5rem; border-radius:4px; cursor:pointer; }
.reply-toolbar button:hover{ background:#e6e6e6; }