/* HMC shared button system. v1.0.3
   1.0.3 fixes the CSS dot vanishing on hover: 1.0.2 documented redrawing it on
   the overlay but never shipped the rule, and its JS only measures a dot that
   exists as a child element. Buttons using the ::before dot, which is the
   default this stylesheet creates, lost the dot for the length of the hover.
   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;
  /* Redraw the ::before dot on the overlay. A pseudo-element cannot own a
     child, so it is painted as a gradient at the same place the real dot sits:
     22px left padding + 3px radius = a 6px dot centred at 25px. currentColor
     keeps it white on primary and dark on secondary, like the real one. */
  background-image: radial-gradient(circle at 25px 50%, currentColor 0 3px, transparent 3.5px);
  background-repeat: no-repeat;
  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; }
}