/* Site Factory componentstyling v2 — statisch en token-gedreven (var(--sf-*)).
   Gegenereerd artefact — nooit handmatig bewerken op een beheerde site. */

/* --- Statische schaal (niet merkafhankelijk) ---------------------------- */
:root {
  --sf-space-sm: 1rem;
  --sf-space-md: 1.75rem;
  --sf-space-lg: 3rem;
  --sf-space-xl: clamp(3rem, 8vw, 5.5rem);
  --sf-maxwidth: 72rem;
  --sf-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08);
  --sf-shadow-md: 0 10px 30px rgb(0 0 0 / 0.12);
  --sf-scrim: linear-gradient(180deg, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.35));
}

/* Voorkomt een horizontale scrollbar door de full-bleed 50vw-trick */
body {
  overflow-x: clip;
}

/* --- Header: alleen het gegenereerde logo ------------------------------- */
/* WordPress-core zet body.wp-custom-logo zodra has_custom_logo() waar is, dus
   dit werkt themaneutraal (astra/generatepress/kadence/neve) en valt vanzelf
   terug op de tekst als er géén logo is. Bewust screenreader-only in plaats
   van display:none: de titel blijft in de a11y-tree en als SEO-signaal.
   !important omdat de AI-skin ná dit bestand geladen wordt. */
body.wp-custom-logo :is(.site-title, .main-title, .site-description, .nv-title-tagline-wrap) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* Het merkgebied bevat precies één afbeelding: het logo. Skins tekenden hier
   met gradients een tweede merkteken op ::before ("content:'' + background").
   De sanitizer weigert dat nu, maar sites met een oudere goedgekeurde skin
   dragen het nog; deze regel schakelt het uit zonder regeneratie. */
.site-branding::before,
.site-branding::after,
.site-branding *::before,
.site-branding *::after {
  content: none !important;
  background: none !important;
}

/* Logogrootte hoort bij het platform: een skin schroefde het logo terug naar
   46px, waardoor het merk vrijwel onzichtbaar werd. De skin mag de twee
   variabelen zetten, de clamp garandeert een leesbare ondergrens. */
:root {
  --sf-logo-height: 64px;
  --sf-logo-height-scrolled: 52px;
}

:is(img.custom-logo, .custom-logo-link img, .site-logo img, .site-branding img) {
  max-height: clamp(48px, var(--sf-logo-height), 96px) !important;
  max-width: min(320px, 55vw) !important;
  width: auto !important;
  height: auto !important;
}

html.sf-scrolled :is(img.custom-logo, .custom-logo-link img, .site-logo img, .site-branding img) {
  max-height: clamp(40px, var(--sf-logo-height-scrolled), 96px) !important;
}

@media (max-width: 782px) {
  :root {
    --sf-logo-height: 52px;
    --sf-logo-height-scrolled: 44px;
  }
}

/* --- Gutenberg-groepwrapper doorzichtig maken ---------------------------
   WordPress rendert élke core/group als
   <div class="wp-block-group"><div class="wp-block-group__inner-container">…
   Onze componenten zijn zelf de grid- of flexcontainer, dus zonder deze regel
   is die tussenlaag het enige item en valt de layout terug op één kolom.
   Gemeten op WordPress 6.8; alleen onze eigen containers, zodat groepen van het
   parent-thema hun wrapper houden. */
:is(
    .sf-hero--split,
    .sf-media-text,
    .sf-stats__grid,
    .sf-tabs__nav,
    .sf-statistic-grid__grid,
    .sf-chart--bar
  )
  > .wp-block-group__inner-container {
  display: contents;
}

/* --- Sectiesysteem (full-bleed met gecentreerde inhoud) ----------------- */
.sf-section {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(1.5rem, calc(50vw - var(--sf-maxwidth) / 2));
  padding-block: var(--sf-space-xl);
}

.sf-section--tint {
  background: var(--sf-color-surface-tint);
}

.sf-section--dark {
  background: var(--sf-color-surface-dark);
  color: var(--sf-color-on-dark);
}

.sf-section--dark :is(h2, h3, h4, p, a, li, summary) {
  color: var(--sf-color-on-dark);
}

.sf-section > * {
  max-width: var(--sf-maxwidth);
  margin-left: auto;
  margin-right: auto;
}

