/* ============================================================
   whatsapp.css — the header WhatsApp link.
   Pairs with whatsapp.js. Loaded on every page.

   The modal styles that used to live here (shell, backdrop, panel,
   the two option buttons, the form fields and the availability
   calendar) went with the popup itself. All that is left is the
   button in the header.
   ============================================================ */

.wa-trigger{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  padding:0; border:1.5px solid rgba(var(--black-rgb),0.16);
  border-radius:var(--radius-sm);
  background:transparent; color:var(--black);
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.wa-trigger:hover, .wa-trigger:focus-visible{
  color:var(--teal); border-color:var(--teal); background:rgba(var(--teal-rgb),0.08);
}
.wa-trigger svg{width:20px; height:20px;}

/* over a dark hero the header goes translucent, so the link follows */
@media (min-width:861px){
  .wa-trigger{color:var(--white); border-color:rgba(var(--white-rgb),0.4);}
  .wa-trigger:hover, .wa-trigger:focus-visible{
    color:var(--white); border-color:var(--white); background:rgba(var(--white-rgb),0.12);
  }
  body.chrome-solid .wa-trigger{color:var(--black); border-color:rgba(var(--black-rgb),0.16);}
  body.chrome-solid .wa-trigger:hover{color:var(--teal); border-color:var(--teal);}
}