/* Knoppen — redesign 2026. Leest alleen tokens. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.7em 1.35em;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              color var(--duration) var(--ease);
}

/* Primair — blauw, zoals de huisstijl voorschrijft. */
.btn--primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-accent-on);
}
.btn--primary:hover { background: var(--c-accent-ink); border-color: var(--c-accent-ink); color: var(--c-accent-on); }

/* In elke taal dezelfde knopkleuren als in het Nederlands (Jacq, 01-10-2026): de proefpagina heeft per
   taal een eigen slug, dus die staan er allemaal bij. Verandert een slug van /proefversie/ (PW-admin),
   dan hier ook aanpassen. */
/* De proefversie-CTA is groen — en alleen die. In de huisstijl staat dat als
   `.horizon [data-p="proef"].btn.p`. Hier gekoppeld aan de bestemming in plaats
   van aan een losse class: elke knop die naar de proefversie wijst is groen,
   waar hij ook staat, zonder dat een template daaraan hoeft te denken. */
.btn--primary[href*="proefversie"],
.btn--primary[href*="/proef"],
.btn--primary[href*="/try-now-30-days/"],
.btn--primary[href*="/trial/"],
.btn--primary[href*="/essayez-maintenant-30-jours/"],
.btn--primary[href*="/prueba-ahora-30-dias/"],
.btn--primary[href*="/experimente-agora-por-30-dias/"],
.btn--primary[href*="/jetzt-30-tage-ausprobieren/"],
.btn--primary[href*="/proev-nu-i-30-dage/"],
.btn--primary[href*="/prova-ora-30-giorni/"],
.btn--primary[href*="/prova-nu-i-30-dagar/"] {
  background: var(--c-cta);
  border-color: var(--c-cta);
  color: var(--c-cta-on);
}
.btn--primary[href*="proefversie"]:hover,
.btn--primary[href*="/proef"]:hover,
.btn--primary[href*="/try-now-30-days/"]:hover,
.btn--primary[href*="/trial/"]:hover,
.btn--primary[href*="/essayez-maintenant-30-jours/"]:hover,
.btn--primary[href*="/prueba-ahora-30-dias/"]:hover,
.btn--primary[href*="/experimente-agora-por-30-dias/"]:hover,
.btn--primary[href*="/jetzt-30-tage-ausprobieren/"]:hover,
.btn--primary[href*="/proev-nu-i-30-dage/"]:hover,
.btn--primary[href*="/prova-ora-30-giorni/"]:hover,
.btn--primary[href*="/prova-nu-i-30-dagar/"]:hover {
  background: var(--c-cta-hover);
  border-color: var(--c-cta-hover);
}

/* Groene knop voor een andere bestemming dan de proefversie (btn--cta, bijv. "Vraag een koppeling aan"
   op /koppelingen/, Jacq 01-10-2026): zelfde kleuren als de proefknop, ook op donker. Het herkennen van
   de proefknop aan zijn href blijft zoals het is. */
.btn--cta { background: var(--c-cta); border-color: var(--c-cta); color: var(--c-cta-on); }
.btn--cta:hover { background: var(--c-cta-hover); border-color: var(--c-cta-hover); color: var(--c-cta-on); }
.on-dark .btn--cta { background: var(--c-cta-on-dark); border-color: var(--c-cta-on-dark); color: var(--c-cta-on-dark-ink); }
.on-dark .btn--cta:hover { background: var(--c-cta-on-dark-hover); border-color: var(--c-cta-on-dark-hover); color: var(--c-cta-on-dark-ink); }

/* Secundair — huisstijl: transparant met een rand in de kopkleur. */
.btn--secondary {
  background: transparent;
  border-color: var(--c-ink-strong);
  color: var(--c-ink-strong);
}
.btn--secondary:hover { border-color: var(--c-accent); color: var(--c-accent-ink); }

/* Tekstknop — voor tertiaire acties en in dichte lijsten. */
.btn--quiet {
  background: transparent;
  color: var(--c-accent-ink);
  padding-inline: 0.4em;
}
.btn--quiet:hover { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }

.btn--lg { font-size: var(--text-base); padding: 0.85em 1.6em; }

