/* ============================================================
   VZW De Waerde — hoofdstylesheet
   Buurtwerking Zonhoven
   ============================================================ */

:root{
  --green-dark:  #2d4a1f;
  --green:       #3d5e2a;
  --green-mid:   #7ba040;
  --green-light: #a8c870;
  --yellow:      #f4e87c;
  --yellow-deep: #e8d960;
  --orange:      #e8743a;
  --orange-dark: #d65a26;
  --cream:       #fdfcf5;
  --soft:        #f5f1e0;
  --text:        #2a3a1d;
  --muted:       #5a6a4d;
  --shadow-sm:   0 2px 10px rgba(45,74,31,.06);
  --shadow-md:   0 4px 16px rgba(45,74,31,.09);
  --shadow-lg:   0 10px 28px rgba(45,74,31,.15);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:'Open Sans','Segoe UI',system-ui,sans-serif;
  line-height:1.65;
  font-size:16px;
}

h1,h2,h3,h4{
  font-family:'Merriweather',Georgia,serif;
  color:var(--green-dark);
  line-height:1.25;
}

a{ color:var(--green); text-decoration:none; transition:color .2s ease; }
a:hover{ color:var(--orange); }

img{ max-width:100%; height:auto; }

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

.wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }

.skip-link{
  position:absolute; left:-9999px;
  background:var(--green-dark); color:var(--yellow);
  padding:10px 18px; border-radius:0 0 8px 0; z-index:1000;
}
.skip-link:focus{ left:0; top:0; }

/* ---------- HEADER ---------- */
.site-header{
  background:var(--cream);
  border-bottom:3px solid var(--green);
  box-shadow:0 2px 10px rgba(45,74,31,.07);
  position:sticky; top:0; z-index:600;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:10px 20px; max-width:1180px; margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:13px; }
.brand img{ height:64px; width:auto; }
.brand-text{ font-family:'Merriweather',Georgia,serif; font-weight:700;
  color:var(--green-dark); font-size:1.02rem; line-height:1.2; }
.brand-text small{ display:block; font-family:'Open Sans',sans-serif;
  font-weight:400; font-size:.76rem; color:var(--muted); letter-spacing:.3px; }

.nav-toggle{
  display:none; background:none; border:2px solid var(--green);
  color:var(--green-dark); border-radius:8px; padding:7px 12px;
  font-size:1.1rem; cursor:pointer;
}

.site-nav{ display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.site-nav a{
  color:var(--green-dark); font-weight:600; font-size:.87rem;
  text-transform:uppercase; letter-spacing:.6px;
  padding:9px 15px; border-radius:22px; transition:all .2s ease;
}
.site-nav a:hover{ background:rgba(123,160,64,.16); color:var(--orange); }
.site-nav a[aria-current="page"]{ background:var(--green); color:var(--yellow); }

/* ---------- HERO ---------- */
.hero{
  background:linear-gradient(135deg,var(--green-dark) 0%,var(--green) 60%,var(--green-mid) 100%);
  color:var(--cream);
  border-radius:16px;
  padding:30px;
  margin:30px 0;
  text-align:center;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 18% 20%, rgba(244,232,124,.15) 0%, transparent 42%),
    radial-gradient(circle at 82% 82%, rgba(232,116,58,.13) 0%, transparent 42%);
}
.hero > *{ position:relative; z-index:1; }
.hero h1{ color:var(--yellow); font-size:clamp(1.7rem,4vw,2.3rem);
  margin:0 0 10px; text-shadow:0 2px 6px rgba(0,0,0,.28); }
.hero p{ margin:0 auto; max-width:720px; font-size:clamp(1rem,2vw,1.13rem); opacity:.96; }
.hero-logo{ max-width:150px; margin:10px auto; display:block;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.35)); }

.badge-year{
  display:inline-block; background:var(--yellow); color:var(--green-dark);
  font-weight:700; padding:6px 20px; border-radius:30px;
  border:2px solid var(--green-dark); letter-spacing:1px; font-size:.9rem;
}

/* ---------- SECTIES ---------- */
.section-title{ text-align:center; font-size:clamp(1.4rem,3vw,1.85rem); margin:44px 0 6px; }
.section-sub{ text-align:center; color:var(--muted); margin:0 0 26px; font-size:1.03rem; }

