/* =========================================
   Canonical buttons — loaded LAST on every page.
   One spec for every primary / secondary button:
   48px tall · pill radius · Montserrat 0.95rem/700 ·
   same hover (lift + tint), same focus ring.
   Families unified: .btn, .hero-btn, .action-link,
   .ftx-btn, .cta-btn, .ccta-btn, .marketing-cta
   (`html` prefix wins over each file's own rules.)
   ========================================= */
:root { --blue-darker: #235a75; }

/* ---------- shared geometry ---------- */
html .btn,
html .hero-btn,
html .action-link,
html .ftx-btn,
html .cta-btn,
html .ccta-btn,
html #marketing .marketing-cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: auto;
  min-height: var(--btn-height, 48px);
  min-width: 0;
  padding: 0 var(--btn-padding-x, 24px);
  border-radius: var(--btn-radius, 999px);
  border: 1.5px solid transparent;
  font-family: "Montserrat", sans-serif;
  font-size: var(--btn-font-size, 0.95rem);
  font-weight: var(--btn-font-weight, 700);
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transform: none;
  transition: transform var(--motion-fast, 0.18s) var(--ease-standard, ease),
    box-shadow var(--motion-fast, 0.18s) var(--ease-standard, ease),
    background-color var(--motion-fast, 0.18s) var(--ease-standard, ease),
    border-color var(--motion-fast, 0.18s) var(--ease-standard, ease),
    color var(--motion-fast, 0.18s) var(--ease-standard, ease);
}

/* drop the per-family wipes / sheens so hover is identical everywhere */
html .hero-btn::before,
html .action-link::before,
html .action-link::after { content: none; display: none; }
html .hero-btn span { z-index: auto; }

/* ---------- PRIMARY ---------- */
html .btn--primary,
html .btn:not(.btn--light):not(.btn--ghost):not(.btn--secondary):not(.btn--text),
html .hero-btn-primary,
html .action-link--primary,
html .ftx-btn--primary,
html .cta-btn--primary,
html .ccta-btn--primary {
  background: var(--brand-fill, #2b6f91);
  background-image: none;
  color: #fff;
  border-color: var(--brand-fill, #2b6f91);
  box-shadow: var(--shadow-blue);
}

/* ---------- SECONDARY ---------- */
html .btn--secondary,
html .btn--light,
html .btn--ghost,
html .hero-btn-secondary,
html .action-link--secondary,
html .ftx-btn--secondary,
html .cta-btn--secondary,
html .ccta-btn--secondary,
html #marketing .marketing-cta {
  background: #fff;
  background-image: none;
  color: var(--blue-deep);
  border-color: var(--blue-deep);
  box-shadow: none;
}

/* ---------- hover (desktop) ---------- */
@media (hover: hover) {
  html .btn:hover,
  html .hero-btn:hover,
  html .action-link:hover,
  html .ftx-btn--primary:hover,
  html .ftx-btn--secondary:hover,
  html .cta-btn:hover,
  html .ccta-btn:hover,
  html #marketing .marketing-cta:hover { transform: translateY(-3px); }

  html .btn--primary:hover,
  html .btn:not(.btn--light):not(.btn--ghost):not(.btn--secondary):not(.btn--text):hover,
  html .hero-btn-primary:hover,
  html .action-link--primary:hover,
  html .ftx-btn--primary:hover,
  html .cta-btn--primary:hover,
  html .ccta-btn--primary:hover {
    background: var(--blue-darker);
    border-color: var(--blue-darker);
    color: #fff;
    box-shadow: var(--shadow-md);
  }

  html .btn--secondary:hover,
  html .btn--light:hover,
  html .btn--ghost:hover,
  html .hero-btn-secondary:hover,
  html .action-link--secondary:hover,
  html .ftx-btn--secondary:hover,
  html .cta-btn--secondary:hover,
  html .ccta-btn--secondary:hover,
  html #marketing .marketing-cta:hover {
    background: #eaf3f8;
    border-color: var(--blue-deep);
    color: var(--blue-deep);
    box-shadow: var(--shadow-sm);
  }
}

/* ---------- pressed + focus ---------- */
html .btn:active,
html .hero-btn:active,
html .action-link:active,
html .ftx-btn:active,
html .cta-btn:active,
html .ccta-btn:active { transform: translateY(0); }

html .btn:focus-visible,
html .hero-btn:focus-visible,
html .action-link:focus-visible,
html .ftx-btn:focus-visible,
html .cta-btn:focus-visible,
html .ccta-btn:focus-visible,
html #marketing .marketing-cta:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* icon sizing inside buttons */
html .action-link .icon-box,
html .action-link .icon,
html .action-link > img,
html .action-link > svg { width: 18px; height: 18px; flex: 0 0 18px; }

@media (prefers-reduced-motion: reduce) {
  html .btn, html .hero-btn, html .action-link, html .ftx-btn,
  html .cta-btn, html .ccta-btn, html #marketing .marketing-cta { transition: none; }
  html .btn:hover, html .hero-btn:hover, html .action-link:hover, html .ftx-btn:hover,
  html .cta-btn:hover, html .ccta-btn:hover, html #marketing .marketing-cta:hover { transform: none; }
}

/* labels always take the button's own text colour (theme-safe) */
html .action-link .label,
html .hero-btn span,
html .ftx-btn span,
html .cta-btn span,
html .ccta-btn span { color: inherit; }