/*
Theme Name: Counseling Daniella
Template: kadence
Version: 2.7.2
*/

:root {
  /* De site heeft alleen een lichte variant. Zonder deze declaratie inverteren
     Chrome (Auto Dark Theme) en Samsung Internet de pagina op toestellen die in
     donkere modus staan. */
  color-scheme: only light;

  /* Huisstijl, ongewijzigd -- hoort bij het logo van de klant. */
  --cd-primary: #1b6d8c;
  --cd-secondary: #a3c1c2;
  --cd-text: #303030;
  --cd-text-muted: #6d6d6d;
  --cd-accent: #db2e2f;
  --cd-grey: #eeeeee;

  /* Zachte vlakken. Bewust afgeleid van --cd-secondary en niet als nieuwe
     hexwaarde opgeschreven: het palet moet aantoonbaar ongewijzigd blijven. */
  --cd-wash: rgba(163, 193, 194, 0.18);
  --cd-wash-strong: rgba(163, 193, 194, 0.30);

  /* Eén vormtaal voor de hele site: afronding op één diagonaal, recht op de
     andere, om en om gespiegeld. Vervangt de 20px/5px-hoek van het origineel. */
  --cd-radius-panel: 0 34px 0 34px;
  --cd-radius-panel-alt: 34px 0 34px 0;
  --cd-radius-pill: 999px;

  /* Tekstkleur op een met --cd-primary gevuld vlak (bv. de menu-pil). Geen
     nieuwe merkkleur -- gewoon wit, genoemd naar waar het gebruikt wordt. */
  --cd-on-primary: #ffffff;

  --cd-measure: 68ch;
}

body {
  font-family: 'Karla', sans-serif;
  color: var(--cd-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Manrope', sans-serif;
}

h1, h2 {
  letter-spacing: -0.015em;
}

/* Leesbare regellengte. Kadence laat de tekst over de volle contentbreedte
   lopen; rond 68 tekens leest een lopende tekst prettiger. Alleen op directe
   kinderen, zodat tekst binnen kolommen en banden zijn eigen breedte houdt. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
  max-width: var(--cd-measure);
}

/* Sticky header: Kadence zet .kadence-sticky-header op .site-main-header-wrap
   (theme mod header_sticky = "main") en schakelt .item-is-stuck op datzelfde
   element bij het scrollen. Dat gedrag blijft ongemoeid; alleen de vulling
   verandert. */
.site-main-header-wrap {
  background-color: var(--cd-wash);
}

/* Contactgegevens als leesbare tekst in plaats van icoontjes. De labels die
   hier vroeger visueel verborgen stonden, zijn nu de zichtbare inhoud. */
.header-contact {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.9rem;
}

.header-contact-item {
  color: var(--cd-primary);
  text-decoration: none;
  line-height: 1.2;
}

.header-contact-item:hover,
.header-contact-item:focus-visible {
  text-decoration: underline;
}

/* Laatste menu-item ("Contact") als gevulde pil -- de navigatie krijgt daarmee
   een duidelijke primaire actie, wat het origineel niet heeft.
   Let op: :last-child is positioneel en gaat uit van de volgorde Home, Wie ben
   ik, Counselingproces, Voor wie, Contact. Voeg je in wp-admin een nieuwe
   pagina toe ná Contact, dan verschuift de pil zonder waarschuwing naar die
   nieuwe pagina en wordt Contact weer een gewone link -- zichtbaar op elke
   pagina, zonder voor de hand liggende oorzaak.
   Alleen desktop: het mobiele menu rendert in .mobile-menu-container
   .drawer-menu-container, een andere klasse, dus deze regel raakt het
   uitklapmenu niet.
   De ancestor .main-navigation en de klasse .menu-item zijn hier niet cosmetisch:
   Kadence's eigen kadence/assets/css/header.min.css bevat
   ".main-navigation .primary-menu-container > ul > li.menu-item > a{color:...}",
   drie klassen specifiek, en laadt ná cd-style.css. Een kortere selector zoals
   ".primary-menu-container > ul > li:last-child > a" telt maar twee klassen
   (.primary-menu-container en :last-child) en verliest dus die specificiteits-
   strijd -- gemeten: de pil-tekst bleef dan de gewone menutekstkleur i.p.v.
   wit, ook al staat hier color: var(--cd-on-primary). Met het volledige
   voorvoegsel telt deze regel vier klassen en wint hij altijd, ongeacht
   laadvolgorde. */
.main-navigation .primary-menu-container > ul > li.menu-item:last-child > a {
  background-color: var(--cd-primary);
  color: var(--cd-on-primary);
  border-radius: var(--cd-radius-pill);
  padding: 0.4em 1.2em;
}

.main-navigation .primary-menu-container > ul > li.menu-item:last-child > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item:last-child > a:focus-visible {
  background-color: var(--cd-text);
  color: var(--cd-on-primary);
}

/* Elke pagina begint met een beeld. Kadence zet daar standaard 5rem marge op
   .content-area plus 2rem padding op .entry-content-wrap boven; dat blijft
   weg, maar de banner zelf zit nu binnen de contentkolom.
   Let op de `.wp-site-blocks`-prefix: Kadence schrijft veel van zijn eigen
   regels met diezelfde voorouder in de selector. Zonder dat voorvoegsel zijn
   onze regels even specifiek maar staan ze eerder in de cascade, en
   verliezen ze dus -- exact de val waar de max-width van de hero-cover
   verderop opnieuw in trapte. */
.wp-site-blocks .content-area {
  margin-top: 0;
}

.home .entry-content-wrap {
  padding-top: 0;
}

.entry-header.page-title {
  text-align: left;
}

/* Het teal streepje van 5px links van de titel was rechtstreeks van het
   origineel overgenomen. Weg ermee; de hiërarchie komt nu van het kruimellabel
   erboven en van de grootte. */
.entry-header.page-title .entry-title {
  display: block;
  width: 100%;
  text-align: left;
  border-left: 0;
  padding-left: 0;
  line-height: 1.15;
}

.cd-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cd-text-muted);
  margin: 0 0 0.4rem;
}

