/* ==========================================================================
   vp/contact-knoppen.css — de bel/app/mail-koppelingen van Wouter en David.
   Hoort bij vp/contact-knoppen.html.

   HERSCHIKT 30 augustus 2026. Dit bestand stijlde eerder het donkere paneel
   "Liever direct contact?" onderaan de pagina (<section id="direct">, zes
   knoppen in pilvorm op #0E1116). Dat paneel is weg: de opdrachtgever wilde
   de gegevens in de kolom naast het formulier, en die kolom is 280px breed
   en papierkleurig (--vp-kaart, #FBF9F4, via de body-achtergrond). Een pil
   op een donker vlak van 460px breed past daar niet.

   In plaats daarvan sluiten deze regels aan bij wat er al in die kolom
   staat: een pictogram links, tekst rechts, zoals .feature-count-card
   hierboven (de drie pluspunten) en de adresregels in .vp-contact-gegevens.
   Geen rand, geen vlak, geen 100px-radius: dit zijn geen knoppen met een
   eigen vorm, het zijn regels tekst met een link erin, dus de vorm van een
   pil hoort er niet bij. Wat overblijft van kleur: bellen krijgt het accent
   (--vp-accent-op-licht), appen de teal-tekstkleur (--vp-teal-tekst, NIET
   --vp-teal: die haalt als tekst maar 2,97 op kaart), mailen de navy
   (--vp-navy). Dezelfde rolverdeling als in het oude paneel, maar met de
   tokens die op een licht vlak de contrastnorm halen. De betekenis staat
   sowieso voluit in de tekst (Bel/App/Mail plus naam), dus kleur is nergens
   het enige signaal.

   Contrast op --vp-kaart (#FBF9F4, de paginakleur die deze kolom draagt):
   accent-op-licht 5,80, teal-tekst 5,63, navy 10,93. Alle drie ruim boven
   de 4,5 voor kleine tekst.

   Aanraakgebied: elke link staat op min-height 44px, ongeacht of de tekst
   in één of twee regels valt. Er wordt alleen transform geanimeerd.
   ========================================================================== */

/* --------------------------------------------------------------------------
   De twee personen, onder de bedrijfsgegevens in .vp-contact-gegevens.
   -------------------------------------------------------------------------- */

.vp-personen {
  display: flex;
  flex-flow: column;
  gap: 20px;
}

/* Scheiding tussen Wouter en David: dezelfde haarlijn-plus-ruimte als
   .vp-contact-gegevens gebruikt om zich van de pluspunten te scheiden.
   Geen extra element voor de scheiding, de aangrenzende-broer-selector doet
   het met wat er al staat. */
.vp-persoon-blok + .vp-persoon-blok {
  border-top: 1px solid var(--color--black-100);
  padding-top: 20px;
}

.vp-persoon-naam {
  color: var(--vp-navy);
  font-size: var(--_typography---paragraph-font-size--small-paragraph);
  line-height: var(--_typography---font-line-height--medium);
  font-weight: var(--_typography---font-weight--bold);
  letter-spacing: normal;
  margin: 0 0 8px;
}

.vp-persoon-acties {
  display: flex;
  flex-flow: column;
}

/* --------------------------------------------------------------------------
   De drie koppelingen per persoon.
   -------------------------------------------------------------------------- */

.vp-actie {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 6px 0;
  text-decoration: none;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}

.vp-actie:hover {
  transform: translateX(3px);
}

.vp-actie-bellen {
  color: var(--vp-accent-op-licht);
}

.vp-actie-whatsapp {
  color: var(--vp-teal-tekst);
}

.vp-actie-mailen {
  color: var(--vp-navy);
}

/* De ring is dezelfde kleur en dikte als .vp-link:focus-visible in
   vp/contact.css, zodat de hele kolom één toetsenbordtaal spreekt. */
.vp-actie:focus-visible {
  outline: 3px solid var(--vp-accent-op-licht);
  outline-offset: 3px;
  border-radius: 4px;
}

.vp-actie-icoon {
  width: 20px;
  height: 20px;
  flex: none;
}

.vp-actie-tekst {
  display: flex;
  flex-flow: column;
  line-height: 1.3;
  min-width: 0;
}

.vp-actie-tekst b {
  font-family: var(--color--font-family--urbanist);
  font-weight: var(--_typography---font-weight--semi-bold);
  font-size: var(--_typography---paragraph-font-size--small-paragraph);
}

/* overflow-wrap, want david.toes@vastpilot.nl is 22 tekens en de kolom is
   280px breed. */
.vp-actie-tekst small {
  font-family: var(--color--font-family--urbanist);
  font-size: var(--_typography---paragraph-font-size--small-text);
  letter-spacing: .2px;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Bewegingsvoorkeur
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .vp-actie {
    transition: none;
  }

  .vp-actie:hover {
    transform: none;
  }
}