/* ============================================================
   NITYA NEELAKANTAN — WhatsApp buttons
   Same geometry as the site .btn (pill, uppercase, ripple
   bloom on hover); only the colour and the leading glyph
   change, so a WhatsApp button never reads as a foreign
   widget dropped into the page.

   The number lives in the href of each link:
       https://wa.me/919008719911?text=…
   To change it site-wide, find-and-replace 919008719911
   across the .html files.
   ============================================================ */

.btn.btn--wa{ --bg:#25d366; --fg:#fff; border-color:transparent }
.btn.btn--wa:hover{ color:#fff }

/* on the deep-purple CTA bands the solid green can shout a little;
   the outline variant sits beside a white .btn--light more quietly */
.btn.btn--wa-ghost{
  --bg:transparent; --fg:#fff;
  border-color:rgba(255,255,255,.45);
}
.btn.btn--wa-ghost:hover{ --fg:#fff }

.wa-ico{
  width:1.15em; height:1.15em; flex:none;
  fill:currentColor; transition:transform .45s var(--ease-out, cubic-bezier(.22,1,.36,1));
}
.btn:hover .wa-ico{ transform:scale(1.08) }

/* ---------- WhatsApp as a card in the contact page's social list ----------
   The list tints its icons with :nth-child(2..4); a fifth card falls
   through to the default, so it names its own colour instead. */
.soc.soc-wa .s-ico{ background:#dcf8e8; color:#128c7e }

/* ---------- programme cards: Register here + WhatsApp side by side ----------
   The card button is a flex item that pushes itself to the bottom of the
   column; the pair has to inherit that job, so the row takes over the
   margin-top:auto and the button inside it stands down. */
.card-acts{
  /* stretch, not center: a <button> and an <a> resolve their line box
     differently, so matching heights has to come from the row */
  display:flex; flex-wrap:wrap; align-items:stretch; gap:.6rem;
  margin-top:auto; align-self:flex-start;
}
.card-acts .card-reg{ margin-top:0; align-self:auto }

.card-wa{
  display:inline-flex; align-items:center; gap:.6em;
  background:#25d366; color:#fff; border:none; border-radius:999px;
  padding:.82em 1.5em; font-family:inherit; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:500; cursor:pointer; text-decoration:none;
  transition:transform .4s var(--ease-out, cubic-bezier(.22,1,.36,1)),
             box-shadow .4s var(--ease-out, cubic-bezier(.22,1,.36,1)),
             filter .3s var(--ease, ease);
}
.card-wa:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -16px rgba(20,90,50,.6); filter:brightness(1.06) }
.card-wa:focus-visible{ outline:2px solid #128c7e; outline-offset:3px }

@media(max-width:1080px){ .card-acts{ margin-top:.2rem } }
@media(max-width:900px){
  .card-acts{ align-self:stretch }
  .card-acts > *{ flex:1 1 100%; justify-content:center }
}