/* === Basis reset alléén voor Leesmeer-knop === */
button.bs-btn-more,
a.bs-btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 1px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  vertical-align: middle;
  white-space: nowrap;
}

/* === Leesmeer-knop === */
button.bs-btn-more,
a.bs-btn-more {
  padding: 3px 10px;
  font-size: 15px;
  background-color: var(--knop-more-bg) !important;
  color: var(--knop-more-text) !important;
}
button.bs-btn-more:hover,
a.bs-btn-more:hover {
  background-color: var(--knop-more-bg-hover) !important;
  color: var(--knop-more-text) !important;
}

/* Leesmeer-knop links (mailto, sms, WhatsApp) nooit onderstreept */
a.bs-btn-more[href^="mailto:"],
a.bs-btn-more[href^="sms:"],
a.bs-btn-more[href^="https://wa.me"],
a.bs-btn-more[href^="mailto:"]:hover,
a.bs-btn-more[href^="sms:"]:hover,
a.bs-btn-more[href^="https://wa.me"]:hover {
  text-decoration: none !important;
}

/* Hover neutraliseren zodra 

/* ===== Hover/focus uitschakelen op touch, alleen kort :active feedback (Leesmeer) ===== */
@media (hover: none) and (pointer: coarse) {
  .bs-btn-more { -webkit-tap-highlight-color: transparent; }

  .bs-btn-more:hover, .bs-btn-more:focus, .bs-btn-more:focus-visible {
    background-color: var(--knop-more-bg) !important;
    color: var(--knop-more-text) !important;
    outline: none !important;
  }

  .bs-btn-more:active { background-color: var(--knop-more-bg-hover) !important; }
}

/* ===== Hover alleen voor muis ===== */
@media (hover: hover) and (pointer: fine) {
  .bs-btn1:hover { background-color: var(--knop1-bg-hover) !important; }
  .bs-btn2:hover { background-color: var(--knop2-bg-hover) !important; }
  .bs-btn3:hover { background-color: var(--knop3-bg-hover) !important; }
  .bs-btn-more:hover { background-color: var(--knop-more-bg-hover) !important; }
}

