/* ================================================================
   COMPONENTS — Reusable UI elements
   Buttons, eyebrow tags, specialty chips.
   All values via tokens from theme-variables.css.
================================================================ */


/* ================================================================
   BUTTONS
================================================================ */

.hs-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--hs-space-2-5);
  font-family:     var(--hs-btn-font-family);
  font-weight:     var(--hs-btn-font-weight);
  font-size:       var(--hs-btn-font-size-md);
  letter-spacing:  var(--hs-btn-tracking);
  line-height:     1;
  border-radius:   var(--hs-btn-radius);
  height:          var(--hs-btn-height-md);
  padding:         0 var(--hs-btn-pad-x-md);
  text-decoration: none;
  white-space:     nowrap;
  cursor:          pointer;
  border:          var(--hs-border-2) solid transparent;
  transition:      var(--hs-transition-all);
  position:        relative;
  overflow:        hidden;
}

/* ── Size variants ────────────────────────────────────────────── */

.hs-btn--sm {
  height:      var(--hs-btn-height-sm);
  padding:     0 var(--hs-btn-pad-x-sm);
  font-size:   var(--hs-btn-font-size-sm);
}

.hs-btn--lg {
  height:      var(--hs-btn-height-lg);
  padding:     0 var(--hs-btn-pad-x-lg);
  font-size:   var(--hs-btn-font-size-lg);
}

.hs-btn--xl {
  height:      var(--hs-btn-height-xl);
  padding:     0 var(--hs-btn-pad-x-xl);
  font-size:   var(--hs-btn-font-size-xl);
}

/* ── WhatsApp — primary conversion CTA ───────────────────────── */

.hs-btn--whatsapp {
  background:  var(--hs-btn-wa-gradient);
  color:       var(--hs-btn-whatsapp-color);
  box-shadow:  var(--hs-btn-whatsapp-shadow);
}

.hs-btn--whatsapp:hover {
  background:  var(--hs-btn-wa-gradient-hover);
  color:       var(--hs-btn-whatsapp-color);
  box-shadow:  var(--hs-shadow-md);
  transform:   translateY(-2px);
}

.hs-btn--whatsapp:active {
  transform:  translateY(0);
}

/* ── Shimmer span — sits behind button content, animated by GSAP ── */
/* Must be the first child inside the button element.               */
.hs-btn__shimmer {
  position:      absolute;
  inset-block:   0;
  left:          0;
  width:         55%;
  background:    var(--hs-btn-wa-shimmer);
  transform:     translateX(-110%);
  pointer-events: none;
  border-radius: inherit;
  /* z-index deliberately omitted — DOM order (first child) keeps    */
  /* it below subsequent siblings without creating stacking issues.  */
}

/* ── Primary — navy filled ────────────────────────────────────── */

.hs-btn--primary {
  background:  var(--hs-btn-primary-bg);
  color:       var(--hs-btn-primary-color);
  box-shadow:  var(--hs-btn-primary-shadow);
}

.hs-btn--primary:hover {
  background:  var(--hs-btn-primary-bg-hover);
  color:       var(--hs-btn-primary-color);
  transform:   translateY(-1px);
}

/* ── Gold ─────────────────────────────────────────────────────── */

.hs-btn--accent {
  background:  var(--hs-btn-accent-bg);
  color:       var(--hs-btn-accent-color);
  box-shadow:  var(--hs-btn-accent-shadow);
}

.hs-btn--accent:hover {
  background:  var(--hs-btn-accent-bg-hover);
  color:       var(--hs-btn-accent-color);
  transform:   translateY(-1px);
}

/* ── Ghost on light background ────────────────────────────────── */

.hs-btn--ghost {
  background:   var(--hs-btn-ghost-bg);
  color:        var(--hs-btn-ghost-color);
  border-color: var(--hs-btn-ghost-border);
}

.hs-btn--ghost:hover {
  background: var(--hs-btn-ghost-bg-hover);
  color:      var(--hs-btn-ghost-color);
}

/* ── Ghost on dark background ─────────────────────────────────── */

