:root {
  --accent: #4a6c6f;
  --accent-2: #7f9b9d;
  --warm: #d98a28;
  --bg: #fbfbfa;
  --card: #ffffff;
  --muted: #6b6b6b;
  --radius: 12px;
  --maxw: 1100px;
  --ff-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-serif: "Merriweather", Georgia, serif;
    /* extra kleuren voor navigatie */
  --nav-bg: var(--accent);      /* achtergrond van bovenste menu */
  --nav-bg-hover: var(--accent-2);
  --text-light: #ffffff;        /* tekst op donkere achtergrond */
}

* { box-sizing: border-box; }
body {
  font-family: var(--ff-sans);
  background: var(--bg);
  color: #222;
  margin: 0;
}
a { color: var(--accent); text-decoration: none; }

header.hero {
  position: relative;
  min-height: 320px;
  background-image: url('https://vzw.jan-van-ruusbroec.4god.be/Afbeeldingen/RuusbroecBank-Geheel.jpg');
  
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}
header.hero .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30,45,47,0.45), rgba(30,45,47,0.55));
}
header.hero .inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 3rem 1rem;
  color: #fff;
  text-align: center;
}
header h1 {
  font-family: var(--ff-serif);
  font-size: 2.2rem;
  margin: 0 0 .25rem;
}
header p.lead { margin: 0; font-size: 1rem; opacity: .95; }

nav.topnav {
  background: var(--accent);
  display: flex;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 99;
}
nav.topnav .wrap {
  max-width: var(--maxw);
  width: 100%;
  display: flex;
  gap: 8px;
  padding: .4rem;
}
nav.topnav a {
  color: #fff;
  text-decoration: none;
  padding: .6rem 1rem;
  border-radius: 8px;
  font-weight: 600;
}
html { scroll-behavior: smooth; }

main {
  max-width: var(--maxw);
  margin: 2rem auto;
  padding: 0 1rem;
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(20,30,30,0.06);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
h2 { color: var(--accent); margin-top: 0; }

.grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 1.5rem;
}
.grid .aside { position: sticky; top: 1rem; height: max-content; }

.media {
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}
.media img { display: block; width: 100%; height: auto; }

.activities ul { padding-left: 1.15rem; }

.cta {
  display: inline-block;
  background: var(--warm);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
}

footer {
  background: linear-gradient(180deg,var(--accent-2),var(--accent));
  color: #fff;
  padding: 1.25rem;
  margin-top: 2rem;
  text-align: center;
}

/* Lightbox */
.lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.8); justify-content:center; align-items:center; z-index:1000; }
.lightbox img { max-width:90%; max-height:90%; border-radius:10px; }
.lightbox:target { display:flex; }

/* Contact form */
form label { display:block; margin-top:.6rem; }
form input, form textarea {
  width:100%; padding:.5rem; border:1px solid #ccc;
  border-radius:6px; margin-top:.25rem;
}
form button {
  margin-top:.8rem; background:var(--accent); color:#fff;
  border:none; padding:.6rem 1rem; border-radius:6px;
  font-weight:600; cursor:pointer;
}
form button:hover { background:var(--accent-2); }

/* Calendar */
.calendar-nav { display:flex; justify-content:space-between; align-items:center; margin-bottom:.6rem; }
.calendar-nav button {
  background:var(--accent); color:#fff; border:none;
  padding:.4rem .8rem; border-radius:6px; cursor:pointer; font-weight:600;
}
.calendar-nav button:hover { background:var(--accent-2); }
.calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem; text-align:center; }
.calendar div { padding:.6rem; border-radius:6px; background:#f0f4f4; cursor:pointer; }
.calendar div.header { background:var(--accent); color:#fff; font-weight:bold; cursor:default; }
.calendar div.today { background:var(--warm); color:#fff; }
.calendar div.event { background:#bcd4d6; font-weight:bold; }

/* Card met afbeelding (optioneel) */
.card:has(.card-image) {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.card-text { flex: 1; }
.card-image img {
  max-width: 300px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Responsief */
@media (max-width:900px){
  .grid { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  .card:has(.card-image) {
    flex-direction: column;
    text-align: center;
  }
  .card-image img { max-width: 100%; }
}

/* Bijgevoegd voor hover-elementen en meer/minder tekst *//* ===== Dropdown menu ===== */
/* ===== Dropdown menu ===== */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown .dropbtn {
  display: inline-block;
  padding: 10px 16px;
  color: var(--text-light);
  background-color: var(--nav-bg);
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--nav-bg);
  min-width: 180px;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  z-index: 20;
}

.dropdown-content a {
  display: block;
  padding: 10px 14px;
  color: var(--text-light);
  text-decoration: none;
  transition: background 0.2s ease;
}

.dropdown-content a:hover {
  background-color: var(--nav-bg-hover);
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media (max-width: 700px) {
  .dropdown-content {
    position: static;
    box-shadow: none;
    background-color: var(--nav-bg);
  }
}


/* --- Lees meer / minder --- */
.hidden { display: none; }
.toggle {
  color: var(--accent, #0077cc);
  cursor: pointer;
  text-decoration: underline;
}
.toggle:hover { text-decoration: none; }

/* --- Responsief menu --- */
@media (max-width: 700px) {
  .dropdown-content { position: static; box-shadow: none; }
}

/* --- Nieuwe stabiele versie: Lees meer / minder --- */
.lm-short, .lm-full { display: block; }
.lm-hidden { display: none !important; }
.lm-toggle {
  display: inline-block;
  margin-top: 0.6rem;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}
.lm-toggle:hover { text-decoration: none; }