/* Pres Schadeherstel gemeenten pages – dark theme variant
   Based on the site's dark palette and the transport-page reference */

.psg-page{
  --psg-accent:#ea7b37;
  --psg-accent-dark:#d96c29;
  --psg-text:#f5f5f5;
  --psg-text-soft:rgba(255,255,255,.78);
  --psg-text-muted:rgba(255,255,255,.58);
  --psg-border:rgba(255,255,255,.12);
  --psg-border-soft:rgba(255,255,255,.08);
  --psg-panel:rgba(255,255,255,.035);
  --psg-panel-2:rgba(255,255,255,.055);
  --psg-panel-3:rgba(255,255,255,.02);
  --psg-radius:26px;
  --psg-radius-md:18px;
  --psg-shadow:0 18px 60px rgba(0,0,0,.26);
  color:var(--psg-text);
  font-family:inherit;
}

.psg-page,
.psg-page *{box-sizing:border-box}

.psg-page a{color:inherit}
.psg-page h1,
.psg-page h2,
.psg-page h3{line-height:1.12;margin:0 0 .6em;color:var(--psg-text)}
.psg-page h1{font-size:clamp(34px,5vw,62px)}
.psg-page h2{font-size:clamp(28px,4vw,42px)}
.psg-page h3{font-size:clamp(20px,2.4vw,28px)}
.psg-page p{margin:0 0 1rem;color:var(--psg-text-soft);line-height:1.78}
.psg-page section{margin:0}
.psg-page strong{color:#fff}
.psg-page ul,
.psg-page ol{color:var(--psg-text-soft)}
.psg-page li{margin:.45rem 0}

.psg-breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:0 0 16px;
  font-size:.92rem;
  color:var(--psg-text-muted);
}

.psg-breadcrumbs a{
  text-decoration:none;
  color:var(--psg-text-soft);
}

.psg-breadcrumbs a:hover{color:var(--psg-accent)}

.psg-hero,
.psg-section,
.psg-cta-end{
  background:var(--psg-panel);
  border:1px solid var(--psg-border);
  border-radius:var(--psg-radius);
  padding:30px;
  box-shadow:var(--psg-shadow);
  backdrop-filter:blur(4px);
}

.psg-hero{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.03));
}

.psg-section + .psg-section,
.psg-hero + .psg-section,
.psg-section + .psg-cta-end{margin-top:18px}

.psg-lead{
  font-size:1.08rem;
  color:var(--psg-text-soft);
}

.psg-sublead,
.psg-note,
.psg-morelink,
.psg-code-note{color:var(--psg-text-muted)}

.psg-sep{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--psg-border),transparent);
  margin:22px 0;
}

.psg-two-col{
  display:grid;
  grid-template-columns:1.55fr .95fr;
  gap:22px;
  align-items:start;
}

.psg-grid{display:grid;gap:16px}
.psg-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px}
.psg-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.psg-card,
.psg-assess,
.psg-faq,
.psg-hotspots,
.psg-linkcard{
  background:var(--psg-panel-2);
  border:1px solid var(--psg-border);
  border-radius:var(--psg-radius-md);
  box-shadow:var(--psg-shadow);
}

.psg-card{padding:20px}
.psg-hotspots{padding:20px;background:rgba(234,123,55,.08)}

.psg-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.psg-button-row,
.psg-button-stack{display:flex;gap:12px;flex-wrap:wrap}
.psg-button-stack{flex-direction:column}

.psg-btn,
.psg-btn:visited{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 22px;
  border-radius:16px;
  text-decoration:none;
  border:1px solid var(--psg-border);
  font-weight:700;
  transition:.22s ease;
}

.psg-btn:hover{transform:translateY(-1px);color:#fff}

.psg-btn-primary,
.psg-btn-primary:visited{
  background:var(--psg-accent);
  border-color:var(--psg-accent);
  color:#fff;
}

.psg-btn-primary:hover{
  background:var(--psg-accent-dark);
  border-color:var(--psg-accent-dark);
}

.psg-btn-secondary,
.psg-btn-secondary:visited{
  background:var(--psg-panel-3);
  color:#fff;
}

.psg-btn-secondary:hover{
  background:var(--psg-panel-2);
  border-color:rgba(255,255,255,.18);
}

.psg-assess{
  padding:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}

.psg-list{margin:.2rem 0 0 1.1rem;padding:0}
.psg-list li::marker{color:var(--psg-accent)}

.psg-linkcard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px;
  text-decoration:none;
}

.psg-linkcard:hover{
  border-color:rgba(234,123,55,.55);
  background:rgba(234,123,55,.09);
}

.psg-card-title{font-weight:700;color:#fff}
.psg-card-arrow{font-size:1.2rem;color:var(--psg-accent)}

.psg-chipwrap{display:flex;flex-wrap:wrap;gap:10px}

.psg-chip,
.psg-chip:visited{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--psg-border);
  background:var(--psg-panel-3);
  text-decoration:none;
  color:#fff;
  transition:.2s ease;
}

.psg-chip:hover{
  border-color:rgba(234,123,55,.55);
  background:rgba(234,123,55,.09);
}

.psg-faq-list{display:grid;gap:12px}

.psg-faq{overflow:hidden}

.psg-faq summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px;
  font-weight:700;
  color:#fff;
}

.psg-faq summary::-webkit-details-marker{display:none}

.psg-faq summary::after{
  content:"+";
  width:32px;
  height:32px;
  border-radius:999px;
  display:grid;
  place-items:center;
  flex:0 0 32px;
  background:var(--psg-panel-2);
  border:1px solid var(--psg-border);
  color:#fff;
}

.psg-faq[open] summary::after{content:"–"}

.psg-faq-body{padding:0 18px 18px;color:var(--psg-text-soft)}

.psg-cta-side{position:sticky;top:24px}

.psg-cta-end{
  text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(234,123,55,.06));
}

.psg-cta-end p{max-width:900px;margin-left:auto;margin-right:auto}

.psg-page .wp-block-button__link,
.psg-page .wp-element-button{
  background:var(--psg-accent);
  border:1px solid var(--psg-accent);
  color:#fff;
  border-radius:16px;
}

.psg-page .wp-block-button__link:hover,
.psg-page .wp-element-button:hover{
  background:var(--psg-accent-dark);
  border-color:var(--psg-accent-dark);
}

.psg-page .wp-block-group,
.psg-page .wp-block-columns,
.psg-page .wp-block-column{color:inherit}

@media (max-width:1100px){
  .psg-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:920px){
  .psg-two-col,
  .psg-grid-2{grid-template-columns:1fr}
  .psg-cta-side{position:static}
}

@media (max-width:760px){
  .psg-hero,
  .psg-section,
  .psg-cta-end{padding:20px}
  .psg-grid-4{grid-template-columns:1fr}
  .psg-button-stack,
  .psg-button-row{flex-direction:column}
  .psg-btn{width:100%}
}