/* Banner ná de titel. Kadence's eigen .post-thumbnail-markup wordt op deze
   pagina's uitgezet (zie het kadence_post_layout-filter in functions.php);
   wij renderen de banner zelf op kadence_single_after_entry_title, omdat
   order: -1 op de titel niets uithaalt -- .post-thumbnail en .entry zijn
   allebei directe kinderen van .content-wrap, terwijl de titel twee niveaus
   dieper zit. Geen 100vw-constructie meer zoals in het origineel: de banner
   zit nu gewoon binnen de contentkolom. */
.cd-page-banner {
  border-radius: var(--cd-radius-panel);
  overflow: hidden;
  height: 280px;
}

.cd-page-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 767px) {
  .cd-page-banner {
    height: 180px;
  }
}

/* Hero op de homepage. Het blok is alignfull en Kadence geeft dat negatieve
   marges; die moeten terug naar nul om het afgeronde, ingesprongen resultaat te
   krijgen. De donkere dim wordt een teal overlay en de tekst gaat van
   gecentreerd naar links onderin -- de gecentreerde titel op een verdonkerde
   foto is het meest herkenbare beeld van het origineel. */
.home .wp-block-cover.alignfull {
  width: auto;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  border-radius: var(--cd-radius-panel);
  overflow: hidden;
  align-items: flex-end;
}

/* De achtergrondkleur van de cover staat inline op het element in de
   pagina-inhoud (style="background-color:#000000") -- content die we niet
   aanraken. Een inline style wint van elke stylesheetregel zonder
   !important, dus zonder !important blijft de cover zwart en verandert
   alleen de opacity zichtbaar. */
.home .wp-block-cover .wp-block-cover__background {
  background-color: var(--cd-primary) !important;
  opacity: 0.45;
}

/* Kadence's eigen regel (`.alignfull > .wp-block-cover__inner-container {
   max-width: var(--global-content-width) }`) heeft dezelfde specificiteit
   als een kale `.home .wp-block-cover__inner-container` en staat later in de
   head, dus die wint zonder verdere hulp -- de computed max-width bleef op
   1290px staan. `.wp-block-cover.alignfull` erbij in de selector, zoals
   Kadence zelf doet, verhoogt de specificiteit zodat onze regel altijd wint,
   ongeacht laadvolgorde. margin-right: auto is daarmee academisch: zolang de
   max-width niet doorkomt vult het blok toch de hele regel. */
