/*
 * JKC icon-kit — vervangt de 4 Font Awesome webfont-kits (1.021 KB) door een
 * inline SVG-sprite (zie wp-footer via mu-plugins/jkc-performance.php).
 * Eigen, nieuw bestand — raakt main.css niet aan.
 */
.jkc-icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  display: inline-block;
  vertical-align: -0.125em;
}

.jkc-icon--lg {
  width: 1.5em;
  height: 1.5em;
  stroke-width: 1.5;
}

.jkc-icon--sm {
  width: 0.85em;
  height: 0.85em;
  stroke-width: 2;
}

/*
 * Drie plekken waar assets/js/app.js (niet aan te raken) zelf een Font
 * Awesome class op een <i>-element zet of leest — dat werkt alleen met een
 * echt <i>-element, niet met een <svg><use> sprite-icoon, dus deze drie
 * blijven bewust "fa-*" in de HTML. In plaats van de webfont te laden
 * tekenen we die twee/drie glyphs hier met puur CSS (border/pseudo-element-
 * trucs), zodat er nergens een leeg vierkantje verschijnt:
 *   1. .jkc-growth__pause  — pause/play-toggle (groei-cyclus blok)
 *   2. [data-share-copy]   — link/check-toggle (deelknop "kopieer link")
 *   3. .jkc-toast__icon    — check (toast die na het kopiëren verschijnt)
 */
.jkc-growth__pause .fa-solid,
[data-share-copy] .fa-solid,
.jkc-toast__icon .fa-solid {
  display: inline-block;
  position: relative;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  color: inherit;
}

/* fa-pause / fa-check: twee verticale balkjes */
.jkc-growth__pause .fa-pause::before,
.jkc-growth__pause .fa-pause::after {
  content: "";
  position: absolute;
  top: 0.1em;
  width: 0.24em;
  height: 0.8em;
  background: currentColor;
  border-radius: 0.05em;
}
.jkc-growth__pause .fa-pause::before { left: 0.18em; }
.jkc-growth__pause .fa-pause::after { right: 0.18em; }

/* fa-play: driehoek via een border-truc */
.jkc-growth__pause .fa-play {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.5em 0 0.5em 0.8em;
  border-color: transparent transparent transparent currentColor;
}

/* fa-link: schakel van twee ringen */
[data-share-copy] .fa-link {
  width: 0.85em;
  height: 0.85em;
  border: 0.16em solid currentColor;
  border-radius: 999px;
  transform: rotate(-45deg);
}
[data-share-copy] .fa-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.16em;
  height: 0.7em;
  background: currentColor;
  transform: translate(-50%, -50%);
}

/* fa-check: vinkje via een geroteerde hoek */
.jkc-growth__pause .fa-check,
[data-share-copy] .fa-check,
.jkc-toast__icon .fa-check {
  width: 0.75em;
  height: 0.4em;
  border-left: 0.16em solid currentColor;
  border-bottom: 0.16em solid currentColor;
  transform: rotate(-45deg) translate(0, -0.1em);
  border-radius: 0 0 0 0.05em;
}