/* ==========================================================================
   Adapterlaag: waar WordPress andere HTML uitspuugt dan de statische site.
   Doel is dat styles.css ONGEWIJZIGD blijft; alles wat WordPress anders doet,
   wordt hier op het bestaande designsysteem gelegd. Elke regel heeft een reden.
   ========================================================================== */

/* 1. Een blokthema hangt de pagina in <div class="wp-site-blocks">. In de
      statische site is <body> zelf de flex-kolom die de footer omlaag duwt
      (.site-footer { margin-top: auto }). Die rol schuift een niveau op. */
.wp-site-blocks {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 2. GEEN blanco marge-reset op .wp-block-group. Die stond hier eerst als
      voorzorg en brak meteen iets echts: .tarieven centreert met
      "margin: 0 auto", en .wp-site-blocks .wp-block-group is specifieker, dus
      de hele pagina schoof naar links. Core zet zelf geen marge op groepen;
      er valt hier niets te repareren. */

/* 2b. post-content zet de pagina-inhoud in een extra <div class="entry-content">.
      Daardoor loopt de hoogteverdeling een niveau mis: .main is een flexkolom
      en .hero / .section vragen daarin "flex: 1 1 auto" om de hoogte te vullen,
      maar die regel landt nu op een tussenliggende div die er niets mee doet.
      Op de homepage scheelde dat 0,46px in de hoogte van de hero, en dat is
      geen toeval maar geluk: met andere inhoud kan het veel meer zijn. Deze
      regel geeft de tussenlaag hetzelfde gedrag als .main, zodat de kinderen
      weer de flexitems zijn die het ontwerp verwacht. */
.main > .entry-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* 3. De eyebrow heeft in de statische site een <span class="line"> voor het
      tweede streepje. Zo'n lege span overleeft de blokeditor niet (RichText
      gooit onbekende inline-opmaak weg), dus het tweede streepje komt hier uit
      ::after. Zelfde resultaat, en de redacteur typt gewoon een alinea. */
.eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent);
  display: inline-block;
  flex: 0 0 auto;
}
/* Waar de HTML het span-element nog wel heeft, geen derde streepje. */
.eyebrow:has(.line)::after { content: none; }
/* En dezelfde uitzonderingen als styles.css maakt. Twee, niet een:
   - in een linkslijnende eyebrow staan geen streepjes, alleen in een
     gecentreerde;
   - onder 600px gaat het tweede streepje weg zodat de eyebrow netjes
     afbreekt (styles.css doet dat daar voor .eyebrow .line).
   Die tweede was ik vergeten, en dat kostte 568 afwijkende pixels op de
   tarievenpagina op telefoonbreedte: een streepje dat het origineel niet
   heeft, plus 22px verschuiving door de flex-gap. */
.eyebrow:not(.eyebrow--center)::after { display: none; }
@media (max-width: 600px) {
  .eyebrow::after { display: none; }
}

/* 4. Knoppen. core/button rendert <div class="wp-block-button"><a class=
      "wp-block-button__link">. De klasse die je in de editor meegeeft landt op
      de buitenste div, niet op de <a>. Daarom de .btn-regels hier doorgegeven
      aan de link, met de variant vanaf de wrapper.

      LET OP de naam. Zet je de bestaande klasse (btn--primary) op de wrapper,
      dan raakt die ook de wrapper zelf, want in het designsysteem is het een
      kale klasseselector. Op deze pagina viel dat niet op omdat de variant
      alleen kleuren zet; op over-mij zet dezelfde klasse ook padding en een
      rand, en dan krijg je een knop in een knop. Daarom een markering die in
      het designsysteem niet bestaat: knop-primair / knop-secundair. */
/* Bewust GEEN eigen layout op .wp-block-buttons: de knoppenrij draagt altijd
   ook de eigen klasse (.hero__actions / .actions) en die regelt richting, gat
   en uitlijning al, inclusief de mobiele kolomstand. Zet je hier layout neer,
   dan wint de adapter van de media query en blijven de knoppen op een telefoon
   naast elkaar staan. */