.home .wp-block-cover.alignfull .wp-block-cover__inner-container {
  margin-left: 0;
  margin-right: auto;
  max-width: 46rem;
  text-align: left;
}

/* De blokken in de cover dragen has-text-align-center als klasse in de
   pagina-inhoud. Die inhoud raken we niet aan, dus de uitlijning wordt hier
   overschreven -- vandaar !important. */
.home .wp-block-cover__inner-container .has-text-align-center {
  text-align: left !important;
}

.home .wp-block-cover__inner-container .wp-block-buttons {
  justify-content: flex-start;
}

/* Fluent Forms submit button: the plugin prints a per-form inline <style>
   block in the page body (form.fluent_form_N .ff-btn-submit{background-color:
   var(--fluentform-primary)}), which resolves to the plugin's own default
   blue (#1a7efb) via :root{--fluentform-primary:#1a7efb} in its own
   stylesheet. That inline block is plugin-generated markup, not a file we
   can edit, and its position in the DOM isn't guaranteed to come after our
   enqueued stylesheet, so redefining the custom property alone isn't
   reliable. Override the resolved color directly with !important instead. */
.ff-btn-submit:not(.ff_btn_no_style) {
  background-color: var(--cd-primary) !important;
}

/* Expertiseblokken als gestapelde banden.
   Het origineel toont drie gelijke kaarten naast elkaar met een icoon boven,
   een kader en een schaduw. Dat patroon is precies wat hier weg moet. De
   blokstructuur in de pagina-inhoud blijft ongewijzigd -- elke kolom bevat nog
   steeds beeld, titel, tekst en knop, in die volgorde -- alleen de opmaak
   eromheen is anders.

   De selector mikt op kolomblokken met drie kolommen; dat zijn precies de
   expertiseblokken. Blokken met twee kolommen (tekst naast beeld) blijven
   ongemoeid. Het extra :has(> .wp-block-column > .wp-block-image) sluit een
   derde geval uit: het drie-koloms blok op /voor-wie/ heeft ook drie kolommen
   met een kop, een tekst en een knop, maar het "beeld" daar is een los <img>
   in de koppelingslink van de h3, niet een apart .wp-block-image-blok. Zonder
   deze eis zou het rasterpatroon hieronder er een lege 260px-kolom in prikken
   waar geen beeld is om te vullen.

   De regels hieronder gaan uit van de kolomvorm die de inhoud vandaag heeft:
   precies één rechtstreeks-kind-afbeelding (.wp-block-image), gevolgd door
   precies drie tekstkinderen (kop, alinea, knoppenrij) die samen de tweede
   rastergroep innemen. grid-template-rows: repeat(3, auto) legt dat als drie
   expliciete rijen vast, zodat .wp-block-image daarnaast met grid-row: 1 / -1
   exact zo hoog wordt als die drie rijen samen -- -1 verwijst naar de laatste
   EXPLICIETE rijlijn, en die bestaat nu pas omdat we hem hier zelf definiëren.
   Komt er ooit een vierde tekstkind bij, dan valt dat in een automatisch
   gegenereerde vierde rij die buiten de drie expliciete rijen ligt: het beeld
   (dat maar tot rijlijn 4 reikt) strekt zich daar niet automatisch overheen,
   dus die vierde regel komt in de wastint te staan zonder beeld ernaast --
   geen kapotte layout, wel een beeld dat een tekstregel te kort mist. Heeft
   een kolom ooit een tweede .wp-block-image, dan is dat wél goed
   gedefinieerd, alleen niet zoals je zou verwachten: de selector hieronder is
   `> .wp-block-column > .wp-block-image`, zonder `:first-child`, dus beide
   beelden krijgen dezelfde grid-column en dezelfde grid-row: 1 / -1 en vallen
   precies over elkaar heen -- live geïnjecteerd getoetst, beide op 131,1299
   met een grootte van 260×295. Het omgekeerde geval is nog niet opgevangen:
   heeft één kolom in een blok dat verder aan de :has()-voorwaarden voldoet
   géén beeld, dan houdt die kolom een permanent lege 260px-track, want de
   :has()-guard hierboven wordt per blok geëvalueerd, niet per kolom. Geen van
   deze gevallen komt vandaag voor. */