/* --- Hero: gedeelde basis ----------------------------------------------- */
.sf-hero {
  padding: 4rem 1.5rem;
  text-align: center;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sf-color-primary) 8%, var(--sf-color-background)),
    var(--sf-color-background)
  );
  border-radius: var(--sf-radius);
}

.sf-hero h1 {
  margin: 0 auto 1rem;
  max-width: 46rem;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
  color: var(--sf-color-primary);
}

.sf-hero .sf-hero__tagline {
  margin: 0 auto 1.75rem;
  max-width: 38rem;
  font-size: 1.2rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--sf-color-text) 78%, var(--sf-color-background));
}

.sf-hero .wp-block-buttons {
  justify-content: center;
}

/* --- Hero-variant: overlay (beeld achter tekst + scrim) ----------------- */
.sf-hero--overlay {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(420px, 55vh, 620px);
  margin-inline: calc(50% - 50vw);
  padding: var(--sf-space-xl) 1.5rem;
  border-radius: 0;
  background: var(--sf-color-surface-dark);
  overflow: hidden;
}

.sf-hero--overlay .wp-block-image {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.sf-hero--overlay .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-hero--overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sf-scrim);
  z-index: 1;
}

.sf-hero--overlay .sf-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 46rem;
}

.sf-hero--overlay h1,
.sf-hero--overlay .sf-hero__tagline {
  color: #ffffff;
}

.sf-hero--overlay .sf-hero__tagline {
  color: rgb(255 255 255 / 0.88);
}

/* --- Hero-variant: split (tekst naast beeld) ---------------------------- */
.sf-hero--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sf-space-lg);
  align-items: center;
  text-align: left;
  max-width: var(--sf-maxwidth);
  margin-inline: auto;
}

.sf-hero--split h1,
.sf-hero--split .sf-hero__tagline {
  margin-left: 0;
  margin-right: 0;
}

.sf-hero--split .wp-block-buttons {
  justify-content: flex-start;
}

.sf-hero--split .sf-hero__media .wp-block-image {
  margin: 0;
}

.sf-hero--split .sf-hero__media img {
  width: 100%;
  height: auto;
  border-radius: var(--sf-radius);
  box-shadow: var(--sf-shadow-md);
}

/* --- Knoppen ------------------------------------------------------------ */
.wp-block-button__link,
.wp-element-button {
  background-color: var(--sf-color-accent);
  color: var(--sf-color-background);
  border-radius: var(--sf-radius);
  padding: 0.75rem 1.75rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    filter 0.15s ease,
    transform 0.15s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
  filter: brightness(0.9);
  color: var(--sf-color-background);
}

.sf-section--dark .wp-block-button__link {
  color: #ffffff;
}

/* --- Feature grid ------------------------------------------------------- */
.sf-feature-grid {
  gap: 1.25rem;
}

.sf-feature-card {
  height: 100%;
  padding: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--sf-color-primary) 18%, transparent);
  border-radius: var(--sf-radius);
  background: var(--sf-color-background);
  box-shadow: var(--sf-shadow-sm);
}

.sf-feature-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--sf-color-primary);
}

.sf-feature-card p {
  margin: 0;
  line-height: 1.6;
}

/* --- Media + tekst (beeld verweven in de layout) ------------------------ */
.sf-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sf-space-lg);
  align-items: center;
}

.sf-media-text__media .wp-block-image {
  margin: 0;
}

.sf-media-text__media img {
  width: 100%;
  height: auto;
  border-radius: var(--sf-radius);
  box-shadow: var(--sf-shadow-md);
}

.sf-media-text--left .sf-media-text__media {
  order: -1;
}

.sf-media-text__content h2 {
  margin-top: 0;
  color: var(--sf-color-primary);
}

.sf-media-text__content p {
  line-height: 1.7;
}

/* --- Statistiekenband --------------------------------------------------- */
.sf-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sf-space-md);
  text-align: center;
}

.sf-stats h2 {
  text-align: center;
  margin-top: 0;
}

.sf-stats__value {
  margin: 0;
  font-family: var(--sf-font-heading);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  color: var(--sf-color-accent);
  line-height: 1.1;
}

.sf-stats__label {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
}

