/* ==========================================================================
   Devgun Family Law -- Chrome: Buttons
   Shared pill button used by header (Contact), hero (CTA), callout (two
   buttons), mobile nav, mobile CTA. Loaded before the other chrome files
   that consume .btn. Per build spec Section 5.1: pill shape, ~60px height,
   Links-style label (18/700, +1 tracking -- already the default `a` style
   from foundation/base.css), default/hover/focus/active states.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 60px;
  padding: 0 1.75rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-action);
  color: var(--color-action-text);
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: var(--fs-links);
  line-height: var(--lh-links);
  letter-spacing: var(--ls-links);
  text-decoration: none;
  text-transform: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  white-space: nowrap;
}

.btn:hover,
.btn:focus {
  background-color: var(--color-action-hover);
  color: var(--color-white);
  text-decoration: none;
}

.btn:active {
  background-color: var(--color-blue-rich-black);
}

.btn [class^="icon-"] {
  font-size: 0.9em;
}

/* Secondary / outline pill -- used for the callout's phone button on a
   Light Green band (needs a visible outline against the light fill). */
.btn--outline {
  background-color: transparent;
  border-color: var(--color-action);
  color: var(--color-action);
}

.btn--outline:hover,
.btn--outline:focus {
  background-color: var(--color-action);
  color: var(--color-white);
}

/* On-dark pill -- used on the header (rich-black) and hero (photo + scrim),
   where a solid Dark Blue fill on a dark backdrop still reads (9.26:1
   verified per the contrast audit) but a lighter fill better matches the
   Figma "primary-button" instances shown over photography. */
.btn--on-dark {
  background-color: var(--color-action);
  color: var(--color-white);
}

.btn--on-dark:hover,
.btn--on-dark:focus {
  background-color: var(--color-action-hover);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

@media (max-width: 575.98px) {
  .btn {
    height: 52px;
    padding: 0 1.375rem;
  }
}