:root{
  --green:#123d25;
  --light-green:#e9f4ee;
  --gold:#c9a23f;
  --white:#ffffff;
}

a {
  color: var(--gold);
  text-decoration: underline;
  font-weight: 500;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:var(--light-green);
  color:#222;
}

header{
  background:var(--green);
  position:sticky;
  top:0;
  z-index:1000;
  border-bottom:4px solid var(--gold);
}

.header-logo{
  text-align:center;
  padding:1rem 0;
}

.header-logo img{
  max-height:90px;
}

nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  justify-content:center;
  gap:0;
  border-top:1px solid rgba(255,255,255,0.2);
}

.menu-toggle{
  display:none;
  font-size:1.8rem;
  color:white;
  text-align:right;
  padding:0.8rem 1rem;
  cursor:pointer;
}

nav a{
  display:block;
  padding:1rem 1.4rem;
  text-align:center;
  color:white;
  text-decoration:none;
  font-weight:600;
  border-right:1px solid rgba(255,255,255,0.2);
  position:relative;
}

nav a:hover{
  background:rgba(255,255,255,0.08);
}

nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0%;
  height:4px;
  background:var(--gold);
  transition:width 0.3s ease;
}

nav a:hover::after{
  width:100%;
}

section{
  padding:2.5rem 1rem;
  max-width:900px;
  margin:auto;
  scroll-margin-top: 140px;
}

section h2{
  color:var(--green);
  border-left:6px solid var(--gold);
  padding-left:0.5rem;
}

.card{
  background:white;
  padding:1rem;
  margin-bottom:1.5rem;
  border-radius:10px;
  border:1px solid #ddd;
}

.card img{
  width:100%;
  margin-bottom:1rem;
  border-radius:8px;
}

footer{
  background:var(--green);
  color:white;
  text-align:center;
  padding:1.5rem;
  border-top:4px solid var(--gold);
}

footer a{
  color:var(--gold);
  text-decoration:underline;
}

/* ===== MOBILE ===== */
@media (max-width: 768px){

  header{
    position: static !important;
    top: auto !important;
  }

  .menu-toggle{
    display:block;
  }

  nav ul{
    display:none;
    flex-direction:column;
    background:var(--green);
  }

  nav ul.show{
    display:flex;
  }

  nav a{
    border-top:1px solid rgba(255,255,255,0.2);
    border-right:none;
    text-align:left;
    padding:1rem;
  }
}

.documenten-lijst {
  list-style: none;
  padding: 0;
}

.documenten-lijst li {
  margin-bottom: 10px;
}

.documenten-lijst a {
  color: var(--gold);
  text-decoration: underline;
  font-weight: 500;
}

.documenten-lijst a:hover {
  opacity: 0.8;
}

/* Specifieke styling voor kleine sociale iconen */
img.social-icon {
  width: 50px !important;
  height: auto !important;
  vertical-align: middle;
  margin-right: 8px;
}

/* voorkom dat .card img de social icon overschrijft */
.card img.social-icon {
  width: 50px !important;
  max-width: none !important;
}