/*
 * WCAG-knoppen — toegankelijkheidsbalk
 *
 * De kleuren worden gestuurd via CSS custom properties die vanuit Lentl Opties
 * worden geïnjecteerd. Fallback-waarden staan in var() zodat de stijl ook
 * zonder ingestelde opties werkt.
 *
 *   --lentl-wcag-primair    standaard #FABE3B (geel)   → knopachtergrond
 *   --lentl-wcag-secundair  standaard #ffffff (wit)    → icoon + label
 *
 * De knopgrootte is vast: 40px visuele hoogte met een 18px icoon. De zichtbare
 * knop is daarmee kleiner dan 44px, maar het klikbare gebied is altijd minimaal
 * 44×44px via een onzichtbaar, gecentreerd ::before (WCAG 2.1 SC 2.5.5 — Target
 * Size). De knoppen steken 10px buiten de linker schermrand (left: -10px).
 */

/*
 * De selector staat bewust dubbel (.lentl-wcag-knop.lentl-wcag-knop): dat tilt
 * de specificiteit naar (0,2,0) zodat deze toegankelijkheidsbalk wint van
 * Elementor's globale knop-stijl (.elementor-kit-XX button, specificiteit 0,1,1).
 * Sinds de knoppen in 1.13.0 echte <button>'s werden, pakten ze anders
 * Elementor's display/padding/border-radius/font over en klapten ze permanent
 * uit (breed i.p.v. ingeklapt). Zo blijft het zonder !important robuust.
 *
 * De resets (margin/border/appearance/font-family) houden de <button>'s
 * pixel-gelijk aan de vroegere <a>'s (toetsenbordbediening, WCAG 2.1.1).
 */
.lentl-wcag-knop.lentl-wcag-knop {
  position: fixed;
  left: -10px;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  background: var(--lentl-wcag-primair, #FABE3B);
  color: var(--lentl-wcag-secundair, #ffffff) !important;
  border-radius: 0 30px 30px 0;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
  z-index: 9999;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  margin: 0;
  border: none;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/*
 * Onzichtbare hitbox: garandeert een klikbaar gebied van minimaal 44×44px,
 * gecentreerd op de knop. De knop is 40px hoog, dus de hitbox steekt 2px boven
 * en onder de gekleurde knop uit. De knop heeft bewust geen overflow:hidden,
 * zodat dit niet wordt geclipt.
 */
.lentl-wcag-knop::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
}

/* Inline SVG-icoon (vervangt Font Awesome). Kleur volgt de knop via currentColor. */
.lentl-icoon {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Label klapt horizontaal in/uit; de knop groeit mee (breedte volgt inhoud). */
.lentl-wcag-knop .lentl-wcag-label {
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.3s ease, margin-left 0.3s ease, opacity 0.2s ease;
}

/*
 * Vaste posities, van onder naar boven: voorlezen, vergroten, verkleinen.
 * Tussenruimte = knophoogte (40px) + 10px gap = 50px, zodat de knoppen en hun
 * 44px-hitboxes nooit overlappen.
 */
.lentl-wcag-lees-voor  { bottom: 35px; }
.lentl-wcag-vergroten  { bottom: 85px; }
.lentl-wcag-verkleinen { bottom: 135px; }

/* Hover: label tonen */
.lentl-wcag-knop:hover .lentl-wcag-label {
  max-width: 200px;
  margin-left: 8px;
  opacity: 1;
}

/* Voorlees-knop: uitgeklapte staat bij selectie */
.lentl-wcag-lees-voor.is-uitgeklapt .lentl-wcag-label {
  max-width: 220px;
  margin-left: 8px;
  opacity: 1;
}
.lentl-wcag-lees-voor.speelt {
  background: #c0392b !important;
}