/* ==========================================================================
   wp.css — de brug tussen WordPress-blokken en de opmaak van de statische site.
   De blokken voegen hier en daar een laag toe of veranderen een tag; deze
   regels zetten het beeld terug op dat van de statische site.
   ========================================================================== */

/* een knop staat in een alinea (zo kan de klant tekst en link aanpassen): de alinea zelf telt niet mee in de opmaak */
p.knopregel{display:contents}

/* tekst die op de statische site een <span>/<div> was, staat nu in een <p> */
p:where(.als-span,.als-div,.als-tekst){margin:0}
p:where(.als-span){display:inline}

/* een losse foto krijgt een <figure> om zich heen: die laag mag niets doen (de klasse van de foto staat nu op de figure) */
figure:where(.wp-block-image){margin:0}
:where(figure.als-img){display:contents}
.wp-block-image img{max-width:100%}
figure.wp-block-image.size-full img{display:block}

/* een pagina die de klant zelf nieuw maakt (zonder eigen secties) */
.rk-los{padding:clamp(48px,7vw,96px) 0;background:var(--ivoor,#FBF6E9)}
.rk-los-in{max-width:760px}
.rk-los-in h1{margin:0 0 24px;font:900 clamp(34px,5vw,52px)/1.05 "Kop",system-ui,sans-serif;color:var(--nacht,#12291E)}
.rk-los-tekst > * + *{margin-top:1em}
.rk-los-tekst img{border-radius:16px}

/* WordPress' eigen aanvullingen op details/summary en lijsten: niets */
.wp-block-details summary{cursor:pointer}

/* een prijslijst (<dl>) staat als groep met alinea's; dt/dd hadden geen marge-standaard behalve dd */
p:where(.als-dt,.als-dd,.als-figcaption){margin:0}

/* "Lees meer" op de klikbare kaart: was een <span>, nu een <p>; de regel ".z-plkaart > p" mag hem niet overnemen */
.als-a > p.als-span.z-tekstlink-licht{color:var(--goud-licht)}