
:root{

  --maxw: 1100px;

  --pad: 16px;

  --text: #111;

  --muted:#666;

  --line:#e6e6e6;

}



*{ box-sizing:border-box; }.wm-container{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }



.wm-topbar{

  border-bottom:1px solid var(--line);

  font-size:14px;

  background:#fff;

}

.wm-topbar-inner{

  display:flex;

  gap:14px;

  justify-content:space-between;

  align-items:center;

  padding:8px 0;

  flex-wrap:wrap;

}

.wm-topbar a{ color:var(--text); text-decoration:none; }

.wm-topbar a:hover{ text-decoration:underline; }

.wm-topbar .muted{ color:var(--muted); }



.wm-header{ background:#fff; border-bottom:1px solid var(--line); }

.wm-header-inner{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:16px;

  padding:12px 0;

  flex-wrap:wrap;

}



.wm-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }

.wm-brand img{ height:44px; width:auto; display:block; }



.wm-nav{ display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }

.wm-nav a{

  text-decoration:none;

  color:var(--text);

  padding:8px 10px;

  border-radius:10px;

  border:1px solid transparent;

}

.wm-nav a:hover{ border-color:var(--line); }

.wm-nav a.active{ border-color:var(--text); }



.wm-footer{ border-top:1px solid var(--line); margin-top:40px; padding:22px 0; background:#fff; }

.wm-footer-grid{ display:grid; grid-template-columns: 1.2fr 1fr; gap:20px; }

.wm-footer-brand{ display:flex; align-items:flex-start; gap:12px; }

.wm-footer-brand img{ height:40px; width:auto; display:block; }

.small{ color:var(--muted); font-size:14px; line-height:1.5; }



@media (max-width:820px){

  .wm-topbar-inner{ justify-content:flex-start; }

  .wm-header-inner{ justify-content:flex-start; }

  .wm-nav{ justify-content:flex-start; }

  .wm-footer-grid{ grid-template-columns: 1fr; }

}




/* Footer terug naar donker/antraciet (zoals oorspronkelijke look) */

.wm-footer{

  background: #111;

  border-top: 0;

}

.wm-footer .small,

.wm-footer strong{

  color: #fff;

}

.wm-footer .small{

  opacity: 0.85;

}

.wm-footer a{

  color: #fff;

}







/* WM_ANTHRACITE: eigen kleuren (geen Tailwind) */

.bg-anthracite { background: #1f2937 !important; }

.text-white { color: #ffffff !important; }



/* kleine leesbaarheid-boost in donkere footer */

.bg-anthracite p,

.bg-anthracite li,

.bg-anthracite span { color: rgba(255,255,255,0.85); }

.bg-anthracite a { color: #ffffff; }

.bg-anthracite a:hover { text-decoration: underline; }




/* WM_TOPBAR_COLOR: eigen CSS (geen Tailwind) */

.wm-topbar{

  background: #1f2937;

  border-bottom: 1px solid rgba(255,255,255,0.10);

}

.wm-topbar .muted{ color: rgba(255,255,255,0.85); }

.wm-topbar a{ color:#ffffff; }

.wm-topbar a:hover{ text-decoration: underline; }

body{margin:0}