/* --- Stappen (genummerd via CSS-counter) -------------------------------- */
.sf-steps {
  counter-reset: sf-step;
  max-width: 46rem;
}

.sf-steps h2 {
  margin-top: 0;
}

/* Nummerbadge staat bewust in de normale flow (geen absolute positionering):
   skins overschrijven padding/marges en mogen daar niet door breken */
.sf-steps__item {
  counter-increment: sf-step;
  position: relative;
  margin-bottom: var(--sf-space-md);
}

.sf-steps__item::before {
  content: counter(sf-step);
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-color-accent);
  color: var(--sf-color-background);
  font-weight: 700;
  font-family: var(--sf-font-heading);
}

.sf-steps__item h3 {
  margin: 0 0 0.35rem;
  color: var(--sf-color-primary);
}

.sf-steps__item p {
  margin: 0;
  line-height: 1.65;
}

.sf-section--dark .sf-steps__item h3 {
  color: var(--sf-color-on-dark);
}

/* --- CTA ----------------------------------------------------------------- */
.sf-cta {
  margin: 0;
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: var(--sf-color-primary);
  border-radius: var(--sf-radius);
}

.sf-cta h2,
.sf-cta p {
  color: var(--sf-color-background);
}

.sf-cta p {
  max-width: 36rem;
  margin: 0.5rem auto 1.5rem;
}

.sf-cta .wp-block-buttons {
  justify-content: center;
}

/* --- FAQ-accordion ------------------------------------------------------- */
.sf-faq-item {
  margin: 0 0 0.75rem;
  border: 1px solid color-mix(in srgb, var(--sf-color-text) 15%, transparent);
  border-radius: var(--sf-radius);
  padding: 0;
  overflow: hidden;
  background: var(--sf-color-background);
}

.sf-section--dark .sf-faq-item :is(summary, p) {
  color: var(--sf-color-text);
}

.sf-faq-item summary {
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-weight: 600;
  list-style: none;
  position: relative;
}

.sf-faq-item summary::-webkit-details-marker {
  display: none;
}

.sf-faq-item summary::after {
  content: '+';
  position: absolute;
  right: 1.25rem;
  color: var(--sf-color-accent);
  font-weight: 700;
  transition: transform 0.2s ease;
}

.sf-faq-item[open] summary::after {
  content: '\2212';
}

.sf-faq-item[open] summary {
  border-bottom: 1px solid color-mix(in srgb, var(--sf-color-text) 10%, transparent);
}

.sf-faq-item p {
  padding: 1rem 1.25rem;
  margin: 0;
}

/* --- Eyebrow (label boven koppen) ---------------------------------------- */
.sf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-color-accent);
}

.sf-eyebrow::before {
  content: '';
  width: 1.4rem;
  height: 1px;
  background: currentColor;
}

/* --- Tabs ----------------------------------------------------------------
   Zonder JS: alle panelen zichtbaar onder elkaar (anker-navigatie).
   Met JS (.sf-tabs--enhanced): alleen het actieve paneel zichtbaar. */
.sf-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--sf-space-md);
}

.sf-tabs__navitem {
  margin: 0;
}

.sf-tabs__link {
  display: inline-block;
  padding: 0.65rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--sf-color-text) 15%, transparent);
  border-radius: var(--sf-radius);
  font-weight: 600;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.sf-tabs__link--active {
  border-color: var(--sf-color-accent);
  background: color-mix(in srgb, var(--sf-color-accent) 10%, transparent);
  color: var(--sf-color-accent);
}

.sf-tabs--enhanced .sf-tabs__panel {
  display: none;
}

.sf-tabs--enhanced .sf-tabs__panel--active {
  display: block;
}

.sf-tabs__panel {
  padding: var(--sf-space-md);
  border: 1px solid color-mix(in srgb, var(--sf-color-text) 12%, transparent);
  border-radius: var(--sf-radius);
  margin-bottom: var(--sf-space-sm);
}

.sf-tabs__panel h3 {
  margin-top: 0;
  color: var(--sf-color-primary);
}

/* --- Marquee (doorlopende band) ------------------------------------------ */
.sf-marquee {
  overflow: hidden;
  padding-block: var(--sf-space-sm);
  border-block: 1px solid color-mix(in srgb, var(--sf-color-text) 12%, transparent);
}

