/* ============================================
   Globale stijlen: typografie, knoppen, golfranden, hulpklassen.
   Waarden gemeten op het origineel; zie stijlkaart.md.
   ============================================ */

/* Koppen in widgets hebben in het origineel regelhoogte 1 en geen marge */
.title {
  margin: 0;
  padding: 0;
  font-family: var(--font-main);
  font-weight: 600;
  line-height: 1;
}

/* Lopende tekst (Elementor text-editor): Outfit 18px, regelhoogte 1.5 */
.prose {
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 400;
}

.prose ul { margin: 0; }

a { transition: color var(--ease-colour); }

/* --------------------------------------------
   Knop (Elementor button)
   -------------------------------------------- */
.btn {
  display: inline-block;
  padding: 14px 18px;
  border: 2px solid var(--btn-border, var(--btn-bg));
  border-radius: 1000px;
  background-color: var(--btn-bg, var(--color-primary));
  color: var(--btn-color, var(--color-white));
  fill: var(--btn-color, var(--color-white));
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  transition: all var(--ease-colour), transform var(--ease-transform);
  will-change: transform;   /* eigen laag, zoals Elementors transform: tekst rendert identiek */
}

.btn__inner {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 5px;
}

.btn__icon { display: flex; align-items: center; }
.btn__icon svg { width: 1em; height: 1em; }
.btn__text { display: inline-block; }

/* Varianten */
.btn--orange { --btn-bg: var(--color-primary); --btn-border: var(--color-primary); --btn-hover-bg: var(--color-secondary); --btn-hover-border: var(--color-secondary); }
.btn--slate  { --btn-bg: var(--color-slate); --btn-border: var(--color-text); --btn-hover-bg: var(--color-text); --btn-hover-border: var(--color-text); }
.btn--white  { --btn-bg: #FFFFFF; --btn-border: transparent; --btn-color: var(--color-text); --btn-hover-bg: var(--color-primary); --btn-hover-color: var(--color-white); border-width: 0; }

@media (hover: hover) {
  .btn:hover {
    background-color: var(--btn-hover-bg, var(--btn-bg));
    border-color: var(--btn-hover-border, var(--btn-border));
    color: var(--btn-hover-color, var(--btn-color, var(--color-white)));
    fill: var(--btn-hover-color, var(--btn-color, var(--color-white)));
    transform: translateX(5px);
  }
}

.btn:focus-visible {
  background-color: var(--btn-hover-bg, var(--btn-bg));
  border-color: var(--btn-hover-border, var(--btn-border));
  color: var(--btn-hover-color, var(--btn-color, var(--color-white)));
  fill: var(--btn-hover-color, var(--btn-color, var(--color-white)));
}

/* --------------------------------------------
   Golfrand (Elementor shape divider "mountains"), altijd wit
   -------------------------------------------- */
.wave {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  direction: ltr;
  line-height: 0;
  pointer-events: none;
}

.wave--top { top: -1px; }
.wave--bottom { bottom: -1px; transform: rotate(180deg); }

.wave svg {
  position: relative;
  left: 50%;
  display: block;
  width: calc(300% + 1.3px);
  height: var(--wave-h, 95px);
  transform: translateX(-50%);
}

.wave--bottom svg { z-index: -1; }
.wave path { fill: #fff; }

/* --------------------------------------------
   Hulpklassen
   -------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed !important;
  top: 8px;
  left: 8px;
  z-index: 1000;
  width: auto;
  height: auto;
  padding: 12px 20px;
  clip: auto;
  clip-path: none;
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-main);
  font-weight: 600;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.prose hr { margin: 0; }