/* site-knop.css — de knop van de site en de ledenapp.
 *
 * Beheer kreeg op 31 aug een knop-component omdat er zestien knopvormen op
 * dertien schermen stonden. De site en de ledenapp hielden hun eigen
 * verzameling: .btn met vijf rollen en een --small, .rk-btn met --sm en
 * --ghost, .app-back, .app-form__submit. Gemeten met de meetlat op 1 sep:
 * DRIE hoogtes (33 · 44 · 48), DRIE rondingen en ZES tekstmaten voor wat
 * telkens hetzelfde ding is -- iets waar je op drukt.
 *
 * Dezelfde regel als in beheer, in de taal van de site: de vorm is een pil
 * (dat is hier de vormtaal), er is EEN maat, en de rol zit in de kleur.
 * `--small` en `--sm` blijven bestaan zodat er niets in de sjablonen hoeft te
 * veranderen, maar ze veranderen alleen nog de zijkant, niet de maat: een
 * tweede maat is precies hoe dit uit de hand liep.
 *
 * NIET hierdoor geregeerd, met opzet: het hamburgertje in de navigatie (dat is
 * chrome, geen werkvlak, en het is een pictogram) en de dagvakken van de
 * kalender (een rooster, geen knoppenrij).
 */

:root {
  --site-knop-hoog: 48px;
  --site-knop-zij: 1.7rem;
  --site-knop-tekst: 0.98rem;
}

/* ── de vorm ───────────────────────────────────────────────────────────── */
.btn,
.rk-btn,
.app-back,
button.app-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--site-knop-hoog);
  padding: 0 var(--site-knop-zij);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--site-knop-tekst);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--beweging-snel) var(--curve),
              border-color var(--beweging-snel) var(--curve),
              color var(--beweging-snel) var(--curve);
}

/* `--small` en `--sm` maken hem smaller, niet lager: een tweede HOOGTE is wat
   dit stuk uit de hand liet lopen. */
.btn--small,
.rk-btn--sm { padding: 0 1.1rem; }

/* De terugknop en de brede formulierknop houden hun plek in de bladspiegel,
   maar niet hun eigen maat. */
.app-back { margin: 1rem 0 0; align-self: flex-start; }
button.app-form__submit { width: 100%; margin-top: 0.4rem; }


/* ── de duim op de site ──────────────────────────────────────────────────
   Gemeten op 1 sep: de voetlinks waren 22 hoog, een telefoonnummer 29, de
   kaart-links 27. Op een telefoon mik je daar naast. Alles wat als een RIJ
   staat (display:block of flex) krijgt een raakvlak van 44; een link midden
   in een zin blijft wat hij is, want die lees je. */
@media (max-width: 820px) {
  .site-footer a,
  .flip-card__cta,
  .card__cta,
  .popup-poll__join,
  .site-footer li > a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* De ghost-rol droeg een eigen tekstmaat (0,96rem tegen 0,98rem van de rest).
   Een verschil van een halve pixel dat je niet ziet en wel voelt zodra twee
   knoppen naast elkaar staan. */
.btn.btn--ghost { font-size: var(--site-knop-tekst); }

/* leden.css verfijnt .app-back op een telefoon met een eigen tekstmaat; de
   maat komt uit het component, de rest mag daar blijven. */
@media (max-width: 820px) {
  /* body.app ervoor: leden.css schrijft  en dat is
     specifieker dan een losse klasse. Zonder dit blijft de maat 15,2 staan
     terwijl elke andere knop 15,68 is. */
  body.app .app-back { font-size: var(--site-knop-tekst); }
  /* Een telefoonnummer of e-mailadres in de contactrij is iets waar je op
     drukt om te bellen of te mailen -- 29 pixels is daarvoor te smal. */
  .contact-rows li > a { min-height: 44px; display: inline-flex; align-items: center; }
}