.wsa-reader {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  --wsa-pill-pad-start: 14px;
  --wsa-pill-pad-end: 20px;
  padding: 0 var(--wsa-pill-pad-end) 0 var(--wsa-pill-pad-start);
  margin-block: 0;
  color: #193263;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(25, 50, 99, 0.12);
  overflow: visible;
  transition: gap 260ms ease, max-width 260ms ease, box-shadow 180ms ease;
  white-space: nowrap;
  font-family: var(--ff_primary, inherit) !important;
}

.wsa-reader button,
.wsa-reader select {
  font-family: var(--ff_primary, inherit) !important;
}

.wsa-reader.is-collapsed {
  gap: 0;
  max-width: 250px;
}

.wsa-reader--left {
  margin-left: 0;
  margin-right: auto;
}

.wsa-reader--center {
  margin-left: auto;
  margin-right: auto;
}

.wsa-reader--right {
  margin-left: auto;
  margin-right: 0;
}

.wsa-reader--position-before_title {
  margin-left: 0;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 16px;
}

.wsa-reader__playback {
  display: contents;
}

.wsa-reader:not(.is-playing) .wsa-reader__playback {
  display: none;
}

.wsa-reader__choices {
  position: fixed;
  z-index: 999996;
  display: grid;
  gap: 4px;
  width: min(296px, calc(100vw - 24px));
  padding: 10px;
  border: 1px solid #d8deea;
  border-radius: 8px;
  background: #fff;
  color: #193263;
  box-shadow: 0 18px 44px rgba(25, 50, 99, 0.22);
  font-family: var(--ff_primary, inherit) !important;
}

.wsa-reader__choices[hidden] {
  display: none !important;
}

/* Alleen zichtbaar als het menu een paneel onderaan het scherm is; op desktop
   staat het kaartje naast de knop en is verduisteren misplaatst. JS toont hem
   enkel op mobiel, deze regel vangt een scherm dat na het openen breder wordt. */
.wsa-reader-choices-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999995;
  background: rgba(25, 50, 99, 0.55);
  overscroll-behavior: contain;
  touch-action: none;
}

.wsa-reader-choices-backdrop[hidden] {
  display: none !important;
}

@media (min-width: 641px) {
  .wsa-reader-choices-backdrop {
    display: none !important;
  }
}

.wsa-reader__choices-spacer {
  display: block;
  width: 100%;
}

.wsa-reader__choices-spacer[hidden] {
  display: none !important;
}

.wsa-reader__choices-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.wsa-reader__choices-title {
  margin: 0;
  padding: 6px 10px;
  color: #193263;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.wsa-reader__choices-close {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #193263;
  cursor: pointer;
  font-family: var(--ff_primary, inherit) !important;
  font-size: 13px;
  line-height: 1.2;
}

.wsa-reader__choices-close:hover {
  background: #f7f9fb;
}

.wsa-reader__choices-close:focus-visible {
  outline: 3px solid #f5d547;
  outline-offset: 1px;
}

.wsa-reader__choices-close svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.wsa-reader__choice {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #193263;
  cursor: pointer;
  font-family: var(--ff_primary, inherit) !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: start;
}

.wsa-reader__choice:hover {
  background: #eef1f7;
  color: #193263;
}

.wsa-reader__choice:focus-visible {
  outline: 3px solid #f5d547;
  outline-offset: 1px;
}

/* Taalkeuze: een tweede weergave in hetzelfde paneel in plaats van een apart
   venster. Het hoofdmenu is dan verborgen, het sluiten van het paneel zet het
   terug. Elke declaratie staat er bewust bij; het thema eromheen zet zelf
   flex- en uitlijningsregels op knoppen en alinea's. */
.wsa-reader__languages,
.wsa-reader__sizes {
  display: none;
}

.wsa-reader__choices.is-language-view .wsa-reader__languages,
.wsa-reader__choices.is-size-view .wsa-reader__sizes {
  display: grid;
  gap: 4px;
}

.wsa-reader__choices.is-language-view > .wsa-reader__choice,
.wsa-reader__choices.is-language-view > .wsa-reader__choices-note,
.wsa-reader__choices.is-language-view .wsa-reader__choices-title,
.wsa-reader__choices.is-size-view > .wsa-reader__choice,
.wsa-reader__choices.is-size-view > .wsa-reader__choices-note,
.wsa-reader__choices.is-size-view .wsa-reader__choices-title {
  display: none;
}

.wsa-reader__languages-title {
  margin: 0;
  padding: 6px 10px;
  color: #193263;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-align: start;
}

.wsa-reader__language {
  justify-content: space-between;
}

.wsa-reader__language[hidden] {
  display: none !important;
}

.wsa-reader__language-name {
  font-size: 17px;
  font-weight: 700;
}

.wsa-reader__language-hint {
  color: #445272;
  font-size: 14px;
  font-weight: 400;
}

