/* =========================================================
   Spete.nl - koppellaag WordPress
   -----------------------------------------------------------------
   site.css is en blijft het designsysteem. Dit bestand doet één ding:de opmaak die WordPress-blokken meebrengen vertalen naar de klassen
   die daar al staan. Zo blijft site.css ongewijzigd en staat alle
   WordPress-specifieke uitzondering op één plek.
   ========================================================= */

/* ---------- Blokbreedtes binnen een container ---------- */
.wp-site-blocks > * { margin-block: 0; }
.entry-content > .alignwide { max-width: var(--container); margin-inline: auto; }
.entry-content > .alignfull { max-width: none; }

/* ---------- Sectievarianten (blokstijlen) ---------- */
.wp-block-group.is-style-sectie-wit,
.wp-block-group.is-style-sectie-zacht,
.wp-block-group.is-style-sectie-donker { padding: var(--section-y) 0; }
.wp-block-group.is-style-sectie-zacht  { background: var(--bg-soft); }
.wp-block-group.is-style-sectie-kort   { padding: var(--section-y-tight) 0; }
.wp-block-group.is-style-sectie-donker { background: var(--navy); color: var(--body-light); }
.wp-block-group.is-style-sectie-donker:is(h1, h2, h3, h4, strong, b) { color: #fff; }
.wp-block-group.is-style-sectie-donker a:not(.wp-block-button__link) { color: #fff; }

/* ---------- Kaarten ---------- */
.wp-block-group.is-style-kaart,
.wp-block-column.is-style-kaart {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--card-padding); box-shadow: var(--shadow-sm);
}
.wp-block-group.is-style-kaart-donker {
  background: var(--navy-2); border: 1px solid var(--line-dark); border-radius: var(--r);
  padding: var(--card-padding); color: var(--body-light);
}

/* ---------- Knoppen ----------
   De knop zelf (maat, vorm, states en de varianten primair, accent, lijn
   en ghost) staat in site.css, samen met .btn. Hier alleen de tekstlink-
   variant die WordPress als blokstijl aanbiedt. */
.wp-block-button.is-style-meer > .wp-block-button__link {
  --knop-kleur: var(--accent); --knop-schaduw: none;
  min-height: var(--space-6); padding: 0; border: 0; border-radius: 0; font-weight: 500;
}
.wp-block-button.is-style-meer > .wp-block-button__link:hover { transform: none; text-decoration: underline; }
.wp-block-button.is-style-meer > .wp-block-button__link::after { content: " \2192"; }

/* ---------- Lijsten ---------- */
/* Zelfde maatvoering als .checklist in site.css, zodat de tekst niet verschuift.
   Het vinkje stond daar als inline svg; als blok staat het als CSS-mask. */
.wp-block-list.is-style-vinkjes { list-style: none; padding: 0; margin: 0 0 1.4em; }
.wp-block-list.is-style-vinkjes > li { position: relative; padding-left: var(--space-8); margin-bottom: .7em; }
.wp-block-list.is-style-vinkjes > li::before {
  content: ""; position: absolute; left: 0; top: .28em; width: 20px; height: 20px;
  background: var(--accent);
  -webkit-mask: var(--icoon-vink) center / contain no-repeat;
          mask: var(--icoon-vink) center / contain no-repeat;
}
.wp-block-list.is-style-vinkjes.checklist--brand > li::before { background: var(--brand); }
.is-style-sectie-donker .wp-block-list.is-style-vinkjes > li::before { background: #fff; }

.wp-block-list.is-style-stappen { list-style: none; counter-reset: stap; padding-left: 0; }
.wp-block-list.is-style-stappen > li {
  counter-increment: stap; position: relative; padding-left: var(--space-12); margin-bottom: 1.1em;
}
.wp-block-list.is-style-stappen > li::before {
  content: counter(stap); position: absolute; left: 0; top: -.1em; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft);
  color: var(--brand); font-family: var(--font-display); font-weight: 700; font-size: var(--text-md);
}

/* ---------- Klantquote ---------- */
.wp-block-quote.is-style-klantquote {
  border: 0; background: var(--bg-soft); border-radius: var(--r-lg);
  padding: clamp(var(--space-8), 3.2vw, var(--space-10)); font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.1vw, 1.6rem); line-height: 1.4; color: var(--ink);
}
.wp-block-quote.is-style-klantquote p:last-of-type { margin-bottom: 0; }
.wp-block-quote.is-style-klantquote cite {
  display: block; margin-top: 1em; font-family: var(--font-body); font-size: var(--text-md);
  font-style: normal; color: var(--body);
}

/* ---------- Site-logo ----------
   In het ontwerp is .brand de link zelf; het logoblok zet er een div omheen
   met de link erin. De link krijgt daarom dezelfde uitlijning, anders komt
   er ruimte onder het logo door de regelhoogte. */
.brand > a,
.footer-logo > a { display: flex; align-items: center; line-height: 0; }
.header .wp-block-site-logo img { height: 38px; width: auto; display: block; }
.footer .wp-block-site-logo img { height: 34px; width: auto; display: block; }

/* ---------- Berichtenlijst (nieuws) ---------- */
.nieuws-lijst .wp-block-post-title a { color: var(--ink); text-decoration: none; }
.nieuws-lijst .wp-block-post-title a:hover { color: var(--brand); }
.nieuws-lijst .wp-block-post-featured-image img { border-radius: var(--r); }
.nieuws-lijst .wp-block-post-date { color: var(--body); font-size: var(--text-sm); }