.lead{ font-size:1.05rem; }

/* ---------- KAARTEN ---------- */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px; margin:30px 0;
}
.card{
  background:#fff; border-radius:14px; padding:28px 24px; text-align:center;
  box-shadow:var(--shadow-md); border-top:5px solid var(--green-mid);
  transition:transform .28s ease, box-shadow .28s ease;
}
.card:nth-child(2){ border-top-color:var(--orange); }
.card:nth-child(3){ border-top-color:var(--yellow-deep); }
.card:nth-child(4){ border-top-color:var(--green-light); }
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.card .icon{ font-size:2.3rem; line-height:1; margin-bottom:12px; }
.card h3{ margin:0 0 10px; font-size:1.2rem; }
.card p{ margin:0; color:var(--muted); font-size:.97rem; }

/* Zaalkaarten met foto */
.rooms{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px; margin:28px 0;
}
.room{
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow-md); border-top:5px solid var(--green-mid);
  display:flex; flex-direction:column;
}
.room:nth-child(2){ border-top-color:var(--orange); }
.room:nth-child(3){ border-top-color:var(--yellow-deep); }
.room-body{ padding:24px; flex:1; }
.room h3{ margin:0 0 10px; font-size:1.28rem; }
.room p{ margin:0 0 14px; color:var(--muted); }
.room ul{ margin:0; padding-left:20px; color:var(--text); font-size:.95rem; }
.room li{ margin-bottom:5px; }
.room .capacity{
  display:inline-block; background:var(--soft); color:var(--green-dark);
  font-weight:600; font-size:.85rem; padding:4px 14px; border-radius:20px;
  margin-bottom:12px;
}

/* Foto-kaart (voetbalvelden) */
.field{
  background:#fff; border-radius:14px; overflow:hidden; text-align:center;
  box-shadow:var(--shadow-md); border-top:5px solid var(--green-mid);
  padding-bottom:24px;
}
.field:nth-child(2){ border-top-color:var(--orange); }
.field-photo{
  height:230px; background-size:cover; background-position:center;
  border-bottom:1px solid rgba(123,160,64,.2);
}
.field h3{ margin:20px 0 10px; font-size:1.28rem; }
.field p{ margin:0; padding:0 24px; color:var(--muted); }

