/*
 * button — de varianten.
 *
 * De basis van .button staat in main.css, want knoppen komen op bijna elke
 * pagina voor. Hier staat alleen wat per variant verschilt.
 *
 * Maten 1-op-1 van samdesign.nl (R9).
 */

/* ------------------------------------------------------------------
   Primair — het roze verloop dat bij hover donkerblauw wordt
   ------------------------------------------------------------------ */

.buttonPrimary {
  color: var(--colorWhite);
}

/*
 * Geen eigen achtergrond: het verloop is twee keer zo breed als de knop en
 * staat met de roze helft in beeld. Bij hover schuift de donkerblauwe helft
 * ervoor. Dezelfde truc als bij de Start nu-knop in de header.
 */
.buttonPrimary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--colorNavy) 0%,
    var(--colorNavy) 50%,
    var(--colorPinkDeep) 50%,
    var(--colorPinkLight) 100%
  );
  transition: left 0.4s;
}

.buttonPrimary:hover::before {
  left: 0;
}

/* ------------------------------------------------------------------
   Secundair — wit met een donkerblauwe rand
   ------------------------------------------------------------------ */

.buttonSecondary {
  padding: 14px 42px;
  border: 1px solid var(--colorNavy);
  background: var(--colorWhite);
  color: var(--colorNavy);
  transition: background-color 0.4s, color 0.4s;
}

.buttonSecondary .buttonIcon {
  margin-left: 15px;
}

.buttonSecondary:hover {
  background: var(--colorNavy);
  color: var(--colorWhite);
}

/* ------------------------------------------------------------------
   Pil — tekst met een roze pijlpil erachter
   ------------------------------------------------------------------ */

/*
 * Geen vlak om de hele knop, alleen een roze pil om de pijl: de tekst staat er
 * los naast, in de maat van de lopende tekst. Bij hover schuift het geheel 10px
 * naar rechts, wordt de pil donkerblauw en komt er een streep onder de tekst.
 * Zo staat het in de hero van /over-ons/.
 */
.buttonPill {
  display: inline-flex;
  align-items: center;
  column-gap: 11px;
  color: var(--colorNavy);
  font-size: var(--textSize);
  line-height: var(--textLine);
  text-decoration: none;
  transition: padding-left 0.3s;
}

.buttonPill:hover {
  padding-left: 10px;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

.buttonPillIcon {
  display: flex;
  flex: none;
  align-items: center;
  padding: 8px 18px 9px;
  border-radius: 99px;
  background: var(--colorPink);
  color: var(--colorWhite);
  transition: background-color 0.3s;
}

.buttonPill:hover .buttonPillIcon {
  background: var(--colorNavy);
}

/*
 * Expliciete breedte en flex: none, want de reset zet svg op max-width: 100% en
 * een inline SVG met viewBox schrompelt in een flexbox dan weg.
 */
.buttonPillIcon svg {
  flex: none;
  width: 14px;
  height: auto;
}

@media (max-width: 767px) {
  .buttonPillIcon {
    padding: 12px 18px 13px;
  }
}