/* Op een donker vlak (de CTA-band uit de wireframes, Horizon-ink). */
.on-dark .btn--secondary {
  background: transparent;
  border-color: var(--c-ink-invert-border);   /* huisstijl .section-dark .btn-outline */
  color: var(--c-ink-invert-strong);
}
.on-dark .btn--secondary:hover { border-color: var(--c-ink-invert-strong); color: var(--c-ink-invert-strong); }

/* Blauwe hoofdknop op donker: blauw 500 haalt tegen diepzee maar 2,58:1 (hover blauw 600: 1,79:1).
   Daar blauw 400 met diepzee-tekst, hover blauw 200 — dezelfde regel als de groene knop hieronder.
   De proefknop wint via zijn [href]-selector (hogere specificiteit) en blijft groen. */
.on-dark .btn--primary {
  background: var(--c-accent-on-dark);
  border-color: var(--c-accent-on-dark);
  color: var(--c-accent-on-dark-ink);
}
.on-dark .btn--primary:hover {
  background: var(--c-accent-on-dark-hover);
  border-color: var(--c-accent-on-dark-hover);
  color: var(--c-accent-on-dark-ink);
}

/* Proefknop op donker: groen 700 haalt tegen diepzee maar 2,37:1 (WCAG 1.4.11 vraagt 3:1).
   Daar groen 500 met diepzee-tekst, hover groen 400 (Horizon on-dark-regel). */
.on-dark .btn--primary[href*="proefversie"],
.on-dark .btn--primary[href*="/proef"],
.on-dark .btn--primary[href*="/try-now-30-days/"],
.on-dark .btn--primary[href*="/trial/"],
.on-dark .btn--primary[href*="/essayez-maintenant-30-jours/"],
.on-dark .btn--primary[href*="/prueba-ahora-30-dias/"],
.on-dark .btn--primary[href*="/experimente-agora-por-30-dias/"],
.on-dark .btn--primary[href*="/jetzt-30-tage-ausprobieren/"],
.on-dark .btn--primary[href*="/proev-nu-i-30-dage/"],
.on-dark .btn--primary[href*="/prova-ora-30-giorni/"],
.on-dark .btn--primary[href*="/prova-nu-i-30-dagar/"] {
  background: var(--c-cta-on-dark);
  border-color: var(--c-cta-on-dark);
  color: var(--c-cta-on-dark-ink);
}
.on-dark .btn--primary[href*="proefversie"]:hover,
.on-dark .btn--primary[href*="/proef"]:hover,
.on-dark .btn--primary[href*="/try-now-30-days/"]:hover,
.on-dark .btn--primary[href*="/trial/"]:hover,
.on-dark .btn--primary[href*="/essayez-maintenant-30-jours/"]:hover,
.on-dark .btn--primary[href*="/prueba-ahora-30-dias/"]:hover,
.on-dark .btn--primary[href*="/experimente-agora-por-30-dias/"]:hover,
.on-dark .btn--primary[href*="/jetzt-30-tage-ausprobieren/"]:hover,
.on-dark .btn--primary[href*="/proev-nu-i-30-dage/"]:hover,
.on-dark .btn--primary[href*="/prova-ora-30-giorni/"]:hover,
.on-dark .btn--primary[href*="/prova-nu-i-30-dagar/"]:hover {
  background: var(--c-cta-on-dark-hover);
  border-color: var(--c-cta-on-dark-hover);
  color: var(--c-cta-on-dark-ink);
}

/* --- verzendknop die bezig is (form.js) -----------------------------------
   De tekst blijft staan en de knop houdt zijn breedte, zodat er niets verspringt;
   het schijfje ervoor laat zien dat de aanvraag onderweg is. */
.btn--busy { cursor: progress; }
.btn:disabled { opacity: .75; cursor: not-allowed; }
.btn__spinner {
  flex: 0 0 auto; width: 1em; height: 1em;   /* .btn heeft al een gap */
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  /* Geen draaiend schijfje voor wie daar last van heeft; de knop op slot is genoeg. */
  .btn__spinner { animation: none; opacity: .6; }
}