.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(> .wp-block-column > .wp-block-image) {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(> .wp-block-column > .wp-block-image) > .wp-block-column {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: repeat(3, auto);
  align-items: center;
  gap: 1.75rem;
  flex-basis: auto;
  background-color: var(--cd-wash);
  border-radius: var(--cd-radius-panel);
  overflow: hidden;
  box-shadow: none;
  padding: 0 2rem 0 0;
}

/* Even banden gespiegeld: beeld rechts, tekst links. */
.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(> .wp-block-column > .wp-block-image) > .wp-block-column:nth-child(even) {
  grid-template-columns: 1fr 260px;
  border-radius: var(--cd-radius-panel-alt);
  padding: 0 0 0 2rem;
}

/* Het beeld krijgt zijn kolom expliciet toegewezen (1 voor oneven banden, 2
   voor even) in plaats van via `order`. `order` verandert bij CSS grid ook de
   plaatsingsvolgorde van het automatische-plaatsingsalgoritme, niet alleen de
   zichtbare volgorde -- daardoor schoof het beeld in even banden mee naar de
   laatst-gevulde rij in plaats van rij 1, en bleef het in de onderste hoek
   hangen. Expliciete grid-column is ondubbelzinnig, ongeacht hoeveel
   tekstrijen ernaast staan. grid-row: 1 / -1 laat het beeld alle drie de
   hierboven vastgelegde rijen vullen, zodat het net zo hoog wordt als de
   tekststapel ernaast in plaats van maar de eerste rij. */
.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(> .wp-block-column > .wp-block-image) > .wp-block-column > .wp-block-image {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: stretch;
  margin: 0;
  height: 100%;
}

.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(> .wp-block-column > .wp-block-image) > .wp-block-column:nth-child(even) > .wp-block-image {
  grid-column: 2;
}

/* Op /voor-wie/ is de bandafbeelding een gelinkte afbeelding, dus staat er een
   <a> tussen de figure en de <img>. Een anchor is standaard inline en heeft
   geen hoogte, waardoor `height: 100%` op de <img> nergens tegenaan resolveert
   en terugvalt op de min-height van 200px -- de band werd dan 263px hoog met
   een beeld van 200px en een strook lege wassing eronder. Deze regel geeft de
   tussenlaag dezelfde hoogte als de figure. Elders (homepage, /mijn-expertise/)
   is het figure > img zonder link en verandert deze regel niets. */
.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(> .wp-block-column > .wp-block-image) > .wp-block-column > .wp-block-image a {
  display: block;
  height: 100%;
}

.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(> .wp-block-column > .wp-block-image) > .wp-block-column > .wp-block-image img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
  display: block;
}

/* Titel, tekst en knop staan in de tweede rasterkolom. Ze zijn losse kinderen
   van .wp-block-column, dus ze krijgen elk expliciet hun kolompositie. */
.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(> .wp-block-column > .wp-block-image) > .wp-block-column > :not(.wp-block-image) {
  grid-column: 2;
  text-align: left;
}

.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(> .wp-block-column > .wp-block-image) > .wp-block-column:nth-child(even) > :not(.wp-block-image) {
  grid-column: 1;
  text-align: right;
}

/* Knopuitlijning volgt de tekstuitlijning in beide standen, niet alleen in de
   even banden -- zonder een expliciete waarde voor de oneven banden erft de
   knoppenrij de uitlijning van de pagina-inhoud, en die verschilt toevallig
   per pagina (center op de homepage, normal op /mijn-expertise/), waardoor
   dezelfde CSS twee verschillende resultaten gaf. */
.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(> .wp-block-column > .wp-block-image) > .wp-block-column > .wp-block-buttons {
  justify-content: flex-start;
}

.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(> .wp-block-column > .wp-block-image) > .wp-block-column:nth-child(even) > .wp-block-buttons {
  justify-content: flex-end;
}