/* ---------- INFOBLOKKEN ---------- */
.panel{
  background:var(--soft); border-left:4px solid var(--green-mid);
  border-radius:8px; padding:24px 28px; margin:26px 0;
}
.panel.accent{ background:#fff8ee; border-left-color:var(--orange); }
.panel h3{ margin:0 0 14px; font-size:1.2rem; }
.panel.accent h3{ color:#c54e1c; }
.panel p:last-child{ margin-bottom:0; }
.panel ul{ margin:0; padding-left:20px; }
.panel li{ margin-bottom:6px; }

.checklist{ list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:8px 22px; }
.checklist li{ position:relative; padding-left:27px; }
.checklist li::before{
  content:'✓'; position:absolute; left:0; top:0;
  color:var(--green-mid); font-weight:700; font-size:1.15rem;
}

/* ---------- DOCUMENTEN ---------- */
.docs{ margin:26px 0; }
.doc{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:#fff; border:1px solid rgba(123,160,64,.22); border-radius:10px;
  padding:16px 20px; margin-bottom:10px; flex-wrap:wrap;
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.doc:hover{ border-color:var(--green-mid); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.doc-info{ flex:1 1 260px; min-width:0; }
.doc-title{ display:block; color:var(--green-dark); font-weight:600; margin-bottom:2px; }
.doc-meta{ display:block; color:var(--muted); font-size:.85rem; }

/* ---------- KNOPPEN ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  background:var(--orange); color:#fff !important; border:2px solid var(--orange);
  padding:11px 28px; border-radius:30px; font-weight:600;
  transition:all .22s ease; white-space:nowrap;
}
.btn:hover{ background:var(--orange-dark); border-color:var(--orange-dark);
  color:#fff !important; transform:translateY(-2px); box-shadow:0 6px 14px rgba(232,116,58,.35); }
.btn-outline{ background:transparent; border-color:var(--green-dark); color:var(--green-dark) !important; }
.btn-outline:hover{ background:var(--green-dark); border-color:var(--green-dark); color:var(--yellow) !important; }
.btn-light{ background:transparent; border-color:var(--yellow); color:var(--yellow) !important; }
.btn-light:hover{ background:var(--yellow); color:var(--green-dark) !important; border-color:var(--yellow); }

.btn-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:6px; }

/* ---------- CTA ---------- */
.cta{
  background:linear-gradient(135deg,var(--green-dark) 0%,var(--green) 100%);
  color:var(--cream); border-radius:14px; padding:32px; text-align:center; margin:36px 0;
}
.cta h2,.cta h3{ color:var(--yellow); margin:0 0 10px; }
.cta p{ margin:0 auto 18px; max-width:640px; opacity:.95; }

/* ---------- VIDEO ---------- */
.video{
  max-width:760px; margin:34px auto; border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow-lg); aspect-ratio:16/9; background:#000;
}
.video iframe{ width:100%; height:100%; border:0; display:block; }

/* ---------- PARTNERS ---------- */
.partners-strip{ background:var(--soft); border-top:1px solid rgba(123,160,64,.25); padding:22px 0; }
.partners{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:26px 50px; max-width:1180px; margin:0 auto; padding:0 20px;
}
.partners a{ display:inline-flex; align-items:center; transition:transform .22s ease, opacity .22s ease; }
.partners a:hover{ transform:translateY(-3px); opacity:.82; }
.partners img{ height:82px; width:auto; object-fit:contain; }
.partners-label{
  width:100%; text-align:center; color:var(--muted);
  font-size:.8rem; text-transform:uppercase; letter-spacing:1.4px; margin-bottom:2px;
}

/* ---------- FOOTER ---------- */
.site-footer{ background:var(--green-dark); color:var(--cream); padding:40px 0 22px; }
.footer-grid{
  max-width:1180px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:32px 40px;
}
.footer-col h3{
  color:var(--yellow); font-size:1.05rem; margin:0 0 14px;
  padding-bottom:8px; border-bottom:2px solid var(--orange); display:inline-block;
}
.footer-col p,.footer-col li{ font-size:.93rem; line-height:1.62; margin:0 0 7px; }
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col a{ color:var(--yellow); }
.footer-col a:hover{ color:#f29862; text-decoration:underline; }
.footer-icon{ display:inline-block; width:20px; margin-right:5px; opacity:.85; }

.footer-contact strong{ color:var(--yellow); display:block; margin-top:10px; }
.footer-contact strong:first-of-type{ margin-top:0; }

.map-embed{
  border-radius:10px; overflow:hidden; border:2px solid rgba(244,232,124,.25);
  height:190px; background:rgba(255,255,255,.06);
}
.map-embed iframe{ width:100%; height:100%; border:0; display:block; filter:saturate(.9); }

.footer-social{ display:flex; gap:10px; margin-top:12px; }
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; background:rgba(244,232,124,.12); border-radius:50%;
  transition:all .22s ease;
}
.footer-social a:hover{ background:var(--orange); transform:translateY(-2px); }
.footer-social svg{ width:18px; height:18px; fill:var(--yellow); }
.footer-social a:hover svg{ fill:#fff; }

.footer-bottom{
  max-width:1180px; margin:30px auto 0; padding:18px 20px 0;
  border-top:1px solid rgba(244,232,124,.18);
  text-align:center; font-size:.85rem; color:rgba(253,252,245,.75);
}
.footer-bottom strong{ color:var(--yellow); font-weight:600; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .nav-toggle{ display:block; }
  .site-nav{
    display:none; width:100%; flex-direction:column; align-items:stretch;
    gap:2px; padding:10px 0 4px;
  }
  .site-nav.open{ display:flex; }
  .site-nav a{ text-align:center; }
  .header-inner{ flex-wrap:wrap; }
}
@media (max-width:600px){
  .hero{ padding:24px 18px; }
  .brand img{ height:52px; }
  .brand-text{ font-size:.92rem; }
  .partners img{ height:64px; }
  .doc{ flex-direction:column; align-items:stretch; }
  .doc .btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}