.wsa-reader__language.is-active {
  background: #eef1f7;
  box-shadow: inset 0 0 0 2px #193263;
}

.wsa-reader__choice:disabled {
  opacity: 0.45;
  cursor: default;
}

.wsa-reader__choice:disabled:hover {
  background: transparent;
  color: #193263;
}

.wsa-reader__choices-note {
  margin: 4px 0 0;
  padding: 8px 10px 4px;
  color: #193263;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-align: start;
}

.wsa-reader__choices-note[hidden] {
  display: none !important;
}

/* Voortgang en foutmelding: kortstondig, vast onderaan, in dezelfde stijl als de
   balk van "Leg een woord uit". */
.wsa-reader-translate-status {
  display: flex;
  position: fixed;
  z-index: 999997;
  right: 24px;
  bottom: 24px;
  left: 24px;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  max-width: 560px;
  min-height: 56px;
  margin: 0 auto;
  padding: 10px 16px;
  border: 1px solid #193263;
  border-radius: 8px;
  background: #193263;
  color: #fff;
  box-shadow: 0 16px 38px rgba(25, 50, 99, 0.35);
  font-family: var(--ff_primary, inherit) !important;
}

.wsa-reader-translate-status[hidden] {
  display: none !important;
}

.wsa-reader-translate-status__spinner {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: wsa-reader-spin 900ms linear infinite;
}

.wsa-reader-translate-status.is-error .wsa-reader-translate-status__spinner {
  display: none;
}

.wsa-reader-translate-status .wsa-reader-translate-status__text {
  flex: 0 1 auto;
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  text-align: start;
}

.wsa-reader-translate-status .wsa-reader-translate-status__close {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #fff;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-family: var(--ff_primary, inherit) !important;
  font-size: 15px;
  font-weight: 600;
}

.wsa-reader-translate-status__close[hidden] {
  display: none !important;
}

.wsa-reader-translate-status__close:focus-visible,
.wsa-reader-translate-banner__back:focus-visible {
  outline: 3px solid #f5d547;
  outline-offset: 2px;
}

/* De blijvende waarschuwing staat in de pagina zelf, bovenaan de hoofdinhoud, en
   niet vast onderaan het scherm: daar zou hij de laatste regels bedekken. */
.wsa-reader-translate-banner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid #193263;
  border-radius: 8px;
  background: #fff;
  color: #193263;
  font-family: var(--ff_primary, inherit) !important;
}

.wsa-reader-translate-banner[hidden] {
  display: none !important;
}

.wsa-reader-translate-banner .wsa-reader-translate-banner__text {
  flex: 1 1 260px;
  margin: 0;
  color: #193263;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  text-align: start;
}