/* De titels in de kaarten dragen has-text-align-center uit de pagina-inhoud.
   Die inhoud blijft ongemoeid. Voor de bandkoppen zelf doet deze regel
   feitelijk niets: elke has-text-align-center-drager in een band is ook een
   :not(.wp-block-image)-kind, en de links/rechts-regels hierboven (0,9,0,
   door het extra kolomkind- en nth-child-gewicht) zijn al specifieker dan
   deze regel (0,7,0) -- die winnen dus sowieso. Ze blijft staan als vangnet
   tegen WP-core's :root .has-text-align-center (0,2,0), voor het geval er
   ooit een has-text-align-center-drager bijkomt die niet onder de
   links/rechts-regels valt. Geen !important: dat overstemde eerder ook de
   links/rechts-regels zelf, wat de even banden op de homepage (waar de kop
   wél has-text-align-center draagt) links liet i.p.v. rechts. */
.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(> .wp-block-column > .wp-block-image) .has-text-align-center {
  text-align: inherit;
}

/* De bandkoppen op /voor-wie/ dragen een inline kleur uit Webhero's
   Froala-editor: <span style="color: rgb(27, 109, 140);"> rond de titeltekst.
   Daardoor renderden ze teal terwijl dezelfde koppen op de homepage en
   /mijn-expertise/ de gewone tekstkleur volgen. De span zit in de
   pagina-inhoud, die we niet aanraken -- en een inline style wint van elke
   regel zonder !important, net als bij de knopachtergrond hieronder.
   `inherit` pakt de kleur van de kop zelf, dus de bandkoppen zien er overal
   hetzelfde uit zonder dat hier een kleurwaarde herhaald wordt.
   Deze regel raakt alleen koppen binnen het bandenpatroon; de veertien andere
   koppen met zo'n span, op zes pagina's, blijven zoals ze zijn. */
.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(> .wp-block-column > .wp-block-image) > .wp-block-column :is(h2, h3) span[style] {
  color: inherit !important;
}

/* De "Lees meer"-knoppen in de banden als omlijnde pil: binnen een gevuld
   paneel oogt een tweede gevulde knop te zwaar. De achtergrondkleur staat
   inline op het element vanuit de pagina-inhoud, vandaar !important daar --
   maar niet op color: er staat geen inline tekstkleur, en de enige
   concurrerende regel (het thema's algemene knop-kleur, (0,1,0)) is al minder
   specifiek dan deze regel (0,7,0), dus !important was hier overbodig. */
.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(> .wp-block-column > .wp-block-image) .wp-block-button__link {
  background-color: transparent !important;
  border: 1.5px solid var(--cd-primary);
  color: var(--cd-primary);
}

/* Onder 782px stapelt Kadence de kolommen al. Daar wordt de band één kolom met
   het beeld boven -- vrijwel hetzelfde als nu, dus mobiel verandert er weinig. */
@media (max-width: 781px) {
  .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(> .wp-block-column > .wp-block-image) > .wp-block-column,
  .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(> .wp-block-column > .wp-block-image) > .wp-block-column:nth-child(even) {
    grid-template-columns: 1fr;
    padding: 0 0 1.5rem;
    text-align: left;
  }

  .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(> .wp-block-column > .wp-block-image) > .wp-block-column > :not(.wp-block-image),
  .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(> .wp-block-column > .wp-block-image) > .wp-block-column:nth-child(even) > :not(.wp-block-image) {
    grid-column: 1;
    text-align: left;
    padding-inline: 1.5rem;
  }

  /* De desktopregels wijzen het beeld een kolom en een rijspan (1 / -1) toe;
     bij één kolom breed op mobiel moet het beeld terug naar kolom 1 en een
     enkele rij, anders claimt het dezelfde cellen als de tekst eronder. De
     even-band-regel hierboven (buiten de media query, dus altijd actief)
     zet grid-column: 2 met :nth-child(even) in de selector; zonder diezelfde
     :nth-child(even) hier verliest deze reset de specificiteitsvergelijking
     en blijft het beeld van de even banden op kolom 2 van een raster dat nog
     maar één kolom breed is -- vandaar de aparte even-regel hieronder. */
  .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(> .wp-block-column > .wp-block-image) > .wp-block-column > .wp-block-image,
  .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(> .wp-block-column > .wp-block-image) > .wp-block-column:nth-child(even) > .wp-block-image {
    grid-column: 1;
    grid-row: auto;
  }

  .entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)):has(> .wp-block-column > .wp-block-image) > .wp-block-column:nth-child(even) > .wp-block-buttons {
    justify-content: flex-start;
  }
}