/* ---------- Paginering ----------
   Staat in site.css, samen met die van de nieuwslijst. */

/* ---------- Iconen als CSS-mask, zodat ze niet in de editor rondzwerven ---------- */
:root {
  --icoon-vink: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}


/* ---------- Kaart als blok in plaats van <a> ---------- */
/* site.css heeft a.card:hover; als blok is de kaart een div met een
   link erin, dus de hover hangt nu aan de kaart zelf. */
.wp-block-group.card:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow); }
.wp-block-group.card { cursor: pointer; }
.wp-block-group.card:not(:has(a)) { cursor: auto; }
.wp-block-group.card .wp-block-buttons.card-meer { margin-top: auto; }

/* =========================================================
   Structuren die als blok een ander element kregen
   -----------------------------------------------------------------
   site.css selecteert vrijwel overal op klasse, dus die regels blijven
   werken. Wat hieronder staat, vangt de paar plekken op waar de
   oorspronkelijke opmaak aan het element hing in plaats van de klasse.
   ========================================================= */

/* Cijferstrook: <b> en <span> zijn nu alinea's. */
.stat .stat-getal {
  display: block; margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-stat); line-height: 1; color: #fff; letter-spacing: -.03em;
}
.stat .stat-label { display: block; margin: .5em 0 0; font-size: var(--text-sm); color: var(--body-light); }
.stats--light .stat .stat-getal { color: var(--brand); }
.stats--light .stat .stat-label { color: var(--body); }

/* Klantquote: de cite staat nu in de blockquote in plaats van ernaast,
   dus de flexbox die de naam onderaan duwt verhuist mee. */
.quote .wp-block-quote { display: flex; flex-direction: column; flex: 1; margin: 0; border: 0; padding: 0; }
.quote .wp-block-quote p { margin: 0 0 var(--space-5); font-size: var(--text-lg); color: var(--ink); line-height: 1.6; }
.quote .wp-block-quote cite { margin-top: auto; }

/* Teamfoto: functie en naam zijn nu alinea's binnen de infobalk. */
.team-photo-info p { margin: 0; }
.team-photo-info .role { margin-bottom: .3em; }
.team-photo .wp-block-image { margin: 0; height: 100%; }
.team-photo .wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Kaart naar een klantcase: de afbeelding is nu een figuur. */
.post .wp-block-image { margin: 0; }
.post .wp-block-image img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; display: block; }

/* Split: de mediakant is nu een figuur binnen de groep. */
.split .wp-block-image { margin: 0; }
.split .wp-block-image img { width: 100%; height: auto; display: block; border-radius: var(--r); }

/* Uitklapvraag: het details-blok van WordPress binnen .faq-item. */
.faq-item.wp-block-details > summary { list-style: none; cursor: pointer; }
.faq-item.wp-block-details > summary::-webkit-details-marker { display: none; }
.faq-item.wp-block-details .faq-a > p:last-child { margin-bottom: 0; }

/* Paginakop van een dienst of klantcase: de titel staat als blok in het kruimelpad. */
.crumbs .crumb-huidig { font: inherit; margin: 0; display: inline; color: inherit; }

/* De herofoto is nu een figuur om de img heen; beide dragen .hero-photo
   en vullen de hero, de figuur mag daar geen marge bij zetten. */
.wp-block-image.hero-photo { margin: 0; }


/* ---------- Marges binnen een flexlayout van WordPress ----------
   WordPress zet `margin: 0` op elk direct kind van een blok met een
   flex- of grid-layout, met een selector die van site.css wint. In de
   header steunt de uitlijning juist op margin-left: auto, dus die
   zetten we hier terug. */
.nav > .nav-links { margin-left: auto; }

/* Dezelfde regel kan .container en .faq raken zodra iemand later een sectie
   in een flexblok plaatst. Deze twee steunen op automatische zijmarges om
   gecentreerd te blijven, dus die zetten we onvoorwaardelijk terug. */
.wp-block-group.container { margin-left: auto; margin-right: auto; }
.wp-block-group.faq { margin-left: auto; margin-right: auto; }

/* ---------- Bewegingsvoorkeur ----------
   site.css schakelt de hover-beweging uit via a.card: hover en a.post:hover.
   Als blok zijn dat divs, dus die regel moet hier opnieuw. */
@media (prefers-reduced-motion: reduce) {
  .wp-block-group.card:hover,
  .wp-block-group.post:hover,
  .wp-block-group.quote:hover { transform: none; }
  .wp-block-button > .wp-block-button__link:hover { transform: none; }
}

/* ---------- Scroll-animatie in de editor ----------
   .reveal begint op opacity 0 en wordt door site.js zichtbaar gemaakt zodra
   het blok in beeld komt. In de editor draait dat script niet, dus daar
   zouden die blokken onzichtbaar zijn. */
.editor-styles-wrapper .reveal,
.block-editor-block-preview__content .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- Footerkoppen ----------
   Deze stonden als h4 terwijl het voorgaande niveau op de pagina h2 of h3
   is, wat een overgeslagen kopniveau geeft voor schermlezers. Ze zijn nu
   h2 en krijgen hier het uiterlijk dat site.css aan .footer h4 gaf. */
.footer .footer-kop {
  color: #fff; font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase;
  font-weight: 500; margin: 0 0 1.2em; line-height: 1.15;
}