.wsa-reader-translate-banner .wsa-reader-translate-banner__back {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #193263;
  border-radius: 6px;
  background: #193263;
  color: #fff;
  cursor: pointer;
  font-family: var(--ff_primary, inherit) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

@media (max-width: 640px) {
  .wsa-reader-translate-status {
    right: 12px;
    bottom: 12px;
    left: 12px;
  }

  .wsa-reader-translate-banner {
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wsa-reader-translate-status__spinner {
    animation: none;
  }
}

/* Voorlezen is waar de meeste bezoekers voor komen. Drie keuzes die er identiek
   uitzien dwingen tot lezen; één gevulde knop laat het oog de hoofdactie meteen
   vinden. Staat na de hover-regel hierboven, anders wint die van deze kleur. */
.wsa-reader__choice--primary {
  background: #193263;
  color: #fff;
}

.wsa-reader__choice--primary .wsa-reader__choice-icon {
  color: #fff;
}

.wsa-reader__choice--primary:hover {
  background: #0f2247;
  color: #fff;
}

.wsa-reader__choice-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #193263;
}

.wsa-reader__choice-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.wsa-reader__choice-icon--text {
  font-size: 16px;
  font-weight: 700;
}

.wsa-reader-host {
  position: relative;
}

.wsa-reader.wsa-reader--overlay {
  position: absolute;
  bottom: 16px;
  z-index: 5;
  margin: 0;
}

.wsa-reader.wsa-reader--overlay.wsa-reader--left {
  left: 16px;
  right: auto;
}

.wsa-reader.wsa-reader--overlay.wsa-reader--center {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.wsa-reader.wsa-reader--overlay.wsa-reader--right {
  left: auto;
  right: 16px;
}

.wsa-reader.wsa-reader--overlay.wsa-reader--home-hero {
  left: 50%;
  right: auto;
  bottom: 12px;
  transform: translateX(-50%);
}

.wsa-reader__listen {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #193263;
  cursor: pointer;
  font-family: var(--ff_primary, inherit) !important;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
}

/* Hovereffect van de pil. Het klikvlak was alleen de knop zelf, niet de witte
   rand eromheen. Het pseudo-element legt het hele pilvlak onder de tekst en
   telt als onderdeel van de knop, dus klikken, hover en focus gelden nu overal
   op de pil. Het staat uit tijdens voorlezen: dan staan er meer knoppen in de
   pil en mag dit vlak daar niet overheen liggen. */
.wsa-reader__listen {
  position: relative;
  isolation: isolate;
}

.wsa-reader:not(.is-playing) .wsa-reader__listen::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(-1 * var(--wsa-pill-pad-end)) 0 calc(-1 * var(--wsa-pill-pad-start));
  border-radius: 999px;
  transition: background-color 150ms ease;
}

/* Tint, rand en onderstreping: drie signalen, dus niet alleen kleur. De rand is
   een outline en geen box-shadow, want schaduwen verdwijnen in Windows Hoog
   contrast. Alleen bij een aanwijsapparaat met hover, zodat de pil op een
   telefoon niet "blijft hangen" na een tik. */
@media (hover: hover) {
  .wsa-reader:not(.is-playing):not(.is-preparing) .wsa-reader__listen:hover:not(:disabled)::after {
    background: #eef1f7;
    outline: 2px solid #193263;
    outline-offset: -2px;
  }

  .wsa-reader:not(.is-playing):not(.is-preparing) .wsa-reader__listen:hover:not(:disabled) .wsa-reader__listen-text {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wsa-reader:not(.is-playing) .wsa-reader__listen::after {
    transition: none;
  }
}

.wsa-reader__listen:focus,
.wsa-reader__stop:focus,
.wsa-reader__speed-dot:focus,
.wsa-reader__select:focus {
  outline: 0;
  box-shadow: none;
}

/* De focusring hoort om de hele pil, niet om de knop erbinnen. Het klikvlak is
   immers de hele pil; een ring om alleen de knop laat links en rechts twee
   streepjes zien, want de boven- en onderrand vallen net buiten de pil en
   verdwijnen tegen de achtergrond.

   De selectors noemen :focus-visible twee keer. Dat is geen vergissing:
   AutomaticCSS zet met `body.bricks-is-frontend.bricks-is-frontend
   :focus-visible` een eigen ring neer, en die weegt zwaarder dan een enkele
   klasse met één pseudo-klasse. Met de herhaling wint deze regel, zonder
   !important, dat later niets meer laat overschrijven. */
.wsa-reader:not(.is-playing) .wsa-reader__listen:focus-visible:focus-visible {
  outline: none;
  box-shadow: none;
}

.wsa-reader:not(.is-playing) .wsa-reader__listen:focus-visible::after {
  outline: 3px solid #f5d547;
  outline-offset: 2px;
  box-shadow: 0 0 0 1px #193263;
}

/* Tijdens het voorlezen staat dat pilvlak uit, want dan staan er meer knoppen
   in de pil. De ring hoort dan wel om de knop zelf. */
.wsa-reader.is-playing .wsa-reader__listen:focus-visible:focus-visible,
.wsa-reader .wsa-reader__stop:focus-visible:focus-visible,
.wsa-reader .wsa-reader__speed-dot:focus-visible:focus-visible {
  outline: 3px solid #f5d547;
  outline-offset: 3px;
  box-shadow: 0 0 0 1px #193263;
}

.wsa-reader__select:focus-visible {
  outline: 0;
  box-shadow: none;
}

.wsa-reader__icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 25px;
  height: 25px;
  color: #193263;
}

.wsa-reader__icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wsa-reader__listen-text {
  display: inline-block;
  max-width: 220px;
  opacity: 1;
  overflow: hidden;
  white-space: nowrap;
}

.wsa-reader__stop {
  display: none;
  min-height: 26px;
  padding: 3px 9px;
  border: 1px solid #d8deea;
  border-radius: 999px;
  background: #f7f9fb;
  color: #193263;
  cursor: pointer;
  font-family: var(--ff_primary, inherit) !important;
  font-size: 13px;
  font-weight: 400;
}

.wsa-reader__stop:not(:disabled) {
  display: inline-flex;
  align-items: center;
}

.wsa-reader__divider {
  align-self: center;
  width: 1px;
  max-width: 1px;
  height: 22px;
  background: #d8deea;
  flex: 0 0 auto;
  opacity: 1;
  overflow: hidden;
  transition: max-width 260ms ease, opacity 180ms ease;
}

.wsa-reader.is-collapsed .wsa-reader__stop,
.wsa-reader.is-collapsed .wsa-reader__status {
  display: none;
}

.wsa-reader.is-collapsed .wsa-reader__divider,
.wsa-reader.is-collapsed .wsa-reader__speed,
.wsa-reader.is-collapsed .wsa-reader__field {
  max-width: 0;
  opacity: 0;
  pointer-events: none;
}

.wsa-reader__speed {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  flex: 0 0 auto;
  max-width: 92px;
  opacity: 1;
  overflow: hidden;
  transition: max-width 260ms ease, opacity 180ms ease;
}

.wsa-reader__speed-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 17px;
  height: 17px;
  color: #8e897d;
}