/* 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__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 16px 30px;
  border: 1px solid transparent;
  border-radius: 1px;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
  min-height: 48px;
}
.wp-block-button.knop-primair .wp-block-button__link {
  color: var(--primaryFg);
  background: var(--primaryBg);
  border-color: var(--primaryBd);
}
.wp-block-button.knop-primair .wp-block-button__link:hover {
  background: var(--primaryHover);
  border-color: var(--primaryHover);
}
.wp-block-button.knop-secundair .wp-block-button__link {
  color: var(--secFg);
  background: transparent;
  border-color: var(--secBd);
}
.wp-block-button.knop-secundair .wp-block-button__link:hover {
  border-color: var(--secHoverBd);
  color: var(--secHoverFg);
}

/* 5. core/image rendert een <figure> en zet de meegegeven class op die figuur,
      niet op de <img>. De figuur krijgt dus alles wat styles.css aan
      .portrait-photo geeft (de plaatsing), en de afbeelding erbinnen moet die
      figuur vullen.

      LET OP, hier is het 22-09 misgegaan: op de statische site bepaalt de
      afbeelding zelf haar breedte uit haar hoogte (width:auto bij een vaste
      hoogte). Zet je in WordPress width:100% op de img, dan krimpt de figuur
      niet mee en staat het portret in een te breed vak, met een gemeten
      afwijking van 17,7%. Daarom: op desktop bepaalt de HOOGTE de maat en volgt
      de breedte, precies zoals in het origineel. Op telefoonbreedte is het
      portret een band over de volle breedte; daar geldt het omgekeerde. */
.hero__portrait .wp-block-image {
  margin: 0;
}
.hero__portrait .wp-block-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
/* Dezelfde opbouw als styles.css: een basisregel zonder media query en daarboven
   één override vanaf 861px. Stond dit als twee media queries (tot 860 en vanaf
   861), dan viel een venster van bijvoorbeeld 860,5 px tussen wal en schip: dat
   komt voor op Windows met 125%-schaling, en dan had de afbeelding helemaal geen
   maat meer. */
@media (min-width: 861px) {
  .hero__portrait .wp-block-image img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-position: right bottom;
  }
}

/* 5b. IN DE EDITOR was het portret op de homepage onzichtbaar (gemeld 06-10).
       De editor zet op elk blok .block-editor-block-list__block met
       position:relative. Dat wint van position:absolute op .portrait-photo, de
       figuur valt terug in de normale stroom met breedte 0, en de afbeelding
       (max-width:100%) krimpt mee tot 0x0. Op de voorkant bestaat die wrapper
       niet. Hier de plaatsing terug, alleen in de editor. */
.editor-styles-wrapper .hero__portrait .portrait-photo {
  position: absolute;
}
/* Het blokkader (de figuur) precies om de afbeelding: de figuur houdt de
   plaatsing en de maximale breedte van de site, en de afbeelding past daarin
   op haar eigen verhouding. Zonder dit stond er een kader van 254px met de foto
   er half buiten, en werkten de handgrepen op dat kader. Het editorvenster is
   breder dan een browservenster, dus de foto staat hier iets kleiner dan op de
   site. Een poging met de afbeelding op eigen maat schoof haar over de tekst. */
@media (min-width: 861px) {
  .editor-styles-wrapper .hero__portrait .portrait-photo {
    width: max-content;
    height: auto;
  }
  .editor-styles-wrapper .hero__portrait .portrait-photo img {
    width: 100%;
    height: auto;
  }
}

/* 5d. IN DE EDITOR WAS DE HOMEPAGE VEEL SMALLER DAN OP DE SITE (gemeld 07-10).
       theme.json zet contentSize op 1200px, en de editor geeft elk blok op het
       hoogste niveau die maximale breedte. Op de site lopen die blokken over de
       volle breedte en zit de 1200px in een .container binnenin. Voor de meeste
       secties maakt dat niets uit, maar de hero rekent zijn inspringing uit de
       vensterbreedte ((100vw - 1200px)/2): in een hero van 1200px kwam die er
       dus nog eens bovenop, en de tekstkolom werd 323 in plaats van 454px
       (gemeten bij een editorvenster van 1631px). Hier dezelfde volle breedte
       als op de site. */
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > * {
  max-width: none;
}

/* 5c. GEEN HANDGREPEN OM AFBEELDINGEN TE VERGROTEN OF TE VERKLEINEN.
       Slepen aan zo'n handgreep schrijft een vaste breedte en hoogte op de
       afbeelding, en die wint op de site van de opmaak: het beeld staat dan op
       de verkeerde maat, en het portret op de homepage uit de plaatsing. Elke
       afbeelding op deze site heeft een maat uit het ontwerp, dus voor alle
       afbeeldingsblokken. Vervangen ("Vervangen" in de werkbalk) blijft werken. */