.sf-marquee__track {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  animation: sf-marquee 28s linear infinite;
}

.sf-marquee:hover .sf-marquee__track {
  animation-play-state: paused;
}

.sf-marquee__item {
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--sf-color-text) 70%, transparent);
}

@keyframes sf-marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-marquee__track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
  }
}

/* --- Contact ------------------------------------------------------------- */
.sf-contact-info {
  padding: 1.5rem;
  border-left: 4px solid var(--sf-color-accent);
  background: color-mix(in srgb, var(--sf-color-primary) 4%, var(--sf-color-background));
  border-radius: var(--sf-radius);
}

.sf-contact-info p {
  margin: 0.25rem 0;
}

.sf-contact-info .sf-contact__org {
  font-weight: 700;
}

/* --- Presentatiecomponenten (M4) -----------------------------------------
   Cijfergroepen, grafieken, tijdlijn, verantwoording en CTA's. De data zit in
   custom properties die de renderer berekent (--sf-bar-value, --sf-x/--sf-y);
   hier staat alleen hoe dat eruitziet. Elke grafiek heeft een tabel met
   dezelfde cijfers: die is de toegankelijke versie, geen fallback om te
   verbergen. */

.sf-statistic-grid__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sf-space-sm);
  margin-top: var(--sf-space-sm);
}

.sf-statistic-grid__item {
  padding: 1.25rem;
  background: var(
    --sf-color-surface-tint,
    color-mix(in srgb, var(--sf-color-primary) 5%, var(--sf-color-background))
  );
  border-radius: var(--sf-radius);
}

.sf-statistic-grid__value {
  margin: 0;
  font-family: var(--sf-font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.1;
  color: var(--sf-color-accent, var(--sf-color-primary));
}

.sf-statistic-grid__label {
  margin: 0.35rem 0 0;
}

.sf-statistic-grid__source,
.sf-chart__source {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  opacity: 0.75;
}

/* Balkgrafiek: het label links, de balk in het midden, de waarde rechts */
.sf-chart--bar {
  display: grid;
  gap: 0.5rem;
  margin: var(--sf-space-sm) 0;
}

.sf-chart__row {
  display: grid;
  grid-template-columns: minmax(4rem, 9rem) 1fr auto;
  align-items: center;
  gap: 0.75rem;
}

.sf-chart__label,
.sf-chart__value {
  font-size: 0.9rem;
}

.sf-chart__value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.sf-chart__track {
  height: 0.75rem;
  background: color-mix(in srgb, var(--sf-color-text) 8%, transparent);
  border-radius: 999px;
  overflow: hidden;
}

.sf-chart__bar {
  display: block;
  /* De renderer heeft dit percentage al uit de cijfers berekend */
  width: var(--sf-bar-value, 0%);
  height: 100%;
  background: var(--sf-color-accent, var(--sf-color-primary));
  border-radius: inherit;
}

/* Lijngrafiek: punten op berekende coördinaten. Zonder JavaScript is dit een
   puntenwolk met raster; sf-interactions.js tekent de verbindingen erbij. */
.sf-chart__plot {
  position: relative;
  aspect-ratio: 16 / 6;
  min-height: 8rem;
  margin: var(--sf-space-sm) 0 0.5rem;
  background: repeating-linear-gradient(
    to top,
    color-mix(in srgb, var(--sf-color-text) 8%, transparent) 0 1px,
    transparent 1px 25%
  );
  border-radius: var(--sf-radius);
}

.sf-chart__point {
  position: absolute;
  left: var(--sf-x, 0%);
  top: var(--sf-y, 0%);
  width: 0.6rem;
  height: 0.6rem;
  margin: -0.3rem 0 0 -0.3rem;
  background: var(--sf-color-accent, var(--sf-color-primary));
  border-radius: 50%;
  z-index: 1;
}

/* Door JavaScript ingevoegd: één gedraaid staafje per segment */
.sf-chart__segment {
  position: absolute;
  height: 2px;
  transform-origin: 0 50%;
  background: var(--sf-color-accent, var(--sf-color-primary));
  opacity: 0.6;
}

.sf-chart__axis {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  opacity: 0.75;
}

.sf-chart__tick {
  flex: 0 1 auto;
}

/* Tijdlijn: genummerde lijst met een verticale lijn langs de items */
.sf-timeline ol {
  list-style: none;
  margin: var(--sf-space-sm) 0 0;
  padding: 0 0 0 1.5rem;
  border-left: 2px solid color-mix(in srgb, var(--sf-color-primary) 25%, transparent);
}

.sf-timeline li {
  position: relative;
  margin: 0 0 var(--sf-space-sm);
}

.sf-timeline li::before {
  content: '';
  position: absolute;
  left: -1.9rem;
  top: 0.35rem;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--sf-color-accent, var(--sf-color-primary));
  border-radius: 50%;
}