.wsa-reader__speed-icon svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.wsa-reader__speed-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d6d1c4;
  cursor: pointer;
}

.wsa-reader__speed-dot.is-active,
.wsa-reader__speed-dot:hover,
.wsa-reader__speed-dot:focus-visible {
  background: #193263;
}

.wsa-reader__speed-dot--muted:not(.is-active) {
  background: #d6d1c4;
}

.wsa-reader__field[hidden] {
  display: none;
}

.wsa-reader__field {
  position: relative;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  flex: 0 0 auto;
  max-width: 172px;
  opacity: 1;
  overflow: hidden;
  transition: max-width 260ms ease, opacity 180ms ease;
}

.wsa-reader__field:focus-within {
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(25, 50, 99, 0.16);
}

.wsa-reader__voice-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 17px;
  height: 17px;
  color: #8e897d;
}

.wsa-reader__voice-icon svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.wsa-reader__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.wsa-reader__select {
  max-width: 125px;
  min-height: 30px;
  padding: 7px 18px 4px 0;
  border: 0;
  background: transparent;
  color: #8e897d;
  cursor: pointer;
  font-family: var(--ff_primary, inherit) !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  appearance: none;
}

.wsa-reader__select option {
  font-size: 12px;
}

.wsa-reader__field::after {
  position: absolute;
  right: 2px;
  color: #8e897d;
  content: "▾";
  font-size: 12px;
  pointer-events: none;
}

.wsa-reader__select:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.wsa-reader__status {
  flex: 0 0 auto;
  max-width: 190px;
  margin: 0;
  color: #8e897d;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wsa-reader__status:empty {
  display: none;
}

.wsa-reader__reading-target {
  outline: 2px solid rgba(245, 213, 71, 0.72) !important;
  outline-offset: 4px;
}

.wsa-reader__reading-highlight {
  background: #fff1a8 !important;
}

.wsa-reader-simplified .wsa-reader__reading-highlight {
  box-decoration-break: clone;
}

.wsa-reader__word-highlight {
  background: #f5d547 !important;
  color: inherit !important;
}

.wsa-reader-word-picker-active {
  cursor: help;
}

.wsa-reader-word-picker-active :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, td, th) {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(25, 50, 99, 0.55);
}

.wsa-reader__explanation-highlight {
  padding: 0 2px;
  background: #fff1a8;
  outline: 2px solid #f5d547;
  outline-offset: 1px;
}

.wsa-reader-word-picker {
  display: flex;
  position: fixed;
  z-index: 999997;
  right: 24px;
  bottom: 24px;
  left: 24px;
  gap: 12px;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  max-width: 760px;
  padding: 10px 12px 10px 22px;
  margin: 0 auto;
  /* Donkerblauw in plaats van wit. Wit dreef randloos op een pagina met witte
     achtergrond — de rand haalde met 1,4:1 de 3:1 van WCAG 1.4.11 niet — en
     oogde als een mededeling in plaats van een modus die aanstaat. */
  border: 1px solid #193263;
  border-radius: 8px;
  background: #193263;
  color: #fff;
  box-shadow: 0 16px 38px rgba(25, 50, 99, 0.35);
  font-family: var(--ff_primary, inherit) !important;
}

.wsa-reader-word-picker[hidden] {
  display: none !important;
}

.wsa-reader-word-picker p {
  flex: 1 1 auto;
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
}

.wsa-reader-word-picker__selected,
.wsa-reader-word-picker__close,
.wsa-reader-word-explanation__close,
.wsa-reader-word-explanation__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* De knop wisselt van tekst ("Lees uitleg voor", "Pauzeer", "Ga verder").
   Zonder vaste minimumbreedte verspringt hij bij elke wisseling. */
.wsa-reader-word-explanation__listen {
  min-width: 172px;
  max-width: 100%;
}

.wsa-reader-word-explanation__stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #193263;
  border-radius: 6px;
  background: #fff;
  color: #193263;
  cursor: pointer;
  font-family: var(--ff_primary, inherit) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.wsa-reader-word-explanation__listen[hidden],
.wsa-reader-word-explanation__stop[hidden] {
  display: none !important;
}

