/* ==========================================================================
   Adapterlaag voor over-mij. Deze pagina heeft een eigen designsysteem, dus
   ook een eigen adapter. Zelfde afspraak: over-mij.css blijft de letterlijke
   kopie, alles wat het blokkensysteem anders uitspuugt staat hier.
   ========================================================================== */

/* 1. De tweede regel van de kop staat in de statische site in een
      <span class="coda">. Een span met een klasse overleeft de blokeditor
      niet, cursief wel. De redacteur maakt die regel cursief en krijgt
      hetzelfde resultaat. */
/* :last-child om dezelfde reden als bij de prijsregel: cursief ergens MIDDEN
   in de kop hoort gewoon cursief te zijn, niet ineens een eigen goudkleurige
   regel. Alleen de afsluitende cursieve regel is de coda. */
.hero h1 em:last-child {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}

/* 2. De drie bewijsregels zijn <span>'s in een flex-kolom. Als alinea's
      gedragen ze zich hetzelfde, zolang de standaardmarge eraf gaat. */
.credentials-inner p {
  margin: 0;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.4;
  color: var(--text);
  letter-spacing: .01em;
}
.credentials-inner p em { color: var(--text-strong); }

/* 3. De sectielijn is een leeg <div class="rule">. Als blok is een scheiding
      de natuurlijke keuze; die komt als <hr> en brengt een eigen rand mee. */
hr.rule {
  border: 0;
  height: 1px;
  opacity: 1;
}
/* Twee van de drie lijnen hebben in de statische site een inline marge
   erboven. Inline stijl is in de editor niet te zetten, dus als klasse. */
hr.rule--ruimte { margin-top: var(--section-y); }

/* 4. Knoppen: core zet de meegegeven klasse op de wrapper, niet op de link.
      Zelfde truc als op de rest van de site. De markering mag NIET btn-primary
      heten: die klasse zet hier ook padding en een rand, en die zou dan ook op
      de wrapper landen. Resultaat was een knop in een knop. */
/* GEEN marge-reset op .wp-block-buttons. Die stond hier als voorzorg en
   sloopte iets echts: de knoppenrij draagt altijd ook de eigen klasse
   (.hero__actions, .actions, .btn-row) en die regelt zijn eigen marge.
   Even specifiek plus later ingeladen betekent dat de adapter wint, en op
   hertenmaan verdween daardoor de 42px lucht boven de knop. Core zelf zet
   hier niets, dus er valt niets te repareren. */

.wp-block-button { display: inline-block; }
.wp-block-button__link {
  display: inline-block;
  font-family: "Jost", sans-serif;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  transition: transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.wp-block-button.knop-primair .wp-block-button__link {
  background: var(--gold);
  color: #1c150e;
  padding: 16px 40px;
  border: 1px solid var(--gold);
  box-shadow: 0 10px 34px -18px rgba(203, 164, 107, .9);
}
.wp-block-button.knop-primair .wp-block-button__link:hover,
.wp-block-button.knop-primair .wp-block-button__link:focus-visible {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  transform: translateY(-2px);
}
.wp-block-button.knop-secundair { margin-top: 20px; }
.wp-block-button.knop-secundair .wp-block-button__link {
  background: transparent;
  color: var(--text);
  padding: 14px 34px;
  border: 1px solid var(--rule);
}
.wp-block-button.knop-secundair .wp-block-button__link:hover,
.wp-block-button.knop-secundair .wp-block-button__link:focus-visible {
  border-color: var(--gold);
  color: var(--text-strong);
  background: rgba(203, 164, 107, .07);
  transform: translateY(-2px);
}

/* 5. Het citaat is een core/quote. Niet de marge platslaan: .pullquote regelt
      zijn eigen ruimte boven en onder. Wel de resten van core weghalen. */
blockquote.wp-block-quote.pullquote { border: 0; padding-left: clamp(8px, 4vw, 40px); }

/* 6. Het portret is een core/image. De klasse landt op de <figure>, en daar
      stond hij in de statische site ook, dus figure.portrait klopt al. Alleen
      de eigen marge van het blok moet weg. */
figure.wp-block-image.portrait { margin-left: auto; margin-right: auto; }

/* 7. De knoppenrij staat in een gecentreerde sectie. .btn is inline-block en
      werd door text-align gecentreerd; .wp-block-buttons is een flexrij over
      de volle breedte en moet zijn inhoud zelf centreren. */
.cta .wp-block-buttons { justify-content: center; }

/* Geen handgrepen om afbeeldingen te vergroten of te verkleinen: slepen schrijft
   een vaste maat op de afbeelding die op de site van de opmaak wint. Vervangen
   blijft werken. Zie ook 5c in wp-adapter.css (dat hier niet laadt). */
.editor-styles-wrapper .wp-block-image .components-resizable-box__handle {
  display: none;
}

/* In de editor de blokken op het hoogste niveau op volle breedte, zoals op de
   site. theme.json (contentSize 1200px) maakt ze daar anders 1200px breed.
   Zie 5d in wp-adapter.css (dat hier niet laadt). */
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > * {
  max-width: none;
}

/* ONTWERPWIJZIGING 08-10-2026, op verzoek van Yvonne: het portret op Over mij
   zonder lijst (geen gouden rand, geen ronde hoeken, geen schaduw), vrij op de
   pagina zoals op de homepage. De foto is een vrijstaande uitsnede met
   transparantie; met de lijst stond ze "in een lijstje". */
figure.wp-block-image.portrait img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* Geen vervaagde rand (Yvonne, 08-10): de foto zoals hij is. */
}