.sf-timeline__date {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

.sf-timeline__title {
  display: block;
  font-family: var(--sf-font-heading);
  font-size: 1.05rem;
}

.sf-timeline__text {
  display: block;
  margin-top: 0.15rem;
}

/* Verantwoording: bewust rustig, het is context en geen blikvanger */
.sf-methodology {
  padding: 1.25rem 1.5rem;
  background: color-mix(in srgb, var(--sf-color-text) 4%, var(--sf-color-background));
  border-radius: var(--sf-radius);
  font-size: 0.95rem;
}

.sf-methodology__details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
  margin: var(--sf-space-sm) 0 0;
}

.sf-methodology__details dt {
  font-weight: 600;
}

.sf-methodology__details dd {
  margin: 0;
}

/* Gerelateerde artikelen: altijd interne links van dezelfde site */
.sf-related ul {
  list-style: none;
  margin: var(--sf-space-sm) 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.sf-related li {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--sf-color-text) 10%, transparent);
}

.sf-related__link {
  font-weight: 600;
}

.sf-related__description {
  display: block;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Affiliate en nieuwsbrief */
.sf-affiliate-cta,
.sf-newsletter-cta {
  padding: var(--sf-space-md);
  background: color-mix(in srgb, var(--sf-color-primary) 6%, var(--sf-color-background));
  border-radius: var(--sf-radius);
}

/* De melding is een wettelijke verplichting: leesbaar houden, nooit wegpoetsen */
.sf-affiliate-cta__disclosure {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  opacity: 0.85;
}

.sf-newsletter-cta__note {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  opacity: 0.8;
}

@media (max-width: 781px) {
  .sf-chart__row {
    grid-template-columns: minmax(3.5rem, 6rem) 1fr auto;
    gap: 0.5rem;
  }

  .sf-chart__plot {
    aspect-ratio: 4 / 3;
  }
}

/* --- Rekentool (M5) ------------------------------------------------------
   Wordt server-side gerenderd door de Site Factory Core plugin (dynamic block),
   niet door de PageSpec-renderer: <input> overleeft wp_kses_post niet. Zonder
   JavaScript blijft de uitkomst een streepje. */
.sf-calculator {
  padding: var(--sf-space-md);
  background: color-mix(in srgb, var(--sf-color-primary) 5%, var(--sf-color-background));
  border: 1px solid color-mix(in srgb, var(--sf-color-text) 10%, transparent);
  border-radius: var(--sf-radius);
}

.sf-calculator__title {
  margin: 0 0 0.5rem;
  font-family: var(--sf-font-heading);
  font-size: 1.4rem;
}

.sf-calculator__intro {
  margin: 0 0 var(--sf-space-sm);
}

.sf-calculator__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--sf-space-sm);
}

.sf-calculator__label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.sf-calculator__unit {
  font-weight: 400;
  opacity: 0.7;
}

.sf-calculator__input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--sf-color-text);
  background: var(--sf-color-background);
  border: 1px solid color-mix(in srgb, var(--sf-color-text) 22%, transparent);
  border-radius: var(--sf-radius);
}

.sf-calculator__input:focus-visible {
  outline: 2px solid var(--sf-color-accent, var(--sf-color-primary));
  outline-offset: 1px;
}

.sf-calculator__result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: var(--sf-space-md) 0 0;
  padding-top: var(--sf-space-sm);
  border-top: 1px solid color-mix(in srgb, var(--sf-color-text) 12%, transparent);
}

.sf-calculator__result-label {
  font-weight: 600;
}

