/* ============================================
 * buttons.css — shared button system
 *
 * `.tlm-button` defines the geometry every button on
 * the site inherits: inline-flex, pill radius, uppercase
 * sans, button tracking, focus ring, transitions.
 *
 * Variants are modifiers, defined here once and reused
 * across modules:
 *   --primary           white pill, navy text   (dark surfaces — hero)
 *   --primary-on-light  navy pill, white text   (light surfaces — referral journey, challenges, services)
 *   --ghost-on-dark     transparent, white outline + text   (NAVBAR ONLY — sized small for the nav bar)
 *   --ghost-on-light    transparent, navy outline + text    (cards on light surfaces — pricing, drawer CTA)
 *
 * Naming-convention drift acknowledged: `--primary` is
 * implicitly "on dark". If a third light/dark pair appears,
 * consider a one-shot rename pass to `--primary-on-dark`.
 *
 * Component-level vertical paddings (18px primary/ghost-on-light,
 * 10px ghost-on-dark) are intentional component values, not on the
 * spacing scale. `--ghost-on-dark` stays small by design — it's the
 * navbar CTA, conventionally smaller than in-page CTAs. Do NOT reuse
 * it as a general-purpose button.
 *
 * HOVER MODEL (standardised 2026-05-20): every variant dims +
 * lifts — `opacity: 0.88` + `--shadow-button-hover`. Ghost
 * variants additionally pick up a FAINT fill on hover so the
 * dim has something to act on (a transparent button has nothing
 * to dim). Faint = a low-opacity wash, not the old solid flip.
 * ============================================ */

/* ----- Base ----- */

.tlm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 100%;
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  text-decoration: none;
  /* Labels are short ("Start a conversation" etc); never let them wrap
     to two lines inside a narrow/constrained container. The padding
     shrinks on very narrow screens (below) so a one-line label still
     fits without overflowing. */
  white-space: nowrap;
  letter-spacing: var(--tracking-button);
  border-radius: var(--radius-pill);
  transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease, box-shadow 200ms ease;
  cursor: pointer;
}

/* Very narrow screens: trim the generous horizontal padding so a
   nowrap label (e.g. the "Start a conversation" CTA in a constrained
   card) stays on one line without spilling past its container. */
@media (max-width: 479px) {
  .tlm-button--primary,
  .tlm-button--primary-on-light,
  .tlm-button--ghost-on-dark,
  .tlm-button--ghost-on-light {
    padding-inline: var(--space-lg);
  }
}

.tlm-button:focus-visible {
  outline: 2px solid var(--color-text-on-dark);
  outline-offset: 4px;
}

/* ----- Primary (white pill on dark surfaces) ----- */

.tlm-button--primary {
  padding: 18px var(--space-xl);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-on-light);
  background-color: var(--color-white);
  border: 0;
}

@media (min-width: 1024px) {
  .tlm-button--primary {
    font-size: var(--text-lg);
  }
}

.tlm-button--primary:hover {
  opacity: 0.88;
  box-shadow: var(--shadow-button-hover);
}

.tlm-button--primary:focus-visible {
  outline-color: var(--color-text-on-dark);
}

/* ----- Primary on light (navy pill on light surfaces) ----- */

.tlm-button--primary-on-light {
  padding: 18px var(--space-xl);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-on-dark);
  background-color: var(--color-navy);
  border: 0;
}

@media (min-width: 1024px) {
  .tlm-button--primary-on-light {
    font-size: var(--text-lg);
  }
}

.tlm-button--primary-on-light:hover {
  opacity: 0.88;
  box-shadow: var(--shadow-button-hover);
}

.tlm-button--primary-on-light:focus-visible {
  outline-color: var(--color-text-on-light);
}

/* ----- Ghost on dark (outlined pill, used in navbar over hero) ----- */

.tlm-button--ghost-on-dark {
  padding: 10px var(--space-lg);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-on-dark);
  background-color: transparent;
  border: 1px solid var(--color-border-on-dark);
}

.tlm-button--ghost-on-dark:hover {
  /* Faint white wash so the dim+lift reads on the transparent fill.
     Outline + text stay; this is not the old solid colour flip. */
  background-color: rgba(255, 255, 255, 0.12);
  opacity: 0.88;
  box-shadow: var(--shadow-button-hover);
}

/* ----- Ghost on light (outlined pill, used on light surfaces — pricing cards) ----- */

.tlm-button--ghost-on-light {
  padding: 18px var(--space-xl);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-on-light);
  background-color: transparent;
  border: 1px solid var(--color-text-on-light);
}

@media (min-width: 1024px) {
  .tlm-button--ghost-on-light {
    font-size: var(--text-lg);
  }
}

.tlm-button--ghost-on-light:hover {
  /* Faint navy wash so the dim+lift reads on the transparent fill.
     Outline + text stay; this is not the old solid colour flip. */
  background-color: var(--color-navy-tint);
  opacity: 0.88;
  box-shadow: var(--shadow-button-hover);
}

.tlm-button--ghost-on-light:focus-visible {
  outline-color: var(--color-text-on-light);
}