/* ==========================================================================
   Button Group — includes/blocks/button-group/style.css
   Every button reuses the site's own global .btn / .btn-solid / .btn-ghost
   classes (bio.css) as-is — nothing about button appearance is redeclared
   here, per the "reuse the current button styles" requirement, except for
   two small additions bio.css doesn't already cover: the Light style's
   hover state (below), and the "lg" size option (bio.css only has the
   default size + .btn-sm, not a larger one).

   Color tokens are baked in as plain hex from the site's MONO palette
   (color-mono.css → html.theme-mono), same convention as every other
   section.
   ========================================================================== */

.mhs-button-group{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  align-items:center;
}

/* Light style hover: bio.css's own .btn-ghost:hover only darkens the
   border — this block wants a filled green background with white text on
   hover instead, matching the reference design (e.g. an active-looking
   pill in a small button row). Scoped under .mhs-button-group so it only
   affects this block, not .btn-ghost usage elsewhere on the site. */
.mhs-button-group .btn-ghost:hover{
  background:var(--text);
  border-color:var(--text);
  color:var(--white);
}

/* Size option: "sm" reuses bio.css's own .btn-sm, "md" is the default .btn
   padding (no class needed), "lg" is this block's own addition since
   bio.css doesn't have a larger size already. */
.mhs-button-group .mhs-btn-lg{
  padding:18px 34px;
  font-size:16.5px;
}