/* ===== Touch: géén hover, alleen kort :active ===== */
@media (hover: none) and (pointer: coarse) {
  .bs-btn1, .bs-btn2, .bs-btn3, .bs-btn-more {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .bs-btn1:hover, .bs-btn1:focus, .bs-btn1:focus-visible {
    background-color: var(--knop1-bg) !important;
    color: var(--knop1-text) !important;
    outline: none !important;
  }
  .bs-btn2:hover, .bs-btn2:focus, .bs-btn2:focus-visible {
    background-color: var(--knop2-bg) !important;
    color: var(--knop2-text) !important;
    outline: none !important;
  }
  .bs-btn3:hover, .bs-btn3:focus, .bs-btn3:focus-visible {
    background-color: var(--knop3-bg) !important;
    color: var(--knop3-text) !important;
    outline: none !important;
  }
  .bs-btn-more:hover, .bs-btn-more:focus, .bs-btn-more:focus-visible {
    background-color: var(--knop-more-bg) !important;
    color: var(--knop-more-text) !important;
    outline: none !important;
  }

  .bs-btn1:active { background-color: var(--knop1-bg-hover) !important; }
  .bs-btn2:active { background-color: var(--knop2-bg-hover) !important; }
  .bs-btn3:active { background-color: var(--knop3-bg-hover) !important; }
  .bs-btn-more:active { background-color: var(--knop-more-bg-hover) !important; }
}

/* --- Buttons: nooit onderstreept, in alle states --- */
a.bs-btn1, a.bs-btn1:link, a.bs-btn1:visited, a.bs-btn1:hover, a.bs-btn1:focus, a.bs-btn1:active { text-decoration: none !important; }
a.bs-btn2, a.bs-btn2:link, a.bs-btn2:visited, a.bs-btn2:hover, a.bs-btn2:focus, a.bs-btn2:active { text-decoration: none !important; }
a.bs-btn3, a.bs-btn3:link, a.bs-btn3:visited, a.bs-btn3:hover, a.bs-btn3:focus, a.bs-btn3:active { text-decoration: none !important; }
a.bs-btn-more, a.bs-btn-more:link, a.bs-btn-more:visited, a.bs-btn-more:hover, a.bs-btn-more:focus, a.bs-btn-more:active { text-decoration: none !important; }

/* --- Desktop-only hover (alleen met muis + body/html .has-hover) --- */
@media (hover: hover) and (pointer: fine) {
  .has-hover .bs-btn1:hover { background-color: var(--knop1-bg-hover) !important; color: var(--knop1-text) !important; }
  .has-hover .bs-btn2:hover { background-color: var(--knop2-bg-hover) !important; color: var(--knop2-text) !important; }
  .has-hover .bs-btn3:hover { background-color: var(--knop3-bg-hover) !important; color: var(--knop3-text) !important; }
  .has-hover .bs-btn-more:hover { background-color: var(--knop-more-bg-hover) !important; color: var(--knop-more-text) !important; }
}

/* --- Touch apparaten: geen hover/focus/active, geen highlight --- */
@media (hover: none), (pointer: coarse) {
  .bs-btn1, .bs-btn2, .bs-btn3, .bs-btn-more { -webkit-tap-highlight-color: transparent; }

  /* Verwijder visuele states in iOS/Android met hoge specificiteit */
  html body button.bs-btn1:hover,
  html body a.bs-btn1:hover,
  html body button.bs-btn1:focus,
  html body a.bs-btn1:focus,
  html body button.bs-btn1:active,
  html body a.bs-btn1:active { background-color: var(--knop1-bg) !important; color: var(--knop1-text) !important; outline: none !important; }

  html body button.bs-btn2:hover,
  html body a.bs-btn2:hover,
  html body button.bs-btn2:focus,
  html body a.bs-btn2:focus,
  html body button.bs-btn2:active,
  html body a.bs-btn2:active { background-color: var(--knop2-bg) !important; color: var(--knop2-text) !important; outline: none !important; }

  html body button.bs-btn3:hover,
  html body a.bs-btn3:hover,
  html body button.bs-btn3:focus,
  html body a.bs-btn3:focus,
  html body button.bs-btn3:active,
  html body a.bs-btn3:active { background-color: var(--knop3-bg) !important; color: var(--knop3-text) !important; outline: none !important; }

  html body button.bs-btn-more:hover,
  html body a.bs-btn-more:hover,
  html body button.bs-btn-more:focus,
  html body a.bs-btn-more:focus,
  html body button.bs-btn-more:active,
  html body a.bs-btn-more:active { background-color: var(--knop-more-bg) !important; color: var(--knop-more-text) !important; outline: none !important; }

  /* Zorg dat anchors in buttons nooit onderstreept worden, ook niet in focus/active */
  a.bs-btn1, a.bs-btn1:link, a.bs-btn1:visited, a.bs-btn1:hover, a.bs-btn1:focus, a.bs-btn1:active { text-decoration: none !important; }
  a.bs-btn2, a.bs-btn2:link, a.bs-btn2:visited, a.bs-btn2:hover, a.bs-btn2:focus, a.bs-btn2:active { text-decoration: none !important; }
  a.bs-btn3, a.bs-btn3:link, a.bs-btn3:visited, a.bs-btn3:hover, a.bs-btn3:focus, a.bs-btn3:active { text-decoration: none !important; }
  a.bs-btn-more, a.bs-btn-more:link, a.bs-btn-more:visited, a.bs-btn-more:hover, a.bs-btn-more:focus, a.bs-btn-more:active { text-decoration: none !important; }

  /* Geen transitie-flicker op tap */
  .bs-btn1, .bs-btn2, .bs-btn3, .bs-btn-more { transition: none !important; }
}