.wsa-reader-word-explanation__listen {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #193263;
  border-radius: 6px;
  background: #fff;
  color: #193263;
  cursor: pointer;
  font-family: var(--ff_primary, inherit) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.wsa-reader-word-picker__selected[hidden] {
  display: none !important;
}

.wsa-reader-word-explanation__listen {
  border-color: #193263;
  background: #193263;
  color: #fff;
}

/* Op de donkerblauwe balk kan een donkerblauwe knop niet: het geel is hier de
   hoofdactie, de omlijnde witte knop het afsluiten. */
.wsa-reader-word-picker__selected {
  border-color: #f5d547;
  background: #f5d547;
  color: #193263;
}

.wsa-reader-word-picker__close {
  border-color: #fff;
  background: transparent;
  color: #fff;
}


.wsa-reader-word-picker__close svg,
.wsa-reader-word-explanation__close svg,
.wsa-reader-word-explanation__listen svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.wsa-reader-word-picker button:hover,
.wsa-reader-word-explanation button:hover {
  filter: brightness(0.94);
}

.wsa-reader-word-picker button:focus-visible,
.wsa-reader-word-explanation button:focus-visible {
  outline: 3px solid #f5d547;
  outline-offset: 2px;
}

/* Op de donkerblauwe balk valt een gele ring weg tegen de gele knop ernaast.
   Staat bewust ná de regel hierboven, die even zwaar weegt. */
.wsa-reader-word-picker button:focus-visible {
  outline-color: #fff;
}

.wsa-reader-word-explanation-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: rgba(25, 50, 99, 0.55);
  overscroll-behavior: contain;
  touch-action: none;
}

.wsa-reader-word-explanation-backdrop[hidden] {
  display: none !important;
}

/* Net als bij de pil staan hier alle opmaak-eigenschappen expliciet waar het
 * venster op steunt. AutomaticCSS zet met section:where(...) elke <section> op
 * align-items: center en met section > div:where(...) elke directe <div> in
 * een kolom. Zonder deze regels krimpt de kopbalk tot de breedte van zijn
 * inhoud en komt de sluitknop onder de titel te staan. */
.wsa-reader-word-explanation {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: fixed;
  z-index: 999999;
  top: 50%;
  left: 50%;
  width: min(720px, calc(100vw - 32px));
  max-height: min(82vh, 720px);
  padding: 0;
  margin: 0;
  border: 1px solid #d8deea;
  border-radius: 8px;
  background: #fff;
  color: #193263;
  box-shadow: 0 24px 60px rgba(25, 50, 99, 0.28);
  font-family: var(--ff_primary, inherit) !important;
  overflow: hidden;
  transform: translate(-50%, -50%);
}

.wsa-reader-word-explanation[hidden] {
  display: none !important;
}

.wsa-reader-word-explanation__header {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 8px 10px 8px 20px;
  border-bottom: 1px solid #e4e9f2;
  background: #f7f9fc;
}

.wsa-reader-word-explanation__title {
  margin: 0;
  color: #193263;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.wsa-reader-word-explanation__content {
  display: block;
  padding: 28px 24px 30px;
  overflow-y: auto;
}

.wsa-reader-word-explanation__word {
  margin: 0 0 14px;
  color: #111;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}

.wsa-reader-word-explanation__text {
  margin: 0 0 22px;
  color: #111;
  font-size: 19px;
  line-height: 1.6;
}

.wsa-reader-word-explanation__listen[hidden] {
  display: none !important;
}

.wsa-reader-simplified-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: rgba(25, 50, 99, 0.55);
  overscroll-behavior: contain;
  touch-action: none;
}

.wsa-reader-simplified-backdrop[hidden] {
  display: none !important;
}

.wsa-reader-simplified {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  position: fixed;
  z-index: 999999;
  top: 50%;
  left: 50%;
  width: min(720px, calc(100vw - 32px));
  max-height: min(82vh, 900px);
  margin: 0;
  padding: 0;
  color: #193263;
  background: #fff;
  border: 1px solid #d8deea;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(25, 50, 99, 0.28);
  font-family: var(--ff_primary, inherit) !important;
  opacity: 1;
  overflow: hidden;
  transform: translate(-50%, -50%);
  transition: opacity 240ms ease, transform 240ms ease;
}

.wsa-reader-simplified[hidden] {
  display: none !important;
}

.wsa-reader-simplified.is-closing {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 8px));
}

/* Page builders (Bricks/AutomaticCSS) turn every direct <div> child of a
   <section> into a vertical flex column. Every layout property this panel
   relies on is therefore declared explicitly, never left to the default. */
.wsa-reader-simplified__header {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 14px 18px;
  border-bottom: 1px solid #e4e9f2;
  background: #f7f9fc;
}