.editor-styles-wrapper .wp-block-image .components-resizable-box__handle {
  display: none;
}

/* 6. De blokeditor zet op <h1>/<h2> de klasse wp-block-heading. Die heeft geen
      eigen opmaak in dit thema; staat hier alleen als aantekening. */

/* 7. Mobiel: styles.css maakt .btn vol breed binnen een knoppenrij. Dezelfde
      afspraak voor de knoplink van core, inclusief de wrapper ertussen. */
@media (max-width: 480px) {
  .hero__actions .wp-block-button,
  .actions .wp-block-button { width: 100%; }
  .hero__actions .wp-block-button__link,
  .actions .wp-block-button__link { width: 100%; }
}

/* 8. Een knoppenrij die in de statische site een <p> was, krijgt de marges van
      een alinea terug. core/buttons is een <div> en heeft die niet. */
.wp-block-buttons.was-alinea { margin-block: 1em; }

/* De knop in de yms-kaart.
   In de statische site staat er één <a class="btn"> in de kaart, met
   .yms-card .btn { width: 100%; margin-bottom: 10px }. Als core/button zit die
   link in twee wrappers (wp-block-buttons > wp-block-button), en dan landt de
   breedte wel op de link maar de marge nergens: de kaart werd 10px korter en
   alles eronder schoof mee. Op de studiegids was dat 17% afwijkende pixels op
   telefoonbreedte, voor tien pixels.

   LET OP padding en niet margin. Met margin-bottom: 10px blijft het mis: de
   alinea eronder heeft margin-top: 14px, en tussen twee blokelementen vallen
   marges samen tot de grootste (14). In het origineel is de knop een
   inline-block en gebeurt dat niet, dus daar telt 10 + 14 = 24 op. Padding
   valt nooit samen, dus dit geeft dezelfde 24 zonder dat de rest van het
   designsysteem iets merkt. */
.yms-card .wp-block-buttons { padding-bottom: 10px; }
.yms-card .wp-block-button,
.yms-card .wp-block-button__link { width: 100%; }

/* Inline stijlen die klassen zijn geworden.
   Een style-attribuut overleeft de blokeditor niet: de editor bewaart alleen
   wat het blok kent en gooit de rest weg zodra iemand de regel aanpast. De
   opmaak moet wel blijven, dus staat hij hier. Zie INLINE_NAAR_KLASSE in
   tools/naar-blokken.py voor de vertaling. */
.yb-mt-0 { margin-top: 0; }
.yb-mb-10 { margin-bottom: 10px; }

/* De citatenlijst was een <ul class="quotes"> met <li> per getuigenis. Een
   core/list-item kan geen alinea's en geen <cite> dragen, dus het zijn nu
   core/quote-blokken in een groep. Daarmee verandert li in blockquote, en
   verhuizen deze drie regels mee. De rest van .quotes (de p en de cite) werkt
   ongewijzigd, want die selectors kijken niet naar de tussenliggende tag. */
.prose .quotes .wp-block-quote {
  margin: 0 0 22px;
  padding-left: 18px;
  border-left: 2px solid var(--accent);
}
.prose .quotes .wp-block-quote:last-child { margin-bottom: 0; }

/* Het deelcitaat op de bedankpagina.
   In de statische site staat de tekst rechtstreeks in de <blockquote>. Een
   core/quote heeft er blokken in nodig, dus er komt een <p> omheen, en die
   brengt de standaardmarges van een alinea mee: de pagina werd 60px hoger. */
.share-quote > p {
  margin: 0;
  /* En de opmaak van het citaat erven in plaats van die van .prose p: die
     geeft een grotere letter (17 om 15,5px) en een smallere maximumbreedte
     (583 om 720px), samen goed voor twee extra regels en 44px hoogte. */
  font: inherit;
  max-width: none;
  color: inherit;
}

/* Afbeeldingen die core/image zijn geworden.
   In de statische site staat er een kale <img>; core/image zet daar een
   <figure> omheen, en die brengt de standaardmarges van een figure mee plus een
   regelafstand onder de img (die is inline). Op de opleidingspagina werd de
   hero daardoor 16px hoger en schoof de hele pagina mee: goed voor 10%
   afwijkende pixels, voor iets wat je met het blote oog niet ziet. */
figure.wp-block-image { margin: 0; }
figure.wp-block-image img { display: block; }