/* h4p-button.css — één knopcomponent voor de hele site.
 *
 * Wix definieerde elke knop apart: hoogtes liepen uiteen (47px in de content,
 * 59px onder het formulier), border-radius was 20px en elke knop had een vaste
 * pixelbreedte. Deze component trekt dat gelijk: pill-vorm, één hoogte, één
 * tekstgrootte, één inline padding, en geen enkele breedte-ondergrens.
 *
 * TWEE SOORTEN KNOPPEN, ÉÉN DEFINITIE
 *   1. Wix-knoppen — die zitten in een wrapper met de class .mu5PoX en hebben
 *      zelf .wixui-button. Geen HTML-wijziging nodig.
 *   2. Eigen Tailwind-componenten (nav, dienst- en eventkaarten) — die krijgen
 *      de class .h4p-btn mee en zetten zelf alleen nog de kleur.
 * Beide staan in dezelfde regel, zodat ze niet uit elkaar kunnen lopen.
 *
 * !important is hier nodig, niet luxe: h4p-tw.css wordt ná dit bestand gekoppeld,
 * dus een Tailwind-utility met gelijke specificiteit zou anders winnen.
 *
 * De reviews-widget (#comp-mfvo0*) heeft eigen icoonknoppen en blijft buiten schot.
 */

:root {
  --h4p-btn-hoogte: 56px;
  --h4p-btn-padding: 32px;
  --h4p-btn-tekst: 16px;
  --h4p-btn-radius: 999px;   /* pill: altijd half de hoogte */
}

/* Wrapper: hoogte gelijktrekken. Breedte laten staan zodat de knop op zijn
   oorspronkelijke plek in het Wix-mesh blijft staan. */
.mu5PoX {
  height: var(--h4p-btn-hoogte) !important;
  min-height: var(--h4p-btn-hoogte) !important;
  position: relative;
}

/* De gedeelde knopvorm. */
/* Élke Wix-knop, niet alleen die in een .mu5PoX-wrapper. Gemeten op
   /nl/voor-bedrijven/: drie zichtbare knoppen ("Neem contact op!", "Ontdek de
   opties", "Boek een Ervaring") hangen daar rechtstreeks onder hun comp-div en
   stonden daardoor nog op 40px hoog met 3px padding en een label van 10px.
   De reviews-widget (comp-mfvo0…) blijft buiten schot: die rendert wél, maar
   heeft geen CTA's — twee pijltjes van 20x20 en een badge van 86x21, met hun
   eigen vormgeving. Als pill van 56px slopen ze de widget. */
a.wixui-button:not([class*="comp-mfvo0"]),
button.wixui-button:not([class*="comp-mfvo0"]),
.h4p-btn,
/* De boekknoppen uit de Wix-bookings-widget. Die hebben alleen gehashte classes
   (`sEmuYOR swRk_y_ …`), dus daar valt niet op te selecteren; `data-h4p-boek`
   zet fix_ui.py er zelf op en is wél stabiel. Ze stonden als enige nog op 40px
   hoog met vierkante hoeken en 16px padding. */
a[data-h4p-boek] {
  height: var(--h4p-btn-hoogte) !important;
  min-height: var(--h4p-btn-hoogte) !important;
  /* Geen ondergrens en geen vaste breedte: de knop is zo breed als zijn label
     plus de padding. Een min-width maakte korte labels kunstmatig breed en
     lange labels alsnog breder — twee maten in één component. */
  min-width: 0 !important;
  font-size: var(--h4p-btn-tekst) !important;
  line-height: 1 !important;
  padding-inline: var(--h4p-btn-padding) !important;
  border-radius: var(--h4p-btn-radius) !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  white-space: nowrap;
  /* Geen slagschaduw: Wix zette hier een 0 3px 9px rgba(0,0,0,.23) op. */
  box-shadow: none !important;
  /* Korte kleurovergang op hover. De globale animatie-stop staat alle transities
     op 0s; dit is bewuste UI-feedback, geen paginatransitie. */
  transition: background-color .15s ease, background-image .15s ease !important;
}

/* Alleen de Wix-knoppen: die stonden met een vaste wrapperbreedte in het mesh en
   moeten op het midden daarvan uitgelijnd blijven. Onze eigen knoppen bepalen
   hun plaatsing zelf (in een kaart met w-full, in de nav met flex). */
.mu5PoX > a.wixui-button,
.mu5PoX > button.wixui-button {
  width: max-content !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Hover: achtergrond iets donkerder. Een halftransparante zwarte laag i.p.v. een
   vaste kleur, zodat dit klopt bij elke knopkleur en de tekst onaangetast blijft. */
a.wixui-button:not([class*="comp-mfvo0"]):hover,
button.wixui-button:not([class*="comp-mfvo0"]):hover,
a.wixui-button:not([class*="comp-mfvo0"]):focus-visible,
button.wixui-button:not([class*="comp-mfvo0"]):focus-visible,
.h4p-btn:hover,
.h4p-btn:focus-visible,
a[data-h4p-boek]:hover,
a[data-h4p-boek]:focus-visible {
  background-image: linear-gradient(rgba(0, 0, 0, .10), rgba(0, 0, 0, .10)) !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  a.wixui-button,
  button.wixui-button,
  .h4p-btn,
  a[data-h4p-boek] { transition: none !important; }
}

/* Het label. Wix zet de tekstgrootte op een geneste <span> en niet op de knop
   zelf — gemeten: de knop stond op 10px terwijl de span 16 of 20 was. Zonder
   deze regel heeft "dezelfde font-size" dus geen effect op die knoppen.
   De selector moet zwaar genoeg zijn voor Wix' eigen !important-declaraties:
   :is(*,#h4p) telt als een id maar matcht alles (zie les 24). */
a.wixui-button:not([class*="comp-mfvo0"]) > :is(*, #h4p),
button.wixui-button:not([class*="comp-mfvo0"]) > :is(*, #h4p),
.h4p-btn > :is(*, #h4p),
a[data-h4p-boek] > :is(*, #h4p) {
  font-size: var(--h4p-btn-tekst) !important;
  line-height: 1 !important;
  width: auto !important;
  white-space: nowrap;
}

/* Mobiel: iets compacter, maar dezelfde verhouding (radius blijft pill). */
@media (max-width: 767px) {
  :root {
    --h4p-btn-hoogte: 48px;
    --h4p-btn-padding: 24px;
  }
  a.wixui-button,
  button.wixui-button,
  .h4p-btn,
  a[data-h4p-boek] {
    max-width: 100%;
  }
}