/* HMC shared button system.
   Matches the canonical buttons on healthmatters.clinic so every HMC surface
   reads the same. The roll-up hover on the main site is a Webflow IX2
   interaction, which nothing outside Webflow inherits, so it is reimplemented
   here in CSS. Pair with hmc-buttons-1.0.0.js, which builds the two label
   copies the roll-up needs without touching each button's markup. */

.hmc-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  border-radius: 100px;
  border: 1px solid #0f0f0f;
  font-size: 16px;
  line-height: 1.2em;
  font-weight: 400;
  text-transform: capitalize;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition-duration: .3s;
}

.hmc-btn-primary { background: #2333df; color: #fff; }
.hmc-btn-secondary { background: #fff; color: #1a1a1a; }

/* 6px dot, drawn in CSS so no child node is added to React-owned markup.
   currentColor gives a white dot on the primary fill and a dark one on the
   secondary. Opt out per button with data-hmc-dot="off" (icon-led buttons). */
.hmc-btn:not([data-hmc-dot="off"])::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* Markup that ships its own dot element keeps working. */
.hmc-btn-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.hmc-btn-primary .hmc-btn-dot { background: #fff; }
.hmc-btn-secondary .hmc-btn-dot { background: #0f0f0f; }
.hmc-btn[data-hmc-dot="off"]::before { display: none; }

/* Roll-up. Implemented as an overlay copy driven by a data attribute rather
   than by injecting child nodes. These surfaces are React apps, and mutating
   children that React owns makes it throw NotFoundError on the next render of
   a button whose label changes (a submitting or busy state). Setting an
   attribute is safe: worst case React overwrites it and the script re-applies. */
.hmc-btn { overflow: hidden; }
.hmc-btn[data-hmc-label]::after {
  content: attr(data-hmc-label);
  position: absolute;
  /* Starts after any leading icon or dot so those stay visible on hover. */
  inset: 0 0 0 var(--hmc-ov-left, 0px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  color: inherit;
  /* The overlay covers the whole button, so it has to redraw the dot or the
     dot vanishes for the duration of the hover. Painted as a gradient because
     a pseudo-element cannot own a child. */
  background-color: inherit;
  transform: translateY(100%);
  transition: transform .3s ease;
}
/* Buttons with no dot get no dot on the overlay either. */
.hmc-btn[data-hmc-dot="off"][data-hmc-label]::after { background-image: none; }
.hmc-btn[data-hmc-label]:hover::after { transform: translateY(0); }

/* Keep the label legible on hover. Some hosts ship a global
   `a:hover { color: ... }` that would otherwise repaint it. */
.hmc-btn-primary:hover { color: #fff; opacity: 1; }
.hmc-btn-secondary:hover { color: #1a1a1a; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hmc-btn[data-hmc-label]::after { transition: none; }
}