/* Fix-ronde 1: footerachtergrond --cd-primary, zoals in het door de klant
   goedgekeurde ontwerp -- het witte origineel in dit blok kwam voort uit een
   verkeerde aanname in de taakomschrijving (zie task-9-report.md,
   fix-ronde 1). .site-footer-wrap omvat zowel .site-middle-footer-wrap
   (contactwidget + merkblok) als .site-bottom-footer-wrap (de onderste
   regel) zonder marge ertussen, dus de vulling loopt naadloos door beide
   rijen -- geen witte band boven, tussen of onder. */
.site-footer-wrap {
  background-color: var(--cd-primary);
}

/* Tekst in de drie footerwidgets (contact, merkblok, onderste regel) op die
   teal ondergrond: het thema's gewone --cd-text (#303030, 2,27:1 op
   --cd-primary) is daar onleesbaar. --cd-on-primary is dezelfde lichte kleur
   die de menu-pil hierboven al gebruikt voor tekst op een --cd-primary-vlak.
   .footer-widget-area dekt alle drie de widgets -- ook de onderste regel,
   die naast site-info ook de klasse footer-widget-area draagt. Alle zes
   kopniveaus hebben een eigen regel nodig: Kadence kleurt h1/h2/h3 met
   --global-palette3 (hetzelfde donkere #303030) en h4/h5/h6 met de eigen
   varianten daarvan, allemaal via kale elementselectors die rechtstreeks op
   het element matchen en dus winnen van een geërfde kleur, ongeacht
   specificiteit -- vandaar alle niveaus hier, niet alleen de h2 die de
   huidige footerwidgets toevallig gebruiken. Een toekomstige widget met een
   h3 zou anders zonder waarschuwing #303030 op teal tonen (2,27:1).
   De link-regel hieronder geldt bewust niet voor .site-info: de
   .footer-bottom-line a-regel verderop zet al color: inherit en erft daarmee
   gewoon deze kleur. Een aparte a-regel voor .site-info zou dezelfde
   specificiteit hebben als die regel en de uitkomst zou dan van de
   bronvolgorde afhangen in plaats van van de bedoeling. */
.footer-widget-area,
.footer-widget-area :is(h1, h2, h3, h4, h5, h6) {
  color: var(--cd-on-primary);
}

.footer-widget-area:not(.site-info) a {
  color: var(--cd-on-primary);
}

/* Fix-ronde 2: licht paneel achter het footerlogo. Het beeld zelf staat op de
   lijst van wat niet mag veranderen -- geen filter, geen mix-blend-mode, geen
   herkleuring van het beeldbestand. Maar het donkere woordmerk en de
   bijna-teal uil verdwijnen zonder ingrijpen tegen de --cd-primary-
   footerachtergrond van fix-ronde 1; alleen de lichtgroene onderregel bleef
   leesbaar. Een lichte ondergrond eronder lost dat op zonder de afbeelding
   zelf aan te raken.
   .footer-logo is de <img> rechtstreeks; de Kadence-widgetmarkup zet er geen
   eigen wrapper omheen, dus padding/achtergrond/radius gaan op het
   beeldelement zelf -- een replaced element aanvaardt die net zo goed als
   een gewone doos. Het paneel blijft daardoor exact zo groot als het logo
   plus de padding, niet de hele kolombreedte: .footer-logo had al
   display:block en max-width:100% (Kadence's eigen regel) t.o.v. zijn eigen
   intrinsieke maat, niet t.o.v. de bredere .footer-brand-kolom, dus de
   toegevoegde padding rekt niets op.
   --cd-radius-panel is dezelfde afronding als de paginabanner en de oneven
   expertisebanden hierboven -- geen nieuwe hoek, dezelfde vormtaal.
   Deze truc werkt omdat dit specifieke PNG-bestand alfa-transparantie heeft
   en geen tekening in de twee afgeronde hoeken (rechtsboven, linksonder --
   de hoeken die --cd-radius-panel rondt): de witte achtergrond schijnt daar
   door de al-transparante pixels van het beeld heen, zonder dat er iets
   geclipt wordt. Dat is een eigenschap van dít bestand, niet van logo's in
   het algemeen -- vervangt de klant het logo ooit door een versie zonder
   transparante hoeken (bv. een ondoorzichtige rechthoek), dan verdwijnt de
   ronding achter het beeld, of ontstaat er juist een onbedoeld kader,
   afhankelijk van hoe de browser border-radius op vervangen content clipt. */
