/* Vrouwveiliger – pagina Voor gemeenten */
body:has(.municipalities-hero) .site-header { position:relative; top:auto; color:#fff; background:var(--vv-blue-dark); backdrop-filter:none; }
body:has(.municipalities-hero) .site-logo img { width:280px; }
.municipalities-hero { padding:84px 0; background:#f2f5f8; }
.municipalities-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.9fr); gap:56px; align-items:start; }
.municipalities-hero h1,.municipalities-grid h2 { margin-bottom:24px; font-size:clamp(36px,3.2vw,48px); line-height:1.12; color:var(--vv-blue-dark); }
.municipalities-intro { max-width:760px; margin-bottom:28px; font-size:20px; line-height:1.55; }
.municipalities-photo { display:block; width:100%; height:auto; object-fit:contain; border-radius:12px; }
.municipalities-list { display:grid; gap:16px; padding:0; margin:28px 0 0; list-style:none; }
.municipalities-list li { position:relative; padding-left:30px; }
.municipalities-list li::before { position:absolute; left:0; top:.15em; content:'✓'; color:var(--vv-orange); font-weight:700; }
.municipalities-light { background:var(--vv-light); }
.municipalities-steps { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:32px; counter-reset:municipal-step; }
.municipalities-step { position:relative; min-height:180px; padding:28px 24px 24px 72px; border:1px solid var(--vv-border); border-radius:12px; background:#fff; counter-increment:municipal-step; }
.municipalities-step::before { position:absolute; left:24px; top:26px; display:grid; width:34px; height:34px; place-items:center; border-radius:50%; color:#fff; background:var(--vv-blue); content:counter(municipal-step); font-weight:700; }
.municipalities-step h3 { margin-bottom:10px; font-size:21px; }
.municipalities-wide-copy { max-width:860px; }
.municipalities-output-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:34px 0 24px; }
.municipalities-output-grid article { padding:24px; border:1px solid var(--vv-border); border-radius:10px; background:#fff; }
.municipalities-output-grid h3 { margin-bottom:8px; font-size:20px; }
.municipalities-output-grid p { margin:0; color:var(--vv-muted); }
.municipalities-results-image { display:block; width:108%; height:auto; max-width:1220px; margin:-10px auto -18px; transform:translateX(-4%); object-fit:contain; }
.municipalities-method-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(420px,1.2fr); gap:64px; align-items:center; }
.municipalities-method-grid h2,.municipalities-privacy h2 { margin-bottom:24px; }
.municipalities-method-grid p { margin-bottom:28px; }
.municipalities-method-image { display:block; width:100%; height:auto; object-fit:contain; }
.municipalities-privacy .privacy-grid { margin-top:0; }
.municipalities-cta { padding:48px 0; color:#fff; background:var(--vv-orange); }
.municipalities-cta__inner { display:flex; align-items:center; justify-content:space-between; gap:36px; }
.municipalities-cta h2 { max-width:760px; margin:0; }
.municipalities-cta__actions { display:flex; gap:14px; flex:0 0 auto; }
.button--outline-light { border:2px solid #fff; color:#fff; background:transparent; }
.button--outline-light:hover { color:var(--vv-orange); background:#fff; }
@media(max-width:980px){.municipalities-grid,.municipalities-method-grid{grid-template-columns:1fr}.municipalities-output-grid{grid-template-columns:repeat(2,1fr)}.municipalities-cta__inner{align-items:flex-start;flex-direction:column}}
@media(max-width:767px){body:has(.municipalities-hero) .site-logo img{width:190px}.municipalities-hero{padding:58px 0}.municipalities-hero h1,.municipalities-grid h2{font-size:clamp(34px,9vw,44px)}.municipalities-intro{font-size:18px}.municipalities-grid,.municipalities-method-grid{gap:32px}.municipalities-steps,.municipalities-output-grid{grid-template-columns:1fr}.municipalities-step{min-height:0}.municipalities-cta__actions{width:100%;flex-direction:column}.municipalities-cta__actions .button{width:100%}}

/* Verfijningen Voor gemeenten */
.municipalities-method-grid .button--outline{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--vv-blue-dark);border-radius:8px;color:var(--vv-blue-dark);background:transparent;}
.municipalities-method-grid .button--outline:hover{color:#fff;background:var(--vv-blue-dark);}
.municipalities-results-section{padding-bottom:70px;}

/* 2026-08-10 – genummerde stappen: transparante cirkel met donkerblauwe outline en cijfer. */
.municipalities-step::before {
  box-sizing: border-box;
  color: var(--vv-blue-dark);
  background: transparent;
  border: 2px solid var(--vv-blue-dark);
}

/* 2026-08-20 – beleidscyclus en monitoring */
.municipalities-cycle-section .municipalities-wide-copy { margin-bottom: 0; }
.municipalities-cycle { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.municipalities-cycle__step { min-height: 230px; padding: 68px 22px 24px; }
.municipalities-cycle__step::before { left: 22px; top: 22px; }
.municipalities-cycle__step:not(:last-child)::after {
  position: absolute;
  right: -17px;
  top: 50%;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--vv-border);
  border-radius: 50%;
  color: var(--vv-blue-dark);
  background: var(--vv-light);
  content: '→';
  transform: translateY(-50%);
  font-weight: 700;
}
.municipalities-cycle__note {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 900px;
  margin: 28px auto 0;
  padding: 18px 22px;
  border: 1px solid var(--vv-border);
  border-radius: 10px;
  color: var(--vv-blue-dark);
  background: #fff;
  font-weight: 700;
}
.municipalities-cycle__note span { color: var(--vv-orange); font-size: 28px; line-height: 1; }
@media(max-width:1100px){
  .municipalities-cycle{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .municipalities-cycle__step:not(:last-child)::after{display:none}
}
@media(max-width:767px){
  .municipalities-cycle{grid-template-columns:1fr}
  .municipalities-cycle__step{min-height:0;padding:68px 22px 24px}
  .municipalities-cycle__note{align-items:flex-start}
}
