/* ===========================================================================
   DE GRYD-BALK - vaste opbouw, op elke LeadFinder-demo byte voor byte
   hetzelfde. Positie, doorzichtigheid en de iconen liggen hier vast, zodat
   deze balk er op elke demo identiek uitziet en nooit een hele mobiele
   viewport dichtplakt. Vormgeving per site (kleur, lettertype) hoort hier
   niet in: die grijpt aan op --gryd-balk-accent hieronder, in styles.css.
   =========================================================================== */

.gryd-balk {
  --gryd-balk-accent: #1a1a1a;

  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: calc(100vw - 2rem);
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gryd-balk-accent) 72%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  line-height: 1.3;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.gryd-balk__tekst {
  margin: 0;
  white-space: nowrap;
  opacity: 0.92;
}

.gryd-balk__contact {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* A tap target stays 44px however small the icon inside it looks: the badge
   is deliberately compact, but the button under a thumb is not. */
.gryd-balk__knop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  text-decoration: none;
  flex-shrink: 0;
}

.gryd-balk__knop:hover,
.gryd-balk__knop:focus-visible {
  background: rgba(255, 255, 255, 0.3);
}

.gryd-balk__icoon {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}

/* Under 480px the badge shrinks to icons only: the sentence is the first
   thing to go, not the way to reach us. It stays a small corner chip rather
   than a bar, so it never blocks a full row of content underneath it. */
@media (max-width: 480px) {
  .gryd-balk {
    gap: 0.4rem;
    padding: 0.4rem;
  }
  .gryd-balk__tekst {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .gryd-balk__knop {
    transition: background 150ms ease;
  }
}