.wsa-reader-simplified__title {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.wsa-reader-simplified__level {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid #d8deea;
  border-radius: 999px;
  color: #8e897d;
  background: #f7f9fb;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.wsa-reader-simplified__actions {
  display: inline-flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
  flex: 0 0 auto;
}

.wsa-reader-simplified__pause {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 92px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #eaeef6;
  color: #193263;
  font-family: var(--ff_primary, inherit) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.wsa-reader-simplified__pause:hover {
  background: #dde4f0;
}

/* Zolang er nog niets is om voor te lezen. Zonder dit ziet de knop er gewoon
   uit, reageert hij niet, en lijkt het venster kapot. */
.wsa-reader-simplified__pause:disabled {
  opacity: 0.45;
  cursor: default;
}

.wsa-reader-simplified__pause:disabled:hover {
  background: #eaeef6;
}

.wsa-reader-simplified__stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #d8deea;
  border-radius: 999px;
  background: #fff;
  color: #193263;
  font-family: var(--ff_primary, inherit) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.wsa-reader-simplified__stop[hidden],
.wsa-reader-simplified__pause[hidden] {
  display: none !important;
}

.wsa-reader-simplified__stop:hover {
  background: #f7f9fb;
}

.wsa-reader-simplified__pause:focus-visible,
.wsa-reader-simplified__stop:focus-visible {
  outline: 3px solid #f5d547;
  outline-offset: 2px;
}

.wsa-reader-simplified__close {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 40px;
  padding: 0 14px 0 10px;
  border: 1px solid #193263;
  border-radius: 999px;
  background: #fff;
  color: #193263;
  font-family: var(--ff_primary, inherit) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.wsa-reader-simplified__close:hover {
  background: #193263;
  color: #fff;
}

.wsa-reader-simplified__close:focus-visible {
  outline: 3px solid #f5d547;
  outline-offset: 2px;
}

.wsa-reader-simplified__close svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.wsa-reader-simplified__content {
  display: block;
  flex: 1 1 auto;
  gap: 0;
  padding: 22px 24px 26px;
  color: #193263;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  text-align: left;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Melding dat de tekst door AI is gemaakt. Staat onder het scrollende deel en
   blijft dus altijd in beeld, ook bij een lange tekst. Bewust donkerblauw en
   niet grijs: een waarschuwing die je niet kunt lezen, waarschuwt niet. */
.wsa-reader-simplified .wsa-reader-simplified__note,
.wsa-reader-word-explanation .wsa-reader-word-explanation__note {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  color: #193263;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
}

.wsa-reader-simplified .wsa-reader-simplified__note {
  flex: 0 0 auto;
  padding: 14px 24px 16px;
  border-top: 1px solid #e3e8f1;
  background: #f5f7fb;
}

.wsa-reader-word-explanation .wsa-reader-word-explanation__note {
  margin-top: 20px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f5f7fb;
}

.wsa-reader-simplified__note[hidden],
.wsa-reader-word-explanation__note[hidden] {
  display: none !important;
}

.wsa-reader-simplified__note svg,
.wsa-reader-word-explanation__note svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  fill: currentColor;
}

/* De wachtstand en de foutmelding staan in de inhoud van hetzelfde venster, op
   de plek waar de tekst straks komt. Ze erven de regels van een gewone alinea
   hieronder; alleen het draaiende schijfje komt erbij. */
/* Even zwaar als de alinea-regel verderop moet niet genoeg zijn: die staat later
   in het bestand en zou het schijfje onder de tekst duwen. */
.wsa-reader-simplified__content .wsa-reader-simplified__loading {
  display: flex;
  gap: 12px;
  align-items: center;
}

.wsa-reader-simplified__spinner {
  display: block;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 3px solid rgba(25, 50, 99, 0.2);
  border-top-color: #193263;
  border-radius: 50%;
  animation: wsa-reader-spin 900ms linear infinite;
}

@keyframes wsa-reader-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wsa-reader-simplified {
    transition: none;
  }

  /* Blijft zichtbaar als teken dat er iets loopt, maar draait niet meer. */
  .wsa-reader-simplified__spinner {
    animation: none;
  }
}

.wsa-reader-simplified__content p {
  display: block;
  margin: 0 0 16px;
  color: #193263;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
}

.wsa-reader-simplified__content p:last-child {
  margin-bottom: 0;
}

/* One calm scale, explicitly sized at every level: the surrounding theme's
   heading sizes must never leak into the dialog. */
.wsa-reader-simplified__content h1,
.wsa-reader-simplified__content h2,
.wsa-reader-simplified__content h3,
.wsa-reader-simplified__content h4,
.wsa-reader-simplified__content h5,
.wsa-reader-simplified__content h6 {
  display: block;
  margin: 26px 0 10px;
  padding: 0;
  color: #193263;
  font-family: var(--ff_primary, inherit) !important;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.wsa-reader-simplified__content h1 {
  font-size: 24px;
}

.wsa-reader-simplified__content h2 {
  font-size: 21px;
}

.wsa-reader-simplified__content h3,
.wsa-reader-simplified__content h4,
.wsa-reader-simplified__content h5,
.wsa-reader-simplified__content h6 {
  font-size: 19px;
}

.wsa-reader-simplified__content strong {
  font-weight: 700;
  font-size: inherit;
}

.wsa-reader-simplified__content h1 + p,
.wsa-reader-simplified__content h2 + p,
.wsa-reader-simplified__content h3 + p,
.wsa-reader-simplified__content h4 + p,
.wsa-reader-simplified__content h5 + p,
.wsa-reader-simplified__content h6 + p {
  margin-top: 0;
}

.wsa-reader-simplified__content > :first-child {
  margin-top: 0;
}

@media (max-width: 640px) {
  .wsa-reader {
    gap: 9px;
    max-width: calc(100% - 36px);
    --wsa-pill-pad-end: 16px;
    padding: 0 var(--wsa-pill-pad-end) 0 var(--wsa-pill-pad-start);
    margin-top: 8px;
    margin-bottom: 0;
    border: 1px solid #d8deea;
  }

  .wsa-reader--mobile-left {
    margin-left: 18px;
    margin-right: auto;
  }

  .wsa-reader--mobile-center {
    margin-left: auto;
    margin-right: auto;
  }

  .wsa-reader--mobile-right {
    margin-left: auto;
    margin-right: 18px;
  }

  .wsa-reader.wsa-reader--position-before_title:not(.wsa-reader--overlay) {
    margin-left: 0;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 16px;
  }

  .wsa-reader__listen {
    gap: 8px;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
  }

  .wsa-reader__icon {
    width: 20px;
    height: 20px;
  }

  .wsa-reader__icon svg {
    width: 20px;
    height: 20px;
  }

  .wsa-reader__listen-text {
    white-space: normal;
  }

  .wsa-reader__choices {
    top: auto !important;
    right: 12px;
    bottom: 12px;
    left: 12px !important;
    width: auto;
    /* Past het paneel niet, dan scrollt het in zichzelf in plaats van onder de
       schermrand door te lopen. dvh houdt rekening met de balken van de mobiele
       browser, die vh meerekent maar niet toont. */
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .wsa-reader__choice {
    min-height: 50px;
    font-size: 17px;
  }

  .wsa-reader-word-picker {
    right: 12px;
    bottom: 12px;
    left: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-height: 0;
    padding: 12px;
  }

  .wsa-reader-word-picker p {
    flex: 1 0 100%;
    font-size: 16px;
  }

  .wsa-reader-word-picker__selected,
  .wsa-reader-word-picker__close {
    min-height: 40px;
    font-size: 14px;
  }

  .wsa-reader-word-explanation {
    width: calc(100vw - 24px);
    max-height: 86vh;
  }

  .wsa-reader-word-explanation__header {
    padding-left: 14px;
  }

  .wsa-reader-word-explanation__close {
    min-height: 40px;
    padding: 0 10px;
    font-size: 14px;
  }

  .wsa-reader-word-explanation__content {
    padding: 22px 18px 24px;
  }

  .wsa-reader-word-explanation__word {
    font-size: 25px;
  }

  .wsa-reader-word-explanation__text {
    font-size: 18px;
  }

  .wsa-reader-simplified {
    width: calc(100vw - 24px);
    max-height: 86vh;
    margin: 0;
  }

  .wsa-reader-simplified__header {
    flex-wrap: wrap;
    min-height: 44px;
    padding: 12px 14px;
  }

  .wsa-reader-simplified__title {
    flex: 1 0 100%;
    font-size: 15px;
  }

  .wsa-reader-simplified__pause,
  .wsa-reader-simplified__stop,
  .wsa-reader-simplified__close {
    min-height: 44px;
    padding: 0 12px;
    font-size: 14px;
  }

  .wsa-reader-simplified__actions {
    width: 100%;
    justify-content: flex-end;
  }

  .wsa-reader-simplified__pause {
    min-width: 0;
  }

  .wsa-reader-simplified__content {
    padding: 16px 16px 20px;
    font-size: 17px;
  }

  .wsa-reader-simplified .wsa-reader-simplified__note {
    padding: 12px 16px 14px;
    font-size: 14px;
  }

  .wsa-reader-simplified__content p {
    font-size: 17px;
    margin-bottom: 14px;
  }

  .wsa-reader-simplified__content h1,
  .wsa-reader-simplified__content h2,
  .wsa-reader-simplified__content h3,
  .wsa-reader-simplified__content h4,
  .wsa-reader-simplified__content h5,
  .wsa-reader-simplified__content h6 {
    margin: 22px 0 8px;
  }

  .wsa-reader-simplified__content h1 {
    font-size: 21px;
  }

  .wsa-reader-simplified__content h2 {
    font-size: 19px;
  }

  .wsa-reader-simplified__content h3,
  .wsa-reader-simplified__content h4,
  .wsa-reader-simplified__content h5,
  .wsa-reader-simplified__content h6 {
    font-size: 18px;
  }

  .wsa-reader__divider {
    display: none;
  }

  .wsa-reader.wsa-reader--overlay {
    position: relative;
    inset: auto;
    transform: none;
  }

  .wsa-reader.wsa-reader--overlay.wsa-reader--left {
    left: auto;
  }

  .wsa-reader.wsa-reader--overlay.wsa-reader--right {
    right: auto;
  }
}

/* Grote letters en dyslexie-letters. De klassen staan op <html> en worden door
   reader.js gezet vanuit de keuze van de bezoeker. */
.wsa-reader__sizes .wsa-reader__size {
  justify-content: flex-start;
}

.wsa-reader__size-sample {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid #193263;
  border-radius: 6px;
  color: #193263;
  font-weight: 700;
  line-height: 1;
}

.wsa-reader__size--normal .wsa-reader__size-sample {
  font-size: 15px;
}

.wsa-reader__size--large .wsa-reader__size-sample {
  font-size: 20px;
}

.wsa-reader__size--xlarge .wsa-reader__size-sample {
  font-size: 26px;
}

.wsa-reader__size.is-active {
  background: #eef1f7;
  box-shadow: inset 0 0 0 2px #193263;
}

.wsa-reader__size.is-active .wsa-reader__size-sample {
  background: #193263;
  color: #fff;
}

.wsa-reader__choice-icon--sizes {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  line-height: 1;
}

.wsa-reader__choice-icon--sizes span:first-child {
  font-size: 12px;
}

.wsa-reader__choice-icon--sizes span:last-child {
  font-size: 20px;
}

.wsa-reader__choice--switch {
  justify-content: flex-start;
}

.wsa-reader__choice-text {
  flex: 1 1 auto;
}

.wsa-reader__switch {
  flex: 0 0 auto;
  margin-inline-start: auto;
  min-width: 44px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e1e5ee;
  color: #445272;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.wsa-reader__choice--switch.is-on .wsa-reader__switch {
  background: #193263;
  color: #fff;
}

/* Alleen de weergave in het popup-venster schaalt via zoom; de eigen
   tekstgroottes daar staan in px en volgen de rem-schaal van de pagina niet. */
html.wsa-text-scaled .wsa-reader-simplified__content,
html.wsa-text-scaled .wsa-reader-word-explanation__content {
  zoom: var(--wsa-text-scale, 1);
}

/* Lexend (SIL Open Font License, zie assets/fonts). Het bestand wordt pas
   opgehaald als er tekst in dit lettertype wordt getoond. */
@font-face {
  font-family: 'WSA Lexend';
  src: url('../fonts/lexend-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html.wsa-dyslexia {
  --ff_primary: 'WSA Lexend', Verdana, sans-serif;
}

/* Iconen die als lettertype werken moeten buiten schot blijven, anders worden
   het losse vierkantjes. */
html.wsa-dyslexia body,
html.wsa-dyslexia body *:not(svg):not(svg *):not(i):not([class*="fa-"]):not([class^="fa"]):not([class*=" fa"]):not([class*="icon-"]):not([class^="ion-"]):not([class*="dashicons"]):not([class*="material-icons"]) {
  font-family: 'WSA Lexend', Verdana, sans-serif !important;
  letter-spacing: 0.02em;
  word-spacing: 0.1em;
}

/* Homepage, "boven de kop": de pil staat in de paginaopbouw, gecentreerd boven
   de eerste kop onder de hoofdfoto. Zelfde specificiteit als de mobiele regel
   voor "boven de titel" en daarom na die regel gezet. */
.wsa-reader.wsa-reader--home-title:not(.wsa-reader--overlay) {
  margin: 0 auto 28px;
}

@media (max-width: 640px) {
  .wsa-reader.wsa-reader--home-title:not(.wsa-reader--overlay) {
    margin: 0 auto 16px;
  }
}

/* Compacte pil
 *
 * In een smalle balk bovenaan een site staat de pil van 44px hoog naast
 * knoppen van rond de 28px, en rekt hij die balk op. Staat de pil op een
 * ankerpunt en zijn de elementen ernaast duidelijk lager dan hijzelf, dan
 * schakelt hij daar vanzelf over op deze maat. Elders blijft hij 44px: dat is
 * de maat die een trefzeker aanraakdoel oplevert.
 *
 * Klopt die inschatting ergens niet, dan is de klasse wsa-reader-compact op
 * het element waar de shortcode in staat de handmatige weg naar dezelfde
 * stijl.
 *
 * 34px blijft ruim boven de 24px die WCAG 2.2 (2.5.8) als ondergrens
 * aanhoudt, maar het is kleiner dan de 44px uit de strengere AAA-eis. Zet de
 * klasse dus alleen waar de ruimte er echt om vraagt.
 */
.wsa-reader-compact .wsa-reader,
.wsa-reader.wsa-reader--compact {
  min-height: var(--wsa-compact-height, 34px);
  gap: 8px;
  --wsa-pill-pad-start: 10px;
  --wsa-pill-pad-end: 14px;
  box-shadow: 0 6px 16px rgba(25, 50, 99, 0.1);
}

.wsa-reader-compact .wsa-reader__listen,
.wsa-reader--compact .wsa-reader__listen {
  min-height: var(--wsa-compact-height, 34px);
  font-size: 14px;
}

.wsa-reader-compact .wsa-reader__icon,
.wsa-reader-compact .wsa-reader__icon svg,
.wsa-reader--compact .wsa-reader__icon,
.wsa-reader--compact .wsa-reader__icon svg {
  width: 19px;
  height: 19px;
}

.wsa-reader-compact .wsa-reader__stop,
.wsa-reader--compact .wsa-reader__stop {
  min-height: 24px;
  padding: 2px 8px;
}