.hs-btn--ghost-dark {
  background:   var(--hs-btn-ghost-dark-bg);
  color:        var(--hs-btn-ghost-dark-color);
  border-color: var(--hs-btn-ghost-dark-border);
}

.hs-btn--ghost-dark:hover {
  background: var(--hs-btn-ghost-dark-bg-hover);
  color:      var(--hs-btn-ghost-dark-color);
}

/* ── Ghost-accent — accent-blue border, glows on hover ─────────── */
/* Used exclusively for the hero secondary CTA.                     */

.hs-btn--ghost-accent {
  background:   var(--hs-btn-ghost-accent-bg);
  color:        var(--hs-btn-ghost-accent-color);
  border-color: var(--hs-btn-ghost-accent-border);
  transition:   var(--hs-transition-all), box-shadow var(--hs-duration-normal) var(--hs-ease-out);
}

.hs-btn--ghost-accent:hover {
  background:  var(--hs-btn-ghost-accent-bg-hover);
  color:       var(--hs-btn-ghost-accent-color);
  box-shadow:  var(--hs-btn-ghost-accent-shadow-hover);
  transform:   translateY(-1px);
}

.hs-btn--ghost-accent:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ── Ghost on light (alias used in WhatsApp CTA section) ──────── */

.hs-btn--ghost-light {
  background:   transparent;
  color:        var(--hs-color-text-primary);
  border-color: var(--hs-color-border-strong);
}

.hs-btn--ghost-light:hover {
  background:   var(--hs-color-bg-subtle);
  color:        var(--hs-color-text-primary);
}

/* ── Urgency — red CTA ────────────────────────────────────────── */

.hs-btn--urgency {
  background:  var(--hs-btn-urgency-bg);
  color:       var(--hs-btn-urgency-color);
  box-shadow:  var(--hs-btn-urgency-shadow);
}

.hs-btn--urgency:hover {
  background:  var(--hs-btn-urgency-bg-hover);
  color:       var(--hs-btn-urgency-color);
  transform:   translateY(-1px);
}


/* ================================================================
   EYEBROW TAG
   Small pill above section headings and card heads.
================================================================ */

.hs-eyebrow {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--hs-space-2);
  font-family:     var(--hs-font-body);
  font-size:       var(--hs-text-eyebrow);
  font-weight:     var(--hs-font-semibold);
  letter-spacing:  var(--hs-tracking-widest);
  text-transform:  uppercase;
  color:           var(--hs-palette-navy-500);
  border:          var(--hs-border-1) solid var(--hs-palette-navy-100);
  border-radius:   var(--hs-radius-full);
  padding:         var(--hs-space-1-5) var(--hs-space-4);
  background:      transparent;
  /* block so it doesn't sit inline with text */
  display:         block;
  width:           fit-content;
  margin-inline:   auto;   /* Centers in block/grid containers */
  align-self:      center; /* Centers in flex containers */
  text-align:      center;
}

/* Variant: dark background context */
.hs-eyebrow--inverse {
  color:        var(--hs-color-text-inverse-muted);
  border-color: var(--hs-color-border-inverse);
}


/* ================================================================
   SPECIALTY / INLINE TAGS
   Small rounded chips for specialization lists.
================================================================ */

.hs-tag {
  display:       inline-block;
  font-family:   var(--hs-font-body);
  font-size:     var(--hs-text-xs);
  font-weight:   var(--hs-font-medium);
  color:         var(--hs-palette-navy-600);
  background:    var(--hs-palette-navy-050);
  border:        var(--hs-border-1) solid var(--hs-palette-navy-100);
  border-radius: var(--hs-radius-full);
  padding:       var(--hs-space-1) var(--hs-space-3);
  white-space:   nowrap;
  line-height:   var(--hs-leading-normal);
}

/* Overflow count badge — "＋X more" shown when list is truncated */
.hs-tag--more {
  background:   var(--hs-palette-navy-800);
  color:        var(--hs-palette-grey-000);
  border-color: var(--hs-palette-navy-800);
  font-weight:  var(--hs-font-semibold);
}