.sf-calculator__value {
  font-family: var(--sf-font-heading);
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--sf-color-accent, var(--sf-color-primary));
}

/* --- Bestaande contentcomponenten ---------------------------------------- */
.sf-intro {
  font-size: 1.1rem;
  line-height: 1.7;
}

.sf-toc,
.sf-sources {
  padding: 1.25rem 1.5rem;
  background: color-mix(in srgb, var(--sf-color-primary) 5%, var(--sf-color-background));
  border-radius: var(--sf-radius);
}

/* Scrollspy (sf-interactions.js) markeert de link van de zichtbare sectie;
   zonder JS blijft de TOC gewone ankernavigatie zonder actieve staat */
.sf-toc .sf-toc__link--active {
  color: var(--sf-color-accent, var(--sf-color-primary));
  font-weight: 600;
}

/* Expert-quote: render.ts zet een kaal blockquote.wp-block-quote neer (geen
   eigen sf-klasse), dus de opmaak is hier op de sectiecontext gescoped zodat
   quotes van het parent-thema buiten artikelen ongemoeid blijven. */
.sf-section .wp-block-quote {
  position: relative;
  margin: var(--sf-space-md) auto;
  padding: 1.5rem 1.75rem 1.25rem 2rem;
  border-left: 4px solid var(--sf-color-accent, var(--sf-color-primary));
  border-radius: 0 var(--sf-radius) var(--sf-radius) 0;
  background: color-mix(in srgb, var(--sf-color-primary) 5%, var(--sf-color-background));
  font-size: 1.15rem;
  line-height: 1.6;
}

/* Groot decoratief aanhalingsteken; de tekst staat er via z-ordening boven */
.sf-section .wp-block-quote::before {
  content: '\201C';
  position: absolute;
  top: -0.4rem;
  left: 0.6rem;
  font-family: var(--sf-font-heading);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--sf-color-accent, var(--sf-color-primary));
  opacity: 0.25;
}

.sf-section .wp-block-quote p {
  position: relative;
  margin: 0 0 0.6rem;
}

.sf-section .wp-block-quote cite {
  display: block;
  font-size: 0.9rem;
  font-style: normal;
  opacity: 0.75;
}

/* De homepage heeft een hero met eigen h1; de door het theme gerenderde
   paginatitel zou daar dubbelen. Overige pagina's houden hun titel. */
body.home .entry-title,
body.home h1.wp-block-post-title {
  display: none;
}

/* --- Archiefkaarten (door het theme gerenderd) ----------------------------
   De skin zet koppen globaal: h2 loopt tot clamp(1.9rem, 3.6vw, 2.9rem). Dat
   klopt voor een paginabrede sectie, maar de kaarttitel in het blogarchief ís
   ook een h2 — in een kolom van een paar honderd pixels. Nederlandse
   samenstellingen ("Rouwbloemen", "condoleance") pasten daar niet en liepen de
   kaart uit, tot over de buurkaart heen. Kadence zet zelf 28px, maar de skin
   laadt later en wint.

   Alleen de archiefkaarten worden hier bijgesteld; de koppen op onze eigen
   secties en op losse berichten blijven zoals de skin ze bedoeld heeft. */
.kadence-posts-list .entry,
.post-archive .entry {
  /* Een grid-item krimpt niet vanzelf onder zijn inhoud (min-width is auto),
     dus één lang woord maakt de hele kolom breder dan de kaart */
  min-width: 0;
}

/* De skin stijlt `header` (en soms `footer`) als kaal elementselector. Bedoeld
   is de navigatiebalk, maar dat raakt élke <header> op de pagina — en elke
   blogkaart heeft er een, met de categorie, de titel en de auteursregel erin.
   Die kreeg daardoor display:flex met space-between, waardoor die drie naast
   elkaar kwamen te staan in kolommen van een paar centimeter en de titel op
   elke lettergreep afbrak. Plus een achtergrond en een rand die daar niet horen.

   Twee klassen diep, dus dit wint van een kaal `header` ongeacht de volgorde
   waarin de stylesheets laden. De navigatiebalk zelf blijft ongemoeid: die is
   geen .entry-header. */