.footer-logo {
  /* Lokale eigenschap i.p.v. de padding-waarde hieronder ook los in de
     max-width-berekening te herhalen: één plek om te wijzigen, geen twee
     getallen die met de hand in sync gehouden moeten worden. */
  --cd-footer-logo-pad-x: 1.25rem;
  /* Een globale reset zet box-sizing: border-box op alle elementen, ook op
     dit beeld. Zonder deze regel zou de padding hierboven in de al
     vastgelegde breedte "bijten" en het logo dus zichtbaar kleiner renderen
     dan het bestand is -- exact de ongewenste schaling. */
  box-sizing: content-box;
  /* Kadence's eigen img{max-width:100%} beperkt het beeld tot de breedte van
     zijn containing block (.footer-brand, ±606px op 1440px) -- een
     percentage in max-width verwijst altijd naar de containing block, nooit
     naar de intrinsieke maat van het beeld zelf. Wat het logo op desktop
     wél op 450px houdt, is het width="450"-attribuut in de markup; max-width
     grijpt daar pas in onder ongeveer 600px containerbreedte. Zonder
     correctie telt die 100% de padding niet mee, waardoor het paneel
     (beeld + padding) net zo breed wordt als het beeld alléén altijd al was
     en daarmee over de kolomrand heen steekt -- gemeten op 375px vóór deze
     regel: rand van het paneel bij 391px terwijl de kolom op 351px eindigt,
     met een afgeknot uiterlijk tot gevolg. De aftrek van de volledige
     horizontale padding houdt het totaal (beeld + padding) binnen dezelfde
     100% als voorheen; op 1440px is het beeld met 450px ruim onder deze
     grens, dus daar verandert er niets. */
  max-width: calc(100% - 2 * var(--cd-footer-logo-pad-x));
  background-color: var(--cd-on-primary);
  border-radius: var(--cd-radius-panel);
  padding: 0.75rem var(--cd-footer-logo-pad-x);
}

/* Onderste footerregel. De inhoud staat in de theme mod footer_html_content
   (zie build/footer-bottom.php); dit regelt alleen de opmaak. */
.footer-bottom-line {
  text-align: center;
}

.site-footer-row-container-inner .footer-html,
.footer-bottom-line {
  width: 100%;
}

.footer-bottom-line a {
  color: inherit;
  text-decoration: underline;
}

/* Hover/focus stond hier vóór Taak 9 op --cd-primary (5,81:1 op het toen
   witte wit -- prima leesbaar). Taak 9 Stap 1 zette dit om naar
   --cd-secondary (#a3c1c2); dat gaf op wit zelf al maar 1,92:1, onder AA,
   wat toen niet opviel omdat de aandacht naar de footerachtergrond ging. Op
   de --cd-primary-footerachtergrond van fix-ronde 1 meet --cd-secondary
   3,03:1 -- nog altijd onder de 4,5:1 die tekst nodig heeft. --cd-grey
   (#eeeeee) is de enige andere lichte token in de palet en meet 5,01:1 op
   --cd-primary: ruim boven AA, en nog altijd een zichtbare kleurverschuiving
   t.o.v. de --cd-on-primary basiskleur. De link is toch al onderstreept, dus
   de wisseling hoeft niet de enige aanwijzing te zijn. */
.footer-bottom-line a:hover,
.footer-bottom-line a:focus-visible {
  color: var(--cd-grey);
}

