/* ============================================================
   Chronische Pijn Centrum — basisstijlen
   Het ontwerp gebruikt inline styles per element (1-op-1 uit het
   originele ontwerpbestand). Dit bestand bevat alleen de globale
   basis, de responsive wide/narrow-schakeling en de hover-laag.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #FBF8F3;
  color: #1F3B5F;
  font-family: "Raleway", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #2F6E5F; text-decoration: none; }
a:hover { color: #1F3B5F; text-decoration: underline; text-underline-offset: 3px; }
button { font-family: inherit; }
::selection { background: #DCE9E3; }

@keyframes cpcFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cpcDrift { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(0,-14px,0) rotate(3deg); } }

/* Responsive schakeling: het ontwerp rendert aparte wide/narrow varianten */
.only-wide { display: none !important; }
.only-narrow { display: none !important; }
@media (min-width: 980px) {
  .only-wide { display: revert !important; }
  .cpc-grid.only-wide { display: grid !important; }
  .cpc-flex.only-wide { display: flex !important; }
  .cpc-inline-flex.only-wide { display: inline-flex !important; }
}
@media (max-width: 979.98px) {
  .only-narrow { display: revert !important; }
  .cpc-grid.only-narrow { display: grid !important; }
  .cpc-flex.only-narrow { display: flex !important; }
  .cpc-inline-flex.only-narrow { display: inline-flex !important; }
}

/* Toggle-hulpklassen (dropdowns, mobiel menu, accordions, formulier-status) */
.cpc-hidden { display: none !important; }

/* Inline-edit outline netjes op donkere vlakken */
[data-edit][contenteditable="true"] { outline-offset: 2px; }