.entry .entry-header,
.entry .entry-footer,
.entry-content-wrap .entry-header,
.entry-content-wrap .entry-footer {
  display: block;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
  gap: 0;
  padding: 0;
}

.kadence-posts-list .entry-title,
.post-archive .entry-title {
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  /* Een samenstelling die alsnog te lang is breekt af in plaats van uit te
     steken; hyphens werkt omdat WordPress lang="nl-NL" op <html> zet */
  overflow-wrap: break-word;
  hyphens: auto;
}

/* --- Hover-interactie (alleen op hover-apparaten) ------------------------ */
@media (hover: hover) {
  .sf-feature-card,
  .sf-media-text__media img {
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }

  .sf-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sf-shadow-md);
  }

  .sf-media-text__media img:hover {
    transform: scale(1.015);
  }
}

/* --- Scroll-reveal-animaties ---------------------------------------------
   Gated op html.sf-js (gezet door inline theme-snippet): zonder JS is alle
   content direct zichtbaar. prefers-reduced-motion schakelt alles uit. */
.sf-js .sf-animate {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.sf-js .sf-animate.sf-visible {
  opacity: 1;
  transform: none;
}

.sf-js .sf-animate .sf-feature-card {
  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    box-shadow 0.2s ease;
}

.sf-js .sf-animate:nth-of-type(odd) {
  transition-delay: 0.05s;
}

@media (prefers-reduced-motion: reduce) {
  .sf-js .sf-animate {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Leesvoortgangsbalk ---------------------------------------------------
   Door sf-interactions.js op losse blogposts in <body> geplaatst; de breedte
   van de balk wordt inline door JS gezet. Geen bewegingsanimatie, dus ook
   zichtbaar onder prefers-reduced-motion — alleen de overgang vervalt daar. */
.sf-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1000; /* boven de (sticky) header van elk parent-thema */
  background: transparent;
  pointer-events: none;
}

.sf-progress__bar {
  height: 100%;
  width: 0;
  background: var(--sf-color-accent, var(--sf-color-primary));
  transition: width 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .sf-progress__bar {
    transition: none;
  }
}

/* --- Layoutbreedte en responsiviteit -------------------------------------- */
.sf-hero,
.sf-cta {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 781px) {
  .sf-hero {
    padding: 2.5rem 1rem;
  }

  .sf-hero--overlay {
    min-height: clamp(360px, 60vh, 520px);
    padding: var(--sf-space-lg) 1rem;
  }

  .sf-hero--split,
  .sf-media-text {
    grid-template-columns: 1fr;
    gap: var(--sf-space-md);
  }

  .sf-hero--split {
    text-align: center;
  }

  .sf-hero--split .wp-block-buttons {
    justify-content: center;
  }

  /* Mobiel: beeld altijd boven de tekst */
  .sf-media-text .sf-media-text__media,
  .sf-media-text--left .sf-media-text__media {
    order: -1;
  }

  .sf-section {
    padding-block: var(--sf-space-lg);
  }
}

/* --- Footer (widget-gedreven; inhoud beheerbaar in wp-admin) -------------- */
.sf-footer {
  margin-top: var(--sf-space-xl);
  background: var(--sf-color-surface-dark);
  color: var(--sf-color-on-dark);
  padding: var(--sf-space-lg) 1.5rem 0;
}

.sf-footer a {
  color: var(--sf-color-on-dark);
  text-decoration: none;
}

.sf-footer a:hover {
  text-decoration: underline;
}

.sf-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sf-space-lg);
  max-width: var(--sf-maxwidth);
  margin: 0 auto;
  padding-bottom: var(--sf-space-lg);
}

.sf-footer__title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  color: var(--sf-color-on-dark);
}

.sf-footer__widget p {
  margin: 0 0 0.5rem;
  line-height: 1.7;
}

.sf-footer__widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-footer__widget li {
  margin: 0 0 0.4rem;
}

.sf-footer__bottom {
  max-width: var(--sf-maxwidth);
  margin: 0 auto;
  padding: 1rem 0;
  border-top: 1px solid color-mix(in srgb, var(--sf-color-on-dark) 18%, transparent);
  font-size: 0.9rem;
}

.sf-footer__bottom p {
  margin: 0;
}

@media (max-width: 781px) {
  .sf-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--sf-space-md);
  }
}