/* Fix-ronde 3: zichtbare toetsenbordfocus. De kleurstap hierboven (wit naar
   --cd-grey) is op zichzelf geen bruikbare focus-aanwijzing: gemeten
   ±1,16:1, ver onder de 3:1 die een niet-tekstuele aanwijzing nodig heeft,
   en Kadence onderdrukt de standaard-outline sowieso via
   ":where(html:not(.no-js)) .hide-focus-outline *:focus{outline:0}" (buiten
   deze taak -- dat hoort bij het thema's eigen detectiescript voor
   toetsenbord- vs. muisgebruik). :where() telt niet mee voor specificiteit,
   dus die regel weegt maar (0,2,0); deze selector (.footer-bottom-line +
   :focus-visible + het element a) weegt (0,2,1) en wint dus zonder
   !important. --cd-on-primary als outlinekleur meet 5,81:1 op de
   --cd-primary-footerachtergrond -- ruim boven de 3:1-drempel. */
.footer-bottom-line a:focus-visible {
  outline: 2px solid var(--cd-on-primary);
  outline-offset: 2px;
}

/* Footerknoppen naast elkaar. Kadence rendert .wp-block-button standaard als
   blok, waardoor ze onder elkaar belanden. */
.footer-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.footer-buttons .wp-block-button {
  margin: 0;
}

/* Knopvorm. Het origineel gebruikte een asymmetrische radius (20px op de ene
   diagonaal, 5px op de andere); dat is precies zo'n herkenbaar vormdetail als
   we hier kwijt willen. Nu een volle pil. Kadence' eigen
   buttons_border_radius neemt één waarde per breekpunt en kan dat wel aan,
   maar de Fluent Forms-knop valt buiten die instelling -- daarom staat de
   vorm hier, voor alle knopsoorten tegelijk. */
.wp-site-blocks .wp-block-button__link,
.wp-site-blocks .kb-button,
.wp-site-blocks .button,
.ff-btn-submit:not(.ff_btn_no_style) {
  border-radius: var(--cd-radius-pill);
}

/* Eerste footerknop ("Kennismakingsgesprek"), gevuld. Kadence geeft een knop
   zonder is-style-outline of eigen achtergrond standaard --cd-primary als
   vulling, via de kale klasseselector .wp-block-button__link -- dat is één
   klasse (0,1,0). Deze regel telt drie klassen plus een pseudo-klasse
   (0,4,0) en wint daar op specificiteit alleen ruimschoots van; deze knop
   draagt geen inline style (anders dan de tweede knop hieronder), dus
   !important is hier niet nodig. Geverifieerd door de twee declaraties in de
   live CSSOM te schrappen (met transitions uitgeschakeld, want anders leest
   een vluchtige meting misleidend door de overgangsanimatie): pas het
   verdwijnen van de regel zelf veranderde de computed waarden, niet het
   verdwijnen van alleen !important -- dat bevestigt dat deze regel wint,
   niet de escalatie.
   Zonder deze regel verdwijnt de knop volledig tegen de --cd-primary-
   footerachtergrond van fix-ronde 1. Omgekeerde vulling: licht vlak, donkere
   teal-tekst -- leest nog altijd als de primaire actie.
   Let op: :nth-child(1) is positioneel, zie de toelichting bij :nth-child(2)
   hieronder. */
.footer-buttons .wp-block-button:nth-child(1) .wp-block-button__link {
  background-color: var(--cd-on-primary);
  color: var(--cd-primary);
}

/* Tweede footerknop als omlijnde pil. De secundaire kleur staat als inline
   style op het element (zie build/footer-widgets.php), dus de achtergrond moet
   met !important overschreven worden -- inline wint anders altijd.
   Rand en tekst waren --cd-primary; op de --cd-primary-footerachtergrond van
   fix-ronde 1 versmelt dat met de ondergrond, dus nu de lichte kleur --
   zelfde reden als bij de eerste knop hierboven.
   Let op: :nth-child(2) is positioneel en gaat uit van de volgorde
   "Kennismakingsgesprek" (eerste knop, gevuld), "Mijn expertises" (tweede
   knop, deze regel). Verwissel je de twee footerwidgets in wp-admin, dan
   volgt deze regel niet mee en wordt de eerste (primaire) knop transparant. */
.footer-buttons .wp-block-button:nth-child(2) .wp-block-button__link {
  background-color: transparent !important;
  border: 1.5px solid var(--cd-on-primary);
  color: var(